feat: Integrate TaskContext for task editing and management across components

Author: nannany

ui/src/components/task/EndTimeField.tsx

@@ -2,23 +2,28 @@ import React from "react";
 import { Input } from "@/components/ui/input";
 import { cn, parseTimeInputToISOString } from "@/lib/utils";
 import { useToast } from "@/components/ui/use-toast";
-import { TaskEditProps } from "./types";
+import { Task } from "./types";
+import { useTaskContext } from "@/contexts/TaskContext";
 
-interface EndTimeFieldProps extends TaskEditProps {
+interface EndTimeFieldProps {
+  task: Task;
   categoryColor?: string;
 }
 
 export const EndTimeField = ({
   task,
-  editingField,
-  editValue,
-  onEditStart,
-  setEditValue,
-  setEditingField,
-  handleEditSave,
   categoryColor = "#6b7280",
 }: EndTimeFieldProps) => {
   const { toast } = useToast();
+  const { taskEdit } = useTaskContext();
+  const {
+    editingField,
+    editValue,
+    handleEditStart,
+    setEditValue,
+    setEditingField,
+    handleEditSave,
+  } = taskEdit;
 
   const isEditing =
     editingField?.taskId === task.id && editingField?.field === "end_time";
@@ -109,7 +114,7 @@ export const EndTimeField = ({
       )}
       onClick={() => {
         if (!isDisabled) {
-          onEditStart(task.id, "end_time", fieldValue || "");
+          handleEditStart(task.id, "end_time", fieldValue || "");
         }
       }}
     >

ui/src/components/task/SortableTask.tsx

@@ -10,53 +10,17 @@ import { StartTimeField } from "./StartTimeField";
 import { EndTimeField } from "./EndTimeField";
 import { TaskCategoryField } from "./TaskCategoryField";
 import { TaskMetaInfo } from "./TaskMetaInfo";
-import { Task, Category } from "@/types/task";
-import { EditingField } from "./types";
-
-interface TaskEditActions {
-  editingField: EditingField | null;
-  editValue: string;
-  setEditingField: (field: EditingField | null) => void;
-  setEditValue: (value: string) => void;
-  handleEditStart: (
-    taskId: string,
-    field:
-      | "title"
-      | "estimated_minute"
-      | "start_time"
-      | "end_time"
-      | "category_id",
-    value: string,
-  ) => void;
-  handleEditChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  handleEditSave: (customValue?: string) => void;
-  handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-}
-
-interface TaskActions {
-  handleDelete: (taskId: string) => void;
-  handleTaskTimer: (
-    taskId: string,
-    action: "start" | "stop" | "complete",
-  ) => void;
-  handleRepeatTask: (task: Task) => void;
-}
+import { Task } from "@/types/task";
+import { useTaskContext } from "@/contexts/TaskContext";
 
 interface SortableTaskProps {
   task: Task;
-  taskEdit: TaskEditActions;
-  taskActions: TaskActions;
-  lastTaskEndTime: string | null;
-  categories: Category[];
 }
 
-const SortableTask = ({
-  task,
-  taskEdit,
-  taskActions,
-  lastTaskEndTime,
-  categories,
-}: SortableTaskProps) => {
+const SortableTask = ({ task }: SortableTaskProps) => {
+  // TaskContextから必要な値を取得
+  const { taskEdit, taskActions, lastTaskEndTime, categories } =
+    useTaskContext();
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({
       id: task.id,
@@ -132,18 +96,6 @@ const SortableTask = ({
   );
   const categoryColor = selectedCategory?.color || "#6b7280";
 
-  const taskEditProps = {
-    task,
-    editingField: taskEdit.editingField,
-    editValue: taskEdit.editValue,
-    onEditStart: taskEdit.handleEditStart,
-    handleEditChange: taskEdit.handleEditChange,
-    handleEditSave: taskEdit.handleEditSave,
-    handleKeyDown: taskEdit.handleKeyDown,
-    setEditValue: taskEdit.setEditValue,
-    setEditingField: taskEdit.setEditingField,
-  };
-
   return (
     <div
       ref={setNodeRef}
@@ -162,31 +114,23 @@ const SortableTask = ({
           <GripVertical className="h-4 w-4" style={{ color: categoryColor }} />
         </div>
 
-        <TaskTimerButton
-          task={task}
-          onTaskTimer={taskActions.handleTaskTimer}
-          onRepeatTask={taskActions.handleRepeatTask}
-          categoryColor={categoryColor}
-        />
+        <TaskTimerButton task={task} categoryColor={categoryColor} />
 
         <div className="flex-grow">
-          <TaskTitleField {...taskEditProps} categoryColor={categoryColor} />
+          <TaskTitleField task={task} categoryColor={categoryColor} />
 
           <div className="flex gap-3 text-sm text-muted-foreground">
-            <TaskEstimatedTimeField
-              {...taskEditProps}
-              categoryColor={categoryColor}
-            />
+            <TaskEstimatedTimeField task={task} categoryColor={categoryColor} />
 
             <StartTimeField
-              {...taskEditProps}
+              task={task}
               lastTaskEndTime={lastTaskEndTime}
               categoryColor={categoryColor}
             />
 
-            <EndTimeField {...taskEditProps} categoryColor={categoryColor} />
+            <EndTimeField task={task} categoryColor={categoryColor} />
 
-            <TaskCategoryField {...taskEditProps} categories={categories} />
+            <TaskCategoryField task={task} categories={categories} />
 
             <TaskMetaInfo task={task} categoryColor={categoryColor} />
           </div>

ui/src/components/task/StartTimeField.tsx

@@ -10,28 +10,33 @@ import { ChevronDown } from "lucide-react";
 import { parseTimeInputToISOString } from "@/lib/utils";
 import { createClient } from "@/lib/supabase/client";
 import { useToast } from "@/components/ui/use-toast";
-import { TaskEditProps } from "./types";
+import { Task } from "./types";
+import { useTaskContext } from "@/contexts/TaskContext";
 
 const supabase = createClient();
 
-interface StartTimeFieldProps extends TaskEditProps {
+interface StartTimeFieldProps {
+  task: Task;
   lastTaskEndTime?: string | null;
   categoryColor?: string;
 }
 
 export const StartTimeField = ({
   task,
-  editingField,
-  editValue,
-  onEditStart,
-  setEditValue,
-  setEditingField,
-  handleEditSave,
   lastTaskEndTime,
   categoryColor = "#6b7280",
 }: StartTimeFieldProps) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const { toast } = useToast();
+  const { taskEdit } = useTaskContext();
+  const {
+    editingField,
+    editValue,
+    handleEditStart,
+    setEditValue,
+    setEditingField,
+    handleEditSave,
+  } = taskEdit;
 
   const isEditing =
     editingField?.taskId === task.id && editingField?.field === "start_time";
@@ -220,7 +225,7 @@ export const StartTimeField = ({
     <p
       className="cursor-pointer hover:bg-gray-50 p-1 rounded"
       onClick={() => {
-        onEditStart(task.id, "start_time", fieldValue || "");
+        handleEditStart(task.id, "start_time", fieldValue || "");
       }}
     >
       <span style={{ color: categoryColor }}>開始: </span>

ui/src/components/task/TaskCategoryField.tsx

@@ -6,23 +6,22 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { ChevronDown, Tag } from "lucide-react";
-import { TaskEditProps } from "./types";
-import { Category } from "@/types/task";
+import { Task, Category } from "@/types/task";
+import { useTaskContext } from "@/contexts/TaskContext";
 
-interface TaskCategoryFieldProps extends TaskEditProps {
+interface TaskCategoryFieldProps {
+  task: Task;
   categories: Category[];
 }
 
 export const TaskCategoryField = ({
   task,
-  editingField,
-  onEditStart,
-  setEditValue,
-  setEditingField: _setEditingField,
-  handleEditSave,
   categories,
 }: TaskCategoryFieldProps) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
+  const { taskEdit } = useTaskContext();
+  const { editingField, handleEditStart, setEditValue, handleEditSave } =
+    taskEdit;
 
   const isEditing =
     editingField?.taskId === task.id && editingField?.field === "category_id";
@@ -114,7 +113,7 @@ export const TaskCategoryField = ({
     <p
       className="cursor-pointer hover:bg-gray-50 p-1 rounded flex items-center"
       onClick={() => {
-        onEditStart(task.id, "category_id", fieldValue || "");
+        handleEditStart(task.id, "category_id", fieldValue || "");
       }}
     >
       <Tag

ui/src/components/task/TaskEstimatedTimeField.tsx

@@ -7,24 +7,29 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { ChevronDown } from "lucide-react";
-import { TaskEditProps } from "./types";
+import { Task } from "./types";
+import { useTaskContext } from "@/contexts/TaskContext";
 
-interface TaskEstimatedTimeFieldProps extends TaskEditProps {
+interface TaskEstimatedTimeFieldProps {
+  task: Task;
   categoryColor?: string;
 }
 
 export const TaskEstimatedTimeField = ({
   task,
-  editingField,
-  editValue,
-  onEditStart,
-  handleEditChange,
-  handleEditSave,
-  setEditValue,
-  setEditingField,
   categoryColor = "#6b7280",
 }: TaskEstimatedTimeFieldProps) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
+  const { taskEdit } = useTaskContext();
+  const {
+    editingField,
+    editValue,
+    handleEditStart,
+    handleEditChange,
+    handleEditSave,
+    setEditValue,
+    setEditingField,
+  } = taskEdit;
 
   const isEditing =
     editingField?.taskId === task.id &&
@@ -114,7 +119,7 @@ export const TaskEstimatedTimeField = ({
     <p
       className="cursor-pointer hover:bg-gray-50 p-1 rounded"
       onClick={() =>
-        onEditStart(
+        handleEditStart(
           task.id,
           "estimated_minute",
           task.estimated_minute ? task.estimated_minute.toString() : "",

ui/src/components/task/TaskTimerButton.tsx

@@ -2,27 +2,28 @@ import { Button } from "@/components/ui/button";
 import { Play, Square, CheckCircle2, RotateCcw } from "lucide-react";
 import { Task } from "./types";
 import { useState } from "react";
+import { useTaskContext } from "@/contexts/TaskContext";
 
 interface TaskTimerButtonProps {
   task: Task;
-  onTaskTimer: (taskId: string, action: "start" | "stop" | "complete") => void;
-  onRepeatTask?: (task: Task) => void;
   categoryColor?: string;
 }
 
 export const TaskTimerButton = ({
   task,
-  onTaskTimer,
-  onRepeatTask,
   categoryColor = "#6b7280",
 }: TaskTimerButtonProps) => {
   const [isHovered, setIsHovered] = useState(false);
+
+  // TaskContextから必要な関数を取得
+  const { taskActions } = useTaskContext();
+  const { handleTaskTimer, handleRepeatTask } = taskActions;
   if (!task.start_time) {
     return (
       <Button
         size="icon"
         variant="outline"
-        onClick={() => onTaskTimer(task.id, "start")}
+        onClick={() => handleTaskTimer(task.id, "start")}
         className="h-8 w-8 hover:bg-opacity-10"
         style={{
           color: categoryColor,
@@ -40,7 +41,7 @@ export const TaskTimerButton = ({
       <Button
         size="icon"
         variant="outline"
-        onClick={() => onTaskTimer(task.id, "stop")}
+        onClick={() => handleTaskTimer(task.id, "stop")}
         className="h-8 w-8 hover:bg-opacity-10"
         style={{
           color: categoryColor,
@@ -63,17 +64,17 @@ export const TaskTimerButton = ({
         borderColor: categoryColor,
         backgroundColor: `${categoryColor}20`,
       }}
-      disabled={!onRepeatTask}
+      disabled={!handleRepeatTask}
       onClick={(e) => {
-        if (onRepeatTask) {
+        if (handleRepeatTask) {
           e.stopPropagation();
-          onRepeatTask(task);
+          handleRepeatTask(task);
         }
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {isHovered && onRepeatTask ? (
+      {isHovered ? (
         <RotateCcw className="h-4 w-4" />
       ) : (
         <CheckCircle2 className="h-4 w-4" />