diff --git a/packages/app/src/event-selection/EventSelection.tsx b/packages/app/src/event-selection/EventSelection.tsx index a200d85..e2d8a61 100644 --- a/packages/app/src/event-selection/EventSelection.tsx +++ b/packages/app/src/event-selection/EventSelection.tsx @@ -2,7 +2,7 @@ import { Button } from '../shared/Button'; import { stateContext } from '../state'; import { EventGroup } from './EventGroup'; import style from './EventSelection.module.scss'; -import { useContext } from 'react'; +import { useCallback, useContext } from 'react'; type Props = { isLoading: boolean; @@ -13,58 +13,53 @@ type Props = { export function EventSelection(props: Props) { const { events, categories, checkedEvents } = useContext(stateContext); - const select = (show: boolean) => { - if (show) { - props.setCheckedEvents(events.map((event) => event.id)); - } else { - props.setCheckedEvents([]); - } - }; - - const setEventCheckboxState = (eventId: string, check: boolean) => { - const checkedEventsSet = new Set(checkedEvents); - if (check) { - checkedEventsSet.add(eventId); - } else { - checkedEventsSet.delete(eventId); - } - props.setCheckedEvents([...checkedEventsSet]); - }; + const setEventCheckboxState = useCallback( + (eventId: string, check: boolean) => { + const checkedEventsSet = new Set(checkedEvents); + if (check) { + checkedEventsSet.add(eventId); + } else { + checkedEventsSet.delete(eventId); + } + props.setCheckedEvents([...checkedEventsSet]); + }, + [props, checkedEvents], + ); - const setGroupCheckboxState = ( - categoryId: string, - state: boolean | 'mixed', - ) => { - const catEventIds = events - .filter((e) => e.category === categoryId) - .map((e) => e.id); + const setGroupCheckboxState = useCallback( + (categoryId: string, state: boolean | 'mixed') => { + const catEventIds = events + .filter((e) => e.category === categoryId) + .map((e) => e.id); - // Start by unchecking all events in the category - const newCheckedEvents = checkedEvents.filter( - (eventId) => !catEventIds.includes(eventId), - ); + // Start by unchecking all events in the category + const newCheckedEvents = checkedEvents.filter( + (eventId) => !catEventIds.includes(eventId), + ); - if (state === true) { - // If the tri-state-checkbox should become checked, add all events in the category - newCheckedEvents.push(...catEventIds); - } + if (state === true) { + // If the tri-state-checkbox should become checked, add all events in the category + newCheckedEvents.push(...catEventIds); + } - props.setCheckedEvents(newCheckedEvents); - }; + props.setCheckedEvents(newCheckedEvents); + }, + [props, events, checkedEvents], + ); return ( <>