Working todos subscription

packages/webui/src/App.tsx

@@ -1,5 +1,5 @@
-import { Index } from "./Index"
 import "./index.css"
+import { VTodosSubscription } from "./todo/VTodosSubscription"
 import { TRPCClientProvider } from "./trpc/TRPCClientProvider"
 
 
@@ -7,7 +7,8 @@ export function App() {
 
     return (
         <TRPCClientProvider>
-            <Index />
+            {/* <Index /> */}
+            <VTodosSubscription />
         </TRPCClientProvider>
     )
 

packages/webui/src/todo/VTodosSubscription.tsx

@@ -0,0 +1,52 @@
+import { Schema as S } from "@effect/schema"
+import { JsonifiableTodo } from "@todo-tests/common/data"
+import { Option, flow, identity } from "effect"
+import { IObservableArray, observable } from "mobx"
+import { observer } from "mobx-react-lite"
+import { useState } from "react"
+import { Todo } from "../data"
+import { trpc } from "../trpc/trpc"
+import { VTodo } from "./VTodo"
+
+
+const decodeTodos = flow(
+    S.decodeSync(
+        S.mutable(S.Array(
+            JsonifiableTodo.pipe(S.compose(Todo))
+        ))
+    ),
+
+    observable.array,
+)
+
+
+/**
+ * Shows a vertical list of todos
+ */
+export const VTodosSubscription = observer(() => {
+
+    const [todos, setTodos] = useState<IObservableArray<Todo>>(observable.array())
+
+    trpc.todos.changes.useSubscription(undefined, {
+        onData(data) {
+            setTodos(decodeTodos(data))
+        }
+    })
+
+
+    return (
+        <div className="flex flex-col gap-1">
+            {todos.map(todo => (
+                <VTodo
+                    key={Option.match(todo.id, {
+                        onSome: identity,
+                        onNone: () => todo.order,
+                    })}
+
+                    todo={todo}
+                />
+            ))}
+        </div>
+    )
+
+})