モーダル以外実装

ymat19 · Nov 27, 2024 · 8ef705e · 8ef705e
1 parent 8b43969
commit 8ef705e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 13 deletions.
diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
@@ -1,15 +1,20 @@
 import { Text, List, HStack } from "@chakra-ui/react";
 
-interface TodoItemProps extends List.ItemProps {
+export interface Task {
+  id: number;
   title: string;
   isCompleted: boolean;
-  onToggle?: () => void;
-  onClickDelete?: () => void;
+}
+
+
+interface TodoItemProps extends List.ItemProps {
+  task: Task;
+  onToggle: () => void;
+  onClickDelete: () => void;
 }
 
 export const TodoItem: React.FC<TodoItemProps> = ({
-  title,
-  isCompleted,
+  task,
   onToggle,
   onClickDelete,
   ...props
@@ -18,11 +23,11 @@ export const TodoItem: React.FC<TodoItemProps> = ({
     <List.Item {...props} as={HStack} >
       <HStack>
         <Text
-          textDecoration={isCompleted ? "line-through" : "none"}
+          textDecoration={task.isCompleted ? "line-through" : "none"}
           cursor="pointer"
           onClick={onToggle}
         >
-          ・{title}
+          ・{task.title}
         </Text>
         <Text color="red" cursor="pointer" onClick={onClickDelete}>
           ❌

diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
@@ -1,14 +1,42 @@
-import { Center, Text, VStack, List } from "@chakra-ui/react";
-import { TodoItem } from "./TodoItem";
+import { useState } from "react";
+import { Center, Text, VStack, List, HStack, Button } from "@chakra-ui/react";
+import { TodoItem, Task } from "./TodoItem";
 
 export function TodoList() {
+  const [tasks, setTasks] = useState<Task[]>([]);
+
+  const onClickAdd = () => {
+    const newTask: Task = {
+      id: tasks.length,
+      title: "sample task",
+      isCompleted: false,
+    };
+    setTasks([...tasks, newTask]);
+  }
+
+  const genClickDelete = (id: number) => {
+    return () => {
+      setTasks(tasks.filter((task) => task.id !== id));
+    }
+  }
+
+  const genToggle = (id: number) => {
+    return () => {
+      setTasks(
+        tasks.map((task) =>
+          task.id === id ? { ...task, isCompleted: !task.isCompleted } : task
+        )
+      );
+    }
+  }
+
   return (
     <Center h="100vh">
       <VStack
         w="80%"
         h="80%"
         padding={"40px 80px"}
-        justifyContent="center"
+        justifyContent="space-between"
         border="1px solid white"
         borderRadius="10px"
         gap={"20px"}
@@ -17,10 +45,13 @@ export function TodoList() {
           TodoList
         </Text>
         <List.Root>
-            <TodoItem title="Todo1" isCompleted={false} />
-            <TodoItem title="Todo2" isCompleted={true} />
-            <TodoItem title="Todo3" isCompleted={false} />
+            {tasks.map((task) => (
+                <TodoItem key={task.id} task={task} onClickDelete={genClickDelete(task.id)} onToggle={genToggle(task.id)} />
+            ))}
         </List.Root>
+        <HStack>
+          <Button onClick={onClickAdd}>追加</Button>
+        </HStack>
       </VStack>
     </Center>
   );