From 1f225008b87cab65cefa3647b1b3fec6777cf39b Mon Sep 17 00:00:00 2001 From: solderq35 Date: Wed, 28 Aug 2024 16:13:31 -0700 Subject: [PATCH 01/12] remove pfp button poc --- app/content/profile/index.js | 72 ++++++++++++++++++++++++++++-------- 1 file changed, 57 insertions(+), 15 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index e69ba85b..21e9ef8a 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -28,6 +28,7 @@ import { themeColors } from "~/Constants"; import { getErrorString, getPfpName } from "~/Utility"; import ProfilePicture from "~/components/ProfilePicture"; import BottomSheetWrapper from "~/components/bottomSheetWrapper"; +import DialogComponent from "~/components/dialog"; import DrillList from "~/components/drillList"; import EmptyScreen from "~/components/emptyScreen"; import ErrorComponent from "~/components/errorComponent"; @@ -85,6 +86,10 @@ function Index() { const [newPassword, setNewPassword] = useState(""); const [newPasswordCheck, setNewPasswordCheck] = useState(""); const [passwordInputVisible, setPasswordInputVisible] = useState(false); + const [uploadLoading, setUploadLoading] = useState(false); + const [removeLoading, setRemoveLoading] = useState(false); + const [uploadDialogVisible, setUploadDialogVisible] = useState(false); + const hideUploadDialog = () => setUploadDialogVisible(false); const [imageUploading, setImageUploading] = useState(false); @@ -300,6 +305,55 @@ function Index() { return ( + { + setRemoveLoading(true); + try { + await updateDoc(userRef, { + pfp: "", + }); + await invalidateMultipleKeys(queryClient, [["userInfo"]]); + } catch (e) { + console.log(e); + showDialog("Error", getErrorString(e)); + } + setRemoveLoading(false); + hideUploadDialog(); + }, + loading: removeLoading, + }, + { + children: "Upload", + pressHandler: 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); + hideUploadDialog(); + }, + loading: uploadLoading, + }, + ]} + />
{/* Profile Picture */} { - 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={() => { + console.log("PFP Upload Pressed!"); + setUploadDialogVisible(true); }} > From 644560f45ffc21aed7013b4e2a23599a0aeb7190 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Fri, 30 Aug 2024 19:53:53 -0700 Subject: [PATCH 02/12] switch to modal --- app/content/profile/index.js | 207 ++++++++++++++++++++++++++--------- 1 file changed, 153 insertions(+), 54 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index 21e9ef8a..8c878b8c 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -15,10 +15,12 @@ import { import { doc, updateDoc } from "firebase/firestore"; import { useCallback, useEffect, useRef, useState } from "react"; import { + Modal, Pressable, StyleSheet, Text, TouchableOpacity, + TouchableWithoutFeedback, View, } from "react-native"; import { ActivityIndicator, Appbar, Button, Switch } from "react-native-paper"; @@ -28,7 +30,6 @@ import { themeColors } from "~/Constants"; import { getErrorString, getPfpName } from "~/Utility"; import ProfilePicture from "~/components/ProfilePicture"; import BottomSheetWrapper from "~/components/bottomSheetWrapper"; -import DialogComponent from "~/components/dialog"; import DrillList from "~/components/drillList"; import EmptyScreen from "~/components/emptyScreen"; import ErrorComponent from "~/components/errorComponent"; @@ -42,6 +43,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() { @@ -88,8 +90,8 @@ function Index() { const [passwordInputVisible, setPasswordInputVisible] = useState(false); const [uploadLoading, setUploadLoading] = useState(false); const [removeLoading, setRemoveLoading] = useState(false); - const [uploadDialogVisible, setUploadDialogVisible] = useState(false); - const hideUploadDialog = () => setUploadDialogVisible(false); + const [modalVisible, setModalVisible] = useState(false); + const hideUploadModal = () => setModalVisible(false); const [imageUploading, setImageUploading] = useState(false); @@ -296,6 +298,64 @@ function Index() { height: "100%", borderRadius: 60, }, + outerTouchable: { + flex: 1, + alignItems: "center", + justifyContent: "center", + backgroundColor: "rgba(0, 0, 0, 0.5)", // Background dim + }, + innerTouchable: { + backgroundColor: "white", + borderRadius: 20, + padding: 15, + width: "80%", + alignItems: "center", + }, + modalTitleText: { + fontSize: 18, + fontWeight: "bold", + marginBottom: 10, + }, + modalContentText: { + fontSize: 14, + marginBottom: 10, + }, + buttonContainer: { + flexDirection: "row", // Arrange buttons in a row + width: "100%", // Takes full width of the modal + justifyContent: "space-between", // Evenly space buttons + marginTop: 20, // Add margin to separate buttons from content + }, + button: { + flex: 1, // Each button takes up equal width + alignItems: "center", // Center button text horizontally + borderRadius: 12, + marginTop: 20, + }, + uploadButtonText: { + fontSize: 16, + color: "white", + textAlign: "center", + }, + removeButtonText: { + fontSize: 16, + color: themeColors.accent, + textAlign: "center", + }, + headerContainer: { + flexDirection: "row", // Arrange the Cancel button in a row + justifyContent: "flex-start", // Align to the left + alignItems: "center", // Center vertically within the row + width: "100%", // Take up full width + marginBottom: 10, // Add margin to separate from title + }, + closeButton: { + backgroundColor: "transparent", // Use transparent background or specific color if desired + }, + closeButtonText: { + color: themeColors.accent, + fontSize: 16, + }, }); const profileHeader = ( @@ -305,55 +365,94 @@ function Index() { return ( - { - setRemoveLoading(true); - try { - await updateDoc(userRef, { - pfp: "", - }); - await invalidateMultipleKeys(queryClient, [["userInfo"]]); - } catch (e) { - console.log(e); - showDialog("Error", getErrorString(e)); - } - setRemoveLoading(false); - hideUploadDialog(); - }, - loading: removeLoading, - }, - { - children: "Upload", - pressHandler: 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); - hideUploadDialog(); - }, - loading: uploadLoading, - }, - ]} - /> + + {/* Tapping outside of the modal will dismiss it */} + setModalVisible(false)}> + + {/* Prevents touch events from propagating to the parent when clicking inside the modal */} + + + {/* Container for Cancel button at the top left */} + + + + + {/* Content in the modal */} + Edit Profile Picture + + Upload New Pic or Remove Current Pic + + + {/* Button Container at the Bottom */} + + + + + + + + + +
{ - console.log("PFP Upload Pressed!"); - setUploadDialogVisible(true); + setModalVisible(true); + // setUploadDialogVisible(true); }} > From d482519d2d094e631334cf912a5faaf20dd46842 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Fri, 30 Aug 2024 19:55:35 -0700 Subject: [PATCH 03/12] remove dialog comment --- app/content/profile/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index 8c878b8c..22f362ff 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -483,7 +483,6 @@ function Index() { { setModalVisible(true); - // setUploadDialogVisible(true); }} > From 29db522c0b54e9ea619b308c24488aec2bbc24c7 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Fri, 30 Aug 2024 20:01:56 -0700 Subject: [PATCH 04/12] fix modal content text --- app/content/profile/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index 22f362ff..82ae8718 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -386,7 +386,8 @@ function Index() { {/* Content in the modal */} Edit Profile Picture - Upload New Pic or Remove Current Pic + Upload a new Profile Picture, or Remove the current Profile + Picture {/* Button Container at the Bottom */} From 36618ff9779874a2ad8165524d19ab12784f44ad Mon Sep 17 00:00:00 2001 From: Frankreed Date: Sat, 31 Aug 2024 13:31:00 -0700 Subject: [PATCH 05/12] changed back to dialog, minor wording update --- app/content/profile/index.js | 172 ++++++++++++++++------------------- 1 file changed, 78 insertions(+), 94 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index 82ae8718..5a91e6d7 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -15,15 +15,20 @@ import { import { doc, updateDoc } from "firebase/firestore"; import { useCallback, useEffect, useRef, useState } from "react"; import { - Modal, Pressable, StyleSheet, Text, TouchableOpacity, - TouchableWithoutFeedback, View, } from "react-native"; -import { ActivityIndicator, Appbar, Button, Switch } from "react-native-paper"; +import { + ActivityIndicator, + Appbar, + Button, + Dialog, + Portal, + Switch, +} from "react-native-paper"; import { SafeAreaView } from "react-native-safe-area-context"; import { debounce } from "underscore"; import { themeColors } from "~/Constants"; @@ -328,14 +333,11 @@ function Index() { }, button: { flex: 1, // Each button takes up equal width - alignItems: "center", // Center button text horizontally borderRadius: 12, marginTop: 20, }, uploadButtonText: { fontSize: 16, - color: "white", - textAlign: "center", }, removeButtonText: { fontSize: 16, @@ -365,94 +367,76 @@ function Index() { return ( - - {/* Tapping outside of the modal will dismiss it */} - setModalVisible(false)}> - - {/* Prevents touch events from propagating to the parent when clicking inside the modal */} - - - {/* Container for Cancel button at the top left */} - - - - - {/* Content in the modal */} - Edit Profile Picture - - Upload a new Profile Picture, or Remove the current Profile - Picture - - - {/* Button Container at the Bottom */} - - - - - - - - - + + setModalVisible(false)} + style={{ backgroundColor: "white" }} + > + + Edit Profile Picture + + + + {`Remove the current Profile Picture or ${userData.pfp ? "Change to" : "Upload"} a new Profile Picture`} + + + + + + + +
Date: Sun, 1 Sep 2024 16:18:59 -0700 Subject: [PATCH 06/12] remove unused styles --- app/content/profile/index.js | 42 ------------------------------------ 1 file changed, 42 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index 5a91e6d7..982986d1 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -303,34 +303,6 @@ function Index() { height: "100%", borderRadius: 60, }, - outerTouchable: { - flex: 1, - alignItems: "center", - justifyContent: "center", - backgroundColor: "rgba(0, 0, 0, 0.5)", // Background dim - }, - innerTouchable: { - backgroundColor: "white", - borderRadius: 20, - padding: 15, - width: "80%", - alignItems: "center", - }, - modalTitleText: { - fontSize: 18, - fontWeight: "bold", - marginBottom: 10, - }, - modalContentText: { - fontSize: 14, - marginBottom: 10, - }, - buttonContainer: { - flexDirection: "row", // Arrange buttons in a row - width: "100%", // Takes full width of the modal - justifyContent: "space-between", // Evenly space buttons - marginTop: 20, // Add margin to separate buttons from content - }, button: { flex: 1, // Each button takes up equal width borderRadius: 12, @@ -344,20 +316,6 @@ function Index() { color: themeColors.accent, textAlign: "center", }, - headerContainer: { - flexDirection: "row", // Arrange the Cancel button in a row - justifyContent: "flex-start", // Align to the left - alignItems: "center", // Center vertically within the row - width: "100%", // Take up full width - marginBottom: 10, // Add margin to separate from title - }, - closeButton: { - backgroundColor: "transparent", // Use transparent background or specific color if desired - }, - closeButtonText: { - color: themeColors.accent, - fontSize: 16, - }, }); const profileHeader = ( From e0037e613172dbf33cd725b58e9f5a9e2c9191a7 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Mon, 2 Sep 2024 17:47:02 -0700 Subject: [PATCH 07/12] commit what's working so far before removing unused styling etc --- app/content/profile/index.js | 405 ++++++++++++++++++++----------- components/bottomSheetWrapper.js | 9 +- 2 files changed, 270 insertions(+), 144 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index 982986d1..4622921f 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -13,7 +13,7 @@ import { updatePassword, } from "firebase/auth"; import { doc, updateDoc } from "firebase/firestore"; -import { useCallback, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Pressable, StyleSheet, @@ -87,6 +87,7 @@ function Index() { ["userEmail", { userId }], ["drillInfo"], ]; + const [listFlag, setListFlag] = useState(false); const [newName, setNewName] = useState(""); const [email, setEmail] = useState(""); const [currentPassword, setCurrentPassword] = useState(""); @@ -104,6 +105,14 @@ function Index() { const profilePicSize = 120; + const data = useMemo( + () => + Array(5) + .fill(0) + .map((_, index) => `index-${index}`), + [], + ); + useEffect(() => { setNewName(userData ? userData.name : ""); setEmail(userEmail); @@ -313,9 +322,28 @@ function Index() { }, removeButtonText: { fontSize: 16, - color: themeColors.accent, + color: userData.pfp ? themeColors.accent : "#808080", textAlign: "center", }, + editModal: { + flex: 1, + justifyContent: "center", + alignItems: "center", + padding: 20, + marginBottom: 30, + }, + editButtons: { + // paddingVertical: 10, + marginBottom: 10, + }, + editModalTitleText: { + fontSize: 24, + fontWeight: "bold", + marginBottom: 20, + }, + editModalContentText: { + marginBottom: 20, + }, }); const profileHeader = ( @@ -323,6 +351,12 @@ function Index() { ); + const renderItem = ({ item }) => ( + + {item} + + ); + return ( @@ -403,159 +437,248 @@ function Index() { bottomSheetModalRef.current?.present()} + onPress={() => { + bottomSheetModalRef.current?.present(); + setListFlag(false); + console.log("BROO"); + }} style={{ marginRight: 7 }} /> } /> { - resetForm(); - setNewName(userData.name); - setPasswordInputVisible(false); - }} + closeFn={ + listFlag + ? () => { + console.log("TEST"); + setListFlag(false); + } + : () => { + console.log("BRUHHHHH"); + resetForm(); + setNewName(userData.name); + setPasswordInputVisible(false); + } + } + closeButtonText={listFlag ? "< Back" : "Close"} + listFlag={listFlag} > - - - - {/* Profile Picture */} - { - setModalVisible(true); - }} - > - - {imageUploading ? ( - - ) : ( - - )} - - - - - - {/* Display Name */} - - {userData.name} - - - {/* Display Email */} - - {email} - - - {/* Name Update input field */} - - - Update your name + {listFlag && ( + <> + + + + Edit Profile Picture + {`${userData.pfp ? "Change the current" : "Upload a new"} Profile Picture or Remove the current Profile Picture`} + + - setNewName(text)} - placeholder="Update your name" - /> - - {/* Change Password Button */} - - - Change Password - - { - resetForm(); - setPasswordInputVisible(newValue); + + + )} + + {!listFlag && ( + + + + {/* Profile Picture */} + { + console.log("HIIOI"); + setListFlag(true); }} - theme={{ - colors: { - primary: themeColors.accent, - }, + > + + {imageUploading ? ( + + ) : ( + + )} + + + + + + {/* Display Name */} + + {userData.name} + + + {/* Display Email */} + + {email} + + + {/* Name Update input field */} + + + Update your name + + + setNewName(text)} + placeholder="Update your name" /> - - {/* Password Input Field */} - {passwordInputVisible && ( - <> - - - + + Change Password + + { + resetForm(); + setPasswordInputVisible(newValue); + }} + theme={{ + colors: { + primary: themeColors.accent, + }, + }} /> - - )} - - {/* Save Button */} - - - {/* Sign Out Button */} - - Sign Out - - - - + + + {/* Password Input Field */} + {passwordInputVisible && ( + <> + + + + + )} + + {/* Save Button */} + + + {/* Sign Out Button */} + + Sign Out + + + + + )} {uniqueDrills.length > 0 && userData.role === "player" ? ( diff --git a/components/bottomSheetWrapper.js b/components/bottomSheetWrapper.js index f36cc084..c2a53f88 100644 --- a/components/bottomSheetWrapper.js +++ b/components/bottomSheetWrapper.js @@ -5,7 +5,7 @@ import { SafeAreaInsetsContext } from "react-native-safe-area-context"; import { themeColors } from "~/Constants"; const BottomSheetWrapper = forwardRef( - ({ children, closeFn = () => {} }, ref) => { + ({ children, closeFn = () => {}, closeButtonText, listFlag }, ref) => { const insets = useContext(SafeAreaInsetsContext); return ( { - ref.current.close(); + console.log(listFlag); + if (!listFlag) { + ref.current.close(); + } closeFn(); }} > @@ -40,7 +43,7 @@ const BottomSheetWrapper = forwardRef( marginLeft: 10, }} > - Close + {closeButtonText} {children} From daaee0e18eb25d75144d70c637bb2a025db34f6d Mon Sep 17 00:00:00 2001 From: solderq35 Date: Mon, 2 Sep 2024 17:54:34 -0700 Subject: [PATCH 08/12] remove some unused stuff --- app/content/profile/index.js | 118 +---------------------------------- 1 file changed, 2 insertions(+), 116 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index 4622921f..b56bdd33 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -13,7 +13,7 @@ import { updatePassword, } from "firebase/auth"; import { doc, updateDoc } from "firebase/firestore"; -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { Pressable, StyleSheet, @@ -21,14 +21,7 @@ import { TouchableOpacity, View, } from "react-native"; -import { - ActivityIndicator, - Appbar, - Button, - Dialog, - Portal, - Switch, -} from "react-native-paper"; +import { ActivityIndicator, Appbar, Button, Switch } from "react-native-paper"; import { SafeAreaView } from "react-native-safe-area-context"; import { debounce } from "underscore"; import { themeColors } from "~/Constants"; @@ -96,23 +89,10 @@ function Index() { const [passwordInputVisible, setPasswordInputVisible] = useState(false); const [uploadLoading, setUploadLoading] = useState(false); const [removeLoading, setRemoveLoading] = useState(false); - const [modalVisible, setModalVisible] = useState(false); - const hideUploadModal = () => setModalVisible(false); - const [imageUploading, setImageUploading] = useState(false); - const [updateLoading, setUpdateLoading] = useState(false); - const profilePicSize = 120; - const data = useMemo( - () => - Array(5) - .fill(0) - .map((_, index) => `index-${index}`), - [], - ); - useEffect(() => { setNewName(userData ? userData.name : ""); setEmail(userEmail); @@ -293,11 +273,6 @@ function Index() { marginBottom: 20, alignSelf: "center", }, - saveChangesButtonText: { - color: "#FFF", - fontWeight: "bold", - alignSelf: "center", - }, changePasswordButton: { color: "black", fontSize: 16, @@ -312,11 +287,6 @@ function Index() { height: "100%", borderRadius: 60, }, - button: { - flex: 1, // Each button takes up equal width - borderRadius: 12, - marginTop: 20, - }, uploadButtonText: { fontSize: 16, }, @@ -333,7 +303,6 @@ function Index() { marginBottom: 30, }, editButtons: { - // paddingVertical: 10, marginBottom: 10, }, editModalTitleText: { @@ -351,85 +320,8 @@ function Index() { ); - const renderItem = ({ item }) => ( - - {item} - - ); - return ( - - setModalVisible(false)} - style={{ backgroundColor: "white" }} - > - - Edit Profile Picture - - - - {`Remove the current Profile Picture or ${userData.pfp ? "Change to" : "Upload"} a new Profile Picture`} - - - - - - - - -
{ bottomSheetModalRef.current?.present(); setListFlag(false); - console.log("BROO"); }} style={{ marginRight: 7 }} /> @@ -451,11 +342,9 @@ function Index() { closeFn={ listFlag ? () => { - console.log("TEST"); setListFlag(false); } : () => { - console.log("BRUHHHHH"); resetForm(); setNewName(userData.name); setPasswordInputVisible(false); @@ -495,7 +384,6 @@ function Index() { showDialog("Error", getErrorString(e)); } setUploadLoading(false); - hideUploadModal(); }} loading={uploadLoading} mode="contained" @@ -523,7 +411,6 @@ function Index() { showDialog("Error", getErrorString(e)); } setRemoveLoading(false); - hideUploadModal(); }} labelStyle={styles.removeButtonText} loading={removeLoading} @@ -546,7 +433,6 @@ function Index() { {/* Profile Picture */} { - console.log("HIIOI"); setListFlag(true); }} > From d485d30abc16dba2cee20af6d3844d9320157f4b Mon Sep 17 00:00:00 2001 From: solderq35 Date: Mon, 2 Sep 2024 17:56:05 -0700 Subject: [PATCH 09/12] remove unused fragment --- app/content/profile/index.js | 128 +++++++++++++++++------------------ 1 file changed, 61 insertions(+), 67 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index b56bdd33..e21d69cb 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -354,73 +354,67 @@ function Index() { listFlag={listFlag} > {listFlag && ( - <> - - - - Edit Profile Picture - - {`${userData.pfp ? "Change the current" : "Upload a new"} Profile Picture or Remove the current Profile Picture`} - - - - - + + + + Edit Profile Picture + + {`${userData.pfp ? "Change the current" : "Upload a new"} Profile Picture or Remove the current Profile Picture`} + + + + )} {!listFlag && ( From f5d4f3a913f4cab6934b2a07be4021738d1fc2fa Mon Sep 17 00:00:00 2001 From: solderq35 Date: Mon, 2 Sep 2024 18:13:34 -0700 Subject: [PATCH 10/12] remove more console logs and unused code --- app/content/profile/index.js | 18 +++++++++--------- components/bottomSheetWrapper.js | 5 ++--- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index e21d69cb..f439d1e4 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -80,7 +80,7 @@ function Index() { ["userEmail", { userId }], ["drillInfo"], ]; - const [listFlag, setListFlag] = useState(false); + const [editPicFlag, setEditPicFlag] = useState(false); const [newName, setNewName] = useState(""); const [email, setEmail] = useState(""); const [currentPassword, setCurrentPassword] = useState(""); @@ -331,7 +331,7 @@ function Index() { color={themeColors.accent} onPress={() => { bottomSheetModalRef.current?.present(); - setListFlag(false); + setEditPicFlag(false); }} style={{ marginRight: 7 }} /> @@ -340,9 +340,9 @@ function Index() { { - setListFlag(false); + setEditPicFlag(false); } : () => { resetForm(); @@ -350,10 +350,10 @@ function Index() { setPasswordInputVisible(false); } } - closeButtonText={listFlag ? "< Back" : "Close"} - listFlag={listFlag} + closeButtonText={editPicFlag ? "< Back" : "Close"} + editPicFlag={editPicFlag} > - {listFlag && ( + {editPicFlag && ( @@ -417,7 +417,7 @@ function Index() { )} - {!listFlag && ( + {!editPicFlag && ( { - setListFlag(true); + setEditPicFlag(true); }} > diff --git a/components/bottomSheetWrapper.js b/components/bottomSheetWrapper.js index c2a53f88..87dfcc1e 100644 --- a/components/bottomSheetWrapper.js +++ b/components/bottomSheetWrapper.js @@ -5,7 +5,7 @@ import { SafeAreaInsetsContext } from "react-native-safe-area-context"; import { themeColors } from "~/Constants"; const BottomSheetWrapper = forwardRef( - ({ children, closeFn = () => {}, closeButtonText, listFlag }, ref) => { + ({ children, closeFn = () => {}, closeButtonText, editPicFlag }, ref) => { const insets = useContext(SafeAreaInsetsContext); return ( { - console.log(listFlag); - if (!listFlag) { + if (!editPicFlag) { ref.current.close(); } closeFn(); From 969369dd092ab84810c2b595b39d8360791df543 Mon Sep 17 00:00:00 2001 From: Frankreed Date: Mon, 2 Sep 2024 19:31:57 -0700 Subject: [PATCH 11/12] slight improvement --- app/content/profile/index.js | 390 ++++++++++++++++++----------------- 1 file changed, 198 insertions(+), 192 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index f439d1e4..4e609afa 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -353,212 +353,218 @@ function Index() { closeButtonText={editPicFlag ? "< Back" : "Close"} editPicFlag={editPicFlag} > - {editPicFlag && ( - - - - Edit Profile Picture - - {`${userData.pfp ? "Change the current" : "Upload a new"} Profile Picture or Remove the current Profile Picture`} - - - - - )} - - {!editPicFlag && ( - - - - {/* Profile Picture */} - { - setEditPicFlag(true); - }} - > - - {imageUploading ? ( - - ) : ( - - )} + + {imageUploading ? ( + + ) : ( + + )} + {!editPicFlag && ( - - - {/* Display Name */} - - {userData.name} - - - {/* Display Email */} - - {email} - - - {/* Name Update input field */} - - - Update your name - + )} - setNewName(text)} - placeholder="Update your name" - /> - - {/* Change Password Button */} - - - Change Password + + {editPicFlag && ( + <> + + Edit Profile Picture - { - resetForm(); - setPasswordInputVisible(newValue); + {`Do you want to ${userData.pfp ? "Change the current" : "Upload a new"} Profile Picture or Remove the current Profile Picture?`} + + + + )} + + {!editPicFlag && ( + <> + {/* Display Name */} + + {userData.name} + + + {/* Display Email */} + + {email} + + + {/* Name Update input field */} + + + Update your name + + + setNewName(text)} + placeholder="Update your name" /> - - {/* Password Input Field */} - {passwordInputVisible && ( - <> - - - + + Change Password + + { + resetForm(); + setPasswordInputVisible(newValue); + }} + theme={{ + colors: { + primary: themeColors.accent, + }, + }} /> - - )} + + + {/* Password Input Field */} + {passwordInputVisible && ( + <> + + + + + )} - {/* Save Button */} - + {/* Save Button */} + - {/* Sign Out Button */} - - Sign Out - - - - - )} + {/* Sign Out Button */} + + Sign Out + + + )} + + + {uniqueDrills.length > 0 && userData.role === "player" ? ( From 9321d5fd3d641947ecd78ff76b44d5c77ffc20d3 Mon Sep 17 00:00:00 2001 From: Frankreed Date: Mon, 2 Sep 2024 20:51:07 -0700 Subject: [PATCH 12/12] nit --- app/content/profile/index.js | 22 ++++++++++------------ components/bottomSheetWrapper.js | 12 ++++++++++-- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index 4e609afa..fe6ab7b4 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -339,19 +339,17 @@ function Index() { /> { - setEditPicFlag(false); - } - : () => { - resetForm(); - setNewName(userData.name); - setPasswordInputVisible(false); - } - } + closeFn={() => { + if (editPicFlag) { + setEditPicFlag(false); + } else { + resetForm(); + setNewName(userData.name); + setPasswordInputVisible(false); + } + }} closeButtonText={editPicFlag ? "< Back" : "Close"} - editPicFlag={editPicFlag} + preventDefaultClose={editPicFlag} > {}, closeButtonText, editPicFlag }, ref) => { + ( + { + children, + closeFn = () => {}, + closeButtonText = "Close", + preventDefaultClose = false, + }, + ref, + ) => { const insets = useContext(SafeAreaInsetsContext); return ( { - if (!editPicFlag) { + if (!preventDefaultClose) { ref.current.close(); } closeFn();