Merge branch 'main' into dev

# Conflicts:
#	components/pages/calendar/DetailedCalendar.tsx

app/(auth)/_layout.tsx

@@ -79,10 +79,11 @@ export default function TabLayout() {
   const setToDosIndex = useSetAtom(toDosPageIndex);
   const { resyncAllCalendars, isSyncing } = useCalSync();
 
-  const isFormatting = useIsFetching({queryKey: ['formattedEvents']}) > 0;
   const isFetching = useIsFetching({queryKey: ['events']}) > 0;
 
-  const isLoading = isSyncing || isFormatting || isFetching;
+    const isLoading = React.useMemo(() => {
+        return isSyncing || isFetching;
+    }, [isSyncing, isFetching]);
 
   const onRefresh = React.useCallback(async () => {
     try {
@@ -102,7 +103,7 @@ export default function TabLayout() {
     lazy: true,
     headerShown: true,
     headerTitleAlign:
-      Device.deviceType === DeviceType.TABLET ? "left" : "center",
+      Device.deviceType === DeviceType.TABLET ? "left" : "unaligned",
       headerTitle: ({ children }) => {
         const isCalendarRoute = ["calendar", "index"].includes(route.name);
         

app/_layout.tsx

@@ -56,6 +56,7 @@ import {Platform} from 'react-native';
 import KeyboardManager from 'react-native-keyboard-manager';
 import {enableScreens} from 'react-native-screens';
 import {PersistQueryClientProvider} from "@/contexts/PersistQueryClientProvider";
+import auth from "@react-native-firebase/auth";
 
 enableScreens(true)
 

components/pages/calendar/CalendarHeader.tsx

@@ -8,7 +8,6 @@ import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
 import {format, isSameDay} from "date-fns";
 import * as Device from "expo-device";
 import {Mode} from "react-native-big-calendar";
-import { FontAwesome5 } from '@expo/vector-icons';
 
 export const CalendarHeader = memo(() => {
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
@@ -48,17 +47,25 @@ export const CalendarHeader = memo(() => {
     const getInitialIndex = () => {
         if (isTablet) {
             switch (mode) {
-                case "day": return 0;
+                case "day":
-                case "week": return 1;
+                    return 0;
-                case "month": return 2;
+                case "week":
-                default: return 1;
+                    return 1;
+                case "month":
+                    return 2;
+                default:
+                    return 1;
             }
         } else {
             switch (mode) {
-                case "day": return 0;
+                case "day":
-                case "3days": return 1;
+                    return 0;
-                case "month": return 2;
+                case "3days":
-                default: return 1;
+                    return 1;
+                case "month":
+                    return 2;
+                default:
+                    return 1;
             }
         }
     };
@@ -70,7 +77,7 @@ export const CalendarHeader = memo(() => {
                 justifyContent: "space-between",
                 alignItems: "center",
                 paddingHorizontal: 10,
-                paddingVertical: 8,
+                paddingVertical: isTablet ? 8 : 0,
                 borderRadius: 20,
                 borderBottomLeftRadius: 0,
                 borderBottomRightRadius: 0,
@@ -79,9 +86,11 @@ export const CalendarHeader = memo(() => {
             centerV
         >
             <View row centerV gap-3>
-                <Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
+                {isTablet && (
-                    {selectedDate.getFullYear()}
+                    <Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
-                </Text>
+                        {selectedDate.getFullYear()}
+                    </Text>
+                )}
                 <Picker
                     value={months[selectedDate.getMonth()]}
                     placeholder={"Select Month"}
@@ -108,7 +117,7 @@ export const CalendarHeader = memo(() => {
                     style={styles.todayButton}
                     onPress={() => setSelectedDate(new Date())}
                 >
-                    <MaterialIcons name="calendar-today" size={30} color="#5f6368" />
+                    <MaterialIcons name="calendar-today" size={30} color="#5f6368"/>
                     <Text style={styles.todayDate}>{format(new Date(), "d")}</Text>
                 </Button>
                 <View>

components/pages/calendar/DetailedCalendar.tsx

@@ -12,21 +12,43 @@ import {isToday} from "date-fns";
 import { View } from "react-native-ui-lib";
 import { DeviceType } from "expo-device";
 import * as Device from "expo-device"
+import {View} from "react-native-ui-lib";
+import {useAtomCallback} from 'jotai/utils'
 
 interface EventCalendarProps {
     calendarHeight: number;
     calendarWidth: number;
+    mode: "week" | "month" | "day" | "3days";
+    onLoad?: () => void;
 }
 
-export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight, calendarWidth}) => {
+const MemoizedEventCell = React.memo(EventCell);
+
+export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo((
+    {
+        calendarHeight,
+        calendarWidth,
+        mode,
+        onLoad
+    }) => {
     const {profileData} = useAuthContext();
     const selectedDate = useAtomValue(selectedDateAtom);
-    const mode = useAtomValue(modeAtom);
     const {data: familyMembers} = useGetFamilyMembers();
     const calendarRef = useRef<CalendarKitHandle>(null);
     const {data: events} = useGetEvents();
     const selectedUser = useAtomValue(selectedUserAtom);
 
+    const checkModeAndGoToDate = useAtomCallback(useCallback((get) => {
+        const currentMode = get(modeAtom);
+        if ((selectedDate && isToday(selectedDate)) || currentMode === "month") {
+            calendarRef?.current?.goToDate({date: selectedDate});
+        }
+    }, [selectedDate]));
+
+    useEffect(() => {
+        checkModeAndGoToDate();
+    }, [selectedDate, checkModeAndGoToDate]);
+
     const {data: formattedEvents} = useFormattedEvents(events ?? [], selectedDate, selectedUser);
     const {
         handlePressEvent,
@@ -44,7 +66,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
 
     const headerProps = useMemo(() => ({
         dayBarHeight: 60,
-        headerBottomHeight: 20
+        headerBottomHeight: 20,
     }), []);
 
     const bodyProps = useMemo(() => ({
@@ -60,26 +82,20 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
         initialDate: selectedDate.toISOString(),
     }), [selectedDate]);
 
-    const renderEvent = useCallback((event: any) => {
+    const getAttendees = useCallback((event: any) => {
-        const attendees = useMemo(() =>
+        return familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [];
-                familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [],
+    }, [familyMembers]);
-            [familyMembers, event.attendees]
-        );
 
+    const renderEvent = useCallback((event: any) => {
+        const attendees = getAttendees(event);
         return (
-            <EventCell
+            <MemoizedEventCell
                 event={event}
                 onPress={handlePressEvent}
                 attendees={attendees}
             />
         );
-    }, [familyMembers, handlePressEvent]);
+    }, [familyMembers, handlePressEvent, getAttendees]);
-
-    useEffect(() => {
-        if (selectedDate && isToday(selectedDate)) {
-            calendarRef?.current?.goToDate({date: selectedDate});
-        }
-    }, [selectedDate]);
 
     return (
         <CalendarContainer
@@ -87,12 +103,12 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
             {...containerProps}
             numberOfDays={numberOfDays}
             calendarWidth={calendarWidth}
-            
             onDateChanged={debouncedOnDateChanged}
             firstDay={firstDay}
             events={formattedEvents ?? []}
             onPressEvent={handlePressEvent}
             onPressBackground={handlePressCell}
+            onLoad={onLoad}
         >
             <CalendarHeader {...headerProps} />
             <CalendarBody
@@ -102,6 +118,8 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
         {Device.deviceType === DeviceType.TABLET && <View style={{backgroundColor: 'white', height: '9%', width: '100%'}}/>}
         </CalendarContainer>
     );
-};
+});
+
+DetailedCalendar.displayName = 'DetailedCalendar';
 
 export default DetailedCalendar;

components/pages/calendar/EventCalendar.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
-import {StyleSheet, View, ActivityIndicator} from 'react-native';
+import { StyleSheet, View, ActivityIndicator } from 'react-native';
-import {Text} from 'react-native-ui-lib';
+import { Text } from 'react-native-ui-lib';
-import {useGetEvents} from '@/hooks/firebase/useGetEvents';
+import Animated, {
-import {useCalSync} from '@/hooks/useCalSync';
+    withTiming,
-import {useSyncEvents} from '@/hooks/useSyncOnScroll';
+    useAnimatedStyle,
-import {useAtom} from 'jotai';
+    FadeOut,
-import {
+    useSharedValue,
-    modeAtom,
+    runOnJS
-} from './atoms';
+} from 'react-native-reanimated';
-import {MonthCalendar} from "@/components/pages/calendar/MonthCalendar";
+import { useGetEvents } from '@/hooks/firebase/useGetEvents';
-import {DetailedCalendar} from "@/components/pages/calendar/DetailedCalendar";
+import { useCalSync } from '@/hooks/useCalSync';
+import { useSyncEvents } from '@/hooks/useSyncOnScroll';
+import { useAtom } from 'jotai';
+import { modeAtom } from './atoms';
+import { MonthCalendar } from "@/components/pages/calendar/MonthCalendar";
+import DetailedCalendar from "@/components/pages/calendar/DetailedCalendar";
+import * as Device from "expo-device";
+
+export type CalendarMode = 'month' | 'day' | '3days' | 'week';
 
 interface EventCalendarProps {
     calendarHeight: number;
@@ -17,33 +25,81 @@ interface EventCalendarProps {
 }
 
 export const EventCalendar: React.FC<EventCalendarProps> = React.memo((props) => {
-    const {data: events, isLoading} = useGetEvents();
+    const { isLoading } = useGetEvents();
-    const [mode] = useAtom(modeAtom);
+    const [mode] = useAtom<CalendarMode>(modeAtom);
-    const {isSyncing} = useSyncEvents();
+    const { isSyncing } = useSyncEvents();
+    const isTablet = Device.deviceType === Device.DeviceType.TABLET;
+    const isCalendarReady = useSharedValue(false);
     useCalSync();
 
-    if (isLoading || isSyncing) {
+    const handleRenderComplete = React.useCallback(() => {
-        return (
+        isCalendarReady.value = true;
-            <View style={styles.loadingContainer}>
+    }, []);
-                {isSyncing && <Text>Syncing...</Text>}
-                <ActivityIndicator size="large" color="#0000ff"/>
-            </View>
-        );
-    }
 
-    return mode === "month"
+    const containerStyle = useAnimatedStyle(() => ({
-        ? <MonthCalendar {...props} />
+        opacity: withTiming(isCalendarReady.value ? 1 : 0, { duration: 500 }),
-        : <DetailedCalendar {...props} />;
-});
-
-const styles = StyleSheet.create({
-    loadingContainer: {
         flex: 1,
-        justifyContent: 'center',
+    }));
-        alignItems: 'center',
+
+    const monthStyle = useAnimatedStyle(() => ({
+        opacity: withTiming(mode === 'month' ? 1 : 0, { duration: 300 }),
         position: 'absolute',
         width: '100%',
         height: '100%',
+    }));
+
+    const detailedDayStyle = useAnimatedStyle(() => ({
+        opacity: withTiming(mode === 'day' ? 1 : 0, { duration: 300 }),
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    }));
+
+    const detailedMultiStyle = useAnimatedStyle(() => ({
+        opacity: withTiming(mode === (isTablet ? 'week' : '3days') ? 1 : 0, { duration: 300 }),
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    }));
+
+    return (
+        <View style={styles.root}>
+            {(isLoading || isSyncing) && (
+                <Animated.View
+                    exiting={FadeOut.duration(300)}
+                    style={styles.loadingContainer}
+                >
+                    {isSyncing && <Text>Syncing...</Text>}
+                    <ActivityIndicator size="large" color="#0000ff"/>
+                </Animated.View>
+            )}
+            <Animated.View style={containerStyle}>
+                <Animated.View style={monthStyle} pointerEvents={mode === 'month' ? 'auto' : 'none'}>
+                    <MonthCalendar {...props} />
+                </Animated.View>
+                <Animated.View style={detailedDayStyle} pointerEvents={mode === 'day' ? 'auto' : 'none'}>
+                    <DetailedCalendar mode="day" {...props} />
+                </Animated.View>
+                <Animated.View style={detailedMultiStyle} pointerEvents={mode === (isTablet ? 'week' : '3days') ? 'auto' : 'none'}>
+                    {!isLoading && (
+                        <DetailedCalendar onLoad={handleRenderComplete} mode={isTablet ? 'week' : '3days'} {...props} />
+                    )}
+                </Animated.View>
+            </Animated.View>
+        </View>
+    );
+});
+
+const styles = StyleSheet.create({
+    root: {
+        flex: 1,
+    },
+    loadingContainer: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
         zIndex: 100,
         backgroundColor: 'rgba(255, 255, 255, 0.9)',
     },

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -63,7 +63,7 @@ export const ManuallyAddEventModal = () => {
     const [editEvent, setEditEvent] = useAtom(eventForEditAtom);
     const [allDayAtom, setAllDayAtom] = useAtom(isAllDayAtom);
     const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
-    const {mutateAsync: deleteEvent, isLoading: isDeleting} = useDeleteEvent();
+    const {mutateAsync: deleteEvent, isPending: isDeleting} = useDeleteEvent();
 
     const {show, close, initialDate} = {
         show: !!selectedNewEventDate || !!editEvent,

components/pages/calendar/MonthCalendar.tsx

@@ -37,330 +37,6 @@ const getTotalMinutes = () => {
 };
 
 
-const processEventsForSideBySide = (events: CalendarEvent[]) => {
-    if (!events) return [];
-
-    const timeSlots: { [key: string]: CalendarEvent[] } = {};
-
-    events.forEach(event => {
-        const startDate = new Date(event.start);
-        const endDate = new Date(event.end);
-
-        // If it's an all-day event, mark it and add it directly
-        if (event.allDay) {
-            const key = `${startDate.toISOString().split('T')[0]}-allday`;
-            if (!timeSlots[key]) timeSlots[key] = [];
-            timeSlots[key].push({
-                ...event,
-                isAllDayEvent: true,
-                allDay: true,
-                width: 1,
-                xPos: 0
-            });
-            return;
-        }
-
-        // Handle multi-day events
-        if (startDate.toDateString() !== endDate.toDateString()) {
-            // Create array of dates between start and end
-            const dates = [];
-            let currentDate = new Date(startDate);
-
-            while (currentDate <= endDate) {
-                dates.push(new Date(currentDate));
-                currentDate.setDate(currentDate.getDate() + 1);
-            }
-
-            // Create segments for each day
-            dates.forEach((date, index) => {
-                const isFirstDay = index === 0;
-                const isLastDay = index === dates.length - 1;
-
-                let segmentStart, segmentEnd;
-
-                if (isFirstDay) {
-                    // First day: use original start time to end of day
-                    segmentStart = new Date(startDate);
-                    segmentEnd = new Date(date);
-                    segmentEnd.setHours(23, 59, 59);
-                } else if (isLastDay) {
-                    // Last day: use start of day to original end time
-                    segmentStart = new Date(date);
-                    segmentStart.setHours(0, 0, 0);
-                    segmentEnd = new Date(endDate);
-                } else {
-                    // Middle days: full day
-                    segmentStart = new Date(date);
-                    segmentStart.setHours(0, 0, 0);
-                    segmentEnd = new Date(date);
-                    segmentEnd.setHours(23, 59, 59);
-                }
-
-                const key = `${segmentStart.toISOString().split('T')[0]}-${segmentStart.getHours()}`;
-                if (!timeSlots[key]) timeSlots[key] = [];
-
-                timeSlots[key].push({
-                    ...event,
-                    start: segmentStart,
-                    end: segmentEnd,
-                    isMultiDaySegment: true,
-                    isFirstDay,
-                    isLastDay,
-                    originalStart: startDate,
-                    originalEnd: endDate,
-                    allDay: true  // Mark multi-day events as all-day events
-                });
-            });
-        } else {
-            // Regular event
-            const key = `${startDate.toISOString().split('T')[0]}-${startDate.getHours()}`;
-            if (!timeSlots[key]) timeSlots[key] = [];
-            timeSlots[key].push(event);
-        }
-    });
-
-    // Process all time slots
-    return Object.values(timeSlots).flatMap(slotEvents => {
-        // Sort events by start time
-        slotEvents.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
-
-        // Find overlapping events (only for non-all-day events)
-        return slotEvents.map((event, index) => {
-            // If it's an all-day or multi-day event, return as is
-            if (event.allDay || event.isMultiDaySegment) {
-                return {
-                    ...event,
-                    width: 1,
-                    xPos: 0
-                };
-            }
-
-            // Handle regular events
-            const overlappingEvents = slotEvents.filter((otherEvent, otherIndex) => {
-                if (index === otherIndex || otherEvent.allDay || otherEvent.isMultiDaySegment) return false;
-                const eventStart = new Date(event.start);
-                const eventEnd = new Date(event.end);
-                const otherStart = new Date(otherEvent.start);
-                const otherEnd = new Date(otherEvent.end);
-                return (eventStart < otherEnd && eventEnd > otherStart);
-            });
-
-            const total = overlappingEvents.length + 1;
-            const position = index % total;
-
-            return {
-                ...event,
-                width: 1 / total,
-                xPos: position / total
-            };
-        });
-    });
-};
-
-const renderEvent = (event: CalendarEvent & {
-    width: number;
-    xPos: number;
-    isMultiDaySegment?: boolean;
-    isFirstDay?: boolean;
-    isLastDay?: boolean;
-    originalStart?: Date;
-    originalEnd?: Date;
-    isAllDayEvent?: boolean;
-    allDay?: boolean;
-    eventColor?: string;
-    attendees?: string[];
-    creatorId?: string;
-    pfp?: string;
-    firstName?: string;
-    lastName?: string;
-    notes?: string;
-    hideHours?: boolean;
-}, props: any) => {
-    const {data: familyMembers} = useGetFamilyMembers();
-
-    const attendees = useMemo(() => {
-        if (!familyMembers || !event.attendees) return event?.creatorId ? [event?.creatorId] : [];
-        return familyMembers.filter(member => event?.attendees?.includes(member?.uid!));
-    }, [familyMembers, event.attendees]);
-
-    if (event.allDay && !!event.isMultiDaySegment) {
-        return (
-            <TouchableOpacity
-                {...props}
-                style={[
-                    props.style,
-                    {
-                        width: '100%',
-                        flexDirection: 'row',
-                        alignItems: 'center'
-                    }
-                ]}
-            >
-                <Text style={styles.allDayEventText} numberOfLines={1}>
-                    {event.title}
-                    {event.isMultiDaySegment &&
-                        ` (${format(new Date(event.start), 'MMM d')} - ${format(new Date(event.end), 'MMM d')})`
-                    }
-                </Text>
-            </TouchableOpacity>
-        );
-    }
-
-    const originalStyle = Array.isArray(props.style) ? props.style[0] : props.style;
-
-    const startDate = event.start instanceof Date ? event.start : new Date(event.start);
-    const endDate = event.end instanceof Date ? event.end : new Date(event.end);
-
-    const hourHeight = props.hourHeight || 60;
-    const startHour = startDate.getHours();
-    const startMinutes = startDate.getMinutes();
-    const topPosition = (startHour + startMinutes / 60) * hourHeight;
-
-    const endHour = endDate.getHours();
-    const endMinutes = endDate.getMinutes();
-    const duration = (endHour + endMinutes / 60) - (startHour + startMinutes / 60);
-    const height = duration * hourHeight;
-
-    const formatTime = (date: Date) => {
-        const hours = date.getHours();
-        const minutes = date.getMinutes();
-        const ampm = hours >= 12 ? 'pm' : 'am';
-        const formattedHours = hours % 12 || 12;
-        const formattedMinutes = minutes.toString().padStart(2, '0');
-        return `${formattedHours}:${formattedMinutes}${ampm}`;
-    };
-
-    const timeString = event.isMultiDaySegment
-        ? event.isFirstDay
-            ? `${formatTime(startDate)} → 12:00PM`
-            : event.isLastDay
-                ? `12:00am → ${formatTime(endDate)}`
-                : 'All day'
-        : `${formatTime(startDate)} - ${formatTime(endDate)}`;
-
-    return (
-        <TouchableOpacity
-            {...props}
-            style={[
-                originalStyle,
-                {
-                    position: 'absolute',
-                    width: `${event.width * 100}%`,
-                    left: `${event.xPos * 100}%`,
-                    top: topPosition,
-                    height: height,
-                    zIndex: event.isMultiDaySegment ? 1 : 2,
-                    shadowRadius: 2,
-                    overflow: "hidden"
-                }
-            ]}
-        >
-            <View
-                style={{
-                    flex: 1,
-                    backgroundColor: event.eventColor,
-                    borderRadius: 4,
-                    padding: 8,
-                    justifyContent: 'space-between'
-                }}
-            >
-                <View>
-                    <Text
-                        style={{
-                            color: 'white',
-                            fontSize: 12,
-                            fontFamily: "PlusJakartaSans_500Medium",
-                            fontWeight: '600',
-                            marginBottom: 4
-                        }}
-                        numberOfLines={1}
-                    >
-                        {event.title}
-                    </Text>
-                    <Text
-                        style={{
-                            color: 'white',
-                            fontSize: 10,
-                            fontFamily: "PlusJakartaSans_500Medium",
-                            opacity: 0.8
-                        }}
-                    >
-                        {timeString}
-                    </Text>
-                </View>
-
-                {/* Attendees Section */}
-                {attendees?.length > 0 && (
-                    <View style={{flexDirection: 'row', marginTop: 8, height: 27.32}}>
-                        {attendees?.filter(x=>x?.firstName).slice(0, 5).map((attendee, index) => (
-                            <View
-                                key={attendee?.uid}
-                                style={{
-                                    position: 'absolute',
-                                    left: index * 19,
-                                    width: 20,
-                                    height: 20,
-                                    borderRadius: 50,
-                                    borderWidth: 2,
-                                    borderColor: '#f2f2f2',
-                                    overflow: 'hidden',
-                                    backgroundColor: attendee.eventColor || colorMap.pink,
-                                }}
-                            >
-                                {attendee.pfp ? (
-                                    <CachedImage
-                                        source={{uri: attendee.pfp}}
-                                        style={{width: '100%', height: '100%'}}
-                                        cacheKey={attendee.pfp}
-                                    />
-                                ) : (
-                                    <View style={{
-                                        flex: 1,
-                                        justifyContent: 'center',
-                                        alignItems: 'center'
-                                    }}>
-                                        <Text style={{
-                                            color: 'white',
-                                            fontSize: 12,
-                                            fontFamily: "Manrope_600SemiBold",
-                                        }}>
-                                            {attendee?.firstName?.at(0)}
-                                            {attendee?.lastName?.at(0)}
-                                        </Text>
-                                    </View>
-                                )}
-                            </View>
-                        ))}
-                        {attendees.length > 3 && (
-                            <View style={{
-                                position: 'absolute',
-                                left: 3 * 19,
-                                width: 27.32,
-                                height: 27.32,
-                                borderRadius: 50,
-                                borderWidth: 2,
-                                borderColor: '#f2f2f2',
-                                backgroundColor: colorMap.pink,
-                                justifyContent: 'center',
-                                alignItems: 'center'
-                            }}>
-                                <Text style={{
-                                    color: 'white',
-                                    fontFamily: "Manrope_600SemiBold",
-                                    fontSize: 12,
-                                }}>
-                                    +{attendees.length - 3}
-                                </Text>
-                            </View>
-                        )}
-                    </View>
-                )}
-            </View>
-        </TouchableOpacity>
-    );
-};
-
-
 export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
     ({calendarHeight}) => {
         const {data: events, isLoading} = useGetEvents();
@@ -398,12 +74,10 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
 
         const handlePressCell = useCallback(
             (date: Date) => {
-                if (mode === "day" || mode === "week" || mode === "3days") {
+                    date && setSelectedDate(date);
-                    setSelectedNewEndDate(date);
+                    setTimeout(() => {
-                } else {
+                        setMode("day");
-                    setMode("day");
+                    }, 100)
-                    setSelectedDate(date);
-                }
             },
             [mode, setSelectedNewEndDate, setSelectedDate]
         );
@@ -477,13 +151,11 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
                 return {};
             }
         }, [mode]);
-        const {enrichedEvents, filteredEvents} = useMemo(() => {
+        const {filteredEvents} = useMemo(() => {
-            const startTime = Date.now();
-
             const startOffset = mode === "month" ? 40 : (mode === "week" || mode === "3days") ? 10 : 1;
             const endOffset = mode === "month" ? 40 : (mode === "week" || mode === "3days") ? 10 : 1;
 
-            let eventsToFilter = events;
+            let eventsToFilter = events ?? [];
 
             if (selectedUser && Device.deviceType === DeviceType.TABLET) {
                 eventsToFilter = events?.filter(event =>
@@ -495,8 +167,8 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
             const filteredEvents =
                 eventsToFilter?.filter(
                     (event) =>
-                        event.start &&
+                        event?.start instanceof Date &&
-                        event.end &&
+                        event?.end instanceof Date &&
                         isWithinInterval(event.start, {
                             start: subDays(selectedDate, startOffset),
                             end: addDays(selectedDate, endOffset),
@@ -507,83 +179,14 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
                         })
                 ) ?? [];
 
-            const enrichedEvents = filteredEvents.reduce((acc, event) => {
+            return {filteredEvents};
-                const dateKey = event.start.toISOString().split("T")[0];
-                acc[dateKey] = acc[dateKey] || [];
-                acc[dateKey].push({
-                    ...event,
-                    overlapPosition: false,
-                    overlapCount: 0,
-                });
-
-                acc[dateKey].sort((a: { start: any; }, b: { start: any; }) => compareAsc(a.start, b.start));
-
-                return acc;
-            }, {} as Record<string, CalendarEvent[]>);
-
-            const endTime = Date.now();
-            // console.log("memoizedEvents computation time:", endTime - startTime, "ms");
-
-            return {enrichedEvents, filteredEvents};
         }, [events, selectedDate, mode, selectedUser]);
 
-        const renderCustomDateForMonth = (date: Date) => {
-            const circleStyle = useMemo<ViewStyle>(
-                () => ({
-                    width: 30,
-                    height: 30,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    borderRadius: 15,
-                }),
-                []
-            );
-
-            const defaultStyle = useMemo<ViewStyle>(
-                () => ({
-                    ...circleStyle,
-                }),
-                [circleStyle]
-            );
-
-            const currentDateStyle = useMemo<ViewStyle>(
-                () => ({
-                    ...circleStyle,
-                    backgroundColor: "#4184f2",
-                }),
-                [circleStyle]
-            );
-
-            const renderDate = useCallback(
-                (date: Date) => {
-                    const isCurrentDate = isSameDate(todaysDate, date);
-                    const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
-
-                    return (
-                        <View style={{alignItems: "center"}}>
-                            <View style={appliedStyle}>
-                                <Text style={{color: isCurrentDate ? "white" : "black"}}>
-                                    {date.getDate()}
-                                </Text>
-                            </View>
-                        </View>
-                    );
-                },
-                [todaysDate, currentDateStyle, defaultStyle]
-            );
-
-            return renderDate(date);
-        };
-
-        const processedEvents = useMemo(() => {
-            return processEventsForSideBySide(filteredEvents);
-        }, [filteredEvents]);
-
         useEffect(() => {
             setOffsetMinutes(getTotalMinutes());
         }, [events, mode]);
 
-        if (isLoading) {
+        if (isLoading || !events) {
             return (
                 <View style={styles.loadingContainer}>
                     {isSyncing && <Text>Syncing...</Text>}
@@ -603,7 +206,7 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
                 <Calendar
                     bodyContainerStyle={styles.calHeader}
                     swipeEnabled
-                    mode={mode}
+                    mode={"month"}
                     sortedMonthView
                     events={filteredEvents}
                     // renderEvent={renderEvent}

components/pages/calendar/useFormattedEvents.ts

@@ -29,9 +29,24 @@ interface FormattedEvent {
     color: string;
 }
 
+const createEventHash = (event: FormattedEvent): string => {
+    const startTime = 'date' in event.start ? event.start.date : event.start.dateTime;
+    const endTime = 'date' in event.end ? event.end.date : event.end.dateTime;
+    const str = `${startTime}-${endTime}-${event.title}`;
+
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash;
+    }
+    return hash.toString(36);
+};
+
+
 // Precompute time constants
 const DAY_IN_MS = 24 * 60 * 60 * 1000;
-const PERIOD_IN_MS = 45 * DAY_IN_MS;
+const PERIOD_IN_MS = 5 * DAY_IN_MS;
 const TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
 // Memoize date range calculations
@@ -59,75 +74,70 @@ const getValidDate = (date: any, timestamp?: EventTimestamp): Date | null => {
 };
 
 // Batch process events
+
 const processEvents = async (
     events: Event[],
     selectedDate: Date,
     selectedUser: { uid: string } | null
 ): Promise<FormattedEvent[]> => {
-    // Early return if no events
     if (!events.length) return [];
 
-    // Pre-calculate constants
     const currentRangeKey = getDateRangeKey(selectedDate.getTime());
     const isTablet = Device.deviceType === DeviceType.TABLET;
     const userId = selectedUser?.uid;
 
-    // Process in chunks to avoid blocking the main thread
+    const uniqueEvents = new Map<string, FormattedEvent>();
+    const processedHashes = new Set<string>();
+
     const CHUNK_SIZE = 100;
-    const results: FormattedEvent[] = [];
 
     for (let i = 0; i < events.length; i += CHUNK_SIZE) {
         const chunk = events.slice(i, i + CHUNK_SIZE);
-
-        // Process chunk and await to give UI thread a chance to breathe
         await new Promise(resolve => setTimeout(resolve, 0));
 
         for (const event of chunk) {
             try {
-                // Quick user filter
                 if (isTablet && userId &&
                     !event.attendees?.includes(userId) &&
                     event.creatorId !== userId) {
                     continue;
                 }
 
-                // Validate dates first
                 const startDate = getValidDate(event.start, event.startDate);
                 if (!startDate) continue;
 
                 const rangeKey = getDateRangeKey(startDate.getTime());
-                // Skip events outside our range
                 if (Math.abs(rangeKey - currentRangeKey) > 1) continue;
 
                 const endDate = getValidDate(event.end, event.endDate);
                 if (!endDate) continue;
 
-                if (event.allDay) {
+                const formattedEvent = event.allDay ? {
-                    const dateStr = format(startDate, 'yyyy-MM-dd');
+                    id: event.id,
-                    const endDateStr = format(endDate, 'yyyy-MM-dd');
+                    title: event.title,
+                    start: { date: format(startDate, 'yyyy-MM-dd') },
+                    end: { date: format(endDate, 'yyyy-MM-dd') },
+                    color: event.eventColor
+                } : {
+                    id: event.id,
+                    title: event.title,
+                    start: {
+                        dateTime: startDate.toISOString(),
+                        timeZone: TIME_ZONE
+                    },
+                    end: {
+                        dateTime: endDate.toISOString(),
+                        timeZone: TIME_ZONE
+                    },
+                    color: event.eventColor
+                };
 
-                    results.push({
+                const hash = createEventHash(formattedEvent);
-                        id: event.id,
+                if (!processedHashes.has(hash)) {
-                        title: event.title,
+                    processedHashes.add(hash);
-                        start: { date: dateStr },
+                    uniqueEvents.set(event.id, formattedEvent);
-                        end: { date: endDateStr },
-                        color: event.eventColor
-                    });
-                } else {
-                    results.push({
-                        id: event.id,
-                        title: event.title,
-                        start: {
-                            dateTime: startDate.toISOString(),
-                            timeZone: TIME_ZONE
-                        },
-                        end: {
-                            dateTime: endDate.toISOString(),
-                            timeZone: TIME_ZONE
-                        },
-                        color: event.eventColor
-                    });
                 }
+
             } catch (error) {
                 console.error('Error processing event:', event.id, error);
                 continue;
@@ -135,7 +145,7 @@ const processEvents = async (
         }
     }
 
-    return results;
+    return Array.from(uniqueEvents.values());
 };
 
 export const useFormattedEvents = (

components/pages/grocery/GroceryItem.tsx

@@ -79,7 +79,6 @@ const GroceryItem = ({
               setTitle: setNewTitle,
               setCategory: setCategory,
               closeEdit: closeEdit,
-              handleEditSubmit: updateGroceryItem,
             }}
             onInputFocus={onInputFocus}
           />

components/shared/HeaderTemplate.tsx

@@ -107,9 +107,6 @@ const HeaderTemplate = (props: {
           {isFamilyView && props.isCalendar && children.length > 0 && (
             <View style={styles.childrenPfpArr} row>
               {children.slice(0, 3).map((child, index) => {
-                {
-                  console.log("yeaaaah");
-                }
                 const bgColor: string = child.eventColor || colorMap.pink;
                 return child.pfp ? (
                   <Image
@@ -162,9 +159,6 @@ const HeaderTemplate = (props: {
           {isFamilyView && props.isCalendar && children.length > 0 && (
             <View style={styles.childrenPfpArr} row>
               {children.slice(0, 3).map((child, index) => {
-                {
-                  console.log("yeaaaah");
-                }
                 const bgColor: string = child.eventColor || colorMap.pink;
                 return child.pfp ? (
                   <Image

contexts/AuthContext.tsx

@@ -152,7 +152,11 @@ export const AuthContextProvider: FC<{ children: ReactNode }> = ({children}) =>
 
     useEffect(() => {
         if (!initializing) {
-            SplashScreen.hideAsync();
+            if(auth().currentUser) {
+                setTimeout(() => SplashScreen.hideAsync(), 1000);
+            } else {
+                SplashScreen.hideAsync();
+            }
         }
     }, [initializing]);
 

contexts/GroceryContext.tsx

@@ -219,7 +219,7 @@ export const GroceryProvider: React.FC<{ children: React.ReactNode }> = ({
   return (
     <GroceryContext.Provider
       value={{
-        groceries,
+        groceries: groceries ?? [],
         fuzzyMatchGroceryCategory,
         //iconMapping,
         updateGroceryItem,

firebase/functions/index.js

@@ -333,7 +333,7 @@ exports.processEventBatches = functions.pubsub
 
                     let notificationMessage;
                     if (externalOrigin) {
-                        notificationMessage = `Calendar sync completed: ${events.length} ${events.length === 1 ? 'event has' : 'events have'} been added.`;
+                        // notificationMessage = `Calendar sync completed: ${events.length} ${events.length === 1 ? 'event has' : 'events have'} been added.`;
                     } else {
                         notificationMessage = events.length === 1
                             ? `New event "${events[0].title}" has been added to the family calendar.`
@@ -355,7 +355,8 @@ exports.processEventBatches = functions.pubsub
                         content: notificationMessage,
                         timestamp: admin.firestore.FieldValue.serverTimestamp(),
                         creatorId,
-                        eventCount: events.length
+                        eventCount: events.length,
+                        eventId: events.length === 1 ? events[0].id : undefined
                     });
                 }
 

hooks/firebase/useCreateEvent.ts

@@ -2,88 +2,134 @@ import {useAuthContext} from "@/contexts/AuthContext";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import firestore from "@react-native-firebase/firestore";
 import {EventData} from "@/hooks/firebase/types/eventData";
+import {useAtomValue} from "jotai";
+import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";
 
 export const useCreateEvent = () => {
-    const {user: currentUser, profileData} = useAuthContext()
+    const {user: currentUser, profileData} = useAuthContext();
-    const queryClients = useQueryClient()
+    const queryClient = useQueryClient();
 
     return useMutation({
         mutationKey: ["createEvent"],
         mutationFn: async (eventData: Partial<EventData>) => {
-            try {
+            const newDoc = firestore().collection('Events').doc();
-                if (eventData.id) {
+            await firestore()
-                    const snapshot = await firestore()
+                .collection("Events")
-                        .collection("Events")
+                .add({
-                        .where("id", "==", eventData.id)
+                    ...eventData,
-                        .get();
+                    id: newDoc.id,
+                    creatorId: currentUser?.uid,
+                    familyId: profileData?.familyId
+                });
+        },
+        onMutate: async (newEvent) => {
+            await queryClient.cancelQueries({
+                queryKey: ["events", currentUser?.uid]
+            });
 
-                    if (!snapshot.empty) {
+            const formattedEvent = {
-                        const docId = snapshot.docs[0].id;
+                ...newEvent,
-                        await firestore()
+                start: newEvent.startDate,
-                            .collection("Events")
+                end: newEvent.endDate,
-                            .doc(docId)
+                id: Date.now().toString(),
-                            .set({
+                creatorId: currentUser?.uid,
-                                ...eventData,
+                familyId: profileData?.familyId,
-                                attendees: (eventData.attendees?.length ?? 0),
+                eventColor: profileData?.eventColor,
-                                creatorId: currentUser?.uid,
+                hideHours: newEvent.allDay,
-                                familyId: profileData?.familyId
+            };
-                            }, {merge: true});
+
-                        return;
+            ["false", "true"].forEach(viewState => {
-                    }
+                const queryKey = ["events", currentUser?.uid, viewState === "true"];
-                }
+                const previousData = queryClient.getQueryData(queryKey) as any[] || [];
-                const newDoc = firestore().collection('Events').doc();
+                queryClient.setQueryData(queryKey, [...previousData, formattedEvent]);
-                await firestore()
+            });
-                    .collection("Events")
+        },
-                    .add({...eventData, id: newDoc.id, creatorId: currentUser?.uid, familyId: profileData?.familyId});
+        onSettled: () => {
-            } catch (e) {
+            if (profileData?.familyId) {
-                console.error(e);
+                firestore()
+                    .collection("Households")
+                    .where("familyId", "==", profileData.familyId)
+                    .get()
+                    .then(snapshot => {
+                        snapshot.docs.forEach(doc => {
+                            doc.ref.update({
+                                lastSyncTimestamp: firestore.FieldValue.serverTimestamp()
+                            });
+                        });
+                    });
             }
         }
-    })
+    });
-}
+};
 
 export const useCreateEventsFromProvider = () => {
-    const {user: currentUser} = useAuthContext();
+    const {user: currentUser, profileData} = useAuthContext();
     const queryClient = useQueryClient();
 
     return useMutation({
         mutationKey: ["createEventsFromProvider"],
         mutationFn: async (eventDataArray: Partial<EventData>[]) => {
-            try {
+            const promises = eventDataArray.map(async (eventData) => {
-                // Create an array of promises for each event's Firestore read/write operation
+                const snapshot = await firestore()
-                const promises = eventDataArray.map(async (eventData) => {
+                    .collection("Events")
-                    console.log("Processing EventData: ", eventData);
+                    .where("id", "==", eventData.id)
+                    .get();
 
-                    // Check if the event already exists
+                if (snapshot.empty) {
-                    const snapshot = await firestore()
+                    return firestore()
                         .collection("Events")
-                        .where("id", "==", eventData.id)
+                        .add({...eventData, creatorId: currentUser?.uid});
-                        .get();
+                }
+                const docId = snapshot.docs[0].id;
+                return firestore()
+                    .collection("Events")
+                    .doc(docId)
+                    .set({...eventData, creatorId: currentUser?.uid}, {merge: true});
+            });
 
-                    if (snapshot.empty) {
+            await Promise.all(promises);
-                        // Event doesn't exist, so add it
-                        return firestore()
-                            .collection("Events")
-                            .add({...eventData, creatorId: currentUser?.uid});
-                    } else {
-                        // Event exists, update it
-                        const docId = snapshot.docs[0].id;
-                        return firestore()
-                            .collection("Events")
-                            .doc(docId)
-                            .set({...eventData, creatorId: currentUser?.uid}, {merge: true});
-                    }
-                });
-
-                // Execute all promises in parallel
-                await Promise.all(promises);
-
-            } catch (e) {
-                console.error("Error creating/updating events: ", e);
-            }
         },
-        onSuccess: () => {
+        onMutate: async (newEvents) => {
-            queryClient.invalidateQueries({queryKey: ["events"]});
+            await queryClient.cancelQueries({queryKey: ["events", currentUser?.uid]});
+
+            const previousPersonalEvents = queryClient.getQueryData(["events", currentUser?.uid, false]);
+            const previousFamilyEvents = queryClient.getQueryData(["events", currentUser?.uid, true]);
+
+            const formattedEvents = newEvents.map(event => ({
+                ...event,
+                start: new Date(event.startDate.seconds * 1000),
+                end: new Date(event.endDate.seconds * 1000),
+                hideHours: event.allDay,
+                eventColor: profileData?.eventColor,
+                creatorId: currentUser?.uid,
+                familyId: profileData?.familyId
+            }));
+
+            const updateQueryData = (old: any[] = []) => [...old, ...formattedEvents];
+
+            queryClient.setQueryData(["events", currentUser?.uid, false], updateQueryData);
+            queryClient.setQueryData(["events", currentUser?.uid, true], updateQueryData);
+
+            return {previousPersonalEvents, previousFamilyEvents};
+        },
+        onError: (err, newEvents, context) => {
+            queryClient.setQueryData(["events", currentUser?.uid, false], context?.previousPersonalEvents);
+            queryClient.setQueryData(["events", currentUser?.uid, true], context?.previousFamilyEvents);
+        },
+        onSettled: () => {
+            if (profileData?.familyId) {
+                firestore()
+                    .collection("Households")
+                    .where("familyId", "==", profileData.familyId)
+                    .get()
+                    .then(snapshot => {
+                        snapshot.docs.forEach(doc => {
+                            doc.ref.update({
+                                lastSyncTimestamp: firestore.FieldValue.serverTimestamp()
+                            });
+                        });
+                    });
+            }
         }
-    });
+    })
-};
+}

hooks/firebase/useCreateGrocery.ts

@@ -6,10 +6,11 @@ import { IGrocery } from "@/hooks/firebase/types/groceryData";
 export const useCreateGrocery = () => {
     const { user: currentUser, profileData } = useAuthContext();
     const queryClient = useQueryClient();
-    const groceriesKey = ["groceries"];
+    const groceriesKey = ["groceries", currentUser?.uid];
 
     return useMutation({
         mutationFn: (groceryData: Partial<IGrocery>) => {
+            console.log("Call")
             const newDoc = firestore().collection('Groceries').doc();
             return firestore()
                 .collection("Groceries")
@@ -20,10 +21,9 @@ export const useCreateGrocery = () => {
                     creatorId: currentUser?.uid
                 });
         },
-        onSuccess: () => {
+        onSettled: () => {
             return queryClient.invalidateQueries({
                 queryKey: groceriesKey,
-                exact: true
             });
         }
     });

hooks/firebase/useDeleteEvent.ts

@@ -1,39 +1,70 @@
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import firestore from "@react-native-firebase/firestore";
+import {useAuthContext} from "@/contexts/AuthContext";
 
 export const useDeleteEvent = () => {
+    const {user, profileData} = useAuthContext();
     const queryClient = useQueryClient();
 
     return useMutation({
         mutationKey: ["deleteEvent"],
         mutationFn: async ({eventId, docId}: { eventId?: string; docId?: string }) => {
             try {
-                if (docId) {
+                await firestore()
-                    await firestore()
+                    .collection("Events")
-                        .collection("Events")
+                    .doc(eventId ?? docId)
-                        .doc(docId)
+                    .delete();
-                        .delete();
-                } else if (eventId) {
-                    const snapshot = await firestore()
-                        .collection("Events")
-                        .where("id", "==", eventId)
-                        .get();
-
-                    const doc = snapshot.docs[0];
-                    if (doc) {
-                        await doc.ref.delete();
-                    } else {
-                        console.warn("Event not found");
-                    }
-                } else {
-                    console.warn("No identifier provided");
-                }
             } catch (e) {
                 console.error(e);
+                throw e;
             }
         },
-        onSuccess: () => {
+        onMutate: async ({eventId, docId}) => {
-            queryClient.invalidateQueries({queryKey: ["events"]});
+            await queryClient.cancelQueries({
+                queryKey: ["events", user?.uid]
+            });
+
+            const previousPersonalEvents = queryClient.getQueryData(["events", user?.uid, false]);
+            const previousFamilyEvents = queryClient.getQueryData(["events", user?.uid, true]);
+
+            const updateQueryData = (old: any[] | undefined) =>
+                old?.filter(event => event.id !== (eventId ?? docId));
+
+            queryClient.setQueryData(
+                ["events", user?.uid, false],
+                updateQueryData
+            );
+            queryClient.setQueryData(
+                ["events", user?.uid, true],
+                updateQueryData
+            );
+
+            return {previousPersonalEvents, previousFamilyEvents};
+        },
+        onError: (err, variables, context) => {
+            queryClient.setQueryData(
+                ["events", user?.uid, false],
+                context?.previousPersonalEvents
+            );
+            queryClient.setQueryData(
+                ["events", user?.uid, true],
+                context?.previousFamilyEvents
+            );
+        },
+        onSettled: () => {
+            if (profileData?.familyId) {
+                firestore()
+                    .collection("Households")
+                    .where("familyId", "==", profileData.familyId)
+                    .get()
+                    .then(snapshot => {
+                        snapshot.docs.forEach(doc => {
+                            doc.ref.update({
+                                lastSyncTimestamp: firestore.FieldValue.serverTimestamp()
+                            });
+                        });
+                    });
+            }
         }
     });
 };

hooks/firebase/useGetCaregivers.ts

@@ -1,14 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import firestore from "@react-native-firebase/firestore";
-
-export const useSignUp = () => {
-  return useMutation({
-    mutationKey: ["getCaregivers"],
-    mutationFn: async () => {
-      const snapshot = await firestore()
-        .collection("Profiles")
-        .where("userType", "==", "caregiver")
-        .get();
-    },
-  });
-};

hooks/firebase/useGetChildrenByParentId.ts

@@ -1,34 +0,0 @@
-import {useQuery} from "@tanstack/react-query";
-import {ChildProfile} from "@/hooks/firebase/types/profileTypes";
-import firestore from "@react-native-firebase/firestore";
-import {useAuthContext} from "@/contexts/AuthContext";
-
-export const useGetChildrenByParentId = () => {
-    const {user} = useAuthContext()
-
-    return useQuery({
-            queryKey: ["getChildrenByParentId", user?.uid],
-            queryFn: async (): Promise<ChildProfile[]> => {
-                try {
-                    const snapshot = await firestore()
-                        .collection("Profiles")
-                        .where("userType", "==", "child")
-                        .where("parentId", "==", user?.uid!)
-                        .get();
-
-                    return snapshot.docs.map((doc) => {
-                        const data = doc.data();
-                        return {
-                            ...data,
-                            birthday: data.birthday.toDate(),
-                        } as ChildProfile;
-                    });
-                } catch (error) {
-                    console.error("Error retrieving child users:", error);
-                    return [];
-                }
-            },
-            enabled: !!user?.uid
-        }
-    )
-}

hooks/firebase/useGetEvents.ts

@@ -127,6 +127,9 @@ export const useGetEvents = () => {
                                 queryClient.invalidateQueries({
                                     queryKey: ["events", user.uid]
                                 });
+                                queryClient.invalidateQueries({
+                                    queryKey: ["notifications"]
+                                });
                             }
                         }
                     }
@@ -139,7 +142,7 @@ export const useGetEvents = () => {
     return useQuery({
         queryKey: ["events", user?.uid, isFamilyView],
         queryFn: () => fetchEvents(user?.uid!, profileData?.familyId, isFamilyView),
-        staleTime: 5 * 60 * 1000,
+        staleTime: Infinity,
         gcTime: Infinity,
         placeholderData: (previousData) => previousData,
         enabled: Boolean(user?.uid),

hooks/firebase/useGetGroceries.ts

@@ -27,6 +27,9 @@ export const useGetGroceries = () => {
                     creatorId: data.creatorId
                 };
             });
-        }
+        },
+        staleTime: Infinity,
+        gcTime: Infinity,
+        placeholderData: (previousData) => previousData,
     })
 };

hooks/firebase/useGetNotes.ts

@@ -28,5 +28,8 @@ export const useGetNotes = () => {
       }
     },
     enabled: !!currentUser?.uid,
+    staleTime: Infinity,
+    gcTime: Infinity,
+    placeholderData: (previousData) => previousData,
   });
 };

hooks/firebase/useGetNotifications.ts

@@ -29,6 +29,8 @@ export interface Notification {
 export const useGetNotifications = () => {
     const { user, profileData } = useAuthContext();
 
+    console.log(profileData?.familyId)
+
     return useQuery<Notification[], Error>({
         queryKey: ["notifications", user?.uid],
         queryFn: async () => {
@@ -44,11 +46,13 @@ export const useGetNotifications = () => {
                     id: doc.id,
                     ...data,
                     timestamp: new Date(data.timestamp.seconds * 1000 + data.timestamp.nanoseconds / 1e6),
-                    date: data.date ? new Date(data.date.seconds * 1000 + data.date.nanoseconds / 1e6) : undefined
+                    date: data.date ? new Date(data.date.seconds * 1000 + data.date.nanoseconds / 1e6) : undefined,
                 };
             });
         },
         refetchOnWindowFocus: true,
-        staleTime: 60000,
+        staleTime: Infinity,
+        gcTime: Infinity,
+        placeholderData: (previousData) => previousData,
     });
 };

hooks/firebase/useGetTodos.ts

@@ -31,6 +31,9 @@ export const useGetTodos = () => {
                     repeatDays: data.repeatDays ?? []
                 };
             }) as IToDo[];
-        }
+        },
+        staleTime: Infinity,
+        gcTime: Infinity,
+        placeholderData: (previousData) => previousData,
     })
 };

hooks/firebase/useUpdateEvent.ts

@@ -1,24 +0,0 @@
-import {useMutation, useQueryClient} from "@tanstack/react-query";
-import firestore from "@react-native-firebase/firestore";
-import {EventData} from "@/hooks/firebase/types/eventData";
-
-export const useUpdateEvent = () => {
-    const queryClients = useQueryClient()
-
-    return useMutation({
-        mutationKey: ["updateEvent"],
-        mutationFn: async (eventData: Partial<EventData>) => {
-            try {
-                await firestore()
-                    .collection("Events")
-                    .doc(`${eventData.id}`)
-                    .update(eventData);
-            } catch (e) {
-                console.error(e)
-            }
-        },
-        onSuccess: () => {
-            queryClients.invalidateQueries({queryKey: ["events"]})
-        }
-    })
-}

hooks/firebase/useUpdateTodo.ts

@@ -47,7 +47,7 @@ export const useUpdateTodo = () => {
                             date: data.date ? new Date(data.date.seconds * 1000) : null,
                             ref: doc.ref
                         };
-                    }) as IToDo[];
+                    }) as unknown as IToDo[];
 
                     let filteredTodos = connectedTodos?.filter((item) => compareAsc(format(item.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) === 1 ||
                         compareAsc(format(item.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) === 0).sort((a,b) =>{

ios/Cally.xcodeproj/project.pbxproj

@@ -307,7 +307,6 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Cally/Pods-Cally-resources.sh",
-				"${PODS_CONFIGURATION_BUILD_DIR}/AppAuth/AppAuthCore_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/BoringSSL-GRPC/openssl_grpc.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXApplication/ExpoApplication_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
@@ -350,7 +349,6 @@
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AppAuthCore_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/openssl_grpc.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoApplication_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
@@ -459,7 +457,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = com.cally.app;
-				PRODUCT_NAME = "Cally";
+				PRODUCT_NAME = Cally;
 				SWIFT_OBJC_BRIDGING_HEADER = "Cally/Cally-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -490,7 +488,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = com.cally.app;
-				PRODUCT_NAME = "Cally";
+				PRODUCT_NAME = Cally;
 				SWIFT_OBJC_BRIDGING_HEADER = "Cally/Cally-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";

ios/Cally/AppDelegate.mm

@@ -11,6 +11,13 @@
 // @generated begin @react-native-firebase/app-didFinishLaunchingWithOptions - expo prebuild (DO NOT MODIFY) sync-ecd111c37e49fdd1ed6354203cd6b1e2a38cccda
 [FIRApp configure];
 // @generated end @react-native-firebase/app-didFinishLaunchingWithOptions
+  NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
+  if (![defaults boolForKey:@"notFirstRun"]) {
+    [defaults setBool:YES forKey:@"notFirstRun"];
+    [defaults synchronize];
+    [[FIRAuth auth] signOut:NULL];
+  }
+
   self.moduleName = @"main";
 
   // You can add your custom initial props in the dictionary below.

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

@@ -180,7 +180,6 @@ index 848ceba..f326b8e 100644
 +                tmpDay_1 = add(tmpDay_1, { days: 1 });
              }
 +
-+            console.log(finalEvents_1);
              return finalEvents_1;
          }
      }, [events, sortedMonthView]);