timetable-app

commit 3363536883e31d5bd55b60f051e50fba267a8b23
parent ee0ba4e7b7dc8cde85b83f0de4f0c47d741b3a10
Author: Yuukin256 <Yuukin256@gmail.com>
Date:   Sun,  6 Nov 2022 15:44:34 +0900

クラス別時間割表登録画面を微修正

Diffstat:
M
src/hooks/useRegisterStandardTimetable.ts
 | 
20
+++++++++++++-------
M
src/pages/console/standard.tsx
 | 
5
+----

2 files changed, 14 insertions(+), 11 deletions(-)
diff --git a/src/hooks/useRegisterStandardTimetable.ts b/src/hooks/useRegisterStandardTimetable.ts
@@ -12,7 +12,7 @@ import type { AbstractLessonNameEn, StandardEn } from 'types';
 type Result = {
   loading: boolean;
   classes: SchoolClass[];
-  classId: number;
+  classId: number | undefined;
   setClassId: (val: number) => void;
   standard: StandardEn;
   setStandard: (key: AbstractLessonNameEn, value: string[]) => void;
@@ -60,23 +60,25 @@ const useRegisterStandardTimetable = (): Result => {
   const queryClient = useQueryClient();
   const { enqueueSnackbar } = useSnackbar();
 
-  const [classId, setClassId] = useState<number>(-1);
+  const [classId, setClassId] = useState<number>();
   const [standard, { set: setStandard, setAll }] = useMap(emptyStandard);
 
   const classesQuery = useAspidaQuery(apiClient.classes, {
     onError: () => enqueueSnackbar('エラーが発生しました', { variant: 'error' }),
   });
 
-  const standardQuery = useAspidaQuery(apiClient.classes._classId(classId).standard, {
+  const standardQuery = useAspidaQuery(apiClient.classes._classId(classId ?? -1).standard, {
     enabled: !!classId,
     onSuccess: (data) => data && setAll(data),
     onError: () => enqueueSnackbar('エラーが発生しました', { variant: 'error' }),
   });
 
   const standardMutation = useMutation(
-    (body: StandardEn) => apiClient.classes._classId(classId).standard.$put({ body }),
+    ({ classId, body }: { classId: number; body: StandardEn }) => {
+      return apiClient.classes._classId(classId).standard.$put({ body });
+    },
     {
-      onSuccess: () => {
+      onSuccess: (_, { classId }) => {
         enqueueSnackbar('正常に保存されました', { variant: 'success' });
         queryClient.invalidateQueries(apiClient.classes._classId(classId).standard.$path());
       },
@@ -86,10 +88,14 @@ const useRegisterStandardTimetable = (): Result => {
     }
   );
 
-  const submit = () => standardMutation.mutate(standard);
+  const submit = () => {
+    if (classId) {
+      standardMutation.mutate({ classId, body: standard });
+    }
+  };
 
   return {
-    loading: classesQuery.isFetching || standardQuery.isFetching || standardMutation.isLoading,
+    loading: classesQuery.isLoading || standardQuery.isLoading || standardMutation.isLoading,
     classes: classesQuery.data ?? [],
     classId,
     setClassId,
diff --git a/src/pages/console/standard.tsx b/src/pages/console/standard.tsx
@@ -24,7 +24,6 @@ import type { NextPage } from 'next';
 import type { FC } from 'react';
 import type { AbstractLessonNameEn, StandardEn } from 'types';
 
-// TODO: ステート管理を一元化し、ロジックとビューを分離する
 // TODO: 分離したビュー層をコンポーネントに分割する
 
 const ClassUnitCell: FC<{
@@ -142,8 +141,6 @@ const StandardTimetableForm: FC<{
 const Page: NextPage = () => {
   const { loading, classes, classId, setClassId, standard, setStandard, submit } = useRegisterStandardTimetable();
 
-  // TODO: classes 取得時に Backdrop
-  // TODO: SWRConfig を _app.tsx へ
   return (
     <Container maxWidth='lg' component={Box} py={2}>
       <Backdrop open={loading}>
@@ -155,7 +152,7 @@ const Page: NextPage = () => {
       <Box width='7rem' m={4}>
         <FormControl fullWidth disabled={loading}>
           <InputLabel>クラス</InputLabel>
-          <Select value={classId} label='クラス' onChange={(e) => setClassId(e.target.value as number)}>
+          <Select value={classId ?? ''} label='クラス' onChange={(e) => setClassId(e.target.value as number)}>
             {classes.map((c) => (
               <MenuItem value={c.id} key={c.id}>
                 {c.grade}-{c.class}