Todo work

packages/example/src/todo/Todo.tsx

@@ -0,0 +1,72 @@
+import * as Domain from "@/domain"
+import { Button, Flex, TextArea } from "@radix-ui/themes"
+import { GetRandomValues, makeUuid4 } from "@typed/id"
+import { Chunk, Effect, Match, Option, pipe, Ref, Runtime, SubscriptionRef } from "effect"
+import { ReactComponent, ReactHook } from "effect-fc"
+import { SubscriptionSubRef } from "effect-fc/types"
+import * as React from "react"
+import { TodosState } from "./TodosState.service"
+
+
+export type TodoProps = (
+    | {
+        readonly _tag: "new"
+        readonly ref?: never
+    }
+    | {
+        readonly _tag: "edit"
+        readonly ref: SubscriptionRef.SubscriptionRef<Domain.Todo.Todo>
+    }
+)
+
+export const Todo = pipe(
+    Effect.fn(function*(props: TodoProps) {
+        const runtime = yield* Effect.runtime()
+        const state = yield* TodosState
+
+        const ref = yield* ReactHook.useMemo(() => Match.value(props).pipe(
+            Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
+            Match.tag("edit", ({ ref }) => Effect.succeed(ref)),
+            Match.exhaustive,
+        ), [props._tag, props.ref])
+
+        const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
+        const [todo] = yield* ReactHook.useSubscribeRefs(ref)
+
+        return (
+            <Flex direction="column" align="stretch" gap="2">
+                <TextArea
+                    value={todo.content}
+                    onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
+                />
+
+                {props._tag === "new" &&
+                    <Flex direction="row" justify="center">
+                        <Button
+                            onClick={() => ref.pipe(
+                                Effect.andThen(todo => Ref.update(state.ref, Chunk.append(todo))),
+                                Effect.andThen(makeTodo),
+                                Effect.andThen(todo => Ref.set(ref, todo)),
+                                Runtime.runSync(runtime),
+                            )}
+                        >
+                            Ajouter
+                        </Button>
+                    </Flex>
+                }
+            </Flex>
+        )
+    }),
+
+    ReactComponent.withDisplayName("Todo"),
+)
+
+
+const makeTodo = makeUuid4.pipe(
+    Effect.map(id => Domain.Todo.Todo.make({
+        id,
+        content: "",
+        completedAt: Option.none(),
+    })),
+    Effect.provide(GetRandomValues.CryptoRandom),
+)