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

Refactoring
All checks were successful
Lint / lint (push) Successful in 42s
Details

Browse Source
This commit is contained in:
Julien Valverdé
2025-08-22 03:34:24 +02:00
parent 73b2f59045
commit 6581ec8946
5 changed files with 89 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
packages/example/src/todo/Todo.tsx
View File

@@ -4,7 +4,7 @@ import { TextAreaInput } from "@/lib/TextAreaInput"
import { TextFieldInput } from "@/lib/TextFieldInput"
import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
import { GetRandomValues, makeUuid4 } from "@typed/id"
import { Chunk, DateTime, Effect, Match, Option, Ref, Runtime, Schema, SubscriptionRef } from "effect"
import { Chunk, DateTime, Effect, flow, identity, Match, Option, Ref, Runtime, Schema, SubscriptionRef } from "effect"
import { Component, Memo } from "effect-fc"
import { useMemo, useOnce, useSubscribe } from "effect-fc/hooks"
import { SubscriptionSubRef } from "effect-fc/types"
@@ -14,7 +14,7 @@ import { TodosState } from "./TodosState.service"
const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
const OptionalDateInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })
const OptionalDateTimeInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })
const makeTodo = makeUuid4.pipe(
Effect.map(id => Domain.Todo.Todo.make({
@@ -27,31 +27,38 @@ const makeTodo = makeUuid4.pipe(
export type TodoProps = (
| { readonly _tag: "new", readonly index?: never }
| { readonly _tag: "edit", readonly index: number }
| { readonly _tag: "new" }
| { readonly _tag: "edit", readonly id: string }
)
export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps) {
const runtime = yield* Effect.runtime()
const state = yield* TodosState
const [ref, contentRef, completedAtRef] = yield* useMemo(() => Match.value(props).pipe(
Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
const { ref, indexRef, contentRef, completedAtRef } = yield* useMemo(() => Match.value(props).pipe(
Match.tag("new", () => Effect.Do.pipe(
Effect.bind("ref", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
Effect.bind("indexRef", () => SubscriptionRef.make(-1)),
)),
Match.tag("edit", ({ id }) => Effect.Do.pipe(
Effect.let("ref", () => SubscriptionSubRef.makeFromChunkFindFirst(state.ref, v => v.id === id)),
Effect.let("indexRef", () => SubscriptionSubRef.makeFromGetSet(state.ref, {
get: flow(Chunk.findFirstIndex(v => v.id === id), Option.getOrThrow),
set: identity,
})),
)),
Match.exhaustive,
Effect.map(ref => [
ref,
SubscriptionSubRef.makeFromPath(ref, ["content"]),
SubscriptionSubRef.makeFromPath(ref, ["completedAt"]),
] as const),
Effect.let("contentRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["content"])),
Effect.let("completedAtRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["completedAt"])),
// eslint-disable-next-line react-hooks/exhaustive-deps
), [props._tag, props.index])
), [props._tag, props._tag === "edit" ? props.id : undefined])
const [size] = yield* useSubscribe(state.sizeRef)
const [index, size] = yield* useSubscribe(indexRef, state.sizeRef)
const StringTextAreaInputFC = yield* StringTextAreaInput
const OptionalDateInputFC = yield* OptionalDateInput
const OptionalDateTimeInputFC = yield* OptionalDateTimeInput
return (
<Flex direction="row" align="center" gap="2">
@@ -60,7 +67,7 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
<StringTextAreaInputFC ref={contentRef} />
<Flex direction="row" justify="center" align="center" gap="2">
<OptionalDateInputFC
<OptionalDateTimeInputFC
type="datetime-local"
ref={completedAtRef}
defaultValue={yield* useOnce(() => DateTime.now)}
@@ -85,30 +92,40 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
{props._tag === "edit" &&
<Flex direction="column" justify="center" align="center" gap="1">
<IconButton
disabled={props.index <= 0}
disabled={index <= 0}
onClick={() => Runtime.runSync(runtime)(
SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
if (props.index <= 0) return yield* Option.none()
return todos.pipe(
Chunk.replace(props.index, yield* Chunk.get(todos, props.index - 1)),
Chunk.replace(props.index - 1, yield* ref),
)
}))
SubscriptionRef.updateEffect(state.ref, todos => Effect.Do.pipe(
Effect.bind("todo", () => ref),
Effect.bind("index", () => Chunk.findFirstIndex(todos, v => v.id === props.id)),
Effect.bind("previous", () => Chunk.get(todos, index - 1)),
Effect.andThen(({ todo, index, previous }) => index > 0
? todos.pipe(
Chunk.replace(index, previous),
Chunk.replace(index - 1, todo),
)
: todos
),
))
)}
>
<FaArrowUp />
</IconButton>
<IconButton
disabled={props.index >= size - 1}
disabled={index >= size - 1}
onClick={() => Runtime.runSync(runtime)(
SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
if (props.index >= size - 1) return yield* Option.none()
return todos.pipe(
Chunk.replace(props.index, yield* Chunk.get(todos, props.index + 1)),
Chunk.replace(props.index + 1, yield* ref),
)
}))
SubscriptionRef.updateEffect(state.ref, todos => Effect.Do.pipe(
Effect.bind("todo", () => ref),
Effect.bind("index", () => Chunk.findFirstIndex(todos, v => v.id === props.id)),
Effect.bind("next", () => Chunk.get(todos, index + 1)),
Effect.andThen(({ todo, index, next }) => index < Chunk.size(todos) - 1
? todos.pipe(
Chunk.replace(index, next),
Chunk.replace(index + 1, todo),
)
: todos
),
))
)}
>
<FaArrowDown />
@@ -116,7 +133,10 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
<IconButton
onClick={() => Runtime.runSync(runtime)(
Ref.update(state.ref, Chunk.remove(props.index))
SubscriptionRef.updateEffect(state.ref, todos => Effect.andThen(
Chunk.findFirstIndex(todos, v => v.id === props.id),
index => Chunk.remove(todos, index),
))
)}
>
<FaDeleteLeft />