Merge pull request #52 from magi-sche-org/feature/fix_bag_create_event

イベント作成時のバグを修正

src/components/EventMakePage/EventMakePageBody.tsx

@@ -76,9 +76,8 @@ const EventMakePageBody: FC = () => {
   const submit = (): void => {
     const startDayStr = startDay?.format("YYYY-MM-DD");
     const endDayStr = endDay ? endDay.format("YYYY-MM-DD") : startDayStr;
-    // TODO:
     void router.push(
-      `/preview?startday=${startDay}&endday=${endDayStr}&starttime=${startTime}&endtime=${endTime}&eventtimeduration=${eventTimeDuration}`,
+      `/preview?startday=${startDayStr}&endday=${endDayStr}&starttime=${startTime}&endtime=${endTime}&eventtimeduration=${eventTimeDuration}`,
     );
   };
 
@@ -116,7 +115,11 @@ const EventMakePageBody: FC = () => {
           <Stack spacing={0.5}>
             <FormLabel>時間帯</FormLabel>
             <Stack direction="row" spacing={4}>
-              <TimeSelect time={startTime} handleTime={handleStartTime} />
+              <TimeSelect
+                time={startTime}
+                handleTime={handleStartTime}
+                upperTime={Math.min(24, endTime)}
+              />
               <Typography variant="h6">〜</Typography>
               <TimeSelect
                 time={endTime}

src/components/EventMakePage/TimeSelect.tsx

@@ -3,41 +3,52 @@ import { MenuItem, Select } from "@mui/material";
 import type { FC } from "react";
 import { useEffect } from "react";
 
-const timeList = [
-  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
-  23, 24,
-];
+import type { IHourOfDay } from "@/@types/api/event";
+import { HourOfDay } from "@/constants/event";
 
 type Props = {
   time: number;
   handleTime: (time: number) => void;
   underTime?: number;
+  upperTime?: number;
+};
+
+const timeFilter = (underTime?: number, upperTime?: number): IHourOfDay[] => {
+  const newUnderTime = underTime ?? 0;
+  const newUpperTime = upperTime ?? 24;
+  return HourOfDay.filter((i) => newUpperTime >= i && i >= newUnderTime);
 };
 
 /**
  *  時間選択コンポーネント
  *
  *  @param time 選択されている時間
  *  @param handleTime 時間を更新するhandler
- *  @param underTime 以下の時間を選択できないようにする
+ *  @param underTime 選択できる時間の下限
+ *  @param upperTime 選択できる時間の上限
  */
-export const TimeSelect: FC<Props> = ({ time, handleTime, underTime }) => {
-  // 開始時間よりも前の時間を選択できないようにする
-  const editTimeList = underTime
-    ? timeList.filter((item) => {
-        return item > underTime;
-      })
-    : timeList;
-
-  const isNonItem = editTimeList.length === 0;
+export const TimeSelect: FC<Props> = ({
+  time,
+  handleTime,
+  underTime,
+  upperTime,
+}) => {
+  // 条件に合った時間の候補を取得
+  const editTimeList = timeFilter(underTime, upperTime);
 
-  // 開始時間よりも前の時間を選択を選択した場合、開始時間+1に合わせる
+  // 下限が変更された場合、値を下限+1に設定しなおす
   useEffect(() => {
     if (underTime && time < underTime) {
-      handleTime(isNonItem ? underTime : underTime + 1);
+      handleTime(underTime + 1);
     }
   }, [underTime]);
 
+  // 上限が変更された場合、値を上限に設定しなおす
+  useEffect(() => {
+    if (upperTime && time >= upperTime) {
+      handleTime(upperTime);
+    }
+  }, [upperTime]);
   return (
     <Select
       value={String(time)}
@@ -49,17 +60,13 @@ export const TimeSelect: FC<Props> = ({ time, handleTime, underTime }) => {
         minWidth: 80,
       }}
     >
-      {!isNonItem ? (
-        editTimeList.map((timeInfo) => {
-          return (
-            <MenuItem key={timeInfo} value={timeInfo}>
-              {timeInfo}
-            </MenuItem>
-          );
-        })
-      ) : (
-        <MenuItem value={24}>{24}</MenuItem>
-      )}
+      {editTimeList.map((timeInfo) => {
+        return (
+          <MenuItem key={timeInfo} value={timeInfo}>
+            {timeInfo}
+          </MenuItem>
+        );
+      })}
     </Select>
   );
 };

src/constants/event.ts

@@ -1,5 +1,5 @@
 export const EventTimeDuration = [1800, 3600, 86400] as const;
 export const HourOfDay = [
   0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
-  22, 23,
+  22, 23, 24,
 ] as const;