Julien Valverdé
113 lines
3.4 KiB
TypeScript
113 lines
3.4 KiB
TypeScript
import { Container, Flex } from "@radix-ui/themes"
|
|
import { createFileRoute } from "@tanstack/react-router"
|
|
import { Console, Context, Effect, Layer, Schema, Stream, SubscriptionRef } from "effect"
|
|
import { Component, Form, Lens, LensForm } from "effect-view"
|
|
import { TextFieldFormInputView } from "@/lib/form/TextFieldFormInputView"
|
|
import { runtime } from "@/runtime"
|
|
|
|
|
|
const UserProfileSchema = Schema.Struct({
|
|
email: Schema.String.check(
|
|
Schema.isPattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, {
|
|
message: "Enter a valid email address",
|
|
}),
|
|
),
|
|
password: Schema.String.check(
|
|
Schema.isMinLength(5, {
|
|
message: "Password must be at least 5 characters long",
|
|
}),
|
|
),
|
|
})
|
|
|
|
const AppStateSchema = Schema.Struct({
|
|
currentUser: UserProfileSchema,
|
|
})
|
|
|
|
class AppState extends Context.Service<AppState, {
|
|
readonly lens: Lens.Lens<typeof AppStateSchema.Type>
|
|
}>()("AppState") {
|
|
static readonly layer = Layer.effect(AppState, Effect.gen(function*() {
|
|
return {
|
|
lens: Lens.fromSubscriptionRef(
|
|
yield* SubscriptionRef.make<typeof AppStateSchema.Type>({
|
|
currentUser: {
|
|
email: "",
|
|
password: "",
|
|
},
|
|
})
|
|
),
|
|
}
|
|
}))
|
|
}
|
|
|
|
|
|
const LensFormPageView = Component.make("LensFormPageView")(function*() {
|
|
yield* Component.useOnMount(() => Effect.gen(function*() {
|
|
yield* Effect.addFinalizer(() => Console.log("LensForm route unmounted"))
|
|
yield* Console.log("LensForm route mounted")
|
|
}))
|
|
|
|
const context = yield* Component.useLayer(AppState.layer)
|
|
const UserProfileEditor = yield* Effect.provide(UserProfileEditorView.use, context)
|
|
|
|
return <UserProfileEditor />
|
|
})
|
|
|
|
|
|
const UserProfileEditorView = Component.make("UserProfileEditorView")(function*() {
|
|
const appState = yield* AppState
|
|
|
|
const [
|
|
emailField,
|
|
passwordField,
|
|
] = yield* Component.useOnMount(() => Effect.gen(function*() {
|
|
yield* Effect.forkScoped(
|
|
Stream.runForEach(Lens.changes(appState.lens), Console.log)
|
|
)
|
|
|
|
const form = yield* LensForm.service({
|
|
schema: UserProfileSchema,
|
|
target: Lens.focusObjectOn(appState.lens, "currentUser"),
|
|
initialEncodedValue: {
|
|
email: "",
|
|
password: "",
|
|
},
|
|
})
|
|
|
|
const emailField = Form.focusObjectOn(form, "email")
|
|
const passwordField = Form.focusObjectOn(form, "password")
|
|
|
|
return [emailField, passwordField] as const
|
|
}))
|
|
|
|
const TextFieldFormInput = yield* TextFieldFormInputView.use
|
|
|
|
|
|
return (
|
|
<Container width="300">
|
|
<form onSubmit={event => {
|
|
event.preventDefault()
|
|
}}>
|
|
<Flex direction="column" gap="2">
|
|
<TextFieldFormInput
|
|
form={emailField}
|
|
placeholder="Email"
|
|
debounce="250 millis"
|
|
/>
|
|
<TextFieldFormInput
|
|
form={passwordField}
|
|
placeholder="Password"
|
|
type="password"
|
|
debounce="250 millis"
|
|
/>
|
|
</Flex>
|
|
</form>
|
|
</Container>
|
|
)
|
|
})
|
|
|
|
|
|
export const Route = createFileRoute("/lensform")({
|
|
component: Component.withContext(LensFormPageView, runtime.context),
|
|
})
|