[C-3612] Update FinishProfilePage to preserve changes if the user goe…

…s back to the handle page (#7163)
AudiusProject · Jan 11, 2024 · 219762e · 219762e
1 parent f4a9b9d
commit 219762e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/packages/web/src/pages/sign-up-page/components/AccountHeader.tsx b/packages/web/src/pages/sign-up-page/components/AccountHeader.tsx
@@ -30,6 +30,8 @@ type AccountHeaderProps = {
   size?: 'small' | 'large'
   formDisplayName?: string
   formProfileImage?: ImageFieldValue
+  onProfileImageChange?: (value: ImageFieldValue) => void
+  onCoverPhotoChange?: (value: ImageFieldValue) => void
 }
 
 const ProfileImageAvatar = ({
@@ -73,8 +75,15 @@ const ProfileImageAvatar = ({
 }
 
 export const AccountHeader = (props: AccountHeaderProps) => {
-  const { backButtonText, mode, formDisplayName, formProfileImage, size } =
-    props
+  const {
+    backButtonText,
+    mode,
+    formDisplayName,
+    formProfileImage,
+    onProfileImageChange,
+    onCoverPhotoChange,
+    size
+  } = props
   const { value: profileImage } = useSelector(getProfileImageField) ?? {}
   const { value: storedDisplayName } = useSelector(getNameField)
   const { value: handle } = useSelector(getHandleField)
@@ -110,7 +119,11 @@ export const AccountHeader = (props: AccountHeaderProps) => {
       ) : null}
       <Box h={isSmallSize ? 96 : 168} css={{ overflow: 'hidden' }} w='100%'>
         {isEditing ? (
-          <ImageField name='coverPhoto' imageResizeOptions={{ square: false }}>
+          <ImageField
+            onChange={onCoverPhotoChange}
+            name='coverPhoto'
+            imageResizeOptions={{ square: false }}
+          >
             {(uploadedImage) => (
               <CoverPhotoBanner
                 coverPhotoUrl={uploadedImage?.url}
@@ -144,7 +157,11 @@ export const AccountHeader = (props: AccountHeaderProps) => {
         gap={isSmallSize ? 's' : 'xl'}
       >
         {isEditing ? (
-          <ImageField name='profileImage' css={{ flex: 0 }}>
+          <ImageField
+            onChange={onProfileImageChange}
+            name='profileImage'
+            css={{ flex: 0 }}
+          >
             {(uploadedImage) => (
               <ProfileImageAvatar
                 imageUrl={uploadedImage?.url ?? profileImage?.url}

diff --git a/packages/web/src/pages/sign-up-page/pages/FinishProfilePage.tsx b/packages/web/src/pages/sign-up-page/pages/FinishProfilePage.tsx
@@ -88,6 +88,27 @@ export const FinishProfilePage = () => {
     displayName: savedDisplayName || ''
   }
 
+  const setCoverPhoto = useCallback(
+    (value: ImageFieldValue) => {
+      dispatch(setField('coverPhoto', { value }))
+    },
+    [dispatch]
+  )
+
+  const setProfileImage = useCallback(
+    (value: ImageFieldValue) => {
+      dispatch(setField('profileImage', { value }))
+    },
+    [dispatch]
+  )
+
+  const setDisplayName = useCallback(
+    (value: string) => {
+      dispatch(setValueField('name', value))
+    },
+    [dispatch]
+  )
+
   const handleSubmit = useCallback(
     ({ coverPhoto, profileImage, displayName }: FinishProfileValues) => {
       dispatch(setValueField('name', displayName))
@@ -133,6 +154,8 @@ export const FinishProfilePage = () => {
               mode='editing'
               formDisplayName={values.displayName}
               formProfileImage={values.profileImage}
+              onProfileImageChange={setProfileImage}
+              onCoverPhotoChange={setCoverPhoto}
             />
             <ImageUploadErrorText />
             <HarmonyTextField
@@ -142,6 +165,7 @@ export const FinishProfilePage = () => {
               placeholder={messages.inputPlaceholder}
               required
               maxLength={32}
+              onChange={(e) => setDisplayName(e.currentTarget.value)}
               css={(theme) => ({
                 padding: theme.spacing.l
               })}