0.2.0 (#18)

Co-authored-by: Renovate Bot <renovate-bot@valverde.cloud>
Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: #18

packages/example/src/todo/Todo.tsx

@@ -1,18 +1,19 @@
 import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, DateTime, Effect, Match, Option, Ref, Runtime, Schema, Stream, SubscriptionRef } from "effect"
-import { Component, Hooks, Memoized, Subscribable, SubscriptionSubRef } from "effect-fc"
+import { Chunk, Effect, Match, Option, Ref, Runtime, Schema, Stream } from "effect"
+import { Component, Form, Subscribable } from "effect-fc"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
 import * as Domain from "@/domain"
-import { TextAreaInput } from "@/lib/input/TextAreaInput"
-import { TextFieldInput } from "@/lib/input/TextFieldInput"
+import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
 import { DateTimeUtcFromZonedInput } from "@/lib/schema"
 import { TodosState } from "./TodosState.service"
 
 
-const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
-const OptionalDateTimeInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })
+const TodoFormSchema = Schema.compose(Schema.Struct({
+    ...Domain.Todo.Todo.fields,
+    completedAt: Schema.OptionFromSelf(DateTimeUtcFromZonedInput),
+}), Domain.Todo.Todo)
 
 const makeTodo = makeUuid4.pipe(
     Effect.map(id => Domain.Todo.Todo.make({
@@ -33,49 +34,75 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
-    const { ref, indexRef, contentRef, completedAtRef } = yield* Hooks.useMemo(() => Match.value(props).pipe(
-        Match.tag("new", () => Effect.Do.pipe(
-            Effect.bind("ref", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
-            Effect.let("indexRef", () => Subscribable.make({ get: Effect.succeed(-1), changes: Stream.empty })),
-        )),
-        Match.tag("edit", ({ id }) => Effect.Do.pipe(
-            Effect.let("ref", () => state.getElementRef(id)),
-            Effect.let("indexRef", () => state.getIndexSubscribable(id)),
-        )),
-        Match.exhaustive,
+    const [
+        indexRef,
+        form,
+        contentField,
+        completedAtField,
+    ] = yield* Component.useOnChange(() => Effect.gen(function*() {
+        const indexRef = Match.value(props).pipe(
+            Match.tag("new", () => Subscribable.make({ get: Effect.succeed(-1), changes: Stream.make(-1) })),
+            Match.tag("edit", ({ id }) => state.getIndexSubscribable(id)),
+            Match.exhaustive,
+        )
 
-        Effect.let("contentRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["content"])),
-        Effect.let("completedAtRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["completedAt"])),
-    ), [props._tag, props._tag === "edit" ? props.id : undefined])
+        const form = yield* Form.service({
+            schema: TodoFormSchema,
+            initialEncodedValue: yield* Schema.encode(TodoFormSchema)(
+                yield* Match.value(props).pipe(
+                    Match.tag("new", () => makeTodo),
+                    Match.tag("edit", ({ id }) => state.getElementRef(id)),
+                    Match.exhaustive,
+                )
+            ),
+            onSubmit: function(todo) {
+                return Match.value(props).pipe(
+                    Match.tag("new", () => Ref.update(state.ref, Chunk.prepend(todo)).pipe(
+                        Effect.andThen(makeTodo),
+                        Effect.andThen(Schema.encode(TodoFormSchema)),
+                        Effect.andThen(v => Ref.set(this.encodedValueRef, v)),
+                    )),
+                    Match.tag("edit", ({ id }) => Ref.set(state.getElementRef(id), todo)),
+                    Match.exhaustive,
+                )
+            },
+            autosubmit: props._tag === "edit",
+            debounce: "250 millis",
+        })
 
-    const [index, size] = yield* Hooks.useSubscribables(indexRef, state.sizeSubscribable)
+        return [
+            indexRef,
+            form,
+            Form.field(form, ["content"]),
+            Form.field(form, ["completedAt"]),
+        ] as const
+    }), [props._tag, props._tag === "edit" ? props.id : undefined])
 
-    const StringTextAreaInputFC = yield* StringTextAreaInput
-    const OptionalDateTimeInputFC = yield* OptionalDateTimeInput
+    const [index, size, canSubmit] = yield* Subscribable.useSubscribables(
+        indexRef,
+        state.sizeSubscribable,
+        form.canSubmitSubscribable,
+    )
+    const submit = yield* Form.useSubmit(form)
+    const TextFieldFormInputFC = yield* TextFieldFormInput
 
 
     return (
         <Flex direction="row" align="center" gap="2">
             <Box flexGrow="1">
                 <Flex direction="column" align="stretch" gap="2">
-                    <StringTextAreaInputFC ref={contentRef} />
+                    <TextFieldFormInputFC field={contentField} />
 
                     <Flex direction="row" justify="center" align="center" gap="2">
-                        <OptionalDateTimeInputFC
+                        <TextFieldFormInputFC
+                            optional
+                            field={completedAtField}
                             type="datetime-local"
-                            ref={completedAtRef}
-                            defaultValue={yield* Hooks.useOnce(() => DateTime.now)}
+                            defaultValue=""
                         />
 
                         {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),
-                                )}
-                            >
+                            <Button disabled={!canSubmit} onClick={() => submit()}>
                                 Add
                             </Button>
                         }
@@ -106,6 +133,4 @@ export class Todo extends Component.makeUntraced("Todo")(function*(props: TodoPr
             }
         </Flex>
     )
-}).pipe(
-    Memoized.memoized
-) {}
+}) {}