52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { Schema as S } from "@effect/schema"
|
|
import { createLazyFileRoute } from "@tanstack/react-router"
|
|
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 })
|