add school year model

src/pages/classPrep/ClassPrepListPage.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Link, useSearchParams } from 'react-router-dom'
 import { ApiHttpError } from '../../api/http'
+import { useSchoolYearOptions } from '../../hooks/useSchoolYearOptions'
 import { fetchClassPrepIndex, saveClassPrepAdjustment } from '../../api/session'
 import type { ClassPrepIndexResponse, ClassPrepSectionRow } from '../../api/types'
 
@@ -9,14 +10,9 @@ function adjustQty(input: HTMLInputElement, delta: number) {
   input.value = String(curr + delta)
 }
 
-function defaultSchoolYear() {
-  const y = new Date().getFullYear()
-  return `${y}-${y + 1}`
-}
-
 export function ClassPrepListPage() {
   const [searchParams, setSearchParams] = useSearchParams()
-  const schoolYear = searchParams.get('school_year') ?? defaultSchoolYear()
+  const schoolYear = searchParams.get('school_year') ?? ''
   const semester = searchParams.get('semester') ?? ''
 
   const [data, setData] = useState<ClassPrepIndexResponse | null>(null)
@@ -24,19 +20,16 @@ export function ClassPrepListPage() {
   const [error, setError] = useState<string | null>(null)
   const [savingId, setSavingId] = useState<string | null>(null)
   const [saveMsg, setSaveMsg] = useState<string | null>(null)
-
-  const yearOptions = useMemo(() => {
-    const out: string[] = []
-    for (let y = new Date().getFullYear(); y >= 2020; y--) out.push(`${y}-${y + 1}`)
-    return out
-  }, [])
+  const { options, selectedYear } = useSchoolYearOptions({
+    preferredYear: schoolYear,
+  })
 
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setError(null)
     fetchClassPrepIndex({
-      school_year: schoolYear,
+      school_year: schoolYear || selectedYear,
       semester: semester || undefined,
     })
       .then((d) => {
@@ -115,11 +108,11 @@ export function ClassPrepListPage() {
             name="school_year"
             id="school_year"
             className="form-select form-select-sm w-auto"
-            defaultValue={schoolYear}
+            defaultValue={schoolYear || selectedYear}
           >
-            {yearOptions.map((y) => (
-              <option key={y} value={y}>
-                {y}
+            {(options.length > 0 ? options : [{ value: selectedYear, label: selectedYear }]).map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
               </option>
             ))}
           </select>