From bc5a7aa7f3c7a4bba32d27cf78d94e337ed674cf Mon Sep 17 00:00:00 2001
From: Nazarii AlieKsieiev <nazarmetall@gmail.com>
Date: Thu, 31 Oct 2024 03:55:30 +0200
Subject: [PATCH] Updates

---
 src/components/Notification/Notification.tsx | 11 +++++---
 src/components/TodoFilter/TodoFilter.tsx     |  4 +--
 src/components/TodoForm/TodoForm.tsx         |  4 +--
 src/components/TodoItem/TodoItem.tsx         |  9 ++++---
 src/hook/useLocalStorage.ts                  | 27 --------------------
 5 files changed, 17 insertions(+), 38 deletions(-)
 delete mode 100644 src/hook/useLocalStorage.ts

diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index f4792fd92..9562ad930 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react';
-import cn from 'classNames';
+import classNames from 'classNames';
 import { DispatchContext, StateContext } from '../../Store';
 
 export const Notification: React.FC = () => {
@@ -13,9 +13,12 @@ export const Notification: React.FC = () => {
   return (
     <div
       data-cy="ErrorNotification"
-      className={cn('notification is-danger is-light has-text-weight-normal', {
-        hidden: hasError,
-      })}
+      className={classNames(
+        'notification is-danger is-light has-text-weight-normal',
+        {
+          hidden: hasError,
+        },
+      )}
     >
       <button
         data-cy="HideErrorButton"
diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
index 42abbec09..696009db5 100644
--- a/src/components/TodoFilter/TodoFilter.tsx
+++ b/src/components/TodoFilter/TodoFilter.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useMemo } from 'react';
-import cn from 'classNames';
+import classNames from 'classNames';
 
 import { Status } from '../../types/Status';
 import { DispatchContext, StateContext } from '../../Store';
@@ -76,7 +76,7 @@ export const TodoFilter: React.FC = () => {
         {Object.values(Status).map(statusValue => (
           <a
             href={`#/${statusValue}`}
-            className={cn('filter__link', {
+            className={classNames('filter__link', {
               selected: isActiveButton(statusValue),
             })}
             data-cy={`FilterLink${capitalize(statusValue)}`}
diff --git a/src/components/TodoForm/TodoForm.tsx b/src/components/TodoForm/TodoForm.tsx
index 2e967af1e..fc92ec701 100644
--- a/src/components/TodoForm/TodoForm.tsx
+++ b/src/components/TodoForm/TodoForm.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect, useRef, useState } from 'react';
 import { Todo } from '../../types/Todo';
-import cn from 'classNames';
+import classNames from 'classNames';
 import { DispatchContext, StateContext } from '../../Store';
 import { ErrorMessage } from '../../types/ErrorMessage';
 import { onAutoCloseNotification } from '../../utils/autoCloseNotification';
@@ -84,7 +84,7 @@ export const TodoForm: React.FC = () => {
       {todos.length > 0 && (
         <button
           type="button"
-          className={cn('todoapp__toggle-all', { active: isActive })}
+          className={classNames('todoapp__toggle-all', { active: isActive })}
           data-cy="ToggleAllButton"
           onClick={handleToggleAll}
         />
diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
index 77f0fb203..c179e1040 100644
--- a/src/components/TodoItem/TodoItem.tsx
+++ b/src/components/TodoItem/TodoItem.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import cn from 'classNames';
+import classNames from 'classNames';
 import { Todo } from '../../types/Todo';
 import { useContext, useEffect, useRef } from 'react';
 import { StateContext } from '../../Store';
@@ -46,7 +46,10 @@ export const TodoItem: React.FC<Props> = ({
   const { id, title, completed } = todo;
 
   return (
-    <div data-cy="Todo" className={cn('todo', { completed: todo.completed })}>
+    <div
+      data-cy="Todo"
+      className={classNames('todo', { completed: todo.completed })}
+    >
       <label className="todo__status-label">
         <input
           data-cy="TodoStatus"
@@ -94,7 +97,7 @@ export const TodoItem: React.FC<Props> = ({
 
       <div
         data-cy="TodoLoader"
-        className={cn('modal overlay', {
+        className={classNames('modal overlay', {
           'is-active': selectedTodo.includes(id),
         })}
       >
diff --git a/src/hook/useLocalStorage.ts b/src/hook/useLocalStorage.ts
deleted file mode 100644
index 1c3190c03..000000000
--- a/src/hook/useLocalStorage.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useState } from 'react';
-
-export function useLocalStorage<T>(
-  key: string,
-  startValue: T,
-): [T, (v: T) => void] {
-  const [value, setValue] = useState(() => {
-    const data = localStorage.getItem(key);
-
-    if (data === null) {
-      return startValue;
-    }
-
-    try {
-      return JSON.parse(data);
-    } catch {
-      return startValue;
-    }
-  });
-
-  const save = (newValue: T) => {
-    localStorage.setItem(key, JSON.stringify(newValue));
-    setValue(newValue);
-  };
-
-  return [value, save];
-}