refactor: create custom hooks for better organization

- Create useCalendarEventHandlers hook for event management
  * Wraps event handlers with useCallback for performance
  * Provides handleDateSelect, handleClosePopover, handleEventClick
  * Provides handleEventAllow, handleEventDrop, handleEventResize
  * Centralizes event handler logic and dependencies
- Create useCalendarViewHandlers hook for view lifecycle management
  * Wraps view handlers with useCallback for performance
  * Provides handleDayHeaderDidMount, handleDayHeaderWillUnmount
  * Provides handleViewDidMount, handleViewWillUnmount
  * Provides handleEventContent, handleEventDidMount
  * Centralizes view lifecycle logic and dependencies
This commit is contained in:
lenhanphung
2025-09-26 16:52:44 +07:00
parent f3787643e7
commit 573121947c
2 changed files with 80 additions and 0 deletions
@@ -0,0 +1,48 @@
import { useCallback } from "react";
import { CalendarApi } from "@fullcalendar/core";
import {
createEventHandlers,
EventHandlersProps,
} from "../handlers/eventHandlers";
export const useCalendarEventHandlers = (props: EventHandlersProps) => {
const eventHandlers = createEventHandlers(props);
return {
handleDateSelect: useCallback(eventHandlers.handleDateSelect, [
props.setSelectedRange,
props.setAnchorEl,
]),
handleClosePopover: useCallback(eventHandlers.handleClosePopover, [
props.calendarRef,
props.setAnchorEl,
props.setSelectedRange,
props.selectedCalendars,
props.tempcalendars,
props.calendarRange,
props.dispatch,
]),
handleCloseEventDisplay: useCallback(
eventHandlers.handleCloseEventDisplay,
[props.setAnchorPosition, props.setOpenEventDisplay]
),
handleMonthUp: useCallback(eventHandlers.handleMonthUp, []),
handleMonthDown: useCallback(eventHandlers.handleMonthDown, []),
handleEventClick: useCallback(eventHandlers.handleEventClick, [
props.setOpenEventDisplay,
props.setAnchorPosition,
props.setEventDisplayedId,
props.setEventDisplayedCalId,
props.setEventDisplayedTemp,
]),
handleEventAllow: useCallback(eventHandlers.handleEventAllow, []),
handleEventDrop: useCallback(eventHandlers.handleEventDrop, [
props.calendars,
props.dispatch,
]),
handleEventResize: useCallback(eventHandlers.handleEventResize, [
props.calendars,
props.dispatch,
]),
};
};
@@ -0,0 +1,32 @@
import { useCallback } from "react";
import { CalendarApi } from "@fullcalendar/core";
import {
createViewHandlers,
ViewHandlersProps,
} from "../handlers/viewHandlers";
export const useCalendarViewHandlers = (props: ViewHandlersProps) => {
const viewHandlers = createViewHandlers(props);
return {
handleDayHeaderDidMount: useCallback(viewHandlers.handleDayHeaderDidMount, [
props.calendarRef,
props.setSelectedDate,
props.setSelectedMiniDate,
props.onViewChange,
]),
handleDayHeaderWillUnmount: useCallback(
viewHandlers.handleDayHeaderWillUnmount,
[]
),
handleViewDidMount: useCallback(viewHandlers.handleViewDidMount, []),
handleViewWillUnmount: useCallback(viewHandlers.handleViewWillUnmount, []),
handleEventContent: useCallback(viewHandlers.handleEventContent, [
props.calendars,
props.tempcalendars,
]),
handleEventDidMount: useCallback(viewHandlers.handleEventDidMount, [
props.calendars,
]),
};
};