useInput

packages/example/src/todo/Todo.tsx

@@ -1,7 +1,7 @@
 import * as Domain from "@/domain"
-import { Box, Button, Flex, IconButton, TextArea } from "@radix-ui/themes"
+import { Box, Button, Callout, Flex, IconButton, Text, TextArea } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
+import { Chunk, Effect, Match, Option, ParseResult, Ref, Runtime, Schema, SubscriptionRef } from "effect"
 import { Component, Memoized } from "effect-fc"
 import { Hooks } from "effect-fc/hooks"
 import { SubscriptionSubRef } from "effect-fc/types"
@@ -40,15 +40,26 @@ export class Todo extends Component.make(function* Todo(props: TodoProps) {
         ] as const),
     ), [props._tag, props.index])
 
-    const [content, size] = yield* Hooks.useSubscribeRefs(contentRef, state.sizeRef)
+    const [size] = yield* Hooks.useSubscribeRefs(state.sizeRef)
+    const contentInput = yield* Hooks.useInput({ ref: contentRef, schema: Schema.Any })
 
     return (
         <Flex direction="column" align="stretch" gap="2">
+            {Option.isSome(contentInput.error) &&
+                <Callout.Root color="red">
+                    <Callout.Text>
+                        {ParseResult.ArrayFormatter.formatErrorSync(contentInput.error.value).map(e => <>
+                            <Text>&bull; {e.message}</Text><br />
+                        </>)}
+                    </Callout.Text>
+                </Callout.Root>
+            }
+
             <Flex direction="row" align="center" gap="2">
                 <Box flexGrow="1">
                     <TextArea
-                        value={content}
-                        onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
+                        value={contentInput.value}
+                        onChange={contentInput.onChange}
                     />
                 </Box>