diff --git a/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/next-month-arrow.tsx b/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/next-month-arrow.tsx index 07552ff1..0525bb28 100644 --- a/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/next-month-arrow.tsx +++ b/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/next-month-arrow.tsx @@ -17,15 +17,18 @@ export const NextMonthArrow = () => { setSelectedDate(nextMonth) }, [selectedDate, setSelectedDate]) - const handlePressedKey = (e: KeyboardEvent) => { - handleKeyPressWhenModalIsNotOpenedOrInputIsNotFocused(e.key, 'n', handleNextMonthClick) - } + const handlePressedKey = useCallback( + (e: KeyboardEvent) => { + handleKeyPressWhenModalIsNotOpenedOrInputIsNotFocused(e.key, 'n', handleNextMonthClick) + }, + [handleNextMonthClick] + ) useEffect(() => { document.addEventListener('keydown', handlePressedKey) return () => document.removeEventListener('keydown', handlePressedKey) - }, [selectedDate, setSelectedDate]) + }, [handlePressedKey, selectedDate, setSelectedDate]) const ariaLabel = t('accessibility.next_month', { monthStr: chrono(selectedDate).plus(1, 'month').format('LLLL yyyy') diff --git a/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/prev-month-arrow.tsx b/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/prev-month-arrow.tsx index a55abf76..0e133c68 100644 --- a/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/prev-month-arrow.tsx +++ b/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/prev-month-arrow.tsx @@ -16,15 +16,18 @@ export const PrevMonthArrow = () => { setSelectedDate(prevMonth) }, [selectedDate, setSelectedDate]) - const handlePressedKey = (e: KeyboardEvent) => { - handleKeyPressWhenModalIsNotOpenedOrInputIsNotFocused(e.key, 'p', handlePrevMonthClick) - } + const handlePressedKey = useCallback( + (e: KeyboardEvent) => { + handleKeyPressWhenModalIsNotOpenedOrInputIsNotFocused(e.key, 'p', handlePrevMonthClick) + }, + [handlePrevMonthClick] + ) useEffect(() => { document.addEventListener('keydown', handlePressedKey) return () => document.removeEventListener('keydown', handlePressedKey) - }, [selectedDate, setSelectedDate]) + }, [handlePressedKey, selectedDate, setSelectedDate]) const ariaLabel = t('accessibility.prev_month', { monthStr: chrono(selectedDate).minus(1, 'month').format('LLLL yyyy') diff --git a/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/today-button.tsx b/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/today-button.tsx index 3a615a63..edcd570e 100644 --- a/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/today-button.tsx +++ b/src/features/binnacle/features/activity/ui/calendar-desktop/calendar-controls/today-button.tsx @@ -1,5 +1,5 @@ import { Button, Text } from '@chakra-ui/react' -import { FC, useEffect, useState } from 'react' +import { FC, useCallback, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { chrono } from '../../../../../../../shared/utils/chrono' import { useCalendarContext } from '../../contexts/calendar-context' @@ -16,21 +16,24 @@ export const TodayButton: FC = () => { setIsCurrentMonth(chrono(selectedDate).isThisMonth()) }, [selectedDate]) - const handlePressedKey = (e: KeyboardEvent) => { - handleKeyPressWhenModalIsNotOpenedOrInputIsNotFocused(e.key, 't', handleSetCurrentMonth) - } + const handleSetCurrentMonth = useCallback(() => { + if (isCurrentMonth) return + + setSelectedDate(new Date()) + }, [isCurrentMonth, setSelectedDate]) + + const handlePressedKey = useCallback( + (e: KeyboardEvent) => { + handleKeyPressWhenModalIsNotOpenedOrInputIsNotFocused(e.key, 't', handleSetCurrentMonth) + }, + [handleSetCurrentMonth] + ) useEffect(() => { document.addEventListener('keydown', handlePressedKey) return () => document.removeEventListener('keydown', handlePressedKey) - }, [selectedDate, isCurrentMonth]) - - const handleSetCurrentMonth = () => { - if (isCurrentMonth) return - - setSelectedDate(new Date()) - } + }, [handlePressedKey, selectedDate, isCurrentMonth]) return (