Refactor Form

packages/example/src/routes/form.tsx

@@ -40,34 +40,42 @@ const RegisterFormSubmitSchema = Schema.Struct({
 })
 
 class RegisterFormService extends Effect.Service<RegisterFormService>()("RegisterFormService", {
-    scoped: Form.service({
-        schema: RegisterFormSchema.pipe(
-            Schema.compose(
-                Schema.transformOrFail(
-                    Schema.typeSchema(RegisterFormSchema),
-                    Schema.typeSchema(RegisterFormSchema),
-                    {
-                        decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
-                        encode: ParseResult.succeed,
-                    },
+    scoped: Effect.gen(function*() {
+        const form = yield* Form.service({
+            schema: RegisterFormSchema.pipe(
+                Schema.compose(
+                    Schema.transformOrFail(
+                        Schema.typeSchema(RegisterFormSchema),
+                        Schema.typeSchema(RegisterFormSchema),
+                        {
+                            decode: v => Effect.andThen(Effect.sleep("500 millis"), ParseResult.succeed(v)),
+                            encode: ParseResult.succeed,
+                        },
+                    ),
                 ),
             ),
-        ),
 
-        initialEncodedValue: { email: "", password: "", birth: Option.none() },
-        f: Effect.fnUntraced(function*([value]) {
-            yield* Effect.sleep("500 millis")
-            return yield* Schema.decode(RegisterFormSubmitSchema)(value)
-        }),
-        debounce: "500 millis",
+            initialEncodedValue: { email: "", password: "", birth: Option.none() },
+            f: Effect.fnUntraced(function*([value]) {
+                yield* Effect.sleep("500 millis")
+                return yield* Schema.decode(RegisterFormSubmitSchema)(value)
+            }),
+        })
+
+        return {
+            form,
+            emailField: Form.focusObjectField(form, "email"),
+            passwordField: Form.focusObjectField(form, "password"),
+            birthField: Form.focusObjectField(form, "birth"),
+        } as const
     })
 }) {}
 
 class RegisterFormView extends Component.make("RegisterFormView")(function*() {
     const form = yield* RegisterFormService
     const [canSubmit, submitResult] = yield* Subscribable.useSubscribables([
-        form.canSubmit,
-        form.mutation.result,
+        form.form.canSubmit,
+        form.form.mutation.result,
     ])
 
     const runPromise = yield* Component.useRunPromise()
@@ -84,12 +92,10 @@ class RegisterFormView extends Component.make("RegisterFormView")(function*() {
         <Container width="300">
             <form onSubmit={e => {
                 e.preventDefault()
-                void runPromise(form.submit)
+                void runPromise(form.form.submit)
             }}>
                 <Flex direction="column" gap="2">
-                    <TextFieldFormInput
-                        field={yield* form.field(["email"])}
-                    />
+                    <TextFieldFormInput form={form.emailField} />
 
                     <TextFieldFormInput
                         field={yield* form.field(["password"])}