From 4ffc0da2a65eb8f44ad9a3f99fdde39b721d06bd Mon Sep 17 00:00:00 2001
From: Jeff Huang <82061589+solderq35@users.noreply.github.com>
Date: Fri, 6 Sep 2024 13:29:04 -0700
Subject: [PATCH] Add Profile Pic Removal Button (#340)

* remove pfp button poc

* switch to modal

* remove dialog comment

* fix modal content text

* changed back to dialog, minor wording update

* remove unused styles

* commit what's working so far before removing unused styling etc

* remove some unused stuff

* remove unused fragment

* remove more console logs and unused code

* slight improvement

* nit

---------

Co-authored-by: Frankreed <baoanhtdn@gmail.com>
---
 app/content/profile/index.js     | 346 +++++++++++++++++++------------
 components/bottomSheetWrapper.js |  16 +-
 2 files changed, 231 insertions(+), 131 deletions(-)

diff --git a/app/content/profile/index.js b/app/content/profile/index.js
index e69ba85b..fe6ab7b4 100644
--- a/app/content/profile/index.js
+++ b/app/content/profile/index.js
@@ -41,6 +41,7 @@ import { useEmailInfo } from "~/dbOperations/hooks/useEmailInfo";
 import { useUserInfo } from "~/dbOperations/hooks/useUserInfo";
 import { handleImageUpload } from "~/dbOperations/imageUpload";
 import { invalidateMultipleKeys } from "~/dbOperations/invalidateMultipleKeys";
+import removePfp from "~/dbOperations/removePfp";
 import { db } from "~/firebaseConfig";
 
 function Index() {
@@ -79,17 +80,17 @@ function Index() {
     ["userEmail", { userId }],
     ["drillInfo"],
   ];
+  const [editPicFlag, setEditPicFlag] = useState(false);
   const [newName, setNewName] = useState("");
   const [email, setEmail] = useState("");
   const [currentPassword, setCurrentPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [newPasswordCheck, setNewPasswordCheck] = useState("");
   const [passwordInputVisible, setPasswordInputVisible] = useState(false);
-
+  const [uploadLoading, setUploadLoading] = useState(false);
+  const [removeLoading, setRemoveLoading] = useState(false);
   const [imageUploading, setImageUploading] = useState(false);
-
   const [updateLoading, setUpdateLoading] = useState(false);
-
   const profilePicSize = 120;
 
   useEffect(() => {
@@ -272,11 +273,6 @@ function Index() {
       marginBottom: 20,
       alignSelf: "center",
     },
-    saveChangesButtonText: {
-      color: "#FFF",
-      fontWeight: "bold",
-      alignSelf: "center",
-    },
     changePasswordButton: {
       color: "black",
       fontSize: 16,
@@ -291,6 +287,32 @@ function Index() {
       height: "100%",
       borderRadius: 60,
     },
+    uploadButtonText: {
+      fontSize: 16,
+    },
+    removeButtonText: {
+      fontSize: 16,
+      color: userData.pfp ? themeColors.accent : "#808080",
+      textAlign: "center",
+    },
+    editModal: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      padding: 20,
+      marginBottom: 30,
+    },
+    editButtons: {
+      marginBottom: 10,
+    },
+    editModalTitleText: {
+      fontSize: 24,
+      fontWeight: "bold",
+      marginBottom: 20,
+    },
+    editModalContentText: {
+      marginBottom: 20,
+    },
   });
   const profileHeader = (
     <View style={styles.profileContainer}>
@@ -307,7 +329,10 @@ function Index() {
             <Appbar.Action
               icon="cog"
               color={themeColors.accent}
-              onPress={() => bottomSheetModalRef.current?.present()}
+              onPress={() => {
+                bottomSheetModalRef.current?.present();
+                setEditPicFlag(false);
+              }}
               style={{ marginRight: 7 }}
             />
           }
@@ -315,10 +340,16 @@ function Index() {
         <BottomSheetWrapper
           ref={bottomSheetModalRef}
           closeFn={() => {
-            resetForm();
-            setNewName(userData.name);
-            setPasswordInputVisible(false);
+            if (editPicFlag) {
+              setEditPicFlag(false);
+            } else {
+              resetForm();
+              setNewName(userData.name);
+              setPasswordInputVisible(false);
+            }
           }}
+          closeButtonText={editPicFlag ? "< Back" : "Close"}
+          preventDefaultClose={editPicFlag}
         >
           <BottomSheetScrollView
             keyboardDismissMode="interactive"
@@ -328,21 +359,8 @@ function Index() {
               <View style={styles.modalContent}>
                 {/* Profile Picture */}
                 <TouchableOpacity
-                  onPress={async () => {
-                    try {
-                      await handleImageUpload(
-                        setImageUploading,
-                        showSnackBar,
-                        getPfpName(currentTeamId, userId),
-                        userRef,
-                        profilePicSize,
-                        profilePicSize,
-                      );
-                      await invalidateMultipleKeys(queryClient, [["userInfo"]]);
-                    } catch (e) {
-                      console.log(e);
-                      showDialog("Error", getErrorString(e));
-                    }
+                  onPress={() => {
+                    setEditPicFlag(!editPicFlag);
                   }}
                 >
                   <View style={styles.profilePictureContainer}>
@@ -359,117 +377,189 @@ function Index() {
                         style={styles.profilePicture}
                       />
                     )}
-                    <View style={styles.penIconContainer}>
-                      <MaterialIcons name="edit" size={24} color="black" />
-                    </View>
+                    {!editPicFlag && (
+                      <View style={styles.penIconContainer}>
+                        <MaterialIcons name="edit" size={24} color="black" />
+                      </View>
+                    )}
                   </View>
                 </TouchableOpacity>
-                {/* Display Name */}
-                <Text
-                  style={{
-                    fontSize: 20,
-                    marginBottom: 10,
-                    fontWeight: "bold",
-                  }}
-                >
-                  {userData.name}
-                </Text>
-
-                {/* Display Email */}
-                <View style={styles.emailContainer}>
-                  <Text style={styles.emailText}>{email}</Text>
-                </View>
+                {editPicFlag && (
+                  <>
+                    <Text style={styles.editModalTitleText}>
+                      Edit Profile Picture
+                    </Text>
+                    <Text
+                      style={styles.editModalContentText}
+                    >{`Do you want to ${userData.pfp ? "Change the current" : "Upload a new"} Profile Picture or Remove the current Profile Picture?`}</Text>
+                    <Button
+                      style={styles.editButtons}
+                      onPress={async () => {
+                        setUploadLoading(true);
+                        try {
+                          await handleImageUpload(
+                            setImageUploading,
+                            showSnackBar,
+                            getPfpName(currentTeamId, userId),
+                            userRef,
+                            profilePicSize,
+                            profilePicSize,
+                          );
+                          await invalidateMultipleKeys(queryClient, [
+                            ["userInfo"],
+                          ]);
+                        } catch (e) {
+                          console.log(e);
+                          showDialog("Error", getErrorString(e));
+                        }
+                        setUploadLoading(false);
+                      }}
+                      loading={uploadLoading}
+                      mode="contained"
+                      labelStyle={styles.uploadButtonText}
+                      buttonColor={themeColors.accent}
+                      textColor="white"
+                    >
+                      {userData.pfp ? "Change" : "Upload"}
+                    </Button>
+                    <Button
+                      disabled={userData.pfp ? false : true}
+                      style={styles.editButtons}
+                      onPress={async () => {
+                        setRemoveLoading(true);
+                        try {
+                          await updateDoc(userRef, {
+                            pfp: "",
+                          });
+                          await removePfp(getPfpName(currentTeamId, userId));
+                          await invalidateMultipleKeys(queryClient, [
+                            ["userInfo"],
+                          ]);
+                        } catch (e) {
+                          console.log(e);
+                          showDialog("Error", getErrorString(e));
+                        }
+                        setRemoveLoading(false);
+                      }}
+                      labelStyle={styles.removeButtonText}
+                      loading={removeLoading}
+                      textColor={themeColors.accent}
+                    >
+                      Remove
+                    </Button>
+                  </>
+                )}
 
-                {/* Name Update input field */}
-                <View style={{ width: "80%", marginBottom: 10 }}>
-                  <Text style={styles.changePasswordButton}>
-                    Update your name
-                  </Text>
-                </View>
-                <BottomSheetTextInput
-                  style={styles.input}
-                  value={newName}
-                  onChangeText={(text) => setNewName(text)}
-                  placeholder="Update your name"
-                />
+                {!editPicFlag && (
+                  <>
+                    {/* Display Name */}
+                    <Text
+                      style={{
+                        fontSize: 20,
+                        marginBottom: 10,
+                        fontWeight: "bold",
+                      }}
+                    >
+                      {userData.name}
+                    </Text>
 
-                {/* Change Password Button */}
-                <View
-                  style={{
-                    marginBottom: 20, // Increase margin bottom for more spacing
-                    flexDirection: "row",
-                    alignItems: "center",
-                    width: "80%",
-                    justifyContent: "space-between",
-                  }}
-                >
-                  <Text style={styles.changePasswordButton}>
-                    Change Password
-                  </Text>
-                  <Switch
-                    value={passwordInputVisible}
-                    onValueChange={(newValue) => {
-                      resetForm();
-                      setPasswordInputVisible(newValue);
-                    }}
-                    theme={{
-                      colors: {
-                        primary: themeColors.accent,
-                      },
-                    }}
-                  />
-                </View>
+                    {/* Display Email */}
+                    <View style={styles.emailContainer}>
+                      <Text style={styles.emailText}>{email}</Text>
+                    </View>
 
-                {/* Password Input Field */}
-                {passwordInputVisible && (
-                  <>
-                    <BottomSheetTextInput
-                      style={styles.input}
-                      value={currentPassword}
-                      onChangeText={setCurrentPassword}
-                      placeholder="Enter your current password"
-                      secureTextEntry={true}
-                      // to get rid of ios password suggestions
-                      // More info on onChangeText + ios password suggestions bug: https://github.com/facebook/react-native/issues/21261
-                      // Workaround ("oneTimeCode" textContentType): https://stackoverflow.com/a/68658035
-                      textContentType="oneTimeCode"
-                    />
-                    <BottomSheetTextInput
-                      style={styles.input}
-                      value={newPassword}
-                      onChangeText={setNewPassword}
-                      placeholder="Enter your new password"
-                      secureTextEntry={true}
-                      textContentType="newPassword"
-                    />
+                    {/* Name Update input field */}
+                    <View style={{ width: "80%", marginBottom: 10 }}>
+                      <Text style={styles.changePasswordButton}>
+                        Update your name
+                      </Text>
+                    </View>
                     <BottomSheetTextInput
                       style={styles.input}
-                      value={newPasswordCheck}
-                      onChangeText={setNewPasswordCheck}
-                      placeholder="Confirm your new password"
-                      secureTextEntry={true}
-                      textContentType="newPassword"
+                      value={newName}
+                      onChangeText={(text) => setNewName(text)}
+                      placeholder="Update your name"
                     />
-                  </>
-                )}
 
-                {/* Save Button */}
-                <Button
-                  style={styles.saveChangesButton}
-                  onPress={handleUpdate}
-                  textColor={themeColors.highlight}
-                  labelStyle={{
-                    fontWeight: "bold",
-                  }}
-                  loading={updateLoading}
-                >
-                  Update
-                </Button>
+                    {/* Change Password Button */}
+                    <View
+                      style={{
+                        marginBottom: 20, // Increase margin bottom for more spacing
+                        flexDirection: "row",
+                        alignItems: "center",
+                        width: "80%",
+                        justifyContent: "space-between",
+                      }}
+                    >
+                      <Text style={styles.changePasswordButton}>
+                        Change Password
+                      </Text>
+                      <Switch
+                        value={passwordInputVisible}
+                        onValueChange={(newValue) => {
+                          resetForm();
+                          setPasswordInputVisible(newValue);
+                        }}
+                        theme={{
+                          colors: {
+                            primary: themeColors.accent,
+                          },
+                        }}
+                      />
+                    </View>
+
+                    {/* Password Input Field */}
+                    {passwordInputVisible && (
+                      <>
+                        <BottomSheetTextInput
+                          style={styles.input}
+                          value={currentPassword}
+                          onChangeText={setCurrentPassword}
+                          placeholder="Enter your current password"
+                          secureTextEntry={true}
+                          // to get rid of ios password suggestions
+                          // More info on onChangeText + ios password suggestions bug: https://github.com/facebook/react-native/issues/21261
+                          // Workaround ("oneTimeCode" textContentType): https://stackoverflow.com/a/68658035
+                          textContentType="oneTimeCode"
+                        />
+                        <BottomSheetTextInput
+                          style={styles.input}
+                          value={newPassword}
+                          onChangeText={setNewPassword}
+                          placeholder="Enter your new password"
+                          secureTextEntry={true}
+                          textContentType="newPassword"
+                        />
+                        <BottomSheetTextInput
+                          style={styles.input}
+                          value={newPasswordCheck}
+                          onChangeText={setNewPasswordCheck}
+                          placeholder="Confirm your new password"
+                          secureTextEntry={true}
+                          textContentType="newPassword"
+                        />
+                      </>
+                    )}
 
-                {/* Sign Out Button */}
-                <Pressable onPress={handleSignOut}>
-                  <Text style={styles.signOutButton}>Sign Out</Text>
-                </Pressable>
+                    {/* Save Button */}
+                    <Button
+                      style={styles.saveChangesButton}
+                      onPress={handleUpdate}
+                      textColor={themeColors.highlight}
+                      labelStyle={{
+                        fontWeight: "bold",
+                      }}
+                      loading={updateLoading}
+                    >
+                      Update
+                    </Button>
+
+                    {/* Sign Out Button */}
+                    <Pressable onPress={handleSignOut}>
+                      <Text style={styles.signOutButton}>Sign Out</Text>
+                    </Pressable>
+                  </>
+                )}
               </View>
             </KeyboardAvoiderScrollView>
           </BottomSheetScrollView>
diff --git a/components/bottomSheetWrapper.js b/components/bottomSheetWrapper.js
index f36cc084..e3d81f6f 100644
--- a/components/bottomSheetWrapper.js
+++ b/components/bottomSheetWrapper.js
@@ -5,7 +5,15 @@ import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 import { themeColors } from "~/Constants";
 
 const BottomSheetWrapper = forwardRef(
-  ({ children, closeFn = () => {} }, ref) => {
+  (
+    {
+      children,
+      closeFn = () => {},
+      closeButtonText = "Close",
+      preventDefaultClose = false,
+    },
+    ref,
+  ) => {
     const insets = useContext(SafeAreaInsetsContext);
     return (
       <BottomSheetModal
@@ -29,7 +37,9 @@ const BottomSheetWrapper = forwardRef(
         {/* Close Button */}
         <Pressable
           onPress={() => {
-            ref.current.close();
+            if (!preventDefaultClose) {
+              ref.current.close();
+            }
             closeFn();
           }}
         >
@@ -40,7 +50,7 @@ const BottomSheetWrapper = forwardRef(
               marginLeft: 10,
             }}
           >
-            Close
+            {closeButtonText}
           </Text>
         </Pressable>
         {children}