From 407a123793a5aa5908b4bbf21b5830a90a60a0fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wojciech=20Przy=C5=82uski?= <przyluskiwojciech@gmail.com>
Date: Tue, 8 Oct 2024 12:26:22 +0200
Subject: [PATCH] refactor: extract variables from toggleMultipleTodosStatus in
 TodoContext

---
 src/components/Todos/Todos.tsx         |  2 ++
 src/components/context/TodoContext.tsx | 23 +++++++++++++----------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Todos/Todos.tsx b/src/components/Todos/Todos.tsx
index c858973b4..56cd464d1 100644
--- a/src/components/Todos/Todos.tsx
+++ b/src/components/Todos/Todos.tsx
@@ -6,6 +6,7 @@ export const Todos = () => {
   const [editingTodoId, setEditingTodoId] = useState<number | null>(null);
   const [editingTitle, setEditingTitle] = useState('');
   const renameInputRef = useRef<HTMLInputElement | null>(null);
+  const checkboxRef = useRef<HTMLInputElement | null>(null);
   const { toggleTodoStatus, updateTodoTitle, deleteTodo, filteredTodos } =
     useTodoContext();
 
@@ -70,6 +71,7 @@ export const Todos = () => {
               {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
               <label className="todo__status-label">
                 <input
+                  ref={checkboxRef}
                   data-cy="TodoStatus"
                   type="checkbox"
                   className="todo__status"
diff --git a/src/components/context/TodoContext.tsx b/src/components/context/TodoContext.tsx
index fe97db032..3c286ae4e 100644
--- a/src/components/context/TodoContext.tsx
+++ b/src/components/context/TodoContext.tsx
@@ -3,6 +3,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -47,6 +48,16 @@ export const TodoProvider = ({ children }: TodoProviderProps) => {
   const [filter, setFilter] = useState<Filter>('All');
   const headerInputRef = useRef<HTMLInputElement>(null);
 
+  const areAllCompleted = useMemo(() => {
+    return todos.every(todo => todo.completed);
+  }, [todos]);
+
+  const updatedTodos = useMemo(() => {
+    return todos.map(todo => {
+      return { ...todo, completed: !areAllCompleted };
+    });
+  }, [areAllCompleted, todos]);
+
   useEffect(() => {
     localStorage.setItem('todos', JSON.stringify(todos));
 
@@ -86,16 +97,8 @@ export const TodoProvider = ({ children }: TodoProviderProps) => {
   }, []);
 
   const toggleMultipleTodosStatus = useCallback(() => {
-    setTodos(prevTodos => {
-      const areAllCompleted = prevTodos.every(todo => todo.completed);
-
-      const updatedTodos = prevTodos.map(todo => {
-        return { ...todo, completed: !areAllCompleted };
-      });
-
-      return updatedTodos;
-    });
-  }, []);
+    setTodos(updatedTodos);
+  }, [updatedTodos]);
 
   const updateTodoTitle = useCallback((id: number, newTitle: string) => {
     setTodos(prevTodos =>