feat: store todo on localStorage

CEOS-Developers · Mar 23, 2023 · ac0f9ef · ac0f9ef
1 parent ef373ff
commit ac0f9ef
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/App.js b/src/App.js
@@ -5,8 +5,12 @@ import Todo from './components/Todo';
 import Done from './components/Done';
 import GlobalStyle from './styles/GloalStyle';
 
+const initialTodoData = localStorage.getItem('list')
+  ? JSON.parse(localStorage.getItem('list'))
+  : [];
+
 function App() {
-  const [list, setList] = useState([]);
+  const [list, setList] = useState(initialTodoData);
   const [value, setValue] = useState('');
 
   const getTodo = (todo) => {
@@ -16,18 +20,21 @@ function App() {
       completed: false,
     };
     setList([...list, newTodo]);
+    localStorage.setItem('list', JSON.stringify([...list, newTodo]));
   };
 
   const toggleTodo = (id) => {
-    setList(
-      list.map((data) =>
-        data.id === id ? { ...data, completed: !data.completed } : data
-      )
+    let toggledTodo = list.map((data) =>
+      data.id === id ? { ...data, completed: !data.completed } : data
     );
+    setList(toggledTodo);
+    localStorage.setItem('list', JSON.stringify(toggledTodo));
   };
 
   const deleteTodo = (id) => {
-    setList(list.filter((data) => data.id !== id));
+    let deletedTodo = list.filter((data) => data.id !== id);
+    setList(deletedTodo);
+    localStorage.setItem('list', JSON.stringify(deletedTodo));
   };
 
   let countTodo = 0;

diff --git a/src/components/Todo.js b/src/components/Todo.js
@@ -21,6 +21,7 @@ const Todo = ({ Todo, toggleTodo, deleteTodo, title, list, setList }) => {
 
     setList(editedTodo);
     setIsEditing(false);
+    localStorage.setItem('list', JSON.stringify(editedTodo));
   };
 
   if (isEditing) {