Fixed some code

mate-academy · Aug 20, 2024 · e950c17 · e950c17
1 parent 11e4c63
commit e950c17
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,7 +17,7 @@ export const App: React.FC = () => {
         <TodoList />
 
         {/* Hide the footer if there are no todos */}
-        {todos.length !== 0 && <Footer />}
+        {!!todos.length && <Footer />}
       </div>
     </div>
   );

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -8,29 +8,29 @@ export const Footer: React.FC = () => {
   const activeItems = todos.filter(item => !item.completed);
   const completed = todos.filter(item => item.completed);
 
+  const text = `${activeItems.length} item${activeItems.length === 1 ? '' : 's'} left`;
+
   return (
     <footer className="todoapp__footer" data-cy="Footer">
       <span className="todo-count" data-cy="TodosCounter">
-        {`${activeItems.length} item${activeItems.length === 1 ? '' : 's'} left`}
+        {text}
       </span>
 
       {/* Active link should have the 'selected' class */}
       <nav className="filter" data-cy="Filter">
-        {Object.values(Filter).map(item => {
-          return (
-            <a
-              key={item}
-              href={`#/${item.toLowerCase()}`}
-              className={classNames('filter__link', {
-                selected: filter === item,
-              })}
-              data-cy={`FilterLink${item}`}
-              onClick={() => setFilter(item)}
-            >
-              {item}
-            </a>
-          );
-        })}
+        {Object.values(Filter).map(item => (
+          <a
+            key={item}
+            href={`#/${item.toLowerCase()}`}
+            className={classNames('filter__link', {
+              selected: filter === item,
+            })}
+            data-cy={`FilterLink${item}`}
+            onClick={() => setFilter(item)}
+          >
+            {item}
+          </a>
+        ))}
       </nav>
 
       {/* this button should be disabled if there are no completed todos */}

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -51,7 +51,7 @@ export const Header: React.FC = () => {
   return (
     <header className="todoapp__header">
       {/* this button should have `active` class only if all todos are completed */}
-      {todos.length > 0 && (
+      {!!todos.length && (
         <button
           type="button"
           className={classNames('todoapp__toggle-all', {

diff --git a/src/components/TodosContext/TodosContext.tsx b/src/components/TodosContext/TodosContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useState } from 'react';
+import React, { createContext, useEffect, useMemo, useState } from 'react';
 import { Todo } from '../../type/Todo';
 import { useLocalStorage } from '../../hooks/UseLocalStorage';
 import { Filter } from '../../type/Filter';
@@ -30,6 +30,10 @@ export const TodosProvider: React.FC<Props> = ({ children }) => {
   const [filter, setFilter] = useState(Filter.All);
   const [choseEditItem, setChoseEditItem] = useState<number | null>(null);
 
+  useEffect(() => {
+    setTodos(todos);
+  }, [todos, setTodos]);
+
   const value = useMemo(
     () => ({
       todos,