feat: implement remove banner

Author: HelanaNady

src/components/profile/Banner.tsx

@@ -76,7 +76,9 @@ const ProfileBanner = ({ uri, username, displayName, isEdit }: BannerPicProps) =
       {!isEdit && bannerContent}
     </ImageBackground>
   ) : (
-    <View style={[styles.topBar, { backgroundColor: colors[theme].banner }]}>{bannerContent}</View>
+    <View style={[styles.topBar, { backgroundColor: colors[theme].banner }]}>
+      {!isEdit && bannerContent}
+    </View>
   );
 };
 

src/screens/profile/EditProfileScreen.tsx

@@ -42,13 +42,24 @@ const EditProfileScreen = () => {
 
   const navigation = useNavigation<EditScreenProps['navigation']>();
   const queryClient = useQueryClient();
-  const { user, updateUser } = useUserStore((state) => state);
 
+  const { user, updateUser } = useUserStore((state) => state);
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const clearError = () => setError(null);
 
+  const [birthDate, setBirthDate] = useState<string | null>(user.birthDate || null);
+  const [birthDateInput, setBirthDateInput] = useState<string>(
+    formatBirthDate(user.birthDate) || ''
+  );
+  const [showDatePicker, setShowDatePicker] = useState<boolean>(false);
+
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(user.avatarUrl || null);
+  const [bannerUrl, setBannerUrl] = useState<string | null>(user.bannerUrl || null);
+  const [isEditingBanner, setIsEditingBanner] = useState<boolean>(false);
   const [menuVisible, setMenuVisible] = useState<boolean>(false);
+
+  const [formDataChanged, setFormDataChanged] = useState<boolean>(false);
   const [formData, setFormData] = useState<UpdateProfileRequest>({
     displayName: user.displayName || '',
     bio: user.bio || '',
@@ -60,16 +71,6 @@ const EditProfileScreen = () => {
     },
   });
 
-  const [birthDate, setBirthDate] = useState<string | null>(user.birthDate || null);
-  const [birthDateInput, setBirthDateInput] = useState<string>(
-    formatBirthDate(user.birthDate) || ''
-  );
-  const [profileImage, setProfileImage] = useState<string | null>(user.avatarUrl || null);
-  const [bannerImage, setBannerImage] = useState<string | null>(user.bannerUrl || null);
-
-  const [showDatePicker, setShowDatePicker] = useState<boolean>(false);
-  const [isEditingBanner, setIsEditingBanner] = useState<boolean>(false);
-
   const openDatePicker = () => {
     setShowDatePicker(true);
   };
@@ -122,8 +123,8 @@ const EditProfileScreen = () => {
 
     if (!result.canceled && result.assets[0]) {
       const newUri = result.assets[0].uri;
-      if (isEditingBanner) setBannerImage(newUri);
-      else setProfileImage(newUri);
+      if (isEditingBanner) setBannerUrl(newUri);
+      else setAvatarUrl(newUri);
       setMenuVisible(false);
     }
   };
@@ -143,6 +144,11 @@ const EditProfileScreen = () => {
   //   }
   // };
 
+  const removeBanner = () => {
+    setBannerUrl(null);
+    setIsEditingBanner(false);
+  };
+
   const handleFormSubmit = useCallback(async () => {
     try {
       setLoading(true);
@@ -157,17 +163,22 @@ const EditProfileScreen = () => {
       // update birthday
       if (user.birthDate !== birthDate && birthDate) {
         await updateBirthdate(birthDate);
-        updateUser({ birthDate });
       }
 
-      await updateUserProfile(formData);
+      if (formDataChanged) {
+        await updateUserProfile(formData);
+      }
+
       // update user store
-      updateUser({ ...formData, birthDate });
+      updateUser({ ...formData, birthDate, avatarUrl, bannerUrl });
+
       // update react query cache for profile screen
       queryClient.setQueryData(['profile', user.username], (user: UserData) => ({
         ...user,
         ...formData,
         birthDate,
+        avatarUrl,
+        bannerUrl,
       }));
       // navigate back to profile screen
       navigation.goBack();
@@ -178,7 +189,17 @@ const EditProfileScreen = () => {
     } finally {
       setLoading(false);
     }
-  }, [formData, navigation, birthDate, user, updateUser, queryClient]);
+  }, [
+    formData,
+    navigation,
+    birthDate,
+    user,
+    updateUser,
+    avatarUrl,
+    bannerUrl,
+    formDataChanged,
+    queryClient,
+  ]);
 
   useEffect(() => {
     navigation.setOptions({
@@ -227,7 +248,7 @@ const EditProfileScreen = () => {
               }}
             >
               <ProfileBanner
-                uri={bannerImage}
+                uri={bannerUrl}
                 username={user?.username}
                 displayName={user?.displayName}
                 isEdit={true}
@@ -240,7 +261,7 @@ const EditProfileScreen = () => {
                 setIsEditingBanner(false);
               }}
             >
-              <Avatar uri={profileImage} />
+              <Avatar uri={avatarUrl} />
             </Pressable>
           </View>
 
@@ -250,6 +271,7 @@ const EditProfileScreen = () => {
               label="Name"
               onChangeText={(value) => {
                 setFormData((prev) => ({ ...prev, ['displayName']: value }));
+                setFormDataChanged(true);
               }}
               autoCapitalize="none"
             />
@@ -258,6 +280,7 @@ const EditProfileScreen = () => {
               label="Bio"
               onChangeText={(value) => {
                 setFormData((prev) => ({ ...prev, ['bio']: value }));
+                setFormDataChanged(true);
               }}
               autoCapitalize="none"
             />
@@ -266,13 +289,15 @@ const EditProfileScreen = () => {
               label="Location"
               onChangeText={(value) => {
                 setFormData((prev) => ({ ...prev, ['location']: value }));
+                setFormDataChanged(true);
               }}
             />
             <TextInput
               value={formData.websiteUrl}
               label="Website"
               onChangeText={(value) => {
                 setFormData((prev) => ({ ...prev, ['displayName']: value }));
+                setFormDataChanged(true);
               }}
             />
             <Pressable onPress={openDatePicker}>
@@ -283,8 +308,6 @@ const EditProfileScreen = () => {
                 disabled={true}
               />
             </Pressable>
-
-            {/* birthday date picker */}
           </View>
 
           <Modal
@@ -306,6 +329,18 @@ const EditProfileScreen = () => {
                 >
                   <Text style={styles.dropdownText}>Choose Existing Photo</Text>
                 </Pressable>
+
+                {isEditingBanner && bannerUrl && (
+                  <Pressable
+                    style={styles.dropdownItem}
+                    onPress={() => {
+                      removeBanner();
+                      setMenuVisible(false);
+                    }}
+                  >
+                    <Text style={styles.dropdownText}>Remove header</Text>
+                  </Pressable>
+                )}
               </View>
             </Pressable>
           </Modal>