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

Todo work
All checks were successful
Lint / lint (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Julien Valverdé
2025-08-17 21:35:08 +02:00
parent 229d898353
commit fc503a3847
1 changed files with 61 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import * as Domain from "@/domain" import * as Domain from "@/domain"
import { TextAreaInput } from "@/lib/TextAreaInput" import { TextAreaInput } from "@/lib/TextAreaInput"
import { TextFieldInput } from "@/lib/TextFieldInput"
import { Box, Button, Flex, IconButton } from "@radix-ui/themes" import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
import { GetRandomValues, makeUuid4 } from "@typed/id" import { GetRandomValues, makeUuid4 } from "@typed/id"
import { Chunk, Effect, Match, Option, Ref, Runtime, Schema, SubscriptionRef } from "effect" import { Chunk, Effect, Match, Option, Ref, Runtime, Schema, SubscriptionRef } from "effect"
@@ -12,6 +13,7 @@ import { TodosState } from "./TodosState.service"
const StringTextAreaInput = TextAreaInput(Schema.String) const StringTextAreaInput = TextAreaInput(Schema.String)
const OptionalDateInput = TextFieldInput({ optional: true, schema: Schema.DateTimeUtc })
const makeTodo = makeUuid4.pipe( const makeTodo = makeUuid4.pipe(
Effect.map(id => Domain.Todo.Todo.make({ Effect.map(id => Domain.Todo.Todo.make({
@@ -32,7 +34,7 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
const runtime = yield* Effect.runtime() const runtime = yield* Effect.runtime()
const state = yield* TodosState const state = yield* TodosState
const [ref, contentRef] = yield* Hooks.useMemo(() => Match.value(props).pipe( const [ref, contentRef, completedAtRef] = yield* Hooks.useMemo(() => Match.value(props).pipe(
Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)), Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))), Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
Match.exhaustive, Match.exhaustive,
@@ -40,75 +42,79 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
Effect.map(ref => [ Effect.map(ref => [
ref, ref,
SubscriptionSubRef.makeFromPath(ref, ["content"]), SubscriptionSubRef.makeFromPath(ref, ["content"]),
SubscriptionSubRef.makeFromPath(ref, ["completedAt"]),
] as const), ] as const),
), [props._tag, props.index]) ), [props._tag, props.index])
const [size] = yield* Hooks.useSubscribeRefs(state.sizeRef) const [size] = yield* Hooks.useSubscribeRefs(state.sizeRef)
const StringTextAreaInputFC = yield* StringTextAreaInput const StringTextAreaInputFC = yield* StringTextAreaInput
const OptionalDateInputFC = yield* OptionalDateInput
return ( return (
<Flex direction="column" align="stretch" gap="2"> <Flex direction="row" align="center" gap="2">
<Flex direction="row" align="center" gap="2"> <Box flexGrow="1">
<Box flexGrow="1"> <Flex direction="column" align="stretch" gap="2">
<StringTextAreaInputFC ref={contentRef} /> <StringTextAreaInputFC ref={contentRef} />
</Box>
{props._tag === "edit" && <Flex direction="row" justify="center" align="center" gap="2">
<Flex direction="column" justify="center" align="center" gap="1"> <OptionalDateInputFC ref={completedAtRef} />
<IconButton
disabled={props.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),
)
}))
)}
>
<FaArrowUp />
</IconButton>
<IconButton {props._tag === "new" &&
disabled={props.index >= size - 1} <Button
onClick={() => Runtime.runSync(runtime)( onClick={() => ref.pipe(
SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() { Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))),
if (props.index >= size - 1) return yield* Option.none() Effect.andThen(makeTodo),
return todos.pipe( Effect.andThen(todo => Ref.set(ref, todo)),
Chunk.replace(props.index, yield* Chunk.get(todos, props.index + 1)), Runtime.runSync(runtime),
Chunk.replace(props.index + 1, yield* ref), )}
) >
})) Add
)} </Button>
> }
<FaArrowDown />
</IconButton>
<IconButton
onClick={() => Runtime.runSync(runtime)(
Ref.update(state.ref, Chunk.remove(props.index))
)}
>
<FaDeleteLeft />
</IconButton>
</Flex> </Flex>
} </Flex>
</Flex> </Box>
{props._tag === "new" && {props._tag === "edit" &&
<Flex direction="row" justify="center"> <Flex direction="column" justify="center" align="center" gap="1">
<Button <IconButton
onClick={() => ref.pipe( disabled={props.index <= 0}
Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))), onClick={() => Runtime.runSync(runtime)(
Effect.andThen(makeTodo), SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
Effect.andThen(todo => Ref.set(ref, todo)), if (props.index <= 0) return yield* Option.none()
Runtime.runSync(runtime), return todos.pipe(
Chunk.replace(props.index, yield* Chunk.get(todos, props.index - 1)),
Chunk.replace(props.index - 1, yield* ref),
)
}))
)} )}
> >
Add <FaArrowUp />
</Button> </IconButton>
<IconButton
disabled={props.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),
)
}))
)}
>
<FaArrowDown />
</IconButton>
<IconButton
onClick={() => Runtime.runSync(runtime)(
Ref.update(state.ref, Chunk.remove(props.index))
)}
>
<FaDeleteLeft />
</IconButton>
</Flex> </Flex>
} }
</Flex> </Flex>