diff --git a/src/hooks/useLocaLStorage.ts b/src/hooks/useLocaLStorage.ts new file mode 100644 index 000000000..ae0df653b --- /dev/null +++ b/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; diff --git a/src/hooks/useTodos.ts b/src/hooks/useTodos.ts index 613342800..b7910b819 100644 --- a/src/hooks/useTodos.ts +++ b/src/hooks/useTodos.ts @@ -1,22 +1,23 @@ 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([]); + const { getItem, setItem } = useLocaLStorage('todos'); const fetchTodos = () => { - const localTodos = localStorage.getItem('todos'); + const localTodos = getItem(); - setTodos(localTodos ? JSON.parse(localTodos) : []); + setTodos(localTodos ? localTodos : []); }; - const addTodo = (title: string): Todo | void => { const todo = { title, @@ -24,7 +25,7 @@ export const useTodos = () => { id: getRandomId(), }; - localStorage.setItem('todos', JSON.stringify([...todos, todo])); + setItem([...todos, todo]); setTodos(prevState => [...prevState, todo]); }; @@ -34,7 +35,7 @@ export const useTodos = () => { setTodos(newTodos); - localStorage.setItem('todos', JSON.stringify(newTodos)); + setItem(newTodos); }; const deleteCompletedTodos = async () => { @@ -42,7 +43,7 @@ export const useTodos = () => { 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(() => { diff --git a/src/utils/todos/removeTodos.ts b/src/utils/todos/removeTodos.ts deleted file mode 100644 index f0e961fee..000000000 --- a/src/utils/todos/removeTodos.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Todo } from '../../types/Todo'; - -export const revomesTodosById = (todos: Todo[], ids: string[]) => - todos.filter(({ id }) => !ids.includes(id)); diff --git a/src/utils/todos/validationTodo.ts b/src/utils/todos/validationTodo.ts deleted file mode 100644 index d7796c541..000000000 --- a/src/utils/todos/validationTodo.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Todo } from '../../types/Todo'; - -export const validUpdatedTodos = (updatedTodos: (Todo | void)[]): Todo[] => - updatedTodos.filter((todo): todo is Todo => todo !== undefined); - -export const validTodoIds = (todoIds: (string | void)[]): string[] => - todoIds.filter((id): id is string => id !== undefined);