Add basic todo behavior

src/client/src/components/todos/addTodo.tsx

@@ -2,8 +2,9 @@ import { useState } from "react";
 import { CollapsedAddTodo } from "@src/components/todos/collapsed/collapsedAddTodo";
 import { AddTodoForm } from "@src/components/todos/collapsed/addTodoForm";
 import { CollapsedState } from "@src/components/todos/collapsed/collapsedState";
+import {HubConnection} from "@microsoft/signalr";
 
-export function AddTodo() {
+export function AddTodo(props: {conn: HubConnection}) {
   const [collapsed, setCollapsed] = useState<CollapsedState>(
     CollapsedState.collapsed
   );
@@ -18,7 +19,9 @@ export function AddTodo() {
 
   return (
     <AddTodoForm
-      onAdd={(todoName) => {}}
+      onAdd={(todoName) => {
+        props.conn.invoke("CreateTodo", todoName).catch(console.error)
+      }}
       onClose={() => setCollapsed(CollapsedState.collapsed)}
     />
   );

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

@@ -11,7 +11,7 @@ export const TodoItem: FC<TodoItemProps> = (props) => (
   <div className="py-3 border-b border-gray-300 dark:border-gray-700">
     <div className="flex items-center space-x-4">
       <TodoCheckmark {...props} />
-      <span className="pb-1">{props.todo.name}</span>
+      <span className="pb-1">{props.todo.title}</span>
     </div>
   </div>
 );

src/client/src/components/todos/todoList.tsx

@@ -1,8 +1,9 @@
 import { Todo } from "@src/core/entities/todo";
 import { TodoItem } from "@src/components/todos/todoItem";
 import { AddTodo } from "@src/components/todos/addTodo";
+import { HubConnection } from "@microsoft/signalr";
 
-export const TodoList = (props: { todos: Todo[] }) => (
+export const TodoList = (props: { todos: Todo[]; conn: HubConnection }) => (
   <>
     <ul id="inbox">
       {props.todos.map((t, i) => (
@@ -10,12 +11,14 @@ export const TodoList = (props: { todos: Todo[] }) => (
           <TodoItem
             todo={t}
             updateTodo={(todo) => {
-              console.log(todo);
+              props.conn
+                .invoke("UpdateTodo", todo.id, todo.status)
+                .catch(console.error);
             }}
           />
         </li>
       ))}
     </ul>
-    <AddTodo />
+    <AddTodo conn={props.conn} />
   </>
 );