Todo buttons work

packages/webui/src/todo/VTodo.tsx

@@ -1,5 +1,5 @@
 import { Schema as S } from "@effect/schema"
-import { ArrowDownward, ArrowUpward } from "@mui/icons-material"
+import { ArrowDownward, ArrowUpward, Delete } from "@mui/icons-material"
 import { observer } from "mobx-react-lite"
 import { Button } from "primereact/button"
 import { JsonifiableTodo, Todo } from "../data"
@@ -17,6 +17,7 @@ export interface VTodoProps {
 export const VTodo = observer(({ todo }: VTodoProps) => {
 
     const updateTodo = trpc.todo.update.useMutation()
+    const removeTodo = trpc.todo.remove.useMutation()
 
 
     return (
@@ -30,10 +31,11 @@ export const VTodo = observer(({ todo }: VTodoProps) => {
                     size="small"
                     icon={<ArrowDownward />}
 
+                    loading={updateTodo.isLoading}
                     onClick={() => updateTodo.mutate(encodeTodo(
                         new Todo({
                             ...todo,
-                            order: todo.order + 1,
+                            order: todo.order + 2,
                         }, { disableValidation: true })
                     ))}
                 />
@@ -44,13 +46,24 @@ export const VTodo = observer(({ todo }: VTodoProps) => {
                     size="small"
                     icon={<ArrowUpward />}
 
+                    loading={updateTodo.isLoading}
                     onClick={() => updateTodo.mutate(encodeTodo(
                         new Todo({
                             ...todo,
-                            order: todo.order - 1,
+                            order: todo.order - 2,
                         }, { disableValidation: true })
                     ))}
                 />
+
+                <Button
+                    severity="secondary"
+                    rounded
+                    size="small"
+                    icon={<Delete />}
+
+                    loading={removeTodo.isLoading}
+                    onClick={() => removeTodo.mutate(encodeTodo(todo))}
+                />
             </div>
         </div>
     )

packages/webui/src/trpc/TRPCClientProvider.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { createWSClient, wsLink } from "@trpc/client"
+import { createWSClient, httpBatchLink, splitLink, wsLink } from "@trpc/client"
 import { ReactNode, useState } from "react"
 import { trpc } from "./trpc"
 
@@ -16,12 +16,16 @@ export function TRPCClientProvider({ children }: TRPCClientProviderProps) {
 
     const [trpcClient] = useState(trpc.createClient({
         links: [
-            // httpBatchLink({
-            //     url: "http://localhost:8080/rpc",
-            //     headers: async () => ({}),
-            // }),
+            splitLink({
+                condition: op => op.type === "subscription",
 
-            wsLink({ client: wsClient }),
+                true: wsLink({ client: wsClient }),
+
+                false: httpBatchLink({
+                    url: "http://localhost:8080/rpc",
+                    headers: {},
+                }),
+            })
         ]
     }))