[C-3607] Store & restore profile image and cover photo between new si…

…gn up pages (#7455)

packages/mobile/src/screens/sign-on-screen/screens/FinishProfileScreen.tsx

@@ -6,8 +6,10 @@ import { MAX_DISPLAY_NAME_LENGTH } from '@audius/common/services'
 import type { Image } from '@audius/common/store'
 import { css } from '@emotion/native'
 import {
+  getCoverPhotoField,
   getHandleField,
-  getIsVerified
+  getIsVerified,
+  getProfileImageField
 } from 'audius-client/src/common/store/pages/signon/selectors'
 import {
   setField,
@@ -33,12 +35,6 @@ const AnimatedText = Animated.createAnimatedComponent(Text)
 
 const finishProfileFormikSchema = toFormikValidationSchema(finishProfileSchema)
 
-const initialValues = {
-  profileImage: {} as Image,
-  coverPhoto: {} as Image,
-  displayName: ''
-}
-
 type FinishProfileValues = {
   displayName: string
   profileImage: Image
@@ -49,21 +45,25 @@ export const FinishProfileScreen = () => {
   const navigation = useNavigation<SignUpScreenParamList>()
   const dispatch = useDispatch()
   const { spacing } = useTheme()
+  const savedProfileImage = useSelector(getProfileImageField)
+  const savedCoverPhoto = useSelector(getCoverPhotoField)
 
   const handleSubmit = useCallback(
     (values: FinishProfileValues) => {
-      const { displayName, profileImage, coverPhoto } = values
+      const { displayName } = values
       dispatch(setValueField('name', displayName))
-      dispatch(setField('profileImage', profileImage))
-      if (coverPhoto) {
-        dispatch(setField('coverPhoto', coverPhoto))
-      }
       dispatch(signUp())
       navigation.navigate('SelectGenre')
     },
     [dispatch, navigation]
   )
 
+  const initialValues = {
+    profileImage: savedProfileImage || ({} as Image),
+    coverPhoto: savedCoverPhoto || ({} as Image),
+    displayName: ''
+  }
+
   return (
     <Formik
       initialValues={initialValues}
@@ -98,9 +98,11 @@ export const FinishProfileScreen = () => {
 const AccountHeaderField = () => {
   const [{ value: profileImage }, , { setValue: setProfileImage }] =
     useField<Image>('profileImage')
+  const dispatch = useDispatch()
 
   const handleSelectProfilePicture = useCallback(() => {
     const handleImageSelected = (image: Image) => {
+      dispatch(setField('profileImage', image))
       setProfileImage(image)
     }
 
@@ -109,21 +111,22 @@ const AccountHeaderField = () => {
       { height: 1000, width: 1000, cropperCircleOverlay: true },
       'profilePicture'
     )
-  }, [setProfileImage])
+  }, [dispatch, setProfileImage])
 
   const [{ value: coverPhoto }, , { setValue: setCoverPhoto }] =
     useField<Image>('coverPhoto')
 
   const handleSelectCoverPhoto = useCallback(() => {
     const handleImageSelected = (image: Image) => {
       setCoverPhoto(image)
+      dispatch(setField('coverPhoto', image))
     }
     launchSelectImageActionSheet(
       handleImageSelected,
       { height: 1000, width: 2000, freeStyleCropEnabled: true },
       'coverPhoto'
     )
-  }, [setCoverPhoto])
+  }, [dispatch, setCoverPhoto])
 
   const [{ value: displayName }] = useField('displayName')
   const { value: handle } = useSelector(getHandleField)