Merge branch 'dev' of https://github.com/urosran/cally into dev

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<string>(
-        profileData?.eventColor ?? colorMap.pink
-    );
-    const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
-        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 (
         <ScrollView>
             <TouchableOpacity onPress={() => setPageIndex(0)}>
@@ -140,52 +110,6 @@ const CalendarSettingsPage = () => {
             </TouchableOpacity>
             <View marginH-30 marginB-30>
                 <Text style={styles.subTitle}>Calendar settings</Text>
-                <View style={styles.card}>
-                    <Text style={styles.cardTitle} marginB-14>
-                        Event Color Preference
-                    </Text>
-                    <View row spread>
-                        <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={() => handleChangeColor(colorMap.orange)}
-                        >
-                            <View style={styles.colorBox} backgroundColor={colorMap.orange}>
-                                {selectedColor == colorMap.orange && (
-                                    <AntDesign name="check" size={30} color="white"/>
-                                )}
-                            </View>
-                        </TouchableOpacity>
-                        <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={() => handleChangeColor(colorMap.teal)}>
-                            <View style={styles.colorBox} backgroundColor={colorMap.teal}>
-                                {selectedColor == colorMap.teal && (
-                                    <AntDesign name="check" size={30} color="white"/>
-                                )}
-                            </View>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            onPress={() => handleChangeColor(colorMap.purple)}
-                        >
-                            <View style={styles.colorBox} backgroundColor={colorMap.purple}>
-                                {selectedColor == colorMap.purple && (
-                                    <AntDesign name="check" size={30} color="white"/>
-                                )}
-                            </View>
-                        </TouchableOpacity>
-                    </View>
-                </View>
                 <View style={styles.card}>
                     <Text style={styles.cardTitle}>Weekly Start Date</Text>
                     <View row marginV-5 marginT-20>

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<string>(
+      profileData?.eventColor ?? colorMap.pink
+  );
+  const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
+      profileData?.eventColor ?? colorMap.pink
+  );
+
   const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(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 (
     <ScrollView style={{ paddingBottom: 20, flex: 1 }}>
       <View style={styles.card}>
@@ -215,6 +245,52 @@ const MyProfile = () => {
           </Picker>
         </View>
       </View>
+      <View style={styles.card}>
+        <Text style={styles.cardTitle} marginB-14>
+          Color Preference
+        </Text>
+        <View row spread>
+          <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={() => handleChangeColor(colorMap.orange)}
+          >
+            <View style={styles.colorBox} backgroundColor={colorMap.orange}>
+              {selectedColor == colorMap.orange && (
+                  <AntDesign name="check" size={30} color="white"/>
+              )}
+            </View>
+          </TouchableOpacity>
+          <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={() => handleChangeColor(colorMap.teal)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.teal}>
+              {selectedColor == colorMap.teal && (
+                  <AntDesign name="check" size={30} color="white"/>
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity
+              onPress={() => handleChangeColor(colorMap.purple)}
+          >
+            <View style={styles.colorBox} backgroundColor={colorMap.purple}>
+              {selectedColor == colorMap.purple && (
+                  <AntDesign name="check" size={30} color="white"/>
+              )}
+            </View>
+          </TouchableOpacity>
+        </View>
+      </View>
       <Button
         size="large"
         backgroundColor="#ff1637"
@@ -248,6 +324,17 @@ const timeZoneItems = Object.keys(tz.zones)
   ));
 
 const styles = StyleSheet.create({
+  cardTitle: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
+  colorBox: {
+    aspectRatio: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    width: 51,
+    borderRadius: 12,
+  },
   card: {
     marginVertical: 15,
     backgroundColor: "white",

components/pages/todos/AddChoreDialog.tsx

@@ -25,6 +25,7 @@ import CalendarIcon from "@/assets/svgs/CalendarIcon";
 import ClockOIcon from "@/assets/svgs/ClockOIcon";
 import ProfileIcon from "@/assets/svgs/ProfileIcon";
 import RepeatFreq from "./RepeatFreq";
+import {useAuthContext} from "@/contexts/AuthContext";
 
 interface IAddChoreDialog {
     isVisible: boolean;
@@ -44,6 +45,7 @@ const defaultTodo = {
 };
 
 const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
+    const {user} = useAuthContext()
     const {addToDo, updateToDo} = useToDosContext();
     const [todo, setTodo] = useState<IToDo>(
         addChoreDialogProps.selectedTodo ?? defaultTodo
@@ -57,6 +59,11 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
     const titleRef = useRef<TextFieldRef>(null)
 
     const {data: members} = useGetFamilyMembers();
+    let sortedMembers = members?.sort((a, b) => {
+        if (a.uid === user?.uid) return -1;
+        if (b.uid === user?.uid) return 1;
+        return 0;
+    })
 
     const handleClose = () => {
         setTodo(defaultTodo);
@@ -272,7 +279,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                             />
                         )}
                     >
-                        {members?.map((member) => (
+                        {sortedMembers?.map((member) => (
                             <Picker.Item
                                 key={member.uid}
                                 label={member?.firstName + " " + member?.lastName}

components/shared/PointsSlider.tsx

@@ -13,7 +13,7 @@ const PointsSlider = (props: {
           value={props.points}
           onValueChange={(value) => props.setPoints(value)}
           minimumValue={0}
-          step={10}
+          step={5}
           thumbTintColor="white"
           minimumTrackTintColor="#91d5ff"
           thumbStyle={{borderWidth: 3, borderColor: '#91d5ff'}}
@@ -21,7 +21,7 @@ const PointsSlider = (props: {
         />
         <View row spread>
           <Text style={{fontSize: 13, color: '#858585'}}>0</Text>
-          <Text style={{fontSize: 13, color: '#858585'}}>50</Text>
+          <Text style={{fontSize: 13, color: '#858585', marginLeft: 15}}>50</Text>
           <Text style={{fontSize: 13, color: '#858585'}}>100</Text>
         </View>
       </View>

hooks/firebase/useCreateTodo.ts

@@ -61,9 +61,8 @@ export const useCreateTodo = () => {
                             dates.push(newDate);
                         });
 
-                        // TODO: for the next 52 weeks
                         let index = 1;
-                        for (let i = 0; i < 4; i++) {
+                        for (let i = 0; i < 52; i++) {
                            dates?.forEach((dateToAdd) => {
                                index ++;
                                let newTodoDate = addWeeks(dateToAdd, i);

hooks/firebase/useUpdateTodo.ts

@@ -73,7 +73,7 @@ export const useUpdateTodo = () => {
                                 dates.push(newDate);
                             });
 
-                            let todosToAddCycles = 4;
+                            let todosToAddCycles = 52;
                             if (firstTodo?.repeatType === REPEAT_TYPE.EVERY_WEEK) {
                                 todosToAddCycles = filteredTodos?.length / firstTodo?.repeatDays?.length;
                             }