diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index dcd2713..9387dbd 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -7,11 +7,8 @@ import { create } from 'zustand'; import { WEEK_DAYS } from '../constants/week-days'; import { YEAR } from '../constants/year'; import { useCourseColor, useEnrolledCourse } from '../data/enrolled-courses'; -import { - useCalendar, - useCalendarHourHeight, - useOtherWeekCourseTimes, -} from '../helpers/calendar'; +import { useCalendar, useOtherWeekCourseTimes } from '../helpers/calendar'; +import { useCalendarHourHeight } from '../helpers/calendar-hour-height'; import { calcHoursDuration } from '../helpers/hours-duration'; import type dayjs from '../lib/dayjs'; import type { DateTimeRange, WeekCourse, WeekCourses } from '../types/course'; diff --git a/src/components/ZoomButtons.tsx b/src/components/ZoomButtons.tsx index 75fc137..20921cf 100644 --- a/src/components/ZoomButtons.tsx +++ b/src/components/ZoomButtons.tsx @@ -5,7 +5,7 @@ import { MAX_HOUR_HEIGHT, MIN_HOUR_HEIGHT, useCalendarHourHeight, -} from '../helpers/calendar'; +} from '../helpers/calendar-hour-height'; export const ZoomButtons = () => { const { t } = useTranslation(); diff --git a/src/constants/local-storage-keys.ts b/src/constants/local-storage-keys.ts index 0e2ce7b..bd76d88 100644 --- a/src/constants/local-storage-keys.ts +++ b/src/constants/local-storage-keys.ts @@ -2,4 +2,5 @@ export const enum LocalStorageKey { Term = 'MTT.term', EnrolledCourses = 'MTT.enrolled-courses', FirstTime = 'MTT.first-time', + CalendarHeight = 'MTT.calendar-height', } diff --git a/src/helpers/calendar-hour-height.ts b/src/helpers/calendar-hour-height.ts new file mode 100644 index 0000000..0f8510a --- /dev/null +++ b/src/helpers/calendar-hour-height.ts @@ -0,0 +1,28 @@ +import { create } from 'zustand'; +import { persist } from 'zustand/middleware'; + +import { LocalStorageKey } from '../constants/local-storage-keys'; + +export const MIN_HOUR_HEIGHT = 3; +export const MAX_HOUR_HEIGHT = 10; +export const useCalendarHourHeight = create<{ + height: number; + setHeight: (getNewHeight: (height: number) => number) => void; +}>()( + persist( + (set) => ({ + height: 4.5, + setHeight: (getNewHeight) => + set((state) => { + const height = getNewHeight(state.height); + return { + height: Math.min( + Math.max(height, MIN_HOUR_HEIGHT), + MAX_HOUR_HEIGHT, + ), + }; + }), + }), + { name: LocalStorageKey.CalendarHeight }, + ), +); diff --git a/src/helpers/calendar.ts b/src/helpers/calendar.ts index 3e0cb64..2631195 100644 --- a/src/helpers/calendar.ts +++ b/src/helpers/calendar.ts @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react'; -import { create } from 'zustand'; import { WEEK_DAYS } from '../constants/week-days'; import { useGetCourseClasses } from '../data/course-info'; @@ -220,19 +219,3 @@ export const useOtherWeekCourseTimes = ({ return times; }; - -export const MIN_HOUR_HEIGHT = 3; -export const MAX_HOUR_HEIGHT = 10; -export const useCalendarHourHeight = create<{ - height: number; - setHeight: (getNewHeight: (height: number) => number) => void; -}>()((set) => ({ - height: 4.5, - setHeight: (getNewHeight) => - set((state) => { - const height = getNewHeight(state.height); - return { - height: Math.min(Math.max(height, MIN_HOUR_HEIGHT), MAX_HOUR_HEIGHT), - }; - }), -})); diff --git a/src/helpers/zoom.ts b/src/helpers/zoom.ts index d38ec66..766bfe7 100644 --- a/src/helpers/zoom.ts +++ b/src/helpers/zoom.ts @@ -1,6 +1,6 @@ import { useCallback, useEffect, useRef } from 'react'; -import { useCalendarHourHeight } from './calendar'; +import { useCalendarHourHeight } from './calendar-hour-height'; type UseZoomProps = { element: HTMLElement;