Refactoring

packages/webui/src/routes/__root.tsx

@@ -9,8 +9,6 @@ const TanStackRouterDevtools = process.env.NODE_ENV === "production"
     })))
 
 
-export const Route = createRootRoute({ component: Root })
-
 export function Root() {
     return <>
         <div className="container mx-auto mt-8">
@@ -20,3 +18,5 @@ export function Root() {
         <Suspense><TanStackRouterDevtools /></Suspense>
     </>
 }
+
+export const Route = createRootRoute({ component: Root })

packages/webui/src/routes/index.lazy.tsx

@@ -1,9 +1,51 @@
+import { Schema as S } from "@effect/schema"
 import { createLazyFileRoute } from "@tanstack/react-router"
-import { VTodosSubscription } from "../todo/VTodosSubscription"
+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 { VTodo } from "../todo/VTodo"
+import { trpc } from "../trpc/trpc"
 
 
+const decodeTodos = flow(
+    S.decodeSync(
+        S.mutable(S.Array(
+            JsonifiableTodo.pipe(S.compose(Todo))
+        ))
+    ),
+
+    observable.array,
+)
+
+
+export const Index = 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 items-stretch">
+            {todos.map(todo => (
+                <VTodo
+                    key={Option.match(todo.id, {
+                        onSome: identity,
+                        onNone: () => todo.order,
+                    })}
+
+                    todo={todo}
+                />
+            ))}
+        </div>
+    )
+
+})
+
 export const Route = createLazyFileRoute("/")({ component: Index })
-
-export function Index() {
-    return <VTodosSubscription />
-}

packages/webui/src/todo/VTodos.tsx

@@ -1,29 +0,0 @@
-import { Option, identity } from "effect"
-import { IObservableArray } from "mobx"
-import { observer } from "mobx-react-lite"
-import { Todo } from "../data"
-import { VTodo } from "./VTodo"
-
-
-export interface VTodosProps {
-    todos: IObservableArray<Todo>
-}
-
-
-/**
- * Shows a vertical list of todos
- */
-export const VTodos = observer(({ todos }: VTodosProps) => (
-    <div className="flex flex-col items-stretch gap-1">
-        {todos.map(todo => (
-            <VTodo
-                key={Option.match(todo.id, {
-                    onSome: identity,
-                    onNone: () => todo.order,
-                })}
-
-                todo={todo}
-            />
-        ))}
-    </div>
-))

packages/webui/src/todo/VTodosSubscription.tsx

@@ -1,39 +0,0 @@
-import { Schema as S } from "@effect/schema"
-import { JsonifiableTodo } from "@todo-tests/common/data"
-import { flow } 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 { VTodos } from "./VTodos"
-
-
-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 <VTodos todos={todos} />
-
-})