mirror of
https://github.com/urosran/cally.git
synced 2026-10-23 09:17:55 +00:00
New calendar
This commit is contained in:
Milan Paunovic
@@ -0,0 +1,102 @@
|
||||
import React, {useCallback, useEffect, useMemo, useRef} from "react";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import {useAtomValue} from "jotai";
|
||||
import {modeAtom, selectedDateAtom, selectedUserAtom} from "@/components/pages/calendar/atoms";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import {CalendarBody, CalendarContainer, CalendarHeader, CalendarKitHandle} from "@howljs/calendar-kit";
|
||||
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
|
||||
import {useFormattedEvents} from "@/components/pages/calendar/useFormattedEvents";
|
||||
import {useCalendarControls} from "@/components/pages/calendar/useCalendarControls";
|
||||
import {EventCell} from "@/components/pages/calendar/EventCell";
|
||||
import {isToday} from "date-fns";
|
||||
|
||||
interface EventCalendarProps {
|
||||
calendarHeight: number;
|
||||
calendarWidth: number;
|
||||
}
|
||||
|
||||
export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight, calendarWidth}) => {
|
||||
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 {data: formattedEvents} = useFormattedEvents(events ?? [], selectedDate, selectedUser);
|
||||
const {
|
||||
handlePressEvent,
|
||||
handlePressCell,
|
||||
debouncedOnDateChanged
|
||||
} = useCalendarControls(events ?? []);
|
||||
|
||||
const numberOfDays = useMemo(() => {
|
||||
return mode === 'week' ? 7 : mode === '3days' ? 3 : 1;
|
||||
}, [mode]);
|
||||
|
||||
const firstDay = useMemo(() => {
|
||||
return profileData?.firstDayOfWeek === "Mondays" ? 1 : 0;
|
||||
}, [profileData?.firstDayOfWeek]);
|
||||
|
||||
const headerProps = useMemo(() => ({
|
||||
dayBarHeight: 60,
|
||||
headerBottomHeight: 20
|
||||
}), []);
|
||||
|
||||
const bodyProps = useMemo(() => ({
|
||||
showNowIndicator: true,
|
||||
hourFormat: "h:mm a"
|
||||
}), []);
|
||||
|
||||
const containerProps = useMemo(() => ({
|
||||
hourWidth: 60,
|
||||
allowPinchToZoom: true,
|
||||
useHaptic: true,
|
||||
scrollToNow: true,
|
||||
initialDate: selectedDate.toISOString(),
|
||||
}), [selectedDate]);
|
||||
|
||||
const renderEvent = useCallback((event: any) => {
|
||||
const attendees = useMemo(() =>
|
||||
familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [],
|
||||
[familyMembers, event.attendees]
|
||||
);
|
||||
|
||||
return (
|
||||
<EventCell
|
||||
event={event}
|
||||
onPress={handlePressEvent}
|
||||
attendees={attendees}
|
||||
/>
|
||||
);
|
||||
}, [familyMembers, handlePressEvent]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDate && isToday(selectedDate)) {
|
||||
calendarRef?.current?.goToDate({date: selectedDate});
|
||||
}
|
||||
}, [selectedDate]);
|
||||
|
||||
return (
|
||||
<CalendarContainer
|
||||
ref={calendarRef}
|
||||
{...containerProps}
|
||||
numberOfDays={numberOfDays}
|
||||
calendarWidth={calendarWidth}
|
||||
onDateChanged={debouncedOnDateChanged}
|
||||
firstDay={firstDay}
|
||||
events={formattedEvents ?? []}
|
||||
onPressEvent={handlePressEvent}
|
||||
onPressBackground={handlePressCell}
|
||||
>
|
||||
<CalendarHeader {...headerProps} />
|
||||
<CalendarBody
|
||||
{...bodyProps}
|
||||
renderEvent={renderEvent}
|
||||
/>
|
||||
</CalendarContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailedCalendar;
|
||||
@@ -1,734 +1,52 @@
|
||||
import React, {useCallback, useEffect, useMemo, useState} from "react";
|
||||
import {Calendar} from "react-native-big-calendar";
|
||||
import {ActivityIndicator, StyleSheet, TouchableOpacity, View, ViewStyle} from "react-native";
|
||||
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
|
||||
import {useAtom, useSetAtom} from "jotai";
|
||||
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 {
|
||||
editVisibleAtom,
|
||||
eventForEditAtom,
|
||||
isAllDayAtom,
|
||||
isFamilyViewAtom,
|
||||
modeAtom,
|
||||
selectedDateAtom,
|
||||
selectedNewEventDateAtom,
|
||||
selectedUserAtom,
|
||||
} from "@/components/pages/calendar/atoms";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
|
||||
import {Text} from "react-native-ui-lib";
|
||||
import {addDays, compareAsc, format, isWithinInterval, subDays} from "date-fns";
|
||||
import {useCalSync} from "@/hooks/useCalSync";
|
||||
import {useSyncEvents} from "@/hooks/useSyncOnScroll";
|
||||
import {colorMap} from "@/constants/colorMap";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import CachedImage from "expo-cached-image";
|
||||
import { DeviceType } from "expo-device";
|
||||
import * as Device from "expo-device"
|
||||
} from './atoms';
|
||||
import {MonthCalendar} from "@/components/pages/calendar/MonthCalendar";
|
||||
import {DetailedCalendar} from "@/components/pages/calendar/DetailedCalendar";
|
||||
|
||||
interface EventCalendarProps {
|
||||
calendarHeight: number;
|
||||
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
|
||||
calendarWidth: number;
|
||||
}
|
||||
|
||||
const getTotalMinutes = () => {
|
||||
const date = new Date();
|
||||
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
|
||||
};
|
||||
export const EventCalendar: React.FC<EventCalendarProps> = React.memo((props) => {
|
||||
const {data: events, isLoading} = useGetEvents();
|
||||
const [mode] = useAtom(modeAtom);
|
||||
const {isSyncing} = useSyncEvents();
|
||||
useCalSync();
|
||||
|
||||
|
||||
const processEventsForSideBySide = (events: CalendarEvent[]) => {
|
||||
if (!events) return [];
|
||||
|
||||
// Group events by day and time slot
|
||||
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,
|
||||
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) {
|
||||
if (isLoading || isSyncing) {
|
||||
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;
|
||||
|
||||
console.log('Rendering event:', {
|
||||
title: event.title,
|
||||
start: event.start,
|
||||
end: event.end,
|
||||
width: event.width,
|
||||
xPos: event.xPos,
|
||||
isMultiDaySegment: event.isMultiDaySegment
|
||||
});
|
||||
|
||||
|
||||
// Ensure we have Date objects
|
||||
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 style={styles.loadingContainer}>
|
||||
{isSyncing && <Text>Syncing...</Text>}
|
||||
<ActivityIndicator size="large" color="#0000ff"/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
({calendarHeight}) => {
|
||||
const {data: events, isLoading} = useGetEvents();
|
||||
const {profileData, user} = useAuthContext();
|
||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||
const [mode, setMode] = useAtom(modeAtom);
|
||||
const [isFamilyView] = useAtom(isFamilyViewAtom);
|
||||
|
||||
//tablet view filter
|
||||
const [selectedUser] = useAtom(selectedUserAtom);
|
||||
|
||||
const setEditVisible = useSetAtom(editVisibleAtom);
|
||||
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
|
||||
const setEventForEdit = useSetAtom(eventForEditAtom);
|
||||
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
|
||||
|
||||
const {isSyncing} = useSyncEvents()
|
||||
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
|
||||
useCalSync()
|
||||
|
||||
const todaysDate = new Date();
|
||||
|
||||
const handlePressEvent = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
if (mode === "day" || mode === "week" || mode === "3days") {
|
||||
setEditVisible(true);
|
||||
setEventForEdit(event);
|
||||
} else {
|
||||
setMode("day");
|
||||
setSelectedDate(event.start);
|
||||
}
|
||||
},
|
||||
[setEditVisible, setEventForEdit, mode]
|
||||
);
|
||||
|
||||
const handlePressCell = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day" || mode === "week" || mode === "3days") {
|
||||
setSelectedNewEndDate(date);
|
||||
} else {
|
||||
setMode("day");
|
||||
setSelectedDate(date);
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate, setSelectedDate]
|
||||
);
|
||||
|
||||
const handlePressDayHeader = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day") {
|
||||
setIsAllDay(true);
|
||||
setSelectedNewEndDate(date);
|
||||
setEditVisible(true);
|
||||
}
|
||||
if (mode === 'week' || mode === '3days') {
|
||||
setSelectedDate(date)
|
||||
setMode("day")
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate]
|
||||
);
|
||||
|
||||
const handleSwipeEnd = useCallback(
|
||||
(date: Date) => {
|
||||
setSelectedDate(date);
|
||||
},
|
||||
[setSelectedDate]
|
||||
);
|
||||
|
||||
const memoizedEventCellStyle = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
let eventColor = event.eventColor;
|
||||
if (!isFamilyView && (event.attendees?.includes(user?.uid!) || event.creatorId! === user?.uid)) {
|
||||
eventColor = profileData?.eventColor ?? colorMap.teal;
|
||||
}
|
||||
|
||||
return {backgroundColor: eventColor, fontSize: 14}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const memoizedWeekStartsOn = useMemo(
|
||||
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
|
||||
[profileData]
|
||||
);
|
||||
|
||||
const isSameDate = useCallback((date1: Date, date2: Date) => {
|
||||
return (
|
||||
date1.getDate() === date2.getDate() &&
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getFullYear() === date2.getFullYear()
|
||||
);
|
||||
}, []);
|
||||
|
||||
const dayHeaderColor = useMemo(() => {
|
||||
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
|
||||
}, [selectedDate, mode]);
|
||||
|
||||
const dateStyle = useMemo(() => {
|
||||
if (mode === "week" || mode === "3days") return undefined;
|
||||
return isSameDate(todaysDate, selectedDate) && mode === "day"
|
||||
? styles.dayHeader
|
||||
: styles.otherDayHeader;
|
||||
}, [selectedDate, mode]);
|
||||
|
||||
const memoizedHeaderContentStyle = useMemo(() => {
|
||||
if (mode === "day") {
|
||||
return styles.dayModeHeader;
|
||||
} else if (mode === "week" || mode === "3days") {
|
||||
return styles.weekModeHeader;
|
||||
} else if (mode === "month") {
|
||||
return styles.monthModeHeader;
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}, [mode]);
|
||||
const {enrichedEvents, 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;
|
||||
|
||||
if (selectedUser && Device.deviceType === DeviceType.TABLET) {
|
||||
eventsToFilter = events?.filter(event =>
|
||||
event.attendees?.includes(selectedUser.uid) ||
|
||||
event.creatorId === selectedUser.uid
|
||||
);
|
||||
}
|
||||
|
||||
const filteredEvents =
|
||||
eventsToFilter?.filter(
|
||||
(event) =>
|
||||
event.start &&
|
||||
event.end &&
|
||||
isWithinInterval(event.start, {
|
||||
start: subDays(selectedDate, startOffset),
|
||||
end: addDays(selectedDate, endOffset),
|
||||
}) &&
|
||||
isWithinInterval(event.end, {
|
||||
start: subDays(selectedDate, startOffset),
|
||||
end: addDays(selectedDate, endOffset),
|
||||
})
|
||||
) ?? [];
|
||||
|
||||
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};
|
||||
}, [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) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
{isSyncing && <Text>Syncing...</Text>}
|
||||
<ActivityIndicator size="large" color="#0000ff"/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isSyncing && (
|
||||
<View style={styles.loadingContainer}>
|
||||
{isSyncing && <Text>Syncing...</Text>}
|
||||
<ActivityIndicator size="large" color="#0000ff"/>
|
||||
</View>
|
||||
)}
|
||||
<Calendar
|
||||
bodyContainerStyle={styles.calHeader}
|
||||
swipeEnabled
|
||||
mode={mode}
|
||||
sortedMonthView
|
||||
events={filteredEvents}
|
||||
// renderEvent={renderEvent}
|
||||
eventCellStyle={memoizedEventCellStyle}
|
||||
allDayEventCellStyle={memoizedEventCellStyle}
|
||||
// enableEnrichedEvents={true}
|
||||
// enrichedEventsByDate={enrichedEvents}
|
||||
onPressEvent={handlePressEvent}
|
||||
weekStartsOn={memoizedWeekStartsOn}
|
||||
height={calendarHeight}
|
||||
activeDate={todaysDate}
|
||||
date={selectedDate}
|
||||
onPressCell={handlePressCell}
|
||||
headerContentStyle={memoizedHeaderContentStyle}
|
||||
onSwipeEnd={handleSwipeEnd}
|
||||
scrollOffsetMinutes={offsetMinutes}
|
||||
theme={{
|
||||
palette: {
|
||||
nowIndicator: profileData?.eventColor || "#fd1575",
|
||||
gray: {
|
||||
"100": "#e8eaed",
|
||||
"200": "#e8eaed",
|
||||
"500": "#b7b7b7",
|
||||
"800": "#919191",
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
sm: {fontFamily: "Manrope_600SemiBold", fontSize: 8},
|
||||
xl: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 14,
|
||||
},
|
||||
moreLabel: {},
|
||||
xs: {fontSize: 10},
|
||||
},
|
||||
}}
|
||||
dayHeaderStyle={dateStyle}
|
||||
dayHeaderHighlightColor={"white"}
|
||||
showAdjacentMonths
|
||||
headerContainerStyle={mode !== "month" ? {
|
||||
overflow: "hidden",
|
||||
} : {}}
|
||||
hourStyle={styles.hourStyle}
|
||||
onPressDateHeader={handlePressDayHeader}
|
||||
ampm
|
||||
// renderCustomDateForMonth={renderCustomDateForMonth}
|
||||
/>
|
||||
<View style={{backgroundColor: 'white', height: 50, width: '100%'}}/>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
return mode === "month"
|
||||
? <MonthCalendar {...props} />
|
||||
: <DetailedCalendar {...props} />;
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
segmentslblStyle: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
},
|
||||
calHeader: {
|
||||
borderWidth: 0,
|
||||
paddingBottom: 60,
|
||||
},
|
||||
dayModeHeader: {
|
||||
alignSelf: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
alignContent: "center",
|
||||
width: 38,
|
||||
right: 42,
|
||||
height: 13,
|
||||
},
|
||||
weekModeHeader: {},
|
||||
monthModeHeader: {},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: 100,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
||||
},
|
||||
dayHeader: {
|
||||
backgroundColor: "#4184f2",
|
||||
aspectRatio: 1,
|
||||
borderRadius: 100,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
otherDayHeader: {
|
||||
backgroundColor: "transparent",
|
||||
color: "#919191",
|
||||
aspectRatio: 1,
|
||||
borderRadius: 100,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
hourStyle: {
|
||||
color: "#5f6368",
|
||||
fontSize: 12,
|
||||
fontFamily: "Manrope_500Medium",
|
||||
},
|
||||
eventCell: {
|
||||
flex: 1,
|
||||
borderRadius: 4,
|
||||
padding: 4,
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
eventTitle: {
|
||||
color: 'white',
|
||||
fontSize: 12,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
zIndex: 100,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
},
|
||||
});
|
||||
|
||||
export default EventCalendar;
|
||||
@@ -0,0 +1,117 @@
|
||||
import React from 'react';
|
||||
import {StyleSheet, TouchableOpacity, View} from 'react-native';
|
||||
import {Text} from 'react-native-ui-lib';
|
||||
import CachedImage from 'expo-cached-image';
|
||||
import {format} from 'date-fns';
|
||||
import {colorMap} from '@/constants/colorMap';
|
||||
|
||||
interface EventCellProps {
|
||||
event: any;
|
||||
onPress: (event: any) => void;
|
||||
attendees: any[];
|
||||
}
|
||||
|
||||
export const EventCell: React.FC<EventCellProps> = React.memo((
|
||||
{
|
||||
event,
|
||||
onPress,
|
||||
attendees
|
||||
}) => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => onPress(event)}
|
||||
style={[styles.eventCell, {backgroundColor: event.eventColor}]}
|
||||
>
|
||||
<Text style={styles.eventTitle} numberOfLines={1}>
|
||||
{event.title}
|
||||
</Text>
|
||||
<Text style={[styles.eventTitle, {fontSize: 10, opacity: 0.8}]}>
|
||||
{format(new Date(event.start.dateTime), 'h:mm a')} - {format(new Date(event.end.dateTime), 'h:mm a')}
|
||||
</Text>
|
||||
|
||||
{attendees.length > 0 && (
|
||||
<View style={styles.attendeesContainer}>
|
||||
{attendees.slice(0, 3).map((attendee, index) => (
|
||||
<View
|
||||
key={attendee?.uid}
|
||||
style={[styles.attendeeIcon, {left: index * 19}]}
|
||||
>
|
||||
{attendee.pfp ? (
|
||||
<CachedImage
|
||||
source={{uri: attendee.pfp}}
|
||||
style={styles.attendeeImage}
|
||||
cacheKey={attendee.pfp}
|
||||
/>
|
||||
) : (
|
||||
<Text style={styles.attendeeInitials}>
|
||||
{attendee?.firstName?.at(0)}
|
||||
{attendee?.lastName?.at(0)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
{attendees.length > 3 && (
|
||||
<View style={[styles.attendeeCount, {left: 3 * 19}]}>
|
||||
<Text style={styles.attendeeCountText}>
|
||||
+{attendees.length - 3}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
eventCell: {
|
||||
flex: 1,
|
||||
borderRadius: 4,
|
||||
padding: 8,
|
||||
height: '100%',
|
||||
},
|
||||
eventTitle: {
|
||||
color: 'white',
|
||||
fontSize: 12,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
},
|
||||
attendeesContainer: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 8,
|
||||
height: 27.32,
|
||||
},
|
||||
attendeeIcon: {
|
||||
position: 'absolute',
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 50,
|
||||
borderWidth: 2,
|
||||
borderColor: '#f2f2f2',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
attendeeImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
attendeeInitials: {
|
||||
color: 'white',
|
||||
fontSize: 12,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
},
|
||||
attendeeCount: {
|
||||
position: 'absolute',
|
||||
width: 27.32,
|
||||
height: 27.32,
|
||||
borderRadius: 50,
|
||||
borderWidth: 2,
|
||||
borderColor: '#f2f2f2',
|
||||
backgroundColor: colorMap.pink,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
attendeeCountText: {
|
||||
color: 'white',
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
fontSize: 12,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,723 @@
|
||||
import React, {useCallback, useEffect, useMemo, useState} from "react";
|
||||
import {Calendar} from "react-native-big-calendar";
|
||||
import {ActivityIndicator, StyleSheet, TouchableOpacity, View, ViewStyle} from "react-native";
|
||||
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
|
||||
import {useAtom, useSetAtom} from "jotai";
|
||||
import {
|
||||
editVisibleAtom,
|
||||
eventForEditAtom,
|
||||
isAllDayAtom,
|
||||
isFamilyViewAtom,
|
||||
modeAtom,
|
||||
selectedDateAtom,
|
||||
selectedNewEventDateAtom,
|
||||
selectedUserAtom,
|
||||
} from "@/components/pages/calendar/atoms";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
|
||||
import {Text} from "react-native-ui-lib";
|
||||
import {addDays, compareAsc, format, isWithinInterval, subDays} from "date-fns";
|
||||
import {useCalSync} from "@/hooks/useCalSync";
|
||||
import {useSyncEvents} from "@/hooks/useSyncOnScroll";
|
||||
import {colorMap} from "@/constants/colorMap";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import CachedImage from "expo-cached-image";
|
||||
import { DeviceType } from "expo-device";
|
||||
import * as Device from "expo-device"
|
||||
|
||||
interface EventCalendarProps {
|
||||
calendarHeight: number;
|
||||
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
|
||||
calendarWidth: number;
|
||||
}
|
||||
|
||||
const getTotalMinutes = () => {
|
||||
const date = new Date();
|
||||
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
|
||||
};
|
||||
|
||||
|
||||
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();
|
||||
const {profileData, user} = useAuthContext();
|
||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||
const [mode, setMode] = useAtom(modeAtom);
|
||||
const [isFamilyView] = useAtom(isFamilyViewAtom);
|
||||
|
||||
//tablet view filter
|
||||
const [selectedUser] = useAtom(selectedUserAtom);
|
||||
|
||||
const setEditVisible = useSetAtom(editVisibleAtom);
|
||||
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
|
||||
const setEventForEdit = useSetAtom(eventForEditAtom);
|
||||
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
|
||||
|
||||
const {isSyncing} = useSyncEvents()
|
||||
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
|
||||
useCalSync()
|
||||
|
||||
const todaysDate = new Date();
|
||||
|
||||
const handlePressEvent = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
if (mode === "day" || mode === "week" || mode === "3days") {
|
||||
setEditVisible(true);
|
||||
setEventForEdit(event);
|
||||
} else {
|
||||
setMode("day");
|
||||
setSelectedDate(event.start);
|
||||
}
|
||||
},
|
||||
[setEditVisible, setEventForEdit, mode]
|
||||
);
|
||||
|
||||
const handlePressCell = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day" || mode === "week" || mode === "3days") {
|
||||
setSelectedNewEndDate(date);
|
||||
} else {
|
||||
setMode("day");
|
||||
setSelectedDate(date);
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate, setSelectedDate]
|
||||
);
|
||||
|
||||
const handlePressDayHeader = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day") {
|
||||
setIsAllDay(true);
|
||||
setSelectedNewEndDate(date);
|
||||
setEditVisible(true);
|
||||
}
|
||||
if (mode === 'week' || mode === '3days') {
|
||||
setSelectedDate(date)
|
||||
setMode("day")
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate]
|
||||
);
|
||||
|
||||
const handleSwipeEnd = useCallback(
|
||||
(date: Date) => {
|
||||
setSelectedDate(date);
|
||||
},
|
||||
[setSelectedDate]
|
||||
);
|
||||
|
||||
const memoizedEventCellStyle = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
let eventColor = event.eventColor;
|
||||
if (!isFamilyView && (event.attendees?.includes(user?.uid!) || event.creatorId! === user?.uid)) {
|
||||
eventColor = profileData?.eventColor ?? colorMap.teal;
|
||||
}
|
||||
|
||||
return {backgroundColor: eventColor, fontSize: 14}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const memoizedWeekStartsOn = useMemo(
|
||||
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
|
||||
[profileData]
|
||||
);
|
||||
|
||||
const isSameDate = useCallback((date1: Date, date2: Date) => {
|
||||
return (
|
||||
date1.getDate() === date2.getDate() &&
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getFullYear() === date2.getFullYear()
|
||||
);
|
||||
}, []);
|
||||
|
||||
const dayHeaderColor = useMemo(() => {
|
||||
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
|
||||
}, [selectedDate, mode]);
|
||||
|
||||
const dateStyle = useMemo(() => {
|
||||
if (mode === "week" || mode === "3days") return undefined;
|
||||
return isSameDate(todaysDate, selectedDate) && mode === "day"
|
||||
? styles.dayHeader
|
||||
: styles.otherDayHeader;
|
||||
}, [selectedDate, mode]);
|
||||
|
||||
const memoizedHeaderContentStyle = useMemo(() => {
|
||||
if (mode === "day") {
|
||||
return styles.dayModeHeader;
|
||||
} else if (mode === "week" || mode === "3days") {
|
||||
return styles.weekModeHeader;
|
||||
} else if (mode === "month") {
|
||||
return styles.monthModeHeader;
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}, [mode]);
|
||||
const {enrichedEvents, 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;
|
||||
|
||||
if (selectedUser && Device.deviceType === DeviceType.TABLET) {
|
||||
eventsToFilter = events?.filter(event =>
|
||||
event.attendees?.includes(selectedUser.uid) ||
|
||||
event.creatorId === selectedUser.uid
|
||||
);
|
||||
}
|
||||
|
||||
const filteredEvents =
|
||||
eventsToFilter?.filter(
|
||||
(event) =>
|
||||
event.start &&
|
||||
event.end &&
|
||||
isWithinInterval(event.start, {
|
||||
start: subDays(selectedDate, startOffset),
|
||||
end: addDays(selectedDate, endOffset),
|
||||
}) &&
|
||||
isWithinInterval(event.end, {
|
||||
start: subDays(selectedDate, startOffset),
|
||||
end: addDays(selectedDate, endOffset),
|
||||
})
|
||||
) ?? [];
|
||||
|
||||
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};
|
||||
}, [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) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
{isSyncing && <Text>Syncing...</Text>}
|
||||
<ActivityIndicator size="large" color="#0000ff"/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isSyncing && (
|
||||
<View style={styles.loadingContainer}>
|
||||
{isSyncing && <Text>Syncing...</Text>}
|
||||
<ActivityIndicator size="large" color="#0000ff"/>
|
||||
</View>
|
||||
)}
|
||||
<Calendar
|
||||
bodyContainerStyle={styles.calHeader}
|
||||
swipeEnabled
|
||||
mode={mode}
|
||||
sortedMonthView
|
||||
events={filteredEvents}
|
||||
// renderEvent={renderEvent}
|
||||
eventCellStyle={memoizedEventCellStyle}
|
||||
allDayEventCellStyle={memoizedEventCellStyle}
|
||||
// enableEnrichedEvents={true}
|
||||
// enrichedEventsByDate={enrichedEvents}
|
||||
onPressEvent={handlePressEvent}
|
||||
weekStartsOn={memoizedWeekStartsOn}
|
||||
height={calendarHeight}
|
||||
activeDate={todaysDate}
|
||||
date={selectedDate}
|
||||
onPressCell={handlePressCell}
|
||||
headerContentStyle={memoizedHeaderContentStyle}
|
||||
onSwipeEnd={handleSwipeEnd}
|
||||
scrollOffsetMinutes={offsetMinutes}
|
||||
theme={{
|
||||
palette: {
|
||||
nowIndicator: profileData?.eventColor || "#fd1575",
|
||||
gray: {
|
||||
"100": "#e8eaed",
|
||||
"200": "#e8eaed",
|
||||
"500": "#b7b7b7",
|
||||
"800": "#919191",
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
sm: {fontFamily: "Manrope_600SemiBold", fontSize: 8},
|
||||
xl: {
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
fontSize: 14,
|
||||
},
|
||||
moreLabel: {},
|
||||
xs: {fontSize: 10},
|
||||
},
|
||||
}}
|
||||
dayHeaderStyle={dateStyle}
|
||||
dayHeaderHighlightColor={"white"}
|
||||
showAdjacentMonths
|
||||
headerContainerStyle={mode !== "month" ? {
|
||||
overflow: "hidden",
|
||||
} : {}}
|
||||
hourStyle={styles.hourStyle}
|
||||
onPressDateHeader={handlePressDayHeader}
|
||||
ampm
|
||||
// renderCustomDateForMonth={renderCustomDateForMonth}
|
||||
/>
|
||||
<View style={{backgroundColor: 'white', height: 50, width: '100%'}}/>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
segmentslblStyle: {
|
||||
fontSize: 12,
|
||||
fontFamily: "Manrope_600SemiBold",
|
||||
},
|
||||
calHeader: {
|
||||
borderWidth: 0,
|
||||
paddingBottom: 60,
|
||||
},
|
||||
dayModeHeader: {
|
||||
alignSelf: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
alignContent: "center",
|
||||
width: 38,
|
||||
right: 42,
|
||||
height: 13,
|
||||
},
|
||||
weekModeHeader: {},
|
||||
monthModeHeader: {},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
zIndex: 100,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
||||
},
|
||||
dayHeader: {
|
||||
backgroundColor: "#4184f2",
|
||||
aspectRatio: 1,
|
||||
borderRadius: 100,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
otherDayHeader: {
|
||||
backgroundColor: "transparent",
|
||||
color: "#919191",
|
||||
aspectRatio: 1,
|
||||
borderRadius: 100,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
hourStyle: {
|
||||
color: "#5f6368",
|
||||
fontSize: 12,
|
||||
fontFamily: "Manrope_500Medium",
|
||||
},
|
||||
eventCell: {
|
||||
flex: 1,
|
||||
borderRadius: 4,
|
||||
padding: 4,
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
eventTitle: {
|
||||
color: 'white',
|
||||
fontSize: 12,
|
||||
fontFamily: "PlusJakartaSans_500Medium",
|
||||
},
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useCallback } from 'react';
|
||||
import debounce from 'debounce';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import {
|
||||
editVisibleAtom,
|
||||
eventForEditAtom,
|
||||
selectedNewEventDateAtom,
|
||||
selectedDateAtom,
|
||||
} from '@/components/pages/calendar/atoms';
|
||||
import {DateOrDateTime} from "@howljs/calendar-kit";
|
||||
|
||||
export const useCalendarControls = (events: any[]) => {
|
||||
const setEditVisible = useSetAtom(editVisibleAtom);
|
||||
const setEventForEdit = useSetAtom(eventForEditAtom);
|
||||
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
|
||||
const setSelectedDate = useSetAtom(selectedDateAtom);
|
||||
|
||||
const handlePressEvent = useCallback((event: any) => {
|
||||
const foundEvent = events?.find(x => x.id === event.id);
|
||||
setEditVisible(true);
|
||||
setEventForEdit(foundEvent!);
|
||||
}, [events, setEditVisible, setEventForEdit]);
|
||||
|
||||
const handlePressCell = useCallback((date: DateOrDateTime) => {
|
||||
const selectedDate = new Date(date.dateTime!);
|
||||
const minutes = selectedDate.getMinutes();
|
||||
|
||||
selectedDate.setMinutes(minutes - (minutes % 30), 0, 0); // Also sets seconds and milliseconds to 0
|
||||
|
||||
setSelectedNewEndDate(selectedDate);
|
||||
}, [setSelectedNewEndDate]);
|
||||
|
||||
const debouncedOnDateChanged = useCallback(
|
||||
debounce((date: string) => {
|
||||
setSelectedDate(new Date(date));
|
||||
}, 50),
|
||||
[setSelectedDate]
|
||||
);
|
||||
|
||||
return {
|
||||
handlePressEvent,
|
||||
handlePressCell,
|
||||
debouncedOnDateChanged
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,154 @@
|
||||
import { DeviceType } from 'expo-device';
|
||||
import * as Device from 'expo-device';
|
||||
import { format } from 'date-fns';
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
interface EventTimestamp {
|
||||
seconds: number;
|
||||
nanoseconds: number;
|
||||
}
|
||||
|
||||
interface Event {
|
||||
id: string;
|
||||
title: string;
|
||||
start: Date | EventTimestamp;
|
||||
startDate?: EventTimestamp;
|
||||
end: Date | EventTimestamp;
|
||||
endDate?: EventTimestamp;
|
||||
allDay: boolean;
|
||||
eventColor: string;
|
||||
attendees?: string[];
|
||||
creatorId?: string;
|
||||
}
|
||||
|
||||
interface FormattedEvent {
|
||||
id: string;
|
||||
title: string;
|
||||
start: { date: string } | { dateTime: string; timeZone: string };
|
||||
end: { date: string } | { dateTime: string; timeZone: string };
|
||||
color: string;
|
||||
}
|
||||
|
||||
// Precompute time constants
|
||||
const DAY_IN_MS = 24 * 60 * 60 * 1000;
|
||||
const PERIOD_IN_MS = 45 * DAY_IN_MS;
|
||||
const TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
|
||||
// Memoize date range calculations
|
||||
const getDateRangeKey = (timestamp: number) => Math.floor(timestamp / PERIOD_IN_MS);
|
||||
|
||||
// Optimized date validation and conversion
|
||||
const getValidDate = (date: any, timestamp?: EventTimestamp): Date | null => {
|
||||
try {
|
||||
if (timestamp?.seconds) {
|
||||
return new Date(timestamp.seconds * 1000);
|
||||
}
|
||||
|
||||
if (date instanceof Date) {
|
||||
return date;
|
||||
}
|
||||
|
||||
if (typeof date === 'string') {
|
||||
return new Date(date);
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch {
|
||||
return 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 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');
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error processing event:', event.id, error);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
export const useFormattedEvents = (
|
||||
events: Event[],
|
||||
selectedDate: Date,
|
||||
selectedUser: { uid: string } | null
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: ['formattedEvents', events, selectedDate, selectedUser?.uid],
|
||||
queryFn: () => processEvents(events, selectedDate, selectedUser),
|
||||
enabled: events.length > 0,
|
||||
staleTime: Infinity,
|
||||
placeholderData: (previousData) => previousData,
|
||||
gcTime: Infinity
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user