Merge pull request #78 from jphacks/fix/setStartTime

startTime, endTimeを設定できるようにした
jphacks · Oct 27, 2024 · d521dcc · d521dcc
2 parents 9edfc77 + 3593e05
commit d521dcc
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 21 deletions.
diff --git a/task_yell/src/app/home/page.tsx b/task_yell/src/app/home/page.tsx
@@ -117,9 +117,8 @@ function EventCreator({
 }) {
   const [title, setTitle] = useState(initialTitle);
   const [description, setDescription] = useState("");
-  const [selectedDate] = useState<Date>(targetDate);
-  const [startTime] = useState("10:00");
-  const [endTime] = useState("11:00");
+  const [startTime, setStartTime] = useState(targetDate);
+  const [endTime, setEndTime] = useState(targetDate);
   const [location, setLocation] = useState("");
   const [invitees, setInvitees] = useState("");
   const [category, setCategory] = useState<Category>("other");
@@ -132,8 +131,8 @@ function EventCreator({
       const newEvent: Event = {
         id: Date.now(),
         title,
-        start: new Date(`${format(selectedDate, "yyyy-MM-dd")}T${startTime}`),
-        end: new Date(`${format(selectedDate, "yyyy-MM-dd")}T${endTime}`),
+        start: startTime,
+        end: endTime,
         description,
         category,
         priority,
@@ -150,7 +149,7 @@ function EventCreator({
   const renderDaySchedule = () => {
     // 選択された日のイベントをフィルタリング
     const dayEvents = events.filter((event) =>
-      isSameDay(event.start, selectedDate),
+      isSameDay(event.start, startTime),
     );
     const hours = Array.from({ length: 24 }, (_, i) => i);
 
@@ -161,7 +160,7 @@ function EventCreator({
     return (
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
         <h3 className="text-lg font-semibold mb-4">
-          {format(selectedDate, "yyyy年MM月dd日 (E)", { locale: ja })}
+          {format(startTime, "yyyy年MM月dd日 (E)", { locale: ja })}
           のスケジュール
         </h3>
         <div
@@ -239,11 +238,23 @@ function EventCreator({
         </div>
 
         {isTask ? (
-          <DateTimeInput className="w-full" props={{ date: targetDate }} />
+          <DateTimeInput
+            className="w-full"
+            date={startTime}
+            onChanged={(date) => setStartTime(date)}
+          />
         ) : (
           <div className="flex flex-col gap-2">
-            <DateTimeInput className="w-full" props={{ date: targetDate }} />
-            <DateTimeInput className="w-full" props={{ date: targetDate }} />
+            <DateTimeInput
+              className="w-full"
+              date={startTime}
+              onChanged={(date) => setStartTime(date)}
+            />
+            <DateTimeInput
+              className="w-full"
+              date={endTime}
+              onChanged={(date) => setEndTime(date)}
+            />
           </div>
         )}
 

diff --git a/task_yell/src/components/date-time-input.tsx b/task_yell/src/components/date-time-input.tsx
@@ -16,28 +16,27 @@ import { CalendarIcon } from "@radix-ui/react-icons";
 
 import { format } from "date-fns";
 import { ja } from "date-fns/locale";
-import { useState } from "react";
+import { useMemo } from "react";
 
 export function DateTimeInput({
   className,
-  props,
+  date,
+  onChanged,
 }: {
   className?: string;
-  props: {
-    date: Date;
-  };
+  date: Date;
+  onChanged: (date: Date) => void;
 }) {
-  const [date, setDate] = useState<Date | undefined>(props.date);
-  const [time, setTime] = useState(props.date.toLocaleTimeString());
-
   const timeOptions = Array.from({ length: 96 }, (_, i) => {
     const hours = Math.floor(i / 4)
       .toString()
       .padStart(2, "0");
     const minutes = ((i % 4) * 15).toString().padStart(2, "0");
     return `${hours}:${minutes}`;
   });
-  const handleTimeChange = (time: string) => setTime(time);
+  const time = useMemo(() => {
+    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+  }, [date]);
 
   return (
     <div className={`flex flex-row ${className}`}>
@@ -56,14 +55,28 @@ export function DateTimeInput({
               <Calendar
                 mode="single"
                 selected={date ?? undefined}
-                onSelect={(day) => setDate(day ?? undefined)}
+                onSelect={(day) => {
+                  // Dateの日付部分だけ変更
+                  if (!day) return;
+                  const newDate = new Date(date);
+                  newDate.setFullYear(day.getFullYear());
+                  newDate.setMonth(day.getMonth());
+                  newDate.setDate(day.getDate());
+                  onChanged(newDate);
+                }}
                 initialFocus
               />
             </PopoverContent>
           </Popover>
           <Select
             value={time}
-            onValueChange={(value) => handleTimeChange(value)}
+            onValueChange={(value) => {
+              const [hours, minutes] = value.split(":").map(Number);
+              const newDate = new Date(date);
+              newDate.setHours(hours);
+              newDate.setMinutes(minutes);
+              onChanged(newDate);
+            }}
           >
             <SelectTrigger className="flex-grow">
               <SelectValue placeholder="開始時間" />