From 506fc28343bea00c37df10ddc13ed8e829933679 Mon Sep 17 00:00:00 2001 From: kahca-122 Date: Sun, 10 Oct 2021 00:25:15 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20ToDo=E5=91=A8=E3=82=8A=E3=81=AE?= =?UTF-8?q?state=E7=AE=A1=E7=90=86=E6=96=B9=E6=B3=95=E3=82=92=E5=A4=89?= =?UTF-8?q?=E6=9B=B4=E3=81=99=E3=82=8B=E3=81=9F=E3=82=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 拡張性をあげるため --- src/App.tsx | 12 ++++++------ src/conponents/Todo.tsx | 25 +++++++++++++++---------- src/conponents/TodoInput.tsx | 9 +++------ src/conponents/TodoList.tsx | 15 +++------------ 4 files changed, 27 insertions(+), 34 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index a522ca4..813e45c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,22 +6,22 @@ import TodoList from './conponents/TodoList'; type TodoType = { title: string; + isCompleted: boolean; }; const initialTodos: TodoType[] = [ - { title: '資料を作る' }, - { title: '歯医者に行く' }, - { title: '課題をやる' }, + { title: '資料を作る', isCompleted: false }, + { title: '歯医者に行く', isCompleted: false }, + { title: '課題をやる', isCompleted: false }, ]; const App = () => { const [todos, setTodos] = useState(initialTodos); - const [status, setStatus] = useState([false, false, false]); return ( - - + + ); }; diff --git a/src/conponents/Todo.tsx b/src/conponents/Todo.tsx index d781ad1..3ea951a 100644 --- a/src/conponents/Todo.tsx +++ b/src/conponents/Todo.tsx @@ -1,9 +1,16 @@ import { CloseIcon } from '@chakra-ui/icons'; -import { Flex, Spacer, Editable, EditablePreview, EditableInput, Checkbox } from '@chakra-ui/react'; +import { + Flex, + Spacer, + Editable, + EditablePreview, + EditableInput /*Checkbox*/, +} from '@chakra-ui/react'; import React, { Dispatch, SetStateAction } from 'react'; type TodoType = { title: string; + isCompleted: boolean; }; type Props = { @@ -11,25 +18,23 @@ type Props = { title: string; todos: TodoType[]; setTodos: Dispatch>; - status: boolean[]; - setStatus: Dispatch>; }; -const Todo = ({ index, title, todos, setTodos, status, setStatus }: Props) => { +const Todo = ({ index, title, todos, setTodos }: Props) => { const removeTodo = () => { const newTodos = todos.filter((_, i) => i !== index); setTodos(newTodos); }; - const handleStatus = () => { - const newStatus = [...status]; - newStatus[index] = !newStatus[index]; - setStatus(newStatus); - }; + // const handleStatus = ({ index, title, todos, setTodos }: Props) => { + // const newStatus = [...todos]; + // newStatus.isCompleted[index] = !newStatus[index]; + // setStatus(newStatus); + // }; return ( - handleStatus()} /> + {/* { handleStatus()} />} */} {status[index] ? : } diff --git a/src/conponents/TodoInput.tsx b/src/conponents/TodoInput.tsx index 98ad746..21355e7 100644 --- a/src/conponents/TodoInput.tsx +++ b/src/conponents/TodoInput.tsx @@ -3,16 +3,15 @@ import React, { useState, ChangeEvent, Dispatch, SetStateAction, KeyboardEvent } type TodoType = { title: string; + isCompleted: boolean; }; type Props = { todos: TodoType[]; setTodos: Dispatch>; - status: boolean[]; - setStatus: Dispatch>; }; -const TodoInput = ({ todos, setTodos, status, setStatus }: Props) => { +const TodoInput = ({ todos, setTodos }: Props) => { const [title, setTitle] = useState(''); return ( @@ -24,10 +23,8 @@ const TodoInput = ({ todos, setTodos, status, setStatus }: Props) => { onChange={(e: ChangeEvent) => setTitle(e.target.value)} onKeyPress={(e: KeyboardEvent) => { if (e.key === 'Enter') { - const newTodos = [...todos, { title: title }]; - const newStatus = [...status, false]; + const newTodos = [...todos, { title: title, isCompleted: false }]; setTodos(newTodos); - setStatus(newStatus); } }} /> diff --git a/src/conponents/TodoList.tsx b/src/conponents/TodoList.tsx index 0f2559b..af5a947 100644 --- a/src/conponents/TodoList.tsx +++ b/src/conponents/TodoList.tsx @@ -5,28 +5,19 @@ import Todo from './Todo'; type TodoType = { title: string; + isCompleted: boolean; }; type Props = { todos: TodoType[]; setTodos: Dispatch>; - status: boolean[]; - setStatus: Dispatch>; }; -const TodoList = ({ todos, setTodos, status, setStatus }: Props) => { +const TodoList = ({ todos, setTodos }: Props) => { return ( } spacing={4}> {todos.map((todo, i) => ( - + ))} ); From 7cfe0c7f8d5832970a606fddebd0c6709f478e14 Mon Sep 17 00:00:00 2001 From: kahca-122 Date: Sun, 10 Oct 2021 18:50:32 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E3=82=BF=E3=82=B9=E3=82=AF=E3=81=AE?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=8C=E6=AD=A3=E3=81=97=E3=81=8F=E3=81=AA?= =?UTF-8?q?=E3=81=84=E6=8C=99=E5=8B=95=E3=82=92=E4=BF=AE=E6=AD=A3=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=81=9F=E3=82=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit データの管理方法を変更するため --- src/App.tsx | 6 ++++-- src/conponents/Todo.tsx | 24 ++++++++++-------------- src/conponents/TodoList.tsx | 2 +- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 813e45c..df9e5a9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import { Container } from '@chakra-ui/react'; -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import TodoInput from './conponents/TodoInput'; import TodoList from './conponents/TodoList'; @@ -17,7 +17,9 @@ const initialTodos: TodoType[] = [ const App = () => { const [todos, setTodos] = useState(initialTodos); - + useEffect(() => { + console.table(todos); + }, [todos]); return ( diff --git a/src/conponents/Todo.tsx b/src/conponents/Todo.tsx index 3ea951a..1ce4054 100644 --- a/src/conponents/Todo.tsx +++ b/src/conponents/Todo.tsx @@ -1,11 +1,5 @@ import { CloseIcon } from '@chakra-ui/icons'; -import { - Flex, - Spacer, - Editable, - EditablePreview, - EditableInput /*Checkbox*/, -} from '@chakra-ui/react'; +import { Flex, Spacer, Editable, EditablePreview, EditableInput, Checkbox } from '@chakra-ui/react'; import React, { Dispatch, SetStateAction } from 'react'; type TodoType = { @@ -24,19 +18,21 @@ const Todo = ({ index, title, todos, setTodos }: Props) => { const removeTodo = () => { const newTodos = todos.filter((_, i) => i !== index); setTodos(newTodos); + console.log(index); }; - // const handleStatus = ({ index, title, todos, setTodos }: Props) => { - // const newStatus = [...todos]; - // newStatus.isCompleted[index] = !newStatus[index]; - // setStatus(newStatus); - // }; + const handleStatus = () => { + const newStatus = todos; + newStatus[index].isCompleted = !newStatus[index].isCompleted; + setTodos(newStatus); + console.log(index); + }; return ( - {/* { handleStatus()} />} */} + { handleStatus()} />} - {status[index] ? : } + {todos[index].isCompleted ? : } diff --git a/src/conponents/TodoList.tsx b/src/conponents/TodoList.tsx index af5a947..3da494b 100644 --- a/src/conponents/TodoList.tsx +++ b/src/conponents/TodoList.tsx @@ -17,7 +17,7 @@ const TodoList = ({ todos, setTodos }: Props) => { return ( } spacing={4}> {todos.map((todo, i) => ( - + ))} ); From b66a8e3049c8a17d2551c8ca09af897ce703b803 Mon Sep 17 00:00:00 2001 From: kahca-122 Date: Sun, 10 Oct 2021 19:53:42 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E5=90=8C=E5=90=8D=E3=82=BF=E3=82=B9?= =?UTF-8?q?=E3=82=AF=E3=81=AE=E6=99=82=E3=81=AB=E8=B5=B7=E3=81=93=E3=82=8B?= =?UTF-8?q?=E3=83=90=E3=82=B0=E3=81=AE=E4=BF=AE=E6=AD=A3=E3=81=AE=E3=81=9F?= =?UTF-8?q?=E3=82=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit それぞれのタスクでidを管理するように変更するため --- src/App.tsx | 22 ++++++++-------------- src/conponents/Todo.tsx | 9 ++------- src/conponents/TodoInput.tsx | 10 +++++----- src/conponents/TodoList.tsx | 7 ++----- src/types/TodoType.ts | 5 +++++ 5 files changed, 22 insertions(+), 31 deletions(-) create mode 100644 src/types/TodoType.ts diff --git a/src/App.tsx b/src/App.tsx index df9e5a9..661e0df 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,25 +1,19 @@ import { Container } from '@chakra-ui/react'; -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; -import TodoInput from './conponents/TodoInput'; -import TodoList from './conponents/TodoList'; - -type TodoType = { - title: string; - isCompleted: boolean; -}; +import TodoInput from '@/conponents/TodoInput'; +import TodoList from '@/conponents/TodoList'; +import { TodoType } from '@/types/TodoType'; const initialTodos: TodoType[] = [ - { title: '資料を作る', isCompleted: false }, - { title: '歯医者に行く', isCompleted: false }, - { title: '課題をやる', isCompleted: false }, + { id: '0', title: '資料を作る', isCompleted: false }, + { id: '1', title: '歯医者に行く', isCompleted: false }, + { id: '2', title: '課題をやる', isCompleted: false }, ]; const App = () => { const [todos, setTodos] = useState(initialTodos); - useEffect(() => { - console.table(todos); - }, [todos]); + return ( diff --git a/src/conponents/Todo.tsx b/src/conponents/Todo.tsx index 1ce4054..60e6740 100644 --- a/src/conponents/Todo.tsx +++ b/src/conponents/Todo.tsx @@ -2,10 +2,7 @@ import { CloseIcon } from '@chakra-ui/icons'; import { Flex, Spacer, Editable, EditablePreview, EditableInput, Checkbox } from '@chakra-ui/react'; import React, { Dispatch, SetStateAction } from 'react'; -type TodoType = { - title: string; - isCompleted: boolean; -}; +import { TodoType } from '@/types/TodoType'; type Props = { index: number; @@ -18,14 +15,12 @@ const Todo = ({ index, title, todos, setTodos }: Props) => { const removeTodo = () => { const newTodos = todos.filter((_, i) => i !== index); setTodos(newTodos); - console.log(index); }; const handleStatus = () => { - const newStatus = todos; + const newStatus = [...todos]; newStatus[index].isCompleted = !newStatus[index].isCompleted; setTodos(newStatus); - console.log(index); }; return ( diff --git a/src/conponents/TodoInput.tsx b/src/conponents/TodoInput.tsx index 21355e7..5f0739e 100644 --- a/src/conponents/TodoInput.tsx +++ b/src/conponents/TodoInput.tsx @@ -1,10 +1,7 @@ import { Input } from '@chakra-ui/react'; import React, { useState, ChangeEvent, Dispatch, SetStateAction, KeyboardEvent } from 'react'; -type TodoType = { - title: string; - isCompleted: boolean; -}; +import { TodoType } from '@/types/TodoType'; type Props = { todos: TodoType[]; @@ -23,7 +20,10 @@ const TodoInput = ({ todos, setTodos }: Props) => { onChange={(e: ChangeEvent) => setTitle(e.target.value)} onKeyPress={(e: KeyboardEvent) => { if (e.key === 'Enter') { - const newTodos = [...todos, { title: title, isCompleted: false }]; + const newTodos = [ + ...todos, + { id: String(todos.length), title: title, isCompleted: false }, + ]; setTodos(newTodos); } }} diff --git a/src/conponents/TodoList.tsx b/src/conponents/TodoList.tsx index 3da494b..4e85619 100644 --- a/src/conponents/TodoList.tsx +++ b/src/conponents/TodoList.tsx @@ -3,10 +3,7 @@ import React, { Dispatch, SetStateAction } from 'react'; import Todo from './Todo'; -type TodoType = { - title: string; - isCompleted: boolean; -}; +import { TodoType } from '@/types/TodoType'; type Props = { todos: TodoType[]; @@ -17,7 +14,7 @@ const TodoList = ({ todos, setTodos }: Props) => { return ( } spacing={4}> {todos.map((todo, i) => ( - + ))} ); diff --git a/src/types/TodoType.ts b/src/types/TodoType.ts new file mode 100644 index 0000000..a86b06b --- /dev/null +++ b/src/types/TodoType.ts @@ -0,0 +1,5 @@ +export type TodoType = { + id: string; + title: string; + isCompleted: boolean; +}; From 83e3e2299b2e5be2333ef3ae977209b1303c131c Mon Sep 17 00:00:00 2001 From: kahca-122 Date: Wed, 13 Oct 2021 05:50:38 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20ID=E3=81=8C=E5=90=8C=E3=81=98?= =?UTF-8?q?=E3=81=AB=E3=81=AA=E3=81=A3=E3=81=A6=E3=81=97=E3=81=BE=E3=81=86?= =?UTF-8?q?=E4=B8=8D=E5=85=B7=E5=90=88=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit IDの設定方法を変更するため --- src/conponents/TodoInput.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/conponents/TodoInput.tsx b/src/conponents/TodoInput.tsx index 5f0739e..6ebeda9 100644 --- a/src/conponents/TodoInput.tsx +++ b/src/conponents/TodoInput.tsx @@ -8,6 +8,8 @@ type Props = { setTodos: Dispatch>; }; +let num = 3; + const TodoInput = ({ todos, setTodos }: Props) => { const [title, setTitle] = useState(''); @@ -20,11 +22,9 @@ const TodoInput = ({ todos, setTodos }: Props) => { onChange={(e: ChangeEvent) => setTitle(e.target.value)} onKeyPress={(e: KeyboardEvent) => { if (e.key === 'Enter') { - const newTodos = [ - ...todos, - { id: String(todos.length), title: title, isCompleted: false }, - ]; + const newTodos = [...todos, { id: String(num), title: title, isCompleted: false }]; setTodos(newTodos); + num++; } }} />