Merge pull request #56 from Yash-R/main

ImageUploader Userform

api/src/graphql/users.sdl.js

@@ -15,14 +15,14 @@ export const schema = gql`
 
   input CreateUserInput {
     email: String!
-    issuer: String!
+    # issuer: String!
     image: String
     bio: String
   }
 
   input UpdateUserInput {
     email: String
-    issuer: String
+    # issuer: String
     image: String
     bio: String
   }

web/src/components/PartForm/ImageUploader.js

@@ -117,3 +117,4 @@ function getCroppedImg(image, crop, fileName) {
     }, 'image/jpeg', 1);
   });
 }
+

web/src/components/User/User.js

@@ -1,6 +1,6 @@
 import { useMutation, useFlash } from '@redwoodjs/web'
 import { Link, routes, navigate } from '@redwoodjs/router'
-
+import { Image as CloudinaryImage } from 'cloudinary-react'
 const DELETE_USER_MUTATION = gql`
   mutation DeleteUserMutation($id: Int!) {
     deleteUser(id: $id) {
@@ -72,7 +72,13 @@ const User = ({ user }) => {
             </tr>
             <tr>
               <th>Image</th>
-              <td>{user.image}</td>
+              <td><CloudinaryImage
+                  className="object-cover w-full rounded shadow"
+                  cloudName="irevdev"
+                  publicId={user.image}
+                  width="300"
+                  crop="scale"
+                /></td>
             </tr>
             <tr>
               <th>Bio</th>

web/src/components/UserForm/UserForm.js

@@ -6,10 +6,21 @@ import {
   TextField,
   Submit,
 } from '@redwoodjs/forms'
-
+import { useState } from 'react';
+import { navigate, routes } from '@redwoodjs/router'
+import { useFlash } from '@redwoodjs/web'
+import ImageUploader from '../PartForm/ImageUploader'
 const UserForm = (props) => {
-  const onSubmit = (data) => {
-    props.onSave(data, props?.user?.id)
+  const { addMessage } = useFlash()
+  // const [bio, setBio] = useState(props?.user?.bio)
+  const [imageUrl, setImageUrl] = useState(props?.user?.image)
+  const onSubmit = async (data, e) => {
+
+    await props.onSave({
+      ...data,
+      image: imageUrl
+    }, props?.user?.id)
+    addMessage('User updated.', { classes: 'rw-flash-success' })
   }
 
   return (
@@ -37,21 +48,7 @@ const UserForm = (props) => {
           validation={{ required: true }}
         />
         <FieldError name="email" className="rw-field-error" />
-
-        <Label
-          name="image"
-          className="rw-label"
-          errorClassName="rw-label rw-label-error"
-        >
-          Image
-        </Label>
-        <TextField
-          name="image"
-          defaultValue={props.user?.image}
-          className="rw-input"
-          errorClassName="rw-input rw-input-error"
-        />
-        <FieldError name="image" className="rw-field-error" />
+        <ImageUploader onImageUpload={({cloudinaryPublicId}) => setImageUrl(cloudinaryPublicId)} />
 
         <Label
           name="bio"
@@ -65,6 +62,7 @@ const UserForm = (props) => {
           defaultValue={props.user?.bio}
           className="rw-input"
           errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
         />
         <FieldError name="bio" className="rw-field-error" />