Add unique

src/components/listComponent/list.js

@@ -1,20 +1,32 @@
 import React from 'react';
 
-const List = ({ todos, deleteTd, set, deletedelements, allelements, activeelements }) => {
-  const listItems = todos.map((todo, index) =>
-    <div>
-      <li key={index}>{todo}</li>
-      <button onClick={() => deleteTd(index)}>delete</button>
-    </div>
+const List = ({
+  todos,
+  toggleCompleted,
+  filterCompleted,
+  filterNotCompleted,
+  getHistory,
+}) => {
+  const listItems = todos.map((todo) =>
+    <li
+      key={todo.id}
+      onClick={() => toggleCompleted(todo.id)}
+      style={{
+        textDecoration: todo.completed ? 'line-through' : 'none'
+      }}
+    >
+      {todo.text}
+    </li>
   );
+
   return (
     <div>
       <ul>
         {listItems}
       </ul>
-      <button onClick={() => set(deletedelements)}>完了</button>
-      <button onClick={() => set(allelements)}>全て</button>
-      <button onClick={() => set(activeelements)}>未完了</button>
+      <button onClick={filterCompleted}>完了</button>
+      <button onClick={getHistory}>全て</button>
+      <button onClick={filterNotCompleted}>未完了</button>
     </div>
   );
 }

src/components/mainscreenComponent/main.js

@@ -1,30 +1,18 @@
-import React, { useState } from 'react';
+import React from 'react';
 import List from '../listComponent/list';
 import Input from '../inputComponent/input';
 import useTodostate from '../useTodostate';
 
-let active;
-
 const Main = () => {
   const {
     todos,
     addTodo,
-    deleteTodo,
-    setTodo,
-    deletedelement,
-    allelement,
-    activeelement,
+    toggleCompleted,
+    filterCompleted,
+    filterNotCompleted,
+    getHistory,
   } = useTodostate([]);
 
-  if (activeelement.length === 0) {
-    active = allelement;
-  } else {
-    active = activeelement;
-  }
-
-
-
-
   return (
     <div>
       <Input
@@ -38,11 +26,10 @@ const Main = () => {
       />
       <List
         todos={todos}
-        deleteTd={deleteTodo}
-        set={setTodo}
-        deletedelements={deletedelement}
-        allelements={allelement}
-        activeelements={active}
+        toggleCompleted={toggleCompleted}
+        filterCompleted={filterCompleted}
+        filterNotCompleted={filterNotCompleted}
+        getHistory={getHistory}
       />
     </div>
   );

src/components/useTodostate.js

@@ -1,30 +1,66 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-export default initialTodo => {
-  const [todos, setTodos] = useState(initialTodo);
-  const [allelement, setAllelement] = useState([]);
-  const [deletedelement, setDeletedelement] = useState([]);
-  const [activeelement, setActiveelement] = useState([]);
+let initialid = 0;
+
+const useTodostate = () => {
+  const [todos, setTodos] = useState([]);
+  const [history, setHistory] = useState([]);
 
   return {
     todos,
-    deletedelement,
-    allelement,
-    activeelement,
+    history,
     addTodo: todoText => {
-      setTodos([...todos, todoText]);
-      setAllelement([...allelement, todoText]);
+      const todo = {
+        // id: Date.now(),
+        id: initialid++,
+        text: todoText,
+        completed: false,
+        deleted: false,
+      };
+      setTodos([
+        ...todos,
+        todo,
+      ]);
+      setHistory([
+        ...history,
+        todo,
+      ]);
+    },
+    toggleCompleted: id => {
+      const toggled = history.map(todo =>
+        (todo.id === id)
+          ? { ...todo, completed: !todo.completed }
+          : todo
+      )
+      setHistory(toggled);
+      setTodos(toggled);
+    },
+    toggleDeleted: id => {
+      const toggled = history.map(todo => {
+        if (todo.id === id) {
+          return {
+            ...todo,
+            deleted: !todo.deleted
+          };
+        }
+        return todo;
+      });
+      setHistory(toggled);
+      setTodos(toggled);
     },
-    deleteTodo: deleteIndex => {
-      const deletednewTodo = todos.filter((todo, index) => index !== deleteIndex);
-      setActiveelement(deletednewTodo);
-      setTodos(deletednewTodo);
-      const deleted = todos.filter((todo, index) => index === deleteIndex);
-      setDeletedelement([...deletedelement, deleted]);
+    filterCompleted: () => {
+      const completed = history.filter(todo => todo.completed === true);
+      setTodos(completed);
     },
-    setTodo: element => {
-      setTodos(element);
+    filterNotCompleted: () => {
+      const completed = history.filter(todo => todo.completed === false);
+      setTodos(completed);
+    },
+    getHistory: () => {
+      setTodos(history);
     },
   };
 
 };
+
+export default useTodostate;