All day event package

calendar-integration/google-calendar-utils.js

@@ -1,50 +1,64 @@
 export async function fetchGoogleCalendarEvents(token, email, familyId, startDate, endDate) {
-    const response = await fetch(
-        `https://www.googleapis.com/calendar/v3/calendars/primary/events?single_events=true&time_min=${startDate}&time_max=${endDate}`,
-        {
+    const googleEvents = [];
+    let pageToken = null;
+
+    do {
+        const url = new URL(`https://www.googleapis.com/calendar/v3/calendars/primary/events`);
+        url.searchParams.set('singleEvents', 'true');
+        url.searchParams.set('timeMin', startDate);
+        url.searchParams.set('timeMax', endDate);
+        if (pageToken) url.searchParams.set('pageToken', pageToken);
+
+        const response = await fetch(url.toString(), {
             headers: {
                 Authorization: `Bearer ${token}`,
             },
-        },
-    );
+        });
 
-    const data = await response.json();
-    const googleEvents = [];
+        const data = await response.json();
 
-    data.items?.forEach((item) => {
-        let isAllDay = false;
-        let startDateTime, endDateTime;
-
-        if (item.start) {
-            if (item.start.dateTime) {
-                startDateTime = new Date(item.start.dateTime);
-            } else if (item.start.date) {
-                startDateTime = new Date(item.start.date);
-                isAllDay = true;
-            }
+        if (!response.ok) {
+            throw new Error(`Error fetching events: ${data.error?.message || response.statusText}`);
         }
 
-        if (item.end) {
-            if (item.end.dateTime) {
-                endDateTime = new Date(item.end.dateTime);
-            } else if (item.end.date) {
-                endDateTime = new Date(item.end.date);
-                isAllDay = true;
+        data.items?.forEach((item) => {
+            let isAllDay = false;
+            let startDateTime, endDateTime;
+
+            if (item.start) {
+                if (item.start.dateTime) {
+                    startDateTime = new Date(item.start.dateTime);
+                } else if (item.start.date) {
+                    startDateTime = new Date(item.start.date);
+                    isAllDay = true;
+                }
             }
-        }
 
-        const googleEvent = {
-            id: item.id,
-            title: item.summary || "",
-            startDate: startDateTime,
-            endDate: endDateTime,
-            allDay: isAllDay,
-            familyId,
-            email,
-        };
+            if (item.end) {
+                if (item.end.dateTime) {
+                    endDateTime = new Date(item.end.dateTime);
+                } else if (item.end.date) {
+                    endDateTime = new Date(item.end.date);
+                    isAllDay = true;
+                }
+            }
 
-        googleEvents.push(googleEvent);
-    });
+            const googleEvent = {
+                id: item.id,
+                title: item.summary || "",
+                startDate: startDateTime,
+                endDate: endDateTime,
+                allDay: isAllDay,
+                familyId,
+                email,
+            };
 
-    return {googleEvents, success: response.ok};
+            googleEvents.push(googleEvent);
+        });
+
+        // Prepare for the next page if it exists
+        pageToken = data.nextPageToken;
+    } while (pageToken);
+
+    return { googleEvents, success: true };
 }

components/pages/calendar/CalendarHeader.tsx

@@ -14,6 +14,7 @@ import { useAtom } from "jotai";
 import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
 import { format, isSameDay } from "date-fns";
 import { useAuthContext } from "@/contexts/AuthContext";
+import {useIsMutating} from "react-query";
 
 export const CalendarHeader = memo(() => {
   const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);

components/pages/calendar/CalendarPage.tsx

@@ -11,7 +11,7 @@ export default function CalendarPage() {
             paddingT-0
         >
             <HeaderTemplate
-                message={"Let's get your week started!"}
+                message={"Let's get your week started !"}
                 isWelcome
                 isCalendar={true}
             />

components/pages/calendar/EventCalendar.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {Calendar} from "react-native-big-calendar";
-import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
+import {ActivityIndicator, ScrollView, StyleSheet, View, ViewStyle} from "react-native";
 import {useGetEvents} from "@/hooks/firebase/useGetEvents";
 import {useAtom, useSetAtom} from "jotai";
 import {
@@ -14,6 +14,9 @@ import {useAuthContext} from "@/contexts/AuthContext";
 import {CalendarEvent} from "@/components/pages/calendar/interfaces";
 import {Text} from "react-native-ui-lib";
 import {addDays, compareAsc, isWithinInterval, subDays} from "date-fns";
+import {useCalSync} from "@/hooks/useCalSync";
+import { useIsMutating } from "react-query";
+import {useSyncEvents} from "@/hooks/useSyncOnScroll";
 
 interface EventCalendarProps {
     calendarHeight: number;
@@ -37,6 +40,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         const setEventForEdit = useSetAtom(eventForEditAtom);
         const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
+        const {isSyncing} = useSyncEvents()
         const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
         const todaysDate = new Date();
@@ -75,7 +79,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         );
 
         const memoizedEventCellStyle = useCallback(
-            (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
+            (event: CalendarEvent) => ({backgroundColor: event.eventColor, fontSize: 14}),
             []
         );
 
@@ -211,6 +215,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         if (isLoading) {
             return (
                 <View style={styles.loadingContainer}>
+                    {isSyncing && <Text>Syncing...</Text>}
                     <ActivityIndicator size="large" color="#0000ff"/>
                 </View>
             );
@@ -219,52 +224,65 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         // console.log(enrichedEvents, filteredEvents)
 
         return (
-            <Calendar
-                bodyContainerStyle={styles.calHeader}
-                swipeEnabled
-                mode={mode}
-                // enableEnrichedEvents={true}
-                sortedMonthView
-                // enrichedEventsByDate={enrichedEvents}
-                events={filteredEvents}
-                // eventCellStyle={memoizedEventCellStyle}
-                onPressEvent={handlePressEvent}
-                weekStartsOn={memoizedWeekStartsOn}
-                height={calendarHeight}
-                activeDate={todaysDate}
-                date={selectedDate}
-                onPressCell={handlePressCell}
-                headerContentStyle={memoizedHeaderContentStyle}
-                onSwipeEnd={handleSwipeEnd}
-                scrollOffsetMinutes={offsetMinutes}
-                theme={{
-                    palette: {
-                        nowIndicator: profileData?.eventColor || "#fd1575",
-                        gray: {
-                            "100": "#e8eaed",
-                            "200": "#e8eaed",
-                            "500": "#b7b7b7",
-                            "800": "#919191",
+            <>
+                {isSyncing && (
+                    <View style={styles.loadingContainer}>
+                        {isSyncing && <Text>Syncing...</Text>}
+                        <ActivityIndicator size="large" color="#0000ff"/>
+                    </View>
+                )}
+                <Calendar
+                    bodyContainerStyle={styles.calHeader}
+                    swipeEnabled
+                    mode={mode}
+                    // enableEnrichedEvents={true}
+                    sortedMonthView
+                    // enrichedEventsByDate={enrichedEvents}
+                    events={filteredEvents}
+                    eventCellStyle={memoizedEventCellStyle}
+                    onPressEvent={handlePressEvent}
+                    weekStartsOn={memoizedWeekStartsOn}
+                    height={calendarHeight}
+                    activeDate={todaysDate}
+                    date={selectedDate}
+                    onPressCell={handlePressCell}
+                    headerContentStyle={memoizedHeaderContentStyle}
+                    onSwipeEnd={handleSwipeEnd}
+                    scrollOffsetMinutes={offsetMinutes}
+                    theme={{
+                        palette: {
+                            nowIndicator: profileData?.eventColor || "#fd1575",
+                            gray: {
+                                "100": "#e8eaed",
+                                "200": "#e8eaed",
+                                "500": "#b7b7b7",
+                                "800": "#919191",
+                            },
                         },
-                    },
-                    typography: {
-                        fontFamily: "PlusJakartaSans_500Medium",
-                        sm: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
-                        xl: {
+                        typography: {
                             fontFamily: "PlusJakartaSans_500Medium",
-                            fontSize: 16,
+                            sm: {fontFamily: "Manrope_600SemiBold", fontSize: 8},
+                            xl: {
+                                fontFamily: "PlusJakartaSans_500Medium",
+                                fontSize: 14,
+                            },
+                            moreLabel: {},
+                            xs: {fontSize: 10},
                         },
-                        moreLabel: {},
-                        xs: {fontSize: 10},
-                    },
-                }}
-                dayHeaderStyle={dateStyle}
-                dayHeaderHighlightColor={"white"}
-                showAdjacentMonths
-                hourStyle={styles.hourStyle}
-                ampm
-                // renderCustomDateForMonth={renderCustomDateForMonth}
-            />
+                    }}
+                    dayHeaderStyle={dateStyle}
+                    dayHeaderHighlightColor={"white"}
+                    showAdjacentMonths
+                    // headerContainerStyle={mode !== "month" ? {
+                    //     overflow:"hidden",
+                    //     height: 12,
+                    // } : {}}
+                    hourStyle={styles.hourStyle}
+                    ampm
+                    // renderCustomDateForMonth={renderCustomDateForMonth}
+                />
+            </>
+
         );
     }
 );
@@ -291,6 +309,11 @@ const styles = StyleSheet.create({
         flex: 1,
         justifyContent: "center",
         alignItems: "center",
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        zIndex: 100,
+        backgroundColor: "rgba(255, 255, 255, 0.9)",
     },
     dayHeader: {
         backgroundColor: "#4184f2",

firebase/functions/index.js

@@ -181,7 +181,7 @@ exports.generateCustomToken = onRequest(async (request, response) => {
     }
 });
 
-exports.refreshTokens = functions.pubsub.schedule('every 1 hours').onRun(async (context) => {
+exports.refreshTokens = functions.pubsub.schedule('every 45 minutes').onRun(async (context) => {
     console.log('Running token refresh job...');
 
     const profilesSnapshot = await db.collection('Profiles').get();

hooks/firebase/useGetEvents.ts

@@ -20,6 +20,7 @@ export const useGetEvents = () => {
 
             // If family view is active, include family, creator, and attendee events
             if (isFamilyView) {
+
                 const familyQuery = db.collection("Events").where("familyID", "==", familyId);
                 const creatorQuery = db.collection("Events").where("creatorId", "==", userId);
                 const attendeeQuery = db.collection("Events").where("attendees", "array-contains", userId);
@@ -83,7 +84,7 @@ export const useGetEvents = () => {
                     const eventColor = profileData?.eventColor || colorMap.pink;
 
                     return {
-                        id: event.id || Math.random().toString(36).substr(2, 9), // Generate temp ID if missing
+                        id: event.id || Math.random().toString(36).slice(2, 9), // Generate temp ID if missing
                         title: event.title,
                         start: new Date(event.startDate.seconds * 1000),
                         end: new Date(event.endDate.seconds * 1000),
@@ -96,5 +97,6 @@ export const useGetEvents = () => {
         },
         staleTime: Infinity,
         cacheTime: Infinity,
+        keepPreviousData: true,
     });
 };

hooks/useCalSync.ts

@@ -46,14 +46,9 @@ export const useCalSync = () => {
     const {profileData} = useAuthContext();
 
     const {mutateAsync: updateUserData} = useUpdateUserData();
-    const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} =
-        useFetchAndSaveGoogleEvents();
-    const {
-        mutateAsync: fetchAndSaveOutlookEvents,
-        isLoading: isSyncingOutlook,
-    } = useFetchAndSaveOutlookEvents();
-    const {mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple} =
-        useFetchAndSaveAppleEvents();
+    const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} = useFetchAndSaveGoogleEvents();
+    const {mutateAsync: fetchAndSaveOutlookEvents, isLoading: isSyncingOutlook} = useFetchAndSaveOutlookEvents();
+    const {mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple} = useFetchAndSaveAppleEvents();
 
     WebBrowser.maybeCompleteAuthSession();
     const [_, response, promptAsync] = Google.useAuthRequest(googleConfig);
@@ -74,6 +69,7 @@ export const useCalSync = () => {
                     }
                 );
 
+                console.log(response)
                 const userInfo = await userInfoResponse.json();
                 const googleMail = userInfo.email;
 
@@ -89,6 +85,7 @@ export const useCalSync = () => {
 
                 await fetchAndSaveGoogleEvents({
                     token: accessToken,
+                    refreshToken: refreshToken,
                     email: googleMail,
                 });
             }
@@ -283,6 +280,7 @@ export const useCalSync = () => {
         isConnectedToGoogle,
         isSyncingOutlook,
         isSyncingGoogle,
-        isSyncingApple
+        isSyncingApple,
+        isSyncing: isSyncingApple || isSyncingOutlook || isSyncingGoogle
     }
 }

hooks/useFetchAndSaveAppleEvents.ts

@@ -9,11 +9,12 @@ export const useFetchAndSaveAppleEvents = () => {
     const {mutateAsync: createEventsFromProvider} = useCreateEventsFromProvider();
 
     return useMutation({
-        mutationKey: ["fetchAndSaveAppleEvents"],
-        mutationFn: async ({token, email}: { token?: string, email?: string }) => {
-            console.log("CALLL")
-            const timeMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
-            const timeMax = new Date(new Date().setFullYear(new Date().getFullYear() + 5));
+        mutationKey: ["fetchAndSaveAppleEvents", "sync"],
+        mutationFn: async ({token, email, date}: { token?: string; email?: string, date?: Date }) => {
+            const baseDate = date || new Date();
+            const timeMin = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() - 1));
+            const timeMax = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() + 1));
+
             try {
                 const response = await fetchiPhoneCalendarEvents(
                     profileData?.familyId!,

hooks/useFetchAndSaveGoogleEvents.ts

@@ -1,56 +1,107 @@
-import {useMutation, useQueryClient} from "react-query";
-import {fetchGoogleCalendarEvents} from "@/calendar-integration/google-calendar-utils";
-import {useAuthContext} from "@/contexts/AuthContext";
-import {useCreateEventsFromProvider} from "@/hooks/firebase/useCreateEvent";
-import {useClearTokens} from "@/hooks/firebase/useClearTokens";
+import { useMutation, useQueryClient } from "react-query";
+import { fetchGoogleCalendarEvents } from "@/calendar-integration/google-calendar-utils";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { useCreateEventsFromProvider } from "@/hooks/firebase/useCreateEvent";
+import { useClearTokens } from "@/hooks/firebase/useClearTokens";
+import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 
 export const useFetchAndSaveGoogleEvents = () => {
-    const queryClient = useQueryClient()
-    const {profileData} = useAuthContext();
-    const {mutateAsync: createEventsFromProvider} = useCreateEventsFromProvider();
-    const {mutateAsync: clearToken} = useClearTokens();
+    const queryClient = useQueryClient();
+    const { profileData } = useAuthContext();
+    const { mutateAsync: createEventsFromProvider } = useCreateEventsFromProvider();
+    const { mutateAsync: clearToken } = useClearTokens();
+    const { mutateAsync: updateUserData } = useUpdateUserData();
 
     return useMutation({
-        mutationKey: ["fetchAndSaveGoogleEvents"],
-        mutationFn: async ({token, email}: { token?: string; email?: string }) => {
-            console.log("Fetching Google Calendar events...");
-            const timeMin = new Date(new Date().setMonth(new Date().getMonth() - 2));
-            const timeMax = new Date(new Date().setMonth(new Date().getMonth() + 2));
+        mutationKey: ["fetchAndSaveGoogleEvents", "sync"],
+        mutationFn: async ({ token, email, date, refreshToken }: { token?: string; refreshToken?: string; email?: string; date?: Date }) => {
+            const baseDate = date || new Date();
+            const timeMin = new Date(baseDate.setMonth(baseDate.getMonth() - 1)).toISOString().slice(0, -5) + "Z";
+            const timeMax = new Date(baseDate.setMonth(baseDate.getMonth() + 2)).toISOString().slice(0, -5) + "Z";
 
             console.log("Token: ", token);
 
-            try {
-                const response = await fetchGoogleCalendarEvents(
-                    token,
-                    email,
-                    profileData?.familyId,
-                    timeMin.toISOString().slice(0, -5) + "Z",
-                    timeMax.toISOString().slice(0, -5) + "Z"
-                );
+            const tryFetchEvents = async (isRetry = false) => {
+                try {
+                    const response = await fetchGoogleCalendarEvents(
+                        token,
+                        email,
+                        profileData?.familyId,
+                        timeMin,
+                        timeMax
+                    );
 
-                if(!response.success) {
-                    await clearToken({email: email!, provider: "google"})
-                    return
-                }
-
-                console.log("Google Calendar events fetched:", response);
-
-                const items = response?.googleEvents?.map((item) => {
-                    if (item.allDay) {
-                        item.startDate = new Date(new Date(item.startDate).setHours(0, 0, 0, 0));
-                        item.endDate = item.startDate;
+                    if (!response.success) {
+                        await clearToken({ email: email!, provider: "google" });
+                        return; // Stop refetching if clearing the token
                     }
-                    return item;
-                }) || [];
 
-                await createEventsFromProvider(items);
-            } catch (error) {
-                console.error("Error fetching Google Calendar events:", error);
-                throw error; // Ensure errors are propagated to the mutation
-            }
+                    console.log("Google Calendar events fetched:", response);
+
+                    const items = response?.googleEvents?.map((item) => {
+                        if (item.allDay) {
+                            item.startDate = new Date(item.startDate.setHours(0, 0, 0, 0));
+                            item.endDate = item.startDate;
+                        }
+                        return item;
+                    }) || [];
+
+                    await createEventsFromProvider(items);
+                } catch (error) {
+                    console.error("Error fetching Google Calendar events:", error);
+
+                    if (!isRetry) {
+                        const refreshedToken = await handleRefreshToken(email, refreshToken);
+                        if (refreshedToken) {
+                            await updateUserData({
+                                newUserData: {
+                                    googleAccounts: {
+                                        ...profileData.googleAccounts,
+                                        [email!]: { ...profileData.googleAccounts[email!], accessToken: refreshedToken },
+                                    },
+                                },
+                            });
+                            return tryFetchEvents(true); // Retry once after refreshing
+                        } else {
+                            await clearToken({ email: email!, provider: "google" });
+                            console.error(`Token refresh failed; token cleared for ${email}`);
+                            throw error;
+                        }
+                    } else {
+                        console.error(`Retry failed after refreshing token for user ${profileData?.email}:`, error.message);
+                        throw error;
+                    }
+                }
+            };
+
+            return tryFetchEvents();
         },
         onSuccess: () => {
-            queryClient.invalidateQueries(["events"])
+            queryClient.invalidateQueries(["events"]);
         },
     });
 };
+
+async function handleRefreshToken(email: string, refreshToken: string) {
+    if (!refreshToken) return null;
+
+    try {
+        const response = await fetch('https://oauth2.googleapis.com/token', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                grant_type: 'refresh_token',
+                refresh_token: refreshToken,
+                client_id: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
+            }),
+        });
+
+        const data = await response.json();
+        return data.access_token;
+    } catch (error) {
+        console.error("Error refreshing Google token:", error);
+        return null;
+    }
+}

hooks/useFetchAndSaveOutlookEvents.ts

@@ -9,10 +9,11 @@ export const useFetchAndSaveOutlookEvents = () => {
     const {mutateAsync: createEventsFromProvider} = useCreateEventsFromProvider();
 
     return useMutation({
-        mutationKey: ["fetchAndSaveOutlookEvents"],
-        mutationFn: async ({token, email}: { token?: string; email?: string }) => {
-            const timeMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
-            const timeMax = new Date(new Date().setFullYear(new Date().getFullYear() + 3));
+        mutationKey: ["fetchAndSaveOutlookEvents", "sync"],
+        mutationFn: async ({token, email, date}: { token?: string; email?: string, date?: Date }) => {
+            const baseDate = date || new Date();
+            const timeMin = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() - 1));
+            const timeMax = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() + 1));
 
             console.log("Token: ", token ?? profileData?.microsoftToken);
 

hooks/useSyncOnScroll.ts

@@ -0,0 +1,85 @@
+import { useState, useEffect, useCallback } from "react";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { useAtomValue } from "jotai";
+import { useFetchAndSaveGoogleEvents } from "./useFetchAndSaveGoogleEvents";
+import { useFetchAndSaveAppleEvents } from "./useFetchAndSaveAppleEvents";
+import { useFetchAndSaveOutlookEvents } from "./useFetchAndSaveOutlookEvents";
+import { selectedDateAtom } from "@/components/pages/calendar/atoms";
+import { addDays, subDays, isBefore, isAfter, format } from "date-fns";
+
+export const useSyncEvents = () => {
+    const { profileData } = useAuthContext();
+    const selectedDate = useAtomValue(selectedDateAtom);
+
+    const [lastSyncDate, setLastSyncDate] = useState<Date>(selectedDate);
+    const [lowerBoundDate, setLowerBoundDate] = useState<Date>(subDays(selectedDate, 6 * 30));
+    const [upperBoundDate, setUpperBoundDate] = useState<Date>(addDays(selectedDate, 6 * 30));
+    const [isSyncing, setIsSyncing] = useState(false);
+    const [error, setError] = useState(null);
+
+    const syncedRanges = useState<Set<string>>(new Set())[0];
+
+    const { mutateAsync: fetchAndSaveGoogleEvents } = useFetchAndSaveGoogleEvents();
+    const { mutateAsync: fetchAndSaveOutlookEvents } = useFetchAndSaveOutlookEvents();
+    const { mutateAsync: fetchAndSaveAppleEvents } = useFetchAndSaveAppleEvents();
+
+    const generateRangeKey = (startDate: Date, endDate: Date) => {
+        return `${format(startDate, "yyyy-MM-dd")}_${format(endDate, "yyyy-MM-dd")}`;
+    };
+
+    const syncEvents = useCallback(async () => {
+        setIsSyncing(true);
+        setError(null);
+
+        const newLowerBound = subDays(selectedDate, 6 * 30);
+        const newUpperBound = addDays(selectedDate, 6 * 30);
+        const rangeKey = generateRangeKey(newLowerBound, newUpperBound);
+
+        if (syncedRanges.has(rangeKey)) {
+            setIsSyncing(false);
+            return;
+        }
+
+        if (isBefore(selectedDate, lowerBoundDate) || isAfter(selectedDate, upperBoundDate)) {
+            try {
+                const googleEvents = Object.entries(profileData?.googleAccounts || {}).map(([email, { accessToken }]) =>
+                    fetchAndSaveGoogleEvents({ token: accessToken, email, date: selectedDate })
+                );
+
+                const outlookEvents = Object.entries(profileData?.microsoftAccounts || {}).map(([email, token]) =>
+                    fetchAndSaveOutlookEvents({ token, email, date: selectedDate })
+                );
+
+                const appleEvents = Object.entries(profileData?.appleAccounts || {}).map(([email, token]) =>
+                    fetchAndSaveAppleEvents({ token, email, date: selectedDate })
+                );
+
+                await Promise.all([...googleEvents, ...outlookEvents, ...appleEvents]);
+
+                setLastSyncDate(selectedDate);
+                setLowerBoundDate(newLowerBound);
+                setUpperBoundDate(newUpperBound);
+                syncedRanges.add(rangeKey);
+            } catch (err) {
+                console.error("Error syncing events:", err);
+                setError(err);
+            } finally {
+                setIsSyncing(false);
+            }
+        } else {
+            setIsSyncing(false);
+        }
+    }, [selectedDate, lowerBoundDate, upperBoundDate, profileData, fetchAndSaveGoogleEvents, fetchAndSaveOutlookEvents, fetchAndSaveAppleEvents, syncedRanges]);
+
+    useEffect(() => {
+        syncEvents();
+    }, [selectedDate, syncEvents]);
+
+    return {
+        isSyncing,
+        error,
+        lastSyncDate,
+        lowerBoundDate,
+        upperBoundDate,
+    };
+};

patches/react-native-big-calendar+4.15.1.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-native-big-calendar/build/index.js b/node_modules/react-native-big-calendar/build/index.js
-index 848ceba..57fbaed 100644
+index 848ceba..add1b1c 100644
 --- a/node_modules/react-native-big-calendar/build/index.js
 +++ b/node_modules/react-native-big-calendar/build/index.js
 @@ -9,6 +9,17 @@ var isoWeek = require('dayjs/plugin/isoWeek');