WIP: working on get todo by id

src/client/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@microsoft/signalr": "^6.0.0",
     "@tippyjs/react": "^4.2.6",
+    "axios": "^0.24.0",
     "next": "12.0.3",
     "next-pwa": "^5.4.0",
     "react": "17.0.2",

src/client/src/boundary/todo/todoApi.ts

@@ -0,0 +1,31 @@
+import axios from "axios";
+import { Todo } from "@src/core/entities/todo";
+
+const getBaseUrl = () =>
+  process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:5000";
+
+const createBaseClient = () =>
+  axios.create({
+    baseURL: getBaseUrl(),
+    withCredentials: true,
+  });
+
+interface CreateTodoRequest {
+  title: string;
+  description?: string;
+  project?: string;
+}
+
+export const createTodoAsync = async (
+  createTodo: CreateTodoRequest
+): Promise<string> =>
+  await createBaseClient().post<string, string, CreateTodoRequest>(
+    "/api/todos",
+    createTodo
+  );
+
+interface GetTodoByIdResponse extends Todo {}
+export const getTodoByIdAsync = async (todoId: string) =>
+  await createBaseClient().get<any, GetTodoByIdResponse>(
+    `/api/todos/${todoId}`
+  );

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

@@ -5,6 +5,7 @@ import {
   LogLevel,
 } from "@microsoft/signalr";
 import { asTodo, StatusState, Todo } from "@src/core/entities/todo";
+import { getTodoByIdAsync } from "@src/boundary/todo/todoApi";
 
 interface SocketContextProps {
   conn: HubConnection;
@@ -41,7 +42,7 @@ export const SocketProvider: FC = (props) => {
 
     const connection = new HubConnectionBuilder()
       .withUrl(`${serverUrl}/hubs/todo`, {
-          withCredentials: true
+        withCredentials: true,
       })
       .withAutomaticReconnect()
       .configureLogging(LogLevel.Information)
@@ -53,6 +54,18 @@ export const SocketProvider: FC = (props) => {
       setTodos(validatedTodos);
     });
 
+    connection.on("todoCreated", (todoCreated) => {
+      const { todoId } = JSON.parse(todoCreated) as { todoId: string };
+
+      getTodoByIdAsync(todoId).then((response) => {
+        setTodos([...todos.filter((t) => t.id !== response.id), response]);
+        setInboxTodos([
+          ...inboxTodos.filter((t) => t.id !== response.id),
+          response,
+        ]);
+      });
+    });
+
     connection.on("getInboxTodos", (rawTodos) => {
       const newTodos = JSON.parse(rawTodos) as Todo[];
       const validatedTodos = newTodos
@@ -70,11 +83,14 @@ export const SocketProvider: FC = (props) => {
       ]);
     });
 
-    connection.start().then(() => {
-      setConn(connection);
-    }).catch(e => {
-        window.location.href = `${serverUrl}/api/auth/login?returnUrl=${window.location.href}`
-    });
+    connection
+      .start()
+      .then(() => {
+        setConn(connection);
+      })
+      .catch((e) => {
+        window.location.href = `${serverUrl}/api/auth/login?returnUrl=${window.location.href}`;
+      });
   }, []);
 
   return (
@@ -90,7 +106,9 @@ export const SocketProvider: FC = (props) => {
           conn.invoke("GetInboxTodos").catch(console.error);
         },
         createTodo: (todoName, project, description) => {
-          conn.invoke("CreateTodo", todoName, project, description).catch(console.error);
+          conn
+            .invoke("CreateTodo", todoName, project, description)
+            .catch(console.error);
         },
         updateTodo: (todoId, todoStatus) => {
           conn.invoke("UpdateTodo", todoId, todoStatus).catch(console.error);

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

@@ -1,6 +1,7 @@
 import { useContext, useEffect } from "react";
 import { SocketContext } from "@src/presentation/contexts/SocketContext";
 import { StatusState, Todo } from "@src/core/entities/todo";
+import { createTodoAsync } from "@src/boundary/todo/todoApi";
 
 export const useSelectInboxTodos = () => {
   const socketContext = useContext(SocketContext);
@@ -20,7 +21,12 @@ export const useCreateTodo = () => {
 
   return {
     createTodo: (todoName: string, project: string, description: string) => {
-      socketContext.createTodo(todoName, project, description);
+      //socketContext.createTodo(todoName, project, description);
+      createTodoAsync({
+        project,
+        description,
+        title: todoName,
+      }).catch(console.error);
     },
   };
 };

src/client/yarn.lock

@@ -1518,6 +1518,13 @@ axe-core@^4.3.5:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.5.tgz#78d6911ba317a8262bfee292aeafcc1e04b49cc5"
   integrity sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -2812,6 +2819,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.4.tgz#28d9969ea90661b5134259f312ab6aa7929ac5e2"
   integrity sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==
 
+follow-redirects@^1.14.4:
+  version "1.14.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
+  integrity sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"