input ref error, setTitleEdition deleted

mate-academy · Sep 22, 2023 · aaa3670 · aaa3670
1 parent c5f6943
commit aaa3670
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 23 deletions.
diff --git a/src/components/Task/Task.tsx b/src/components/Task/Task.tsx
@@ -9,23 +9,23 @@ type Props = {
 export const Task = ({ todo }: Props) => {
   const {
     temptTodo,
-    removeTask, editedTodo,
+    editedTodo,
+    todos,
+    newTitle,
+    removeTask,
     toggleCompletedTodos,
-    titleEdition,
     onTitleEdition,
-    todos,
+    closeTitleEdition,
     setNewTitle,
     todoTitleEdition,
-    newTitle,
-    setTitleEdition,
   } = useTodo();
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (titleEdition && todo.isOnTitleEdition) {
-      inputRef.current!.focus();
+    if (todo.isOnTitleEdition) {
+      inputRef.current?.focus();
     }
-  }, [titleEdition, todo.isOnTitleEdition]);
+  }, [todo.isOnTitleEdition]);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
@@ -34,7 +34,7 @@ export const Task = ({ todo }: Props) => {
     }
 
     if (e.key === 'Escape') {
-      setTitleEdition(false);
+      closeTitleEdition(todos, todo.id);
     }
   };
 
@@ -53,7 +53,7 @@ export const Task = ({ todo }: Props) => {
         />
       </label>
 
-      {titleEdition && todo.isOnTitleEdition
+      {todo.isOnTitleEdition
         ? (
           <form>
             <input

diff --git a/src/provider/todoProvider.tsx b/src/provider/todoProvider.tsx
@@ -23,7 +23,6 @@ export const ToDoProvider = ({ children }: Props) => {
   const [temptTodo, setTempTodo] = useState<Todo | null>(null);
   const [temptTodos, setTempTodos] = useState<Todo[]>([]);
   const [editedTodo, setEditedTodo] = useState<boolean>(false);
-  const [titleEdition, setTitleEdition] = useState<boolean>(false);
   const [newTitle, setNewTitle] = useState<string>('null');
 
   const handleShowError = (err: Errors) => {
@@ -154,7 +153,6 @@ export const ToDoProvider = ({ children }: Props) => {
   };
 
   const onTitleEdition = (tasks: Todo[], taskId: number) => {
-    setTitleEdition(true);
     setTodos(
       tasks.map((t) => {
         if (t.id === taskId) {
@@ -171,15 +169,27 @@ export const ToDoProvider = ({ children }: Props) => {
     );
   };
 
+  const closeTitleEdition = (tasks: Todo[], taskId: number) => {
+    setTodos(
+      tasks.map((t) => {
+        if (t.id === taskId) {
+          return {
+            ...t,
+            isOnTitleEdition: false,
+          };
+        }
+
+        return t;
+      }),
+    );
+  };
+
   const todoTitleEdition = (
     task: Todo,
     updatedTitle: string,
     tasks: Todo[],
   ) => {
-    if (updatedTitle === task.title) {
-      setTitleEdition(false);
-    } else if (updatedTitle === '') {
-      setTitleEdition(false);
+    if (updatedTitle === '') {
       removeTask(task);
     } else {
       setTodos(
@@ -201,9 +211,6 @@ export const ToDoProvider = ({ children }: Props) => {
         })
         .catch(() => {
           handleShowError(Errors.Update);
-        })
-        .finally(() => {
-          setTitleEdition(false);
         });
     }
   };
@@ -219,7 +226,6 @@ export const ToDoProvider = ({ children }: Props) => {
       temptTodos,
       newTitle,
       allTodosAreActive,
-      titleEdition,
       setNewTodoName,
       handleShowError,
       handleSetFilterTodos,
@@ -231,8 +237,8 @@ export const ToDoProvider = ({ children }: Props) => {
       toggleCompletedTodos,
       todoTitleEdition,
       onTitleEdition,
+      closeTitleEdition,
       setNewTitle,
-      setTitleEdition,
     }}
     >
       {children}

diff --git a/src/provider/types.tsx b/src/provider/types.tsx
@@ -12,7 +12,6 @@ export interface TodoContextType {
   temptTodos: Todo[];
   allTodosAreActive: boolean;
   newTitle: string;
-  titleEdition: boolean;
   setNewTodoName: React.Dispatch<React.SetStateAction<string>>;
   handleShowError: (err: Errors) => void;
   handleSetFilterTodos: (filterType: FilterType) => void;
@@ -24,8 +23,8 @@ export interface TodoContextType {
   toggleCompletedTodos: (task: Todo) => void;
   todoTitleEdition: (task: Todo, newTitle: string, tasks: Todo[]) => void;
   onTitleEdition: (tasks: Todo[], taskId: number) => void;
+  closeTitleEdition: (tasks: Todo[], taskId: number) => void;
   setNewTitle: React.Dispatch<React.SetStateAction<string>>;
-  setTitleEdition: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export enum Errors {