Colors, fix family view, updated version

components/pages/settings/CalendarSettingsPage.tsx

@@ -1,5 +1,5 @@
 import {AntDesign, Ionicons} from "@expo/vector-icons";
-import React, {useState} from "react";
+import React, {useCallback, useState} from "react";
 import {Button, Checkbox, Text, View} from "react-native-ui-lib";
 import {ScrollView, StyleSheet} from "react-native";
 import {colorMap} from "@/contexts/SettingsContext";
@@ -11,6 +11,7 @@ import {useAuthContext} from "@/contexts/AuthContext";
 import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
 import {GoogleSignin} from "@react-native-google-signin/google-signin";
 import * as AuthSession from "expo-auth-session";
+import debounce from "debounce";
 
 GoogleSignin.configure({
     webClientId:
@@ -40,10 +41,12 @@ const microsoftConfig = {
 const CalendarSettingsPage = (props: {
     setSelectedPage: (page: number) => void;
 }) => {
-    const [selectedColor, setSelectedColor] = useState<string>(colorMap.pink);
     const [startDate, setStartDate] = useState<boolean>(true);
     const {profileData} = useAuthContext();
 
+    const [selectedColor, setSelectedColor] = useState<string>(profileData?.eventColor ?? colorMap.pink);
+    const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(profileData?.eventColor ?? colorMap.pink);
+
     const {mutateAsync: createEventFromProvider} = useCreateEventFromProvider();
     const {mutateAsync: updateUserData} = useUpdateUserData();
 
@@ -162,6 +165,28 @@ const CalendarSettingsPage = (props: {
         }
     };
 
+    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 handleChangeColor = (color: string) => {
+        setPreviousSelectedColor(selectedColor)
+        setSelectedColor(color);
+        debouncedUpdateUserData(color);
+    };
+
     return (
         <ScrollView>
             <View marginH-30>
@@ -179,35 +204,35 @@ const CalendarSettingsPage = (props: {
                         Event Color Preference
                     </Text>
                     <View row spread>
-                        <TouchableOpacity onPress={() => setSelectedColor(colorMap.pink)}>
+                        <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
                             <View style={styles.colorBox} backgroundColor={colorMap.pink}>
                                 {selectedColor == colorMap.pink && (
                                     <AntDesign name="check" size={30} color="white"/>
                                 )}
                             </View>
                         </TouchableOpacity>
-                        <TouchableOpacity onPress={() => setSelectedColor(colorMap.orange)}>
+                        <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}>
                             <View style={styles.colorBox} backgroundColor={colorMap.orange}>
                                 {selectedColor == colorMap.orange && (
                                     <AntDesign name="check" size={30} color="white"/>
                                 )}
                             </View>
                         </TouchableOpacity>
-                        <TouchableOpacity onPress={() => setSelectedColor(colorMap.green)}>
+                        <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
                             <View style={styles.colorBox} backgroundColor={colorMap.green}>
                                 {selectedColor == colorMap.green && (
                                     <AntDesign name="check" size={30} color="white"/>
                                 )}
                             </View>
                         </TouchableOpacity>
-                        <TouchableOpacity onPress={() => setSelectedColor(colorMap.teal)}>
+                        <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
                             <View style={styles.colorBox} backgroundColor={colorMap.teal}>
                                 {selectedColor == colorMap.teal && (
                                     <AntDesign name="check" size={30} color="white"/>
                                 )}
                             </View>
                         </TouchableOpacity>
-                        <TouchableOpacity onPress={() => setSelectedColor(colorMap.purple)}>
+                        <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}>
                             <View style={styles.colorBox} backgroundColor={colorMap.purple}>
                                 {selectedColor == colorMap.purple && (
                                     <AntDesign name="check" size={30} color="white"/>
@@ -344,34 +369,34 @@ const CalendarSettingsPage = (props: {
 
 const styles = StyleSheet.create({
     addCalBtn: {
-    backgroundColor: "#ffffff",
-    marginBottom: 15,
-    justifyContent: "flex-start",
-    paddingLeft: 25,
-  },
-  backBtn: {
-    backgroundColor: "red",
-    marginLeft: -2,
-    justifyContent: "flex-start",
-  },
-  card: {
-    backgroundColor: "white",
-    width: "100%",
-    padding: 20,
-    paddingBottom: 30,
-    marginTop: 20,
-    borderRadius: 20,
-  },
-  colorBox: {
-    aspectRatio: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    width: 50,
-    borderRadius: 12,
-  },
-  checkbox: {
-    borderRadius: 50,
-  },
+        backgroundColor: "#ffffff",
+        marginBottom: 15,
+        justifyContent: "flex-start",
+        paddingLeft: 25,
+    },
+    backBtn: {
+        backgroundColor: "red",
+        marginLeft: -2,
+        justifyContent: "flex-start",
+    },
+    card: {
+        backgroundColor: "white",
+        width: "100%",
+        padding: 20,
+        paddingBottom: 30,
+        marginTop: 20,
+        borderRadius: 20,
+    },
+    colorBox: {
+        aspectRatio: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        width: 50,
+        borderRadius: 12,
+    },
+    checkbox: {
+        borderRadius: 50,
+    },
 });
 
 export default CalendarSettingsPage;