2024 classmatch preparation

hato-org · Apr 12, 2024 · aa37f6d · aa37f6d
1 parent 238d587
commit aa37f6d
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 27 deletions.
diff --git a/src/components/nav/SideMenu.tsx b/src/components/nav/SideMenu.tsx
@@ -145,7 +145,7 @@ const MenuBody = React.memo(() => {
         type: 'button',
         icon: <Icon as={TbTrophy} boxSize={7} />,
         label: 'クラスマッチ',
-        href: '/classmatch/2023',
+        href: '/classmatch',
       },
       {
         type: 'divider',
@@ -218,7 +218,9 @@ const MenuBody = React.memo(() => {
               w="100%"
               spacing={4}
               color={
-                location.pathname === menuItem.href ? 'blue.400' : undefined
+                location.pathname.startsWith(menuItem.href)
+                  ? 'blue.400'
+                  : undefined
               }
               layerStyle="button"
               rounded="xl"
@@ -230,7 +232,9 @@ const MenuBody = React.memo(() => {
               <Text
                 color={
                   menuItem.color ??
-                  (location.pathname === menuItem.href ? 'blue.400' : undefined)
+                  (location.pathname.startsWith(menuItem.href)
+                    ? 'blue.400'
+                    : undefined)
                 }
                 textStyle="title"
                 fontSize="lg"

diff --git a/src/pages/classmatch/Classmatch2023.tsx → src/pages/Classmatch.tsx b/src/pages/classmatch/Classmatch2023.tsx → src/pages/Classmatch.tsx
@@ -12,7 +12,7 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { Helmet } from 'react-helmet-async';
-import { useSearchParams } from 'react-router-dom';
+import { Navigate, useParams, useSearchParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { TbChevronRight } from 'react-icons/tb';
 import Header from '@/components/nav/Header';
@@ -30,9 +30,9 @@ import Error from '@/components/cards/Error';
 import Loading from '@/components/common/Loading';
 import HistoryModal from '@/components/classmatch/HistoryModal';
 
-const year = 2023;
-
-export default function Classmatch2023() {
+export default function Classmatch() {
+  const { year: y } = useParams();
+  const year = Number(y);
   const queryClient = useQueryClient();
   const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -65,18 +65,30 @@ export default function Classmatch2023() {
     data: sports,
     status: sportsStatus,
     error: sportsError,
-  } = useClassmatchSports({
-    year,
-    season,
-  });
+  } = useClassmatchSports(
+    {
+      year,
+      season,
+    },
+    {
+      enabled: !!year,
+    },
+  );
   const {
     data: streams,
     status: streamsStatus,
     error: streamsError,
-  } = useClassmatchLiveStreams({
-    year,
-    season,
-  });
+  } = useClassmatchLiveStreams(
+    {
+      year,
+      season,
+    },
+    {
+      enabled: !!year,
+    },
+  );
+
+  if (!year) return <Navigate to={`/classmatch/${new Date().getFullYear()}`} />;
 
   return (
     <Box>

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -38,9 +38,7 @@ const ClassroomMaterial = React.lazy(
 const ClassroomBookmarks = React.lazy(
   () => import('./pages/classroom/ClassroomBookmarks'),
 );
-const Classmatch2023 = React.lazy(
-  () => import('./pages/classmatch/Classmatch2023'),
-);
+const Classmatch = React.lazy(() => import('./pages/Classmatch'));
 
 const Settings = React.lazy(() => import('./pages/Settings'));
 const SettingsTop = React.lazy(() => import('./pages/settings/Top'));
@@ -178,8 +176,8 @@ const router = createBrowserRouter([
         element: <ClassroomMaterial />,
       },
       {
-        path: 'classmatch/2023',
-        element: <Classmatch2023 />,
+        path: 'classmatch/:year?',
+        element: <Classmatch />,
       },
     ],
   },

diff --git a/src/services/classmatch/index.ts b/src/services/classmatch/index.ts
@@ -53,13 +53,19 @@ export const useClassmatchSportInfo = (
   });
 };
 
-export const useClassmatchLiveStreams = ({
-  year,
-  season,
-}: {
-  year: number;
-  season: ClassmatchSeason;
-}) => {
+export const useClassmatchLiveStreams = (
+  {
+    year,
+    season,
+  }: {
+    year: number;
+    season: ClassmatchSeason;
+  },
+  options?: Omit<
+    UseQueryOptions<ClassmatchLiveStream[]>,
+    'queryKey' | 'queryFn'
+  >,
+) => {
   const { client } = useClient();
 
   return useQuery({
@@ -71,6 +77,7 @@ export const useClassmatchLiveStreams = ({
           signal,
         })
       ).data,
+    ...options,
   });
 };