Get Events fix

components/pages/calendar/CalendarHeader.tsx

@@ -6,26 +6,25 @@ import {StyleSheet} from "react-native";
 import {useAtom} from "jotai";
 import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
 
-
 export const CalendarHeader = memo(() => {
-    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom)
-    const [mode, setMode] = useAtom(modeAtom)
+    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
+    const [mode, setMode] = useAtom(modeAtom);
 
     const handleSegmentChange = (index: number) => {
         const selectedMode = modeMap.get(index);
         if (selectedMode) {
-            setMode(selectedMode as "day" | "week" | "month");
+            setTimeout(() => {
+                setMode(selectedMode as "day" | "week" | "month");
+            }, 150);
         }
     };
 
     const handleMonthChange = (month: string) => {
         const currentDay = selectedDate.getDate();
         const currentYear = selectedDate.getFullYear();
-
         const newMonthIndex = months.indexOf(month);
 
         const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
-
         setSelectedDate(updatedDate);
     };
 
@@ -89,14 +88,4 @@ const styles = StyleSheet.create({
         fontSize: 12,
         fontFamily: "Manrope_600SemiBold",
     },
-    calHeader: {
-        borderWidth: 0,
-    },
-    dayModeHeader: {
-        alignSelf: "flex-start",
-        justifyContent: "space-between",
-        alignContent: "center",
-        width: 38,
-        right: 42,
-    },
 });

components/pages/calendar/EventCalendar.tsx

@@ -1,4 +1,4 @@
-import React, {memo} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {Calendar} from "react-native-big-calendar";
 import {StyleSheet} from "react-native";
 import {useGetEvents} from "@/hooks/firebase/useGetEvents";
@@ -11,44 +11,71 @@ import {
     selectedNewEventDateAtom
 } from "@/components/pages/calendar/atoms";
 import {useAuthContext} from "@/contexts/AuthContext";
+import {CalendarEvent} from "@/components/pages/calendar/interfaces";
 
 interface EventCalendarProps {
     calendarHeight: number;
 }
 
-export const EventCalendar: React.FC<EventCalendarProps> = memo(({calendarHeight}) => {
+export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
     const {data: events} = useGetEvents();
-    const {profileData} = useAuthContext()
-    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom)
-    const [mode, setMode] = useAtom(modeAtom)
-    const setEditVisible = useSetAtom(editVisibleAtom)
-    const setEventForEdit = useSetAtom(eventForEditAtom)
-    const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom)
+    const {profileData} = useAuthContext();
+    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
+    const mode = useAtomValue(modeAtom);
+    const setEditVisible = useSetAtom(editVisibleAtom);
+    const setEventForEdit = useSetAtom(eventForEditAtom);
+    const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
-    console.log("Events: ", events)
+    const handlePressEvent = useCallback((event: CalendarEvent) => {
+        setEditVisible(true);
+        setEventForEdit(event);
+    }, [setEditVisible, setEventForEdit]);
+
+    const handlePressCell = useCallback(
+        (date: Date) => {
+            if (mode === "day") {
+                setSelectedNewEndDate(date);
+            } else {
+                setSelectedDate(date);
+            }
+        },
+        [mode, setSelectedNewEndDate, setSelectedDate]
+    );
+
+    const handleSwipeEnd = useCallback((date: Date) => {
+        setSelectedDate(date);
+    }, [setSelectedDate]);
+
+    const memoizedEventCellStyle = useCallback(
+        (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
+        []
+    );
+
+    const memoizedWeekStartsOn = useMemo(
+        () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
+        [profileData]
+    );
+
+    const memoizedHeaderContentStyle = useMemo(
+        () => (mode === "day" ? styles.dayModeHeader : {}),
+        [mode]
+    );
 
     return (
         <Calendar
             bodyContainerStyle={styles.calHeader}
+            swipeEnabled
             mode={mode}
             events={events ?? []}
-            eventCellStyle={(event) => ({backgroundColor: event.eventColor})}
-            onPressEvent={(event) => {
-                setEditVisible(true);
-                setEventForEdit(event);
-            }}
-            weekStartsOn={profileData?.firstDayOfWeek === "Mondays" ? 1 : 0}
+            eventCellStyle={memoizedEventCellStyle}
+            onPressEvent={handlePressEvent}
+            weekStartsOn={memoizedWeekStartsOn}
             height={calendarHeight}
             activeDate={selectedDate}
             date={selectedDate}
-            onPressCell={mode === "day" ? setSelectedNewEndDate: (date) => {
-                setSelectedDate(date)
-                setMode("day")
-            }}
-            headerContentStyle={mode === "day" ? styles.dayModeHeader : {}}
-            onSwipeEnd={(date) => {
-                setSelectedDate(date);
-            }}
+            onPressCell={handlePressCell}
+            headerContentStyle={memoizedHeaderContentStyle}
+            onSwipeEnd={handleSwipeEnd}
         />
     );
 });
@@ -68,4 +95,4 @@ const styles = StyleSheet.create({
         width: 38,
         right: 42,
     },
-});
+});

components/pages/settings/CalendarSettingsPage.tsx

@@ -2,7 +2,6 @@ import {AntDesign, Ionicons} from "@expo/vector-icons";
 import React, {useCallback, useEffect, useState} from "react";
 import {Button, Checkbox, Text, View} from "react-native-ui-lib";
 import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
-import {colorMap} from "@/contexts/SettingsContext";
 import {TouchableOpacity} from "react-native-gesture-handler";
 import {useAuthContext} from "@/contexts/AuthContext";
 import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
@@ -19,6 +18,7 @@ import {useFetchAndSaveOutlookEvents} from "@/hooks/useFetchAndSaveOutlookEvents
 import {useFetchAndSaveAppleEvents} from "@/hooks/useFetchAndSaveAppleEvents";
 import * as AppleAuthentication from 'expo-apple-authentication';
 import ExpoLocalization from "expo-localization/src/ExpoLocalization";
+import {colorMap} from "@/constants/colorMap";
 
 const googleConfig = {
     androidClientId: