diff --git a/components/pages/settings/CalendarSettingsPage.tsx b/components/pages/settings/CalendarSettingsPage.tsx index 46ff557..ee4ee64 100644 --- a/components/pages/settings/CalendarSettingsPage.tsx +++ b/components/pages/settings/CalendarSettingsPage.tsx @@ -1,4 +1,4 @@ -import {AntDesign, Ionicons} from "@expo/vector-icons"; +import {Ionicons} from "@expo/vector-icons"; import React, {useCallback, useState} from "react"; import {Button, Checkbox, Text, View} from "react-native-ui-lib"; import {ActivityIndicator, ScrollView, StyleSheet} from "react-native"; @@ -10,7 +10,6 @@ import AppleIcon from "@/assets/svgs/AppleIcon"; import GoogleIcon from "@/assets/svgs/GoogleIcon"; import OutlookIcon from "@/assets/svgs/OutlookIcon"; import ExpoLocalization from "expo-localization/src/ExpoLocalization"; -import {colorMap} from "@/constants/colorMap"; import {useSetAtom} from "jotai"; import {settingsPageIndex} from "../calendar/atoms"; import CalendarSettingsDialog from "./calendar_components/CalendarSettingsDialog"; @@ -53,13 +52,6 @@ const CalendarSettingsPage = () => { setModalVisible(false); }; - const [selectedColor, setSelectedColor] = useState( - profileData?.eventColor ?? colorMap.pink - ); - const [previousSelectedColor, setPreviousSelectedColor] = useState( - profileData?.eventColor ?? colorMap.pink - ); - const {mutateAsync: updateUserData} = useUpdateUserData(); const {mutateAsync: clearToken} = useClearTokens(); @@ -78,22 +70,6 @@ const CalendarSettingsPage = () => { fetchAndSaveAppleEvents } = useCalSync() - const debouncedUpdateUserData = useCallback( - debounce(async (color: string) => { - try { - await updateUserData({ - newUserData: { - eventColor: color, - }, - }); - } catch (error) { - console.error("Failed to update color:", error); - setSelectedColor(previousSelectedColor); - } - }, 500), - [] - ); - const debouncedUpdateFirstDayOfWeek = useCallback( debounce(async (firstDayOfWeek: string) => { try { @@ -114,12 +90,6 @@ const CalendarSettingsPage = () => { debouncedUpdateFirstDayOfWeek(firstDayOfWeek); }; - const handleChangeColor = (color: string) => { - setPreviousSelectedColor(selectedColor); - setSelectedColor(color); - debouncedUpdateUserData(color); - }; - return ( setPageIndex(0)}> @@ -140,52 +110,6 @@ const CalendarSettingsPage = () => { Calendar settings - - - Event Color Preference - - - handleChangeColor(colorMap.pink)}> - - {selectedColor == colorMap.pink && ( - - )} - - - handleChangeColor(colorMap.orange)} - > - - {selectedColor == colorMap.orange && ( - - )} - - - handleChangeColor(colorMap.green)}> - - {selectedColor == colorMap.green && ( - - )} - - - handleChangeColor(colorMap.teal)}> - - {selectedColor == colorMap.teal && ( - - )} - - - handleChangeColor(colorMap.purple)} - > - - {selectedColor == colorMap.purple && ( - - )} - - - - Weekly Start Date diff --git a/components/pages/settings/user_settings_views/MyProfile.tsx b/components/pages/settings/user_settings_views/MyProfile.tsx index cbcd0a6..a3064c1 100644 --- a/components/pages/settings/user_settings_views/MyProfile.tsx +++ b/components/pages/settings/user_settings_views/MyProfile.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, {useCallback, useEffect, useRef, useState} from "react"; import { StyleSheet, TouchableOpacity } from "react-native"; import { ScrollView } from "react-native-gesture-handler"; import * as ImagePicker from "expo-image-picker"; @@ -20,6 +20,7 @@ import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData"; import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture"; import { colorMap } from "@/constants/colorMap"; import DeleteProfileDialogs from "../user_components/DeleteProfileDialogs"; +import {AntDesign} from "@expo/vector-icons"; const MyProfile = () => { const { user, profileData } = useAuthContext(); @@ -34,6 +35,13 @@ const MyProfile = () => { string | ImagePicker.ImagePickerAsset | null >(profileData?.pfp || null); + const [selectedColor, setSelectedColor] = useState( + profileData?.eventColor ?? colorMap.pink + ); + const [previousSelectedColor, setPreviousSelectedColor] = useState( + profileData?.eventColor ?? colorMap.pink + ); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); const handleHideDeleteDialog = () => { @@ -102,6 +110,28 @@ const MyProfile = () => { ? profileImage.uri : profileImage; + const handleChangeColor = (color: string) => { + setPreviousSelectedColor(selectedColor); + setSelectedColor(color); + debouncedUpdateUserData(color); + }; + + const debouncedUpdateUserData = useCallback( + debounce(async (color: string) => { + try { + await updateUserData({ + newUserData: { + eventColor: color, + }, + }); + } catch (error) { + console.error("Failed to update color:", error); + setSelectedColor(previousSelectedColor); + } + }, 500), + [] + ); + return ( @@ -215,6 +245,52 @@ const MyProfile = () => { + + + Color Preference + + + handleChangeColor(colorMap.pink)}> + + {selectedColor == colorMap.pink && ( + + )} + + + handleChangeColor(colorMap.orange)} + > + + {selectedColor == colorMap.orange && ( + + )} + + + handleChangeColor(colorMap.green)}> + + {selectedColor == colorMap.green && ( + + )} + + + handleChangeColor(colorMap.teal)}> + + {selectedColor == colorMap.teal && ( + + )} + + + handleChangeColor(colorMap.purple)} + > + + {selectedColor == colorMap.purple && ( + + )} + + + +