Thilawyn/effect-fc
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Working form
All checks were successful
Lint / lint (push) Successful in 12s
Details

Browse Source
This commit is contained in:
Julien Valverdé
2025-09-29 14:52:51 +02:00
parent 71d3c77e1a
commit 73134478ed
2 changed files with 142 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/example/src/routes/form.tsx
View File

@@ -25,7 +25,10 @@ class RegisterForm extends Effect.Service<RegisterForm>()("RegisterForm", {
scoped: Form.service({
schema: RegisterFormSchema,
initialEncodedValue: { email: "", password: "" },
submit: () => Effect.void,
submit: () => Effect.andThen(
Effect.sleep("500 millis"),
Effect.sync(() => alert("Done!")),
),
})
}) {}
@@ -36,43 +39,49 @@ class RegisterPage extends Component.makeUntraced("RegisterPage")(function*() {
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)
return (
<Container>
<Flex direction="column" gap="2">
<TextField.Root
value={emailInput.value}
onChange={e => emailInput.setValue(e.target.value)}
/>
<form onSubmit={e => {
e.preventDefault()
void submit()
}}>
<Flex direction="column" gap="2">
<TextField.Root
value={emailInput.value}
onChange={e => emailInput.setValue(e.target.value)}
/>
{Option.match(Array.head(emailInput.issues), {
onSome: issue => (
<Callout.Root>
<Callout.Text>{issue.message}</Callout.Text>
</Callout.Root>
),
{Option.match(Array.head(emailInput.issues), {
onSome: issue => (
<Callout.Root>
<Callout.Text>{issue.message}</Callout.Text>
</Callout.Root>
),
onNone: () => <></>,
})}
onNone: () => <></>,
})}
<TextField.Root
value={passwordInput.value}
onChange={e => passwordInput.setValue(e.target.value)}
/>
<TextField.Root
value={passwordInput.value}
onChange={e => passwordInput.setValue(e.target.value)}
/>
{Option.match(Array.head(passwordInput.issues), {
onSome: issue => (
<Callout.Root>
<Callout.Text>{issue.message}</Callout.Text>
</Callout.Root>
),
{Option.match(Array.head(passwordInput.issues), {
onSome: issue => (
<Callout.Root>
<Callout.Text>{issue.message}</Callout.Text>
</Callout.Root>
),
onNone: () => <></>,
})}
onNone: () => <></>,
})}
<Button disabled={!canSubmit}>Submit</Button>
</Flex>
<Button disabled={!canSubmit}>Submit</Button>
</Flex>
</form>
</Container>
)
}) {}