effect-view/packages/example/src/todo/Todo.tsx

import * as Domain from "@/domain"
import { DateTimeUtcFromZonedInput } from "@/lib/schema"
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, 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"
import { FaArrowDown, FaArrowUp } from "react-icons/fa"
import { FaDeleteLeft } from "react-icons/fa6"
import { TodosState } from "./TodosState.service"


const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
const OptionalDateTimeInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })

const makeTodo = makeUuid4.pipe(
    Effect.map(id => Domain.Todo.Todo.make({
        id,
        content: "",
        completedAt: Option.none(),
    })),
    Effect.provide(GetRandomValues.CryptoRandom),
)


export type TodoProps = (
    | { 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, 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.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._tag === "edit" ? props.id : undefined])

    const [index, size] = yield* useSubscribe(indexRef, state.sizeSubscribable)

    const StringTextAreaInputFC = yield* StringTextAreaInput
    const OptionalDateTimeInputFC = yield* OptionalDateTimeInput


    return (
        <Flex direction="row" align="center" gap="2">
            <Box flexGrow="1">
                <Flex direction="column" align="stretch" gap="2">
                    <StringTextAreaInputFC ref={contentRef} />

                    <Flex direction="row" justify="center" align="center" gap="2">
                        <OptionalDateTimeInputFC
                            type="datetime-local"
                            ref={completedAtRef}
                            defaultValue={yield* useOnce(() => DateTime.now)}
                        />

                        {props._tag === "new" &&
                            <Button
                                onClick={() => ref.pipe(
                                    Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))),
                                    Effect.andThen(makeTodo),
                                    Effect.andThen(todo => Ref.set(ref, todo)),
                                    Runtime.runSync(runtime),
                                )}
                            >
                                Add
                            </Button>
                        }
                    </Flex>
                </Flex>
            </Box>

            {props._tag === "edit" &&
                <Flex direction="column" justify="center" align="center" gap="1">
                    <IconButton
                        disabled={index <= 0}
                        onClick={() => Runtime.runSync(runtime)(
                            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", ({ index }) => 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={index >= size - 1}
                        onClick={() => Runtime.runSync(runtime)(
                            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", ({ index }) => 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 />
                    </IconButton>

                    <IconButton
                        onClick={() => Runtime.runSync(runtime)(
                            SubscriptionRef.updateEffect(state.ref, todos => Effect.andThen(
                                Chunk.findFirstIndex(todos, v => v.id === props.id),
                                index => Chunk.remove(todos, index),
                            ))
                        )}
                    >
                        <FaDeleteLeft />
                    </IconButton>
                </Flex>
            }
        </Flex>
    )
}).pipe(Memo.memo) {}