Working field

packages/example/src/routes/form.tsx

@@ -1,7 +1,8 @@
+import { TextFieldFormInput } from "@/lib/form/TextFieldFormInput"
 import { runtime } from "@/runtime"
-import { Button, Callout, Container, Flex, TextField } from "@radix-ui/themes"
+import { Button, Container, Flex } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Array, Effect, Option, Schema } from "effect"
+import { Effect, Schema } from "effect"
 import { Component, Form } from "effect-fc"
 import { useContext, useSubscribables } from "effect-fc/hooks"
 
@@ -34,14 +35,11 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
 
 class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
     const form = yield* RegisterForm
-    const emailField = Form.useField(form, ["email"])
-    const passwordField = Form.useField(form, ["password"])
-    const emailInput = yield* Form.useInput(emailField, { debounce: "200 millis" })
-    const passwordInput = yield* Form.useInput(passwordField, { debounce: "200 millis" })
-
     const submit = yield* Form.useSubmit(form)
     const [canSubmit] = yield* useSubscribables(form.canSubmitSubscribable)
 
+    const TextFieldFormInputFC = yield* TextFieldFormInput
+
     return (
         <Container>
             <form onSubmit={e => {
@@ -49,36 +47,16 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
                 void submit()
             }}>
                 <Flex direction="column" gap="2">
-                    <TextField.Root
-                        value={emailInput.value}
-                        onChange={e => emailInput.setValue(e.target.value)}
+                    <TextFieldFormInputFC
+                        field={Form.useField(form, ["email"])}
+                        debounce="500 millis"
                     />
 
-                    {Option.match(Array.head(emailInput.issues), {
-                        onSome: issue => (
-                            <Callout.Root>
-                                <Callout.Text>{issue.message}</Callout.Text>
-                            </Callout.Root>
-                        ),
-
-                        onNone: () => <></>,
-                    })}
-
-                    <TextField.Root
-                        value={passwordInput.value}
-                        onChange={e => passwordInput.setValue(e.target.value)}
+                    <TextFieldFormInputFC
+                        field={Form.useField(form, ["password"])}
+                        debounce="500 millis"
                     />
 
-                    {Option.match(Array.head(passwordInput.issues), {
-                        onSome: issue => (
-                            <Callout.Root>
-                                <Callout.Text>{issue.message}</Callout.Text>
-                            </Callout.Root>
-                        ),
-
-                        onNone: () => <></>,
-                    })}
-
                     <Button disabled={!canSubmit}>Submit</Button>
                 </Flex>
             </form>