Deletion fix

This commit is contained in:
Milan Paunovic
2024-12-24 23:19:23 +01:00
parent 609d01b81c
commit 7d3e39b77d
23 changed files with 312 additions and 638 deletions

View File

@ -81,7 +81,9 @@ export default function TabLayout() {
const isFetching = useIsFetching({queryKey: ['events']}) > 0;
const isLoading = isSyncing || isFetching;
const isLoading = React.useMemo(() => {
return isSyncing || isFetching;
}, [isSyncing, isFetching]);
const onRefresh = React.useCallback(async () => {
try {

View File

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

View File

@ -10,23 +10,42 @@ import {useCalendarControls} from "@/components/pages/calendar/useCalendarContro
import {EventCell} from "@/components/pages/calendar/EventCell";
import {isToday} from "date-fns";
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;
}
const MemoizedEventCell = React.memo(EventCell);
export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight, calendarWidth}) => {
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 +63,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo(({calen
const headerProps = useMemo(() => ({
dayBarHeight: 60,
headerBottomHeight: 20
headerBottomHeight: 20,
}), []);
const bodyProps = useMemo(() => ({
@ -66,7 +85,6 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo(({calen
const renderEvent = useCallback((event: any) => {
const attendees = getAttendees(event);
return (
<MemoizedEventCell
event={event}
@ -76,12 +94,6 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo(({calen
);
}, [familyMembers, handlePressEvent, getAttendees]);
useEffect(() => {
if (selectedDate && isToday(selectedDate)) {
calendarRef?.current?.goToDate({date: selectedDate});
}
}, [selectedDate]);
return (
<CalendarContainer
ref={calendarRef}
@ -93,7 +105,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo(({calen
events={formattedEvents ?? []}
onPressEvent={handlePressEvent}
onPressBackground={handlePressCell}
onLoad={onLoad}
>
<CalendarHeader {...headerProps} />
<CalendarBody

View File

@ -1,15 +1,23 @@
import React from 'react';
import {StyleSheet, View, ActivityIndicator} from 'react-native';
import {Text} from 'react-native-ui-lib';
import {useGetEvents} from '@/hooks/firebase/useGetEvents';
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 { StyleSheet, View, ActivityIndicator } from 'react-native';
import { Text } from 'react-native-ui-lib';
import Animated, {
withTiming,
useAnimatedStyle,
FadeOut,
useSharedValue,
runOnJS
} from 'react-native-reanimated';
import { useGetEvents } from '@/hooks/firebase/useGetEvents';
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 {isLoading} = useGetEvents();
const [mode] = useAtom(modeAtom);
const {isSyncing} = useSyncEvents();
const { isLoading } = useGetEvents();
const [mode] = useAtom<CalendarMode>(modeAtom);
const { isSyncing } = useSyncEvents();
const isTablet = Device.deviceType === Device.DeviceType.TABLET;
const isCalendarReady = useSharedValue(false);
useCalSync();
if (isLoading || isSyncing) {
return (
<View style={styles.loadingContainer}>
{isSyncing && <Text>Syncing...</Text>}
<ActivityIndicator size="large" color="#0000ff"/>
</View>
);
}
const handleRenderComplete = React.useCallback(() => {
isCalendarReady.value = true;
}, []);
return mode === "month"
? <MonthCalendar {...props} />
: <DetailedCalendar {...props} />;
});
const styles = StyleSheet.create({
loadingContainer: {
const containerStyle = useAnimatedStyle(() => ({
opacity: withTiming(isCalendarReady.value ? 1 : 0, { duration: 500 }),
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)',
},

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(
({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") {
setSelectedNewEndDate(date);
} else {
setMode("day");
setSelectedDate(date);
}
date && setSelectedDate(date);
setTimeout(() => {
setMode("day");
}, 100)
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
@ -477,13 +151,11 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
return {};
}
}, [mode]);
const {enrichedEvents, filteredEvents} = useMemo(() => {
const startTime = Date.now();
const {filteredEvents} = useMemo(() => {
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.end &&
event?.start instanceof Date &&
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) => {
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};
return {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}

View File

@ -29,6 +29,21 @@ 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 = 5 * DAY_IN_MS;
@ -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 dateStr = format(startDate, 'yyyy-MM-dd');
const endDateStr = format(endDate, 'yyyy-MM-dd');
const formattedEvent = event.allDay ? {
id: event.id,
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({
id: event.id,
title: event.title,
start: { date: dateStr },
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
});
const hash = createEventHash(formattedEvent);
if (!processedHashes.has(hash)) {
processedHashes.add(hash);
uniqueEvents.set(event.id, formattedEvent);
}
} 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 = (

View File

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

View File

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

View File

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

View File

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

View File

@ -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 queryClients = useQueryClient()
const {user: currentUser, profileData} = useAuthContext();
const queryClient = useQueryClient();
return useMutation({
mutationKey: ["createEvent"],
mutationFn: async (eventData: Partial<EventData>) => {
try {
if (eventData.id) {
const snapshot = await firestore()
.collection("Events")
.where("id", "==", eventData.id)
.get();
const newDoc = firestore().collection('Events').doc();
await firestore()
.collection("Events")
.add({
...eventData,
id: newDoc.id,
creatorId: currentUser?.uid,
familyId: profileData?.familyId
});
},
onMutate: async (newEvent) => {
await queryClient.cancelQueries({
queryKey: ["events", currentUser?.uid]
});
if (!snapshot.empty) {
const docId = snapshot.docs[0].id;
await firestore()
.collection("Events")
.doc(docId)
.set({
...eventData,
attendees: (eventData.attendees?.length ?? 0),
creatorId: currentUser?.uid,
familyId: profileData?.familyId
}, {merge: true});
return;
}
}
const newDoc = firestore().collection('Events').doc();
await firestore()
.collection("Events")
.add({...eventData, id: newDoc.id, creatorId: currentUser?.uid, familyId: profileData?.familyId});
} catch (e) {
console.error(e);
const formattedEvent = {
...newEvent,
start: newEvent.startDate,
end: newEvent.endDate,
id: Date.now().toString(),
creatorId: currentUser?.uid,
familyId: profileData?.familyId,
eventColor: profileData?.eventColor,
hideHours: newEvent.allDay,
};
["false", "true"].forEach(viewState => {
const queryKey = ["events", currentUser?.uid, viewState === "true"];
const previousData = queryClient.getQueryData(queryKey) as any[] || [];
queryClient.setQueryData(queryKey, [...previousData, formattedEvent]);
});
},
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()
});
});
});
}
}
})
}
});
};
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 {
// Create an array of promises for each event's Firestore read/write operation
const promises = eventDataArray.map(async (eventData) => {
console.log("Processing EventData: ", eventData);
const promises = eventDataArray.map(async (eventData) => {
const snapshot = await firestore()
.collection("Events")
.where("id", "==", eventData.id)
.get();
// Check if the event already exists
const snapshot = await firestore()
if (snapshot.empty) {
return firestore()
.collection("Events")
.where("id", "==", eventData.id)
.get();
.add({...eventData, creatorId: currentUser?.uid});
}
const docId = snapshot.docs[0].id;
return firestore()
.collection("Events")
.doc(docId)
.set({...eventData, creatorId: currentUser?.uid}, {merge: true});
});
if (snapshot.empty) {
// 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);
}
await Promise.all(promises);
},
onSuccess: () => {
queryClient.invalidateQueries({queryKey: ["events"]});
onMutate: async (newEvents) => {
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 = () => {
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
});
}
});

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({
queryKey: ["events", user.uid]
});
queryClient.invalidateQueries({
queryKey: ["notifications"]
});
}
}
}

View File

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

View File

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

View File

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

View File

@ -31,6 +31,9 @@ export const useGetTodos = () => {
repeatDays: data.repeatDays ?? []
};
}) 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,
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) =>{

View File

@ -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.

View File

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