Merge branch 'main' into dev

# Conflicts:
#	components/pages/calendar/DetailedCalendar.tsx
This commit is contained in:
Dejan
2024-12-29 18:59:46 +01:00
29 changed files with 414 additions and 4684 deletions

View File

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

View File

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

View File

@ -8,7 +8,6 @@ import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {format, isSameDay} from "date-fns"; import {format, isSameDay} from "date-fns";
import * as Device from "expo-device"; import * as Device from "expo-device";
import {Mode} from "react-native-big-calendar"; import {Mode} from "react-native-big-calendar";
import { FontAwesome5 } from '@expo/vector-icons';
export const CalendarHeader = memo(() => { export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
@ -48,17 +47,25 @@ export const CalendarHeader = memo(() => {
const getInitialIndex = () => { const getInitialIndex = () => {
if (isTablet) { if (isTablet) {
switch (mode) { 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 { } else {
switch (mode) { 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", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
paddingHorizontal: 10, paddingHorizontal: 10,
paddingVertical: 8, paddingVertical: isTablet ? 8 : 0,
borderRadius: 20, borderRadius: 20,
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
borderBottomRightRadius: 0, borderBottomRightRadius: 0,
@ -79,9 +86,11 @@ export const CalendarHeader = memo(() => {
centerV centerV
> >
<View row centerV gap-3> <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 <Picker
value={months[selectedDate.getMonth()]} value={months[selectedDate.getMonth()]}
placeholder={"Select Month"} placeholder={"Select Month"}
@ -108,7 +117,7 @@ export const CalendarHeader = memo(() => {
style={styles.todayButton} style={styles.todayButton}
onPress={() => setSelectedDate(new Date())} 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> <Text style={styles.todayDate}>{format(new Date(), "d")}</Text>
</Button> </Button>
<View> <View>

View File

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

View File

@ -1,15 +1,23 @@
import React from 'react'; 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 { interface EventCalendarProps {
calendarHeight: number; calendarHeight: number;
@ -17,33 +25,81 @@ interface EventCalendarProps {
} }
export const EventCalendar: React.FC<EventCalendarProps> = React.memo((props) => { 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(); 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, flex: 1,
justifyContent: 'center', }));
alignItems: 'center',
const monthStyle = useAnimatedStyle(() => ({
opacity: withTiming(mode === 'month' ? 1 : 0, { duration: 300 }),
position: 'absolute', position: 'absolute',
width: '100%', width: '100%',
height: '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, zIndex: 100,
backgroundColor: 'rgba(255, 255, 255, 0.9)', backgroundColor: 'rgba(255, 255, 255, 0.9)',
}, },

View File

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

View File

@ -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( export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
({calendarHeight}) => { ({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents(); const {data: events, isLoading} = useGetEvents();
@ -398,12 +74,10 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
const handlePressCell = useCallback( const handlePressCell = useCallback(
(date: Date) => { (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] [mode, setSelectedNewEndDate, setSelectedDate]
); );
@ -477,13 +151,11 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
return {}; return {};
} }
}, [mode]); }, [mode]);
const {enrichedEvents, filteredEvents} = useMemo(() => { const {filteredEvents} = useMemo(() => {
const startTime = Date.now();
const startOffset = mode === "month" ? 40 : (mode === "week" || mode === "3days") ? 10 : 1; const startOffset = mode === "month" ? 40 : (mode === "week" || mode === "3days") ? 10 : 1;
const endOffset = 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) { if (selectedUser && Device.deviceType === DeviceType.TABLET) {
eventsToFilter = events?.filter(event => eventsToFilter = events?.filter(event =>
@ -495,8 +167,8 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
const filteredEvents = const filteredEvents =
eventsToFilter?.filter( eventsToFilter?.filter(
(event) => (event) =>
event.start && event?.start instanceof Date &&
event.end && event?.end instanceof Date &&
isWithinInterval(event.start, { isWithinInterval(event.start, {
start: subDays(selectedDate, startOffset), start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset), 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]); }, [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(() => { useEffect(() => {
setOffsetMinutes(getTotalMinutes()); setOffsetMinutes(getTotalMinutes());
}, [events, mode]); }, [events, mode]);
if (isLoading) { if (isLoading || !events) {
return ( return (
<View style={styles.loadingContainer}> <View style={styles.loadingContainer}>
{isSyncing && <Text>Syncing...</Text>} {isSyncing && <Text>Syncing...</Text>}
@ -603,7 +206,7 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
<Calendar <Calendar
bodyContainerStyle={styles.calHeader} bodyContainerStyle={styles.calHeader}
swipeEnabled swipeEnabled
mode={mode} mode={"month"}
sortedMonthView sortedMonthView
events={filteredEvents} events={filteredEvents}
// renderEvent={renderEvent} // renderEvent={renderEvent}

View File

@ -29,9 +29,24 @@ interface FormattedEvent {
color: string; 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 // Precompute time constants
const DAY_IN_MS = 24 * 60 * 60 * 1000; 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; const TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
// Memoize date range calculations // Memoize date range calculations
@ -59,75 +74,70 @@ const getValidDate = (date: any, timestamp?: EventTimestamp): Date | null => {
}; };
// Batch process events // Batch process events
const processEvents = async ( const processEvents = async (
events: Event[], events: Event[],
selectedDate: Date, selectedDate: Date,
selectedUser: { uid: string } | null selectedUser: { uid: string } | null
): Promise<FormattedEvent[]> => { ): Promise<FormattedEvent[]> => {
// Early return if no events
if (!events.length) return []; if (!events.length) return [];
// Pre-calculate constants
const currentRangeKey = getDateRangeKey(selectedDate.getTime()); const currentRangeKey = getDateRangeKey(selectedDate.getTime());
const isTablet = Device.deviceType === DeviceType.TABLET; const isTablet = Device.deviceType === DeviceType.TABLET;
const userId = selectedUser?.uid; 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 CHUNK_SIZE = 100;
const results: FormattedEvent[] = [];
for (let i = 0; i < events.length; i += CHUNK_SIZE) { for (let i = 0; i < events.length; i += CHUNK_SIZE) {
const chunk = events.slice(i, 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)); await new Promise(resolve => setTimeout(resolve, 0));
for (const event of chunk) { for (const event of chunk) {
try { try {
// Quick user filter
if (isTablet && userId && if (isTablet && userId &&
!event.attendees?.includes(userId) && !event.attendees?.includes(userId) &&
event.creatorId !== userId) { event.creatorId !== userId) {
continue; continue;
} }
// Validate dates first
const startDate = getValidDate(event.start, event.startDate); const startDate = getValidDate(event.start, event.startDate);
if (!startDate) continue; if (!startDate) continue;
const rangeKey = getDateRangeKey(startDate.getTime()); const rangeKey = getDateRangeKey(startDate.getTime());
// Skip events outside our range
if (Math.abs(rangeKey - currentRangeKey) > 1) continue; if (Math.abs(rangeKey - currentRangeKey) > 1) continue;
const endDate = getValidDate(event.end, event.endDate); const endDate = getValidDate(event.end, event.endDate);
if (!endDate) continue; 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) { } catch (error) {
console.error('Error processing event:', event.id, error); console.error('Error processing event:', event.id, error);
continue; continue;
@ -135,7 +145,7 @@ const processEvents = async (
} }
} }
return results; return Array.from(uniqueEvents.values());
}; };
export const useFormattedEvents = ( export const useFormattedEvents = (

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,88 +2,134 @@ import {useAuthContext} from "@/contexts/AuthContext";
import {useMutation, useQueryClient} from "@tanstack/react-query"; import {useMutation, useQueryClient} from "@tanstack/react-query";
import firestore from "@react-native-firebase/firestore"; import firestore from "@react-native-firebase/firestore";
import {EventData} from "@/hooks/firebase/types/eventData"; import {EventData} from "@/hooks/firebase/types/eventData";
import {useAtomValue} from "jotai";
import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";
export const useCreateEvent = () => { export const useCreateEvent = () => {
const {user: currentUser, profileData} = useAuthContext() const {user: currentUser, profileData} = useAuthContext();
const queryClients = useQueryClient() const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationKey: ["createEvent"], mutationKey: ["createEvent"],
mutationFn: async (eventData: Partial<EventData>) => { 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 = () => { export const useCreateEventsFromProvider = () => {
const {user: currentUser} = useAuthContext(); const {user: currentUser, profileData} = useAuthContext();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationKey: ["createEventsFromProvider"], mutationKey: ["createEventsFromProvider"],
mutationFn: async (eventDataArray: Partial<EventData>[]) => { 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") .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()
});
});
});
}
} }
}); })
}; }

View File

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

View File

@ -1,39 +1,70 @@
import {useMutation, useQueryClient} from "@tanstack/react-query"; import {useMutation, useQueryClient} from "@tanstack/react-query";
import firestore from "@react-native-firebase/firestore"; import firestore from "@react-native-firebase/firestore";
import {useAuthContext} from "@/contexts/AuthContext";
export const useDeleteEvent = () => { export const useDeleteEvent = () => {
const {user, profileData} = useAuthContext();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation({ return useMutation({
mutationKey: ["deleteEvent"], mutationKey: ["deleteEvent"],
mutationFn: async ({eventId, docId}: { eventId?: string; docId?: string }) => { mutationFn: async ({eventId, docId}: { eventId?: string; docId?: string }) => {
try { 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) { } catch (e) {
console.error(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()
});
});
});
}
} }
}); });
}; };

View File

@ -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();
},
});
};

View File

@ -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
}
)
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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"]})
}
})
}

View File

@ -47,7 +47,7 @@ export const useUpdateTodo = () => {
date: data.date ? new Date(data.date.seconds * 1000) : null, date: data.date ? new Date(data.date.seconds * 1000) : null,
ref: doc.ref 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 || 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) =>{ compareAsc(format(item.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) === 0).sort((a,b) =>{

View File

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

View File

@ -11,6 +11,13 @@
// @generated begin @react-native-firebase/app-didFinishLaunchingWithOptions - expo prebuild (DO NOT MODIFY) sync-ecd111c37e49fdd1ed6354203cd6b1e2a38cccda // @generated begin @react-native-firebase/app-didFinishLaunchingWithOptions - expo prebuild (DO NOT MODIFY) sync-ecd111c37e49fdd1ed6354203cd6b1e2a38cccda
[FIRApp configure]; [FIRApp configure];
// @generated end @react-native-firebase/app-didFinishLaunchingWithOptions // @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"; self.moduleName = @"main";
// You can add your custom initial props in the dictionary below. // You can add your custom initial props in the dictionary below.

File diff suppressed because it is too large Load Diff

View File

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