From 56711f5b591a501dd566bd1715447fa74524c7a2 Mon Sep 17 00:00:00 2001
From: kjuulh <contact@kjuulh.io>
Date: Mon, 15 Nov 2021 22:46:14 +0100
Subject: [PATCH] Add project to edit

---
 src/client/src/pages/todos/[todoId]/index.tsx | 31 ++++++++++++-------
 .../presentation/contexts/SocketContext.tsx   |  2 +-
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/client/src/pages/todos/[todoId]/index.tsx b/src/client/src/pages/todos/[todoId]/index.tsx
index 92e122b..24d8865 100644
--- a/src/client/src/pages/todos/[todoId]/index.tsx
+++ b/src/client/src/pages/todos/[todoId]/index.tsx
@@ -4,7 +4,7 @@ import {
   useUpdateTodo,
 } from "@src/presentation/hooks/socketHooks";
 import { Todo } from "@src/core/entities/todo";
-import { FC, useEffect, useState } from "react";
+import { FC, useState } from "react";
 import { PageHeading } from "@src/components/common/headings/pageHeading";
 import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
 
@@ -15,6 +15,7 @@ interface EditTodoProps {
 }
 const EditTodo: FC<EditTodoProps> = ({ todo, onCancel, onSave }) => {
   const [todoTitle, setTodoTitle] = useState(todo.title);
+  const [project, setProject] = useState(todo.project);
 
   return (
     <div className="space-y-4 flex-grow">
@@ -26,11 +27,22 @@ const EditTodo: FC<EditTodoProps> = ({ todo, onCancel, onSave }) => {
           type="text"
         />
       </div>
+
+      <div className="todo-project py-2 px-4 bg-gray-700 border border-gray-500 rounded-lg ">
+        <input
+          type="text"
+          placeholder="Project name"
+          className="text-sm w-full placeholder-gray-400"
+          value={project}
+          tabIndex={2}
+          onChange={(e) => setProject(e.target.value)}
+        />
+      </div>
       <div className="space-x-4">
         <button
           className="base-button dark:bg-accent-500 disabled:bg-accent-800 active:bg-accent-400"
           onClick={() => {
-            onSave({ ...todo, title: todoTitle });
+            onSave({ ...todo, title: todoTitle, project });
           }}
         >
           Save
@@ -48,24 +60,19 @@ interface TodoDetailsProps {
 }
 
 const TodoDetails: FC<TodoDetailsProps> = ({ todo }) => {
-  const [updatedTodo, setUpdatedTodo] = useState(todo);
   const { updateTodo } = useUpdateTodo();
   const [editMode, setEditMode] = useState(false);
 
-  useEffect(() => {
-    updateTodo(updatedTodo);
-  }, [updatedTodo]);
-
   return (
     <div className="bg-gray-800 rounded-xl p-8 shadow-lg space-y-4">
-      <PageHeading title={updatedTodo.project || "Inbox"} />
+      <PageHeading title={todo.project || "Inbox"} />
       <div className="flex flex-row items-center gap-4">
         {editMode ? (
           <EditTodo
             todo={todo}
             onCancel={() => setEditMode(false)}
             onSave={(todo) => {
-              setUpdatedTodo(todo);
+              updateTodo(todo);
               setEditMode(false);
             }}
           />
@@ -73,12 +80,12 @@ const TodoDetails: FC<TodoDetailsProps> = ({ todo }) => {
           <>
             <TodoCheckmark
               updateTodo={(t) => {
-                setUpdatedTodo(t);
+                updateTodo(t);
               }}
-              todo={updatedTodo}
+              todo={todo}
             />
             <h4 className="flex-grow" onClick={() => setEditMode(true)}>
-              {updatedTodo.title}
+              {todo.title}
             </h4>
           </>
         )}
diff --git a/src/client/src/presentation/contexts/SocketContext.tsx b/src/client/src/presentation/contexts/SocketContext.tsx
index 47b36fe..71317ff 100644
--- a/src/client/src/presentation/contexts/SocketContext.tsx
+++ b/src/client/src/presentation/contexts/SocketContext.tsx
@@ -63,7 +63,7 @@ export const SocketProvider: FC = (props) => {
       const newTodo = JSON.parse(todo) as Todo;
       const validatedTodo = asTodo(newTodo);
       setTodos([
-        ...todos.filter((t) => t.id != validatedTodo.id),
+        ...todos.filter((t) => t.id !== validatedTodo.id),
         validatedTodo,
       ]);
     });