mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +00:00
Event calendar rerender optimization attempt
This commit is contained in:
@ -1,8 +1,8 @@
|
||||
import React, {useCallback, useMemo} from 'react';
|
||||
import {Calendar} from "react-native-big-calendar";
|
||||
import {StyleSheet} from "react-native";
|
||||
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
|
||||
import {useAtom, useAtomValue, useSetAtom} from "jotai";
|
||||
import React, { useCallback, useMemo, useState, useEffect } from 'react';
|
||||
import { Calendar } from "react-native-big-calendar";
|
||||
import { StyleSheet, View, ActivityIndicator } from "react-native";
|
||||
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
|
||||
import { useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||
import {
|
||||
editVisibleAtom,
|
||||
eventForEditAtom,
|
||||
@ -10,22 +10,34 @@ import {
|
||||
selectedDateAtom,
|
||||
selectedNewEventDateAtom
|
||||
} from "@/components/pages/calendar/atoms";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
|
||||
|
||||
interface EventCalendarProps {
|
||||
calendarHeight: number;
|
||||
}
|
||||
|
||||
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
|
||||
const {data: events} = useGetEvents();
|
||||
const {profileData} = useAuthContext();
|
||||
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calendarHeight }) => {
|
||||
const { data: events, isLoading } = useGetEvents();
|
||||
const { profileData } = useAuthContext();
|
||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||
const mode = useAtomValue(modeAtom);
|
||||
const setEditVisible = useSetAtom(editVisibleAtom);
|
||||
const setEventForEdit = useSetAtom(eventForEditAtom);
|
||||
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
|
||||
|
||||
const [isRendering, setIsRendering] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (events && mode) {
|
||||
setIsRendering(true);
|
||||
const timeout = setTimeout(() => {
|
||||
setIsRendering(false);
|
||||
}, 300);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
}, [events, mode]);
|
||||
|
||||
const handlePressEvent = useCallback((event: CalendarEvent) => {
|
||||
setEditVisible(true);
|
||||
setEventForEdit(event);
|
||||
@ -47,7 +59,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
|
||||
}, [setSelectedDate]);
|
||||
|
||||
const memoizedEventCellStyle = useCallback(
|
||||
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
|
||||
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
|
||||
[]
|
||||
);
|
||||
|
||||
@ -61,12 +73,22 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
|
||||
[mode]
|
||||
);
|
||||
|
||||
const memoizedEvents = useMemo(() => events ?? [], [events]);
|
||||
|
||||
if (isLoading || isRendering) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Calendar
|
||||
bodyContainerStyle={styles.calHeader}
|
||||
swipeEnabled
|
||||
mode={mode}
|
||||
events={events ?? []}
|
||||
events={memoizedEvents}
|
||||
eventCellStyle={memoizedEventCellStyle}
|
||||
onPressEvent={handlePressEvent}
|
||||
weekStartsOn={memoizedWeekStartsOn}
|
||||
@ -95,4 +117,9 @@ const styles = StyleSheet.create({
|
||||
width: 38,
|
||||
right: 42,
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
@ -136,7 +136,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<ToDosContext.Provider value={{ toDos, updateToDo, addToDo, maxPoints }}>
|
||||
<ToDosContext.Provider value={{ toDos: toDos ?? [], updateToDo, addToDo, maxPoints }}>
|
||||
{children}
|
||||
</ToDosContext.Provider>
|
||||
);
|
||||
|
Reference in New Issue
Block a user