Can now update title

src/client/src/components/todos/todoCheckmark.tsx

@@ -13,7 +13,7 @@ export const TodoCheckmark: FC<TodoCheckmarkProps> = (props) => (
     }
     className={`todo-checkmark h-5 w-5 rounded-full border dark:border-gray-500  ${
       props.todo.status === StatusState.done
-        ? "dark:bg-gray-700"
+        ? "dark:bg-gray-500"
         : "hover:dark:bg-gray-600"
     }`}
   />

src/client/src/components/todos/todoItem.tsx

@@ -2,6 +2,7 @@ import { Todo } from "@src/core/entities/todo";
 import { FC, useState } from "react";
 import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
 import Tippy from "@tippyjs/react";
+import Link from "next/link";
 
 interface TodoItemProps {
   todo: Todo;
@@ -23,9 +24,11 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
       <div className="flex items-center space-x-4">
         <TodoCheckmark {...props} />
         <div className="flex flex-col md:flex-row flex-grow gap-0.5 md:gap-2 pr-6">
-          <div className="flex-grow w-full break-all text-sm">
-            {props.todo.title}
-          </div>
+          <Link href={`/todos/${props.todo.id}`} passHref>
+            <a className="flex-grow w-full break-all text-sm">
+              {props.todo.title}
+            </a>
+          </Link>
           <div>
             {props.displayProject && props.todo.project && (
               <div className="text-gray-500 text-xs text-right whitespace-nowrap place-self-end">
@@ -51,7 +54,9 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
             tabIndex={0}
           >
             <button className="hover:bg-accent-500">Delete</button>
-            <button>Edit</button>
+            <Link href={`/todos/${props.todo.id}`} passHref>
+              <a>Edit</a>
+            </Link>
           </div>
         }
       >

src/client/src/core/entities/todo.tsx

@@ -22,7 +22,7 @@ export const asTodo = (item: Todo): Todo => {
     throw new Error("Validation failed: title is null");
   }
 
-  if (!!item.status) {
+  if (typeof item.status === "undefined") {
     throw new Error("Validation failed: status is null");
   }
 

src/client/src/pages/todos/[todoId]/index.tsx

@@ -0,0 +1,105 @@
+import { useRouter } from "next/router";
+import {
+  useSelectTodo,
+  useUpdateTodo,
+} from "@src/presentation/hooks/socketHooks";
+import { Todo } from "@src/core/entities/todo";
+import { FC, useEffect, useState } from "react";
+import { PageHeading } from "@src/components/common/headings/pageHeading";
+import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
+
+interface EditTodoProps {
+  todo: Todo;
+  onCancel: () => void;
+  onSave: (todo: Todo) => void;
+}
+const EditTodo: FC<EditTodoProps> = ({ todo, onCancel, onSave }) => {
+  const [todoTitle, setTodoTitle] = useState(todo.title);
+
+  return (
+    <div className="space-y-4 flex-grow">
+      <div className="bg-gray-900 rounded-lg">
+        <input
+          className="py-2 px-4"
+          value={todoTitle}
+          onChange={(e) => setTodoTitle(e.target.value)}
+          type="text"
+        />
+      </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 });
+          }}
+        >
+          Save
+        </button>
+        <button className="base-button" onClick={() => onCancel()}>
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+};
+
+interface TodoDetailsProps {
+  todo: Todo;
+}
+
+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"} />
+      <div className="flex flex-row items-center gap-4">
+        {editMode ? (
+          <EditTodo
+            todo={todo}
+            onCancel={() => setEditMode(false)}
+            onSave={(todo) => {
+              setUpdatedTodo(todo);
+              setEditMode(false);
+            }}
+          />
+        ) : (
+          <>
+            <TodoCheckmark
+              updateTodo={(t) => {
+                setUpdatedTodo(t);
+              }}
+              todo={updatedTodo}
+            />
+            <h4 className="flex-grow" onClick={() => setEditMode(true)}>
+              {updatedTodo.title}
+            </h4>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const TodoDetailsPage = () => {
+  const router = useRouter();
+  const { todoId } = router.query as { todoId: string };
+
+  const { todo } = useSelectTodo(todoId);
+
+  return (
+    <main className="py-8 px-14 space-y-6">
+      <section className="space-y-8 mx-auto max-w-4xl">
+        {todo ? <TodoDetails todo={todo} /> : <div>Todo was not found</div>}
+      </section>
+    </main>
+  );
+};
+
+export default TodoDetailsPage;

src/client/src/presentation/contexts/SocketContext.tsx

@@ -14,6 +14,8 @@ interface SocketContextProps {
   getInboxTodos: () => void;
   createTodo: (todoName: string, project: string) => void;
   updateTodo: (todoId: string, todoStatus: StatusState) => void;
+  getTodoById(todoId: string): void;
+  replaceTodo(todo: Todo): void;
 }
 
 export const SocketContext = createContext<SocketContextProps>({
@@ -24,6 +26,8 @@ export const SocketContext = createContext<SocketContextProps>({
   getInboxTodos: () => {},
   createTodo: (todoName, project) => {},
   updateTodo: (todoId, todoStatus) => {},
+  getTodoById(todoId: string) {},
+  replaceTodo(todo: Todo) {},
 });
 
 export const SocketProvider: FC = (props) => {
@@ -55,6 +59,15 @@ export const SocketProvider: FC = (props) => {
       setInboxTodos(validatedTodos);
     });
 
+    connection.on("getTodo", (todo) => {
+      const newTodo = JSON.parse(todo) as Todo;
+      const validatedTodo = asTodo(newTodo);
+      setTodos([
+        ...todos.filter((t) => t.id != validatedTodo.id),
+        validatedTodo,
+      ]);
+    });
+
     connection.start().then(() => {
       setConn(connection);
     });
@@ -78,6 +91,12 @@ export const SocketProvider: FC = (props) => {
         updateTodo: (todoId, todoStatus) => {
           conn.invoke("UpdateTodo", todoId, todoStatus).catch(console.error);
         },
+        getTodoById(todoId: string) {
+          conn.invoke("GetTodo", todoId).catch(console.error);
+        },
+        replaceTodo: (todo) => {
+          conn.invoke("ReplaceTodo", JSON.stringify(todo)).catch(console.error);
+        },
       }}
     >
       {conn ? props.children : "loading"}

src/client/src/presentation/hooks/socketHooks.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from "react";
 import { SocketContext } from "@src/presentation/contexts/SocketContext";
-import { StatusState } from "@src/core/entities/todo";
+import { StatusState, Todo } from "@src/core/entities/todo";
 
 export const useSelectInboxTodos = () => {
   const socketContext = useContext(SocketContext);
@@ -34,3 +34,25 @@ export const useUpdateTodoState = () => {
     },
   };
 };
+
+export const useSelectTodo = (todoId: string): { todo: Todo | undefined } => {
+  const socketContext = useContext(SocketContext);
+
+  useEffect(() => {
+    socketContext.getTodoById(todoId);
+  }, []);
+
+  return {
+    todo: socketContext.todos.find((t) => t.id === todoId),
+  };
+};
+
+export const useUpdateTodo = () => {
+  const socketContext = useContext(SocketContext);
+
+  return {
+    updateTodo: (todo: Todo) => {
+      socketContext.replaceTodo(todo);
+    },
+  };
+};