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:
@@ -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,
|
||||
]),
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user