refactor:refactor useTodos,add useLocalStorage

src/hooks/useLocaLStorage.ts

@@ -0,0 +1,25 @@
+interface IUseLocalStorage {
+  setItem: (value: unknown) => void;
+  getItem: () => unknown;
+  removeItem: () => void;
+}
+
+const useLocaLStorage = (key: string): IUseLocalStorage => {
+  const setItem = (value: unknown): void => {
+    typeof value === 'string'
+      ? localStorage.setItem(key, value)
+      : localStorage.setItem(key, JSON.stringify(value));
+  };
+
+  const getItem = (): unknown => {
+    const item = localStorage.getItem(key);
+
+    return item ? JSON.parse(item) : null;
+  };
+
+  const removeItem = (): void => localStorage.removeItem(key);
+
+  return { setItem, getItem, removeItem };
+};
+
+export default useLocaLStorage;

src/hooks/useTodos.ts

@@ -1,30 +1,31 @@
 import { useLayoutEffect, useState } from 'react';
 import { Todo } from '../types/Todo';
 import {
+  getCompletedTodos,
   getInCompletedTodos,
   hasInCompletedTodos,
 } from '../utils/todos/getTodos';
-import { validUpdatedTodos } from '../utils/todos/validationTodo';
 import { updateTodosCompleted } from '../utils/todos/updateTodo';
 import { getRandomId } from '../utils/getRandomId';
+import useLocaLStorage from './useLocaLStorage';
 
 export const useTodos = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
+  const { getItem, setItem } = useLocaLStorage('todos');
 
   const fetchTodos = () => {
-    const localTodos = localStorage.getItem('todos');
+    const localTodos = <Todo[]>getItem();
 
-    setTodos(localTodos ? JSON.parse(localTodos) : []);
+    setTodos(localTodos ? localTodos : []);
   };
-
   const addTodo = (title: string): Todo | void => {
     const todo = {
       title,
       completed: false,
       id: getRandomId(),
     };
 
-    localStorage.setItem('todos', JSON.stringify([...todos, todo]));
+    setItem([...todos, todo]);
 
     setTodos(prevState => [...prevState, todo]);
   };
@@ -34,15 +35,15 @@ export const useTodos = () => {
 
     setTodos(newTodos);
 
-    localStorage.setItem('todos', JSON.stringify(newTodos));
+    setItem(newTodos);
   };
 
   const deleteCompletedTodos = async () => {
     const inCompletedTodos = getInCompletedTodos(todos);
 
     setTodos(inCompletedTodos);
 
-    localStorage.setItem('todos', JSON.stringify(inCompletedTodos));
+    setItem(inCompletedTodos);
   };
 
   const updateTodo = (todo: Todo): Todo | void => {
@@ -52,33 +53,28 @@ export const useTodos = () => {
 
     setTodos(updatedTodos);
 
+    setItem(updatedTodos);
+
     return todo;
   };
 
   const updatedAllTodo = (): void => {
     const isIncompletedTodo = hasInCompletedTodos(todos);
 
-    const newTodos = isIncompletedTodo
-      ? updateTodosCompleted(getInCompletedTodos(todos))
-      : updateTodosCompleted(todos);
-
-    const res = newTodos.map(todo => updateTodo(todo));
-
-    const updatedTodos = validUpdatedTodos(res);
+    let newTodos: Todo[] = [];
 
-    if (!!updatedTodos.length) {
-      setTodos(prevState => {
-        const updatedState = prevState.map(todo => {
-          const updatedTodo = updatedTodos.find(
-            updated => updated.id === todo.id,
-          );
+    if (isIncompletedTodo) {
+      newTodos = [
+        ...updateTodosCompleted(getInCompletedTodos(todos)),
+        ...getCompletedTodos(todos),
+      ];
+    } else {
+      newTodos = updateTodosCompleted(todos);
+    }
 
-          return updatedTodo ? updatedTodo : todo;
-        });
+    setTodos(newTodos);
 
-        return updatedState;
-      });
-    }
+    setItem(newTodos);
   };
 
   useLayoutEffect(() => {