From fc503a384778d38436f0a6bb2e0b216e64b6d220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Sun, 17 Aug 2025 21:35:08 +0200
Subject: [PATCH] Todo work

---
 packages/example/src/todo/Todo.tsx | 116 +++++++++++++++--------------
 1 file changed, 61 insertions(+), 55 deletions(-)

diff --git a/packages/example/src/todo/Todo.tsx b/packages/example/src/todo/Todo.tsx
index 8281053..2322c98 100644
--- a/packages/example/src/todo/Todo.tsx
+++ b/packages/example/src/todo/Todo.tsx
@@ -1,5 +1,6 @@
 import * as Domain from "@/domain"
 import { TextAreaInput } from "@/lib/TextAreaInput"
+import { TextFieldInput } from "@/lib/TextFieldInput"
 import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, Effect, Match, Option, Ref, Runtime, Schema, SubscriptionRef } from "effect"
@@ -12,6 +13,7 @@ import { TodosState } from "./TodosState.service"
 
 
 const StringTextAreaInput = TextAreaInput(Schema.String)
+const OptionalDateInput = TextFieldInput({ optional: true, schema: Schema.DateTimeUtc })
 
 const makeTodo = makeUuid4.pipe(
     Effect.map(id => Domain.Todo.Todo.make({
@@ -32,7 +34,7 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
-    const [ref, contentRef] = yield* Hooks.useMemo(() => Match.value(props).pipe(
+    const [ref, contentRef, completedAtRef] = yield* Hooks.useMemo(() => Match.value(props).pipe(
         Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
         Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
         Match.exhaustive,
@@ -40,75 +42,79 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
         Effect.map(ref => [
             ref,
             SubscriptionSubRef.makeFromPath(ref, ["content"]),
+            SubscriptionSubRef.makeFromPath(ref, ["completedAt"]),
         ] as const),
     ), [props._tag, props.index])
 
     const [size] = yield* Hooks.useSubscribeRefs(state.sizeRef)
 
     const StringTextAreaInputFC = yield* StringTextAreaInput
+    const OptionalDateInputFC = yield* OptionalDateInput
 
     return (
-        <Flex direction="column" align="stretch" gap="2">
-            <Flex direction="row" align="center" gap="2">
-                <Box flexGrow="1">
+        <Flex direction="row" align="center" gap="2">
+            <Box flexGrow="1">
+                <Flex direction="column" align="stretch" gap="2">
                     <StringTextAreaInputFC ref={contentRef} />
-                </Box>
 
-                {props._tag === "edit" &&
-                    <Flex direction="column" justify="center" align="center" gap="1">
-                        <IconButton
-                            disabled={props.index <= 0}
-                            onClick={() => Runtime.runSync(runtime)(
-                                SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
-                                    if (props.index <= 0) return yield* Option.none()
-                                    return todos.pipe(
-                                        Chunk.replace(props.index, yield* Chunk.get(todos, props.index - 1)),
-                                        Chunk.replace(props.index - 1, yield* ref),
-                                    )
-                                }))
-                            )}
-                        >
-                            <FaArrowUp />
-                        </IconButton>
+                    <Flex direction="row" justify="center" align="center" gap="2">
+                        <OptionalDateInputFC ref={completedAtRef} />
 
-                        <IconButton
-                            disabled={props.index >= size - 1}
-                            onClick={() => Runtime.runSync(runtime)(
-                                SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
-                                    if (props.index >= size - 1) return yield* Option.none()
-                                    return todos.pipe(
-                                        Chunk.replace(props.index, yield* Chunk.get(todos, props.index + 1)),
-                                        Chunk.replace(props.index + 1, yield* ref),
-                                    )
-                                }))
-                            )}
-                        >
-                            <FaArrowDown />
-                        </IconButton>
-
-                        <IconButton
-                            onClick={() => Runtime.runSync(runtime)(
-                                Ref.update(state.ref, Chunk.remove(props.index))
-                            )}
-                        >
-                            <FaDeleteLeft />
-                        </IconButton>
+                        {props._tag === "new" &&
+                            <Button
+                                onClick={() => ref.pipe(
+                                    Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))),
+                                    Effect.andThen(makeTodo),
+                                    Effect.andThen(todo => Ref.set(ref, todo)),
+                                    Runtime.runSync(runtime),
+                                )}
+                            >
+                                Add
+                            </Button>
+                        }
                     </Flex>
-                }
-            </Flex>
+                </Flex>
+            </Box>
 
-            {props._tag === "new" &&
-                <Flex direction="row" justify="center">
-                    <Button
-                        onClick={() => ref.pipe(
-                            Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))),
-                            Effect.andThen(makeTodo),
-                            Effect.andThen(todo => Ref.set(ref, todo)),
-                            Runtime.runSync(runtime),
+            {props._tag === "edit" &&
+                <Flex direction="column" justify="center" align="center" gap="1">
+                    <IconButton
+                        disabled={props.index <= 0}
+                        onClick={() => Runtime.runSync(runtime)(
+                            SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
+                                if (props.index <= 0) return yield* Option.none()
+                                return todos.pipe(
+                                    Chunk.replace(props.index, yield* Chunk.get(todos, props.index - 1)),
+                                    Chunk.replace(props.index - 1, yield* ref),
+                                )
+                            }))
                         )}
                     >
-                        Add
-                    </Button>
+                        <FaArrowUp />
+                    </IconButton>
+
+                    <IconButton
+                        disabled={props.index >= size - 1}
+                        onClick={() => Runtime.runSync(runtime)(
+                            SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
+                                if (props.index >= size - 1) return yield* Option.none()
+                                return todos.pipe(
+                                    Chunk.replace(props.index, yield* Chunk.get(todos, props.index + 1)),
+                                    Chunk.replace(props.index + 1, yield* ref),
+                                )
+                            }))
+                        )}
+                    >
+                        <FaArrowDown />
+                    </IconButton>
+
+                    <IconButton
+                        onClick={() => Runtime.runSync(runtime)(
+                            Ref.update(state.ref, Chunk.remove(props.index))
+                        )}
+                    >
+                        <FaDeleteLeft />
+                    </IconButton>
                 </Flex>
             }
         </Flex>