Hook up edit user flow

web/src/components/EditUser2Cell/EditUser2Cell.js

@@ -1,3 +1,5 @@
+import { useMutation, useFlash } from '@redwoodjs/web'
+import { navigate, routes } from '@redwoodjs/router'
 import UserProfile from 'src/components/UserProfile'
 
 export const QUERY = gql`
@@ -14,6 +16,15 @@ export const QUERY = gql`
   }
 `
 
+const UPDATE_USER_MUTATION = gql`
+  mutation UpdateUserMutation($userName: String!, $input: UpdateUserInput!) {
+    updateUserByUserName(userName: $userName, input: $input) {
+      id
+      userName
+    }
+  }
+`
+
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Empty</div>
@@ -21,5 +32,23 @@ export const Empty = () => <div>Empty</div>
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
 export const Success = ({ user }) => {
-  return <UserProfile user={user} isEditable />
+  const { addMessage } = useFlash()
+  const [updateUser, { loading, error }] = useMutation(UPDATE_USER_MUTATION, {
+    onCompleted: ({updateUserByUserName}) => {
+      navigate(routes.user2({userName: updateUserByUserName.userName}))
+      addMessage('User updated.', { classes: 'rw-flash-success' })
+    },
+  })
+
+  const onSave = (userName, input) => {
+    updateUser({ variables: { userName, input } })
+  }
+
+  return <UserProfile
+    user={user}
+    onSave={onSave}
+    loading={loading}
+    error={error}
+    isEditable
+  />
 }

web/src/components/ImageUploader/ImageUploader.js

@@ -23,7 +23,6 @@ export default function ImageUploader({ onImageUpload, imageUrl, aspectRatio, cl
   });
   async function handleImageUpload() {
     const croppedFile = await getCroppedImg(imageObj, crop, 'avatar')
-    console.log(croppedFile)
     const imageData = new FormData();
     imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);
     imageData.append('file', croppedFile);
@@ -54,7 +53,7 @@ export default function ImageUploader({ onImageUpload, imageUrl, aspectRatio, cl
     <div className={'relative overflow-hidden '+ (!imageUrl && isEditable ? 'border ' : '') + className} style={{paddingBottom: `${1/aspectRatio*100}%`}}>
       <div className="absolute w-full h-full" {...getRootProps()}>
         {cloudinaryId && isEditable && <button className="absolute z-10 w-full inset-0 bg-indigo-900 opacity-50 flex justify-center items-center">
-          <Svg name="pencil" strokeWidth={2} className="text-gray-300 h-48 w-48" />
+          <Svg name="pencil" strokeWidth={2} className="text-gray-300 h-24 w-24" />
         </button>}
         {isEditable && <input {...getInputProps()} />}
         {(cloudinaryId || !isEditable) && <div className="relative overflow-hidden w-full h-full">

web/src/components/UserProfile/UserProfile.js

@@ -1,14 +1,21 @@
-import {Fragment} from 'react'
+import {useState, useEffect} from 'react'
+import { navigate, routes } from '@redwoodjs/router'
+import Editor from "rich-markdown-editor";
+
 import ImageUploader from 'src/components/ImageUploader'
 import Button from 'src/components/Button'
-import Editor from "rich-markdown-editor";
 import ProfileTextInput from 'src/components/ProfileTextInput'
 
 
-const UserProfile = ({user, isEditable}) => {
-  console.log(isEditable)
-  const {userName, email} = user
-  const editableTextFields = {userName, name: email} // TODO add name field to user
+const UserProfile = ({user, isEditable, loading, onSave, error}) => {
+  const [input, setInput] = useState({
+    userName: user.userName,
+    email: user.email,
+    bio: user.bio,
+    image: user.image,
+  })
+  const {userName, email} = input
+  const editableTextFields = {userName, email} // TODO add name field to user
   return (
     <>
       <div className="max-w-2xl mx-auto mt-20 ">
@@ -16,16 +23,23 @@ const UserProfile = ({user, isEditable}) => {
           <div className="w-40 flex-shrink-0">
             <ImageUploader
               className="rounded-half rounded-br-lg shadow-md border-2 border-gray-200 border-solid"
+              onImageUpload={({cloudinaryPublicId: image}) => setInput({
+                ...input,
+                image,
+              })}
               aspectRatio={1}
               isEditable={isEditable}
               imageUrl={user.image === 'abc' ? '': user.image}
             />
           </div>
           <div className="ml-6 flex flex-col justify-between">
-            <ProfileTextInput fields={editableTextFields} isEditable={isEditable}/>
+            <ProfileTextInput fields={editableTextFields} onChange={(textFields) => setInput({
+              ...input,
+              ...textFields,
+            })} isEditable={isEditable}/>
             {isEditable ?
-              <Button iconName="plus">Save Profile</Button> : // TODO replace pencil with a save icon
-              <Button iconName="pencil">Edit Profile</Button>
+              <Button iconName="plus" onClick={() => onSave(user.userName, input)}>Save Profile</Button> : // TODO replace pencil with a save icon
+              <Button iconName="pencil" onClick={() => navigate(routes.editUser2({userName: user.userName}))}>Edit Profile</Button>
             }
           </div>
         </div>
@@ -35,6 +49,10 @@ const UserProfile = ({user, isEditable}) => {
             <Editor
               defaultValue={user.bio}
               readOnly={!isEditable}
+              onChange={(bioFn) => setInput({
+                ...input,
+                bio: bioFn(),
+              })}
             />
           </div>
         </div>