mirror of
https://github.com/urosran/cally.git
synced 2025-07-16 10:06:15 +00:00
124 lines
4.3 KiB
TypeScript
124 lines
4.3 KiB
TypeScript
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";
|
|
import { View } from "react-native-ui-lib";
|
|
import { DeviceType } from "expo-device";
|
|
import * as Device from "expo-device"
|
|
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,
|
|
mode,
|
|
onLoad
|
|
}) => {
|
|
const {profileData} = useAuthContext();
|
|
const selectedDate = useAtomValue(selectedDateAtom);
|
|
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,
|
|
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: 70,
|
|
allowPinchToZoom: true,
|
|
useHaptic: true,
|
|
scrollToNow: true,
|
|
initialDate: selectedDate.toISOString(),
|
|
}), [selectedDate]);
|
|
|
|
const getAttendees = useCallback((event: any) => {
|
|
return familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [];
|
|
}, [familyMembers]);
|
|
|
|
const renderEvent = useCallback((event: any) => {
|
|
const attendees = getAttendees(event);
|
|
return (
|
|
<MemoizedEventCell
|
|
event={event}
|
|
onPress={handlePressEvent}
|
|
attendees={attendees}
|
|
/>
|
|
);
|
|
}, [familyMembers, handlePressEvent, getAttendees]);
|
|
|
|
return (
|
|
<CalendarContainer
|
|
ref={calendarRef}
|
|
{...containerProps}
|
|
numberOfDays={numberOfDays}
|
|
calendarWidth={calendarWidth}
|
|
onDateChanged={debouncedOnDateChanged}
|
|
firstDay={firstDay}
|
|
events={formattedEvents ?? []}
|
|
onPressEvent={handlePressEvent}
|
|
onPressBackground={handlePressCell}
|
|
onLoad={onLoad}
|
|
>
|
|
<CalendarHeader {...headerProps} />
|
|
<CalendarBody
|
|
{...bodyProps}
|
|
renderEvent={renderEvent}
|
|
/>
|
|
{Device.deviceType === DeviceType.TABLET && <View style={{backgroundColor: 'white', height: '9%', width: '100%'}}/>}
|
|
</CalendarContainer>
|
|
);
|
|
});
|
|
|
|
DetailedCalendar.displayName = 'DetailedCalendar';
|
|
|
|
export default DetailedCalendar; |