third commit

src/App.tsx

@@ -42,7 +42,7 @@ export const App: React.FC = () => {
           </section>
         )}
 
-        {filteredTodos && filteredTodos.length > 0 && (
+        {todos && todos.length > 0 && (
           <TodoFooter todos={todos} filter={filter} dispatch={dispatch} />
         )}
       </div>

src/components/StateContext/StateContext.tsx

@@ -16,10 +16,6 @@ interface Props {
 }
 
 function reducer(state: State, action: Action): State {
-  if (!Array.isArray(state.todos)) {
-    return { ...state, todos: [] };
-  }
-
   switch (action.type) {
     case ActionType.Add: {
       return { ...state, todos: [...state.todos, action.payload] };
@@ -50,9 +46,11 @@ function reducer(state: State, action: Action): State {
     }
 
     case ActionType.AllCompleted: {
+      const allCompleted = state.todos.every(todo => todo.completed);
+
       const updatedTodos = state.todos.map(todo => ({
         ...todo,
-        completed: !todo.completed,
+        completed: !allCompleted,
       }));
 
       return { ...state, todos: updatedTodos };
@@ -92,12 +90,15 @@ export const DispatchContext = React.createContext<(action: Action) => void>(
 
 export const StateProvider: React.FC<Props> = ({ children }) => {
   const [todos, setTodos] = useLocalStorage<Todo[]>(initialState.todos);
-  const [state, dispatch] = useReducer<Reducer<State, Action>>(reducer, todos);
+  const [state, dispatch] = useReducer<Reducer<State, Action>>(reducer, {
+    ...initialState,
+    todos,
+  });
 
   const onDispatch = (action: Action) => {
     const newState = reducer(state, action);
 
-    setTodos(newState);
+    setTodos(newState.todos);
     dispatch(action);
   };
 

src/components/TodoFooter/TodoFooter.tsx

@@ -12,10 +12,12 @@ interface Props {
 }
 
 export const TodoFooter: React.FC<Props> = ({ todos, filter, dispatch }) => {
+  const activeTodos = todos.filter(todo => !todo.completed);
+
   return (
     <footer className="todoapp__footer" data-cy="Footer">
       <span className="todo-count" data-cy="TodosCounter">
-        {todos.length} items left
+        {activeTodos.length} items left
       </span>
 
       <nav className="filter" data-cy="Filter">

src/components/TodoHeader/TodoHeader.tsx

@@ -11,21 +11,22 @@ interface Props {
 
 export const TodoHeader: React.FC<Props> = ({ todos, dispatch }) => {
   const [query, setQuery] = useState('');
+  const allCompleted = todos.filter(todo => todo.completed);
   const refInput = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (refInput.current) {
       refInput.current.focus();
     }
-  }, []);
+  }, [todos]);
 
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     if (query.trim() !== '') {
       const newTodo: Todo = {
         id: +new Date(),
-        title: query,
+        title: query.trim(),
         completed: false,
       };
 
@@ -36,14 +37,17 @@ export const TodoHeader: React.FC<Props> = ({ todos, dispatch }) => {
 
   return (
     <header className="todoapp__header">
-      <button
-        type="button"
-        className={classNames('todoapp__toggle-all', {
-          active: todos?.every(todo => todo.completed),
-        })}
-        data-cy="ToggleAllButton"
-        onClick={() => dispatch({ type: ActionType.AllCompleted })}
-      />
+      {todos.length > 0 && (
+        <button
+          type="button"
+          className={classNames('todoapp__toggle-all', {
+            active:
+              allCompleted.length === todos.length && allCompleted.length > 0,
+          })}
+          data-cy="ToggleAllButton"
+          onClick={() => dispatch({ type: ActionType.AllCompleted })}
+        />
+      )}
 
       <form onSubmit={onSubmit}>
         <input

src/components/TodoItem/TodoItem.tsx

@@ -34,7 +34,10 @@ export const TodoItem: React.FC<Props> = ({ todo, dispatch }) => {
     } else if (query.trim() === '') {
       dispatch({ type: ActionType.Delete, payload: id });
     } else if (query !== title) {
-      dispatch({ type: ActionType.UpdateTitle, payload: { id, title: query } });
+      dispatch({
+        type: ActionType.UpdateTitle,
+        payload: { id, title: query.trim() },
+      });
     }
   };
 

src/components/hooks/useLocalStorage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 export function useLocalStorage<T>(startValue: T) {
-  const [todos, setTodos] = useState(() => {
+  const [todos, setTodos] = useState<T>(() => {
     const data = localStorage.getItem('todos');
 
     if (data === null) {