From 7bfaabf4fc4dcf11ffe404b26a5293fc332b35c1 Mon Sep 17 00:00:00 2001 From: Frankreed Date: Wed, 13 Mar 2024 22:38:43 -0700 Subject: [PATCH] some refactoring --- app/content/profile/index.js | 200 +++++++++++++++-------------------- hooks/useDrillInfo.js | 4 +- hooks/useEmailInfo.js | 2 +- hooks/useUserInfo.js | 4 +- 4 files changed, 87 insertions(+), 123 deletions(-) diff --git a/app/content/profile/index.js b/app/content/profile/index.js index f63a649e..8f1aa2d5 100644 --- a/app/content/profile/index.js +++ b/app/content/profile/index.js @@ -3,6 +3,7 @@ import { BottomSheetModal, BottomSheetModalProvider, } from "@gorhom/bottom-sheet"; +import { useQueryClient } from "@tanstack/react-query"; import { getAuth, signInWithEmailAndPassword, @@ -10,7 +11,7 @@ import { updatePassword, } from "firebase/auth"; import { doc, updateDoc } from "firebase/firestore"; -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { Image, Pressable, @@ -23,12 +24,12 @@ import { } from "react-native"; import { Appbar, + Button, Dialog, PaperProvider, + Paragraph, Portal, Snackbar, - Paragraph, - Button, } from "react-native-paper"; import { SafeAreaView } from "react-native-safe-area-context"; import { getUnique } from "~/Utility"; @@ -61,18 +62,6 @@ function Index(props) { userEmailIsLoading: userEmailIsLoading, } = useEmailInfo(userId); - async function handleSignOut() { - signoutFireBase(auth) - .then(() => { - // Sign-out successful. - }) - .catch((e) => { - alert(e); - console.log(e); - }); - signOut(); - } - const { data: attempts, error: attemptsError, @@ -88,20 +77,13 @@ function Index(props) { // ref const bottomSheetModalRef = useRef(null); + const queryClient = useQueryClient(); + // variables const initialSnapPoints = useMemo(() => [355, 455, 730], []); const expandedSnapPoints = useMemo(() => [460, 570, 860], []); // Adjusted snap points for expanded content const [snapPoints, setSnapPoints] = useState(initialSnapPoints); - // callbacks - const handlePresentModalPress = useCallback(() => { - bottomSheetModalRef.current?.present(); - }, []); - const handleSheetChanges = useCallback((index) => { - // console.log("handleSheetChanges", index); - }, []); - - const [currentName, setCurrentName] = useState(""); const [newName, setNewName] = useState(""); const [email, setEmail] = useState(""); const [currentPassword, setCurrentPassword] = useState(""); @@ -115,90 +97,83 @@ function Index(props) { const [dialogTitle, setDialogTitle] = useState(""); const [dialogMessage, setDialogMessage] = useState(""); - const handleSnackbarDismiss = () => { - setSnackbarVisible(false); // Dismiss snackbar - }; - useEffect(() => { - // Check if userData has been loaded and it contains the name property - if (userData && userData.name) { - // Update the name state only if it hasn't been set yet - if (!currentName) { - setCurrentName(userData.name); - } - } - }, [userData, currentName]); // Watch for changes in userData and name + setNewName(userData ? userData.name : ""); + setEmail(userEmail); + }, [userData, userEmail]); useEffect(() => { - if (currentName) { - if (!newName) { - setNewName(currentName); - } - } - }, [currentName, newName]); // Watch for changes in userData and name - - useEffect(() => { - if (userEmail) { - setEmail(userEmail); // Set email once userEmail is available - } - }, [userEmail]); // Watch for changes in userEmail - - const handleNewNameChange = (text) => { - setNewName(text); - }; + setSnapPoints( + passwordInputVisible ? expandedSnapPoints : initialSnapPoints, + ); + }, [passwordInputVisible]); + + if ( + userIsLoading || + drillInfoIsLoading || + attemptsIsLoading || + userEmailIsLoading + ) { + return ; + } - const handleEmailChange = (text) => { - setEmail(text); - }; + if (userError || drillInfoError || attemptsError || userEmailError) { + return ( + + ); + } const handleImageClick = () => { console.log("TODO: implement and open an image upload modal!"); }; - const showChangePasswordField = () => { - setPasswordInputVisible(!passwordInputVisible); // Toggle password input field visibility + async function handleSignOut() { + signoutFireBase(auth) + .then(() => { + // Sign-out successful. + }) + .catch((e) => { + alert(e); + console.log(e); + }); + signOut(); + } + + const resetForm = () => { + setNewName(userData.name); + setCurrentPassword(""); + setNewPassword(""); + }; - // Adjust snap points based on password input visibility - if (passwordInputVisible) { - setSnapPoints(initialSnapPoints); - setCurrentPassword(""); // Clear password fields - setNewPassword(""); - } else { - setSnapPoints(expandedSnapPoints); - } + const showDialog = (title, message) => { + setDialogTitle(title); + setDialogMessage(message); + setDialogVisible(true); }; const handleUpdate = async () => { - if (newName && newName !== currentName) { // check if they request to update their name to a new one + if (newName && newName !== userData.name) { + // check if they request to update their name to a new one await updateDoc(doc(db, "teams", "1", "users", userId), { name: newName, }); - setCurrentName(newName); + queryClient.invalidateQueries({ queryKey: ["user", { userId }] }); bottomSheetModalRef.current.close(); setSnackbarMessage("Name field updated successfully"); - setSnackbarVisible(true); // Show success snackbar + setSnackbarVisible(true); // Show success snackbar } if (email) { // TODO: Decide whether we want to allow a user update their email } - if (passwordInputVisible) { - //if password change field is open and they press update - if (!currentPassword && !newPassword) { - setDialogTitle("Error"); - setDialogMessage("Please provide current and new passwords"); - setDialogVisible(true); - } else if (!currentPassword) { - setDialogTitle("Error"); - setDialogMessage("Please provide the current password"); - setDialogVisible(true); - } else if (!newPassword) { - setDialogTitle("Error"); - setDialogMessage("Please provide the new password"); - setDialogVisible(true); + if (passwordInputVisible && (currentPassword || newPassword)) { + if (!currentPassword || !newPassword) { + showDialog("Error", "Please fill out all the fields"); } else { - // attemp updating the password + // attemtp updating the password try { // re-authenticate the user and check if the provided current password is valid const userCredential = await signInWithEmailAndPassword( @@ -206,7 +181,6 @@ function Index(props) { userEmail, currentPassword, ); - // console.log("signed in:", userCredential.user); // once re-authenticated, update the password updatePassword(userCredential.user, newPassword) @@ -221,38 +195,26 @@ function Index(props) { .catch((error) => { // Update failed console.log("password update error:", error.message); - setDialogTitle("New password is too short"); - setDialogMessage("Provided new password must be at least 6 characters long!"); - setDialogVisible(true); - console.log(e.message); + showDialog( + "New password is too short", + "Provided new password must be at least 6 characters long!", + ); }); } catch (e) { - setDialogTitle("Error"); - setDialogMessage("Provided current password is invalid!"); - setDialogVisible(true); + showDialog("Error", e.message); console.log(e.message); } } } }; - if (userIsLoading || drillInfoIsLoading || attemptsIsLoading) { - return ; - } - - if (userError || drillInfoError || attemptsError) { - return ( - - ); - } - const uniqueDrills = getUnique(attempts, "did"); return ( setSnackbarVisible(false)} duration={4000} // Duration in milliseconds for how long the snackbar is shown > {snackbarMessage} @@ -279,7 +241,7 @@ function Index(props) { bottomSheetModalRef.current?.present()} style={{ marginRight: 7 }} /> @@ -287,7 +249,7 @@ function Index(props) { - + Drill History @@ -311,47 +273,53 @@ function Index(props) { ref={bottomSheetModalRef} index={1} snapPoints={snapPoints} - onChange={handleSheetChanges} > {/* Close Button */} bottomSheetModalRef.current.close()} + onPress={() => { + bottomSheetModalRef.current.close(); + resetForm(); + setPasswordInputVisible(false); + }} style={styles.closeButton} > Close {/* Profile Picture */} - - + + - - - + - + - + setNewName(text)} placeholder="Enter your name" /> setEmail(text)} placeholder="Enter your email" /> {/* Change Password Button */} - + { + resetForm(); + setPasswordInputVisible(!passwordInputVisible); + }} + > Change Password diff --git a/hooks/useDrillInfo.js b/hooks/useDrillInfo.js index 7ec4a8b3..5306f1fa 100644 --- a/hooks/useDrillInfo.js +++ b/hooks/useDrillInfo.js @@ -6,9 +6,7 @@ import { db } from "~/firebaseConfig"; export const useDrillInfo = (drillId = null) => { const { currentTeamId } = currentAuthContext(); const { data, error, isLoading } = useQuery({ - queryKey: drillId - ? ["drillInfo", currentTeamId, drillId] - : ["drillInfo", currentTeamId], + queryKey: ["drillInfo", { currentTeamId, drillId }], queryFn: async () => { if (drillId) { // Fetch specific drill info diff --git a/hooks/useEmailInfo.js b/hooks/useEmailInfo.js index 1ee2bcce..2f765437 100644 --- a/hooks/useEmailInfo.js +++ b/hooks/useEmailInfo.js @@ -8,7 +8,7 @@ export const useEmailInfo = (userId) => { error, isLoading, } = useQuery({ - queryKey: userId ? ["user", userId] : null, + queryKey: ["userEmail", userId], queryFn: async () => { if (userId) { const querySnapshot = await getDoc(doc(db, "users", userId)); diff --git a/hooks/useUserInfo.js b/hooks/useUserInfo.js index f2c22c89..97d80f92 100644 --- a/hooks/useUserInfo.js +++ b/hooks/useUserInfo.js @@ -7,9 +7,7 @@ export const useUserInfo = (userId) => { const { currentTeamId } = currentAuthContext(); const { data, error, isLoading } = useQuery({ - queryKey: userId - ? ["user", currentTeamId, userId] - : ["users", currentTeamId], + queryKey: ["user", { currentTeamId, userId }], queryFn: async () => { if (userId) { const querySnapshot = await getDoc(