97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
import * as Domain from "@/domain"
|
|
import { Box, Button, Flex, IconButton, TextArea } from "@radix-ui/themes"
|
|
import { GetRandomValues, makeUuid4 } from "@typed/id"
|
|
import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
|
|
import { Component, Hook } from "effect-fc"
|
|
import { SubscriptionSubRef } from "effect-fc/types"
|
|
import * as React from "react"
|
|
import { FaArrowDown, FaArrowUp } from "react-icons/fa"
|
|
import { FaDeleteLeft } from "react-icons/fa6"
|
|
import { TodosState } from "./TodosState.service"
|
|
|
|
|
|
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 index?: never
|
|
}
|
|
| {
|
|
readonly _tag: "edit"
|
|
readonly index: number
|
|
}
|
|
)
|
|
|
|
export const Todo = Component.make(function* Todo(props: TodoProps) {
|
|
const runtime = yield* Effect.runtime()
|
|
const state = yield* TodosState
|
|
|
|
const ref = yield* Hook.useMemo(() => Match.value(props).pipe(
|
|
Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
|
|
Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
|
|
Match.exhaustive,
|
|
), [props._tag, props.index])
|
|
|
|
const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
|
|
const [todo] = yield* Hook.useSubscribeRefs(ref)
|
|
|
|
return (
|
|
<Flex direction="column" align="stretch" gap="2">
|
|
<Flex direction="row" align="center" gap="2">
|
|
<Box flexGrow="1">
|
|
<TextArea
|
|
value={todo.content}
|
|
onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
|
|
/>
|
|
</Box>
|
|
|
|
{props._tag === "edit" &&
|
|
<Flex direction="column" justify="center" align="center" gap="1">
|
|
<IconButton
|
|
>
|
|
<FaArrowUp />
|
|
</IconButton>
|
|
|
|
<IconButton
|
|
>
|
|
<FaArrowDown />
|
|
</IconButton>
|
|
|
|
<IconButton
|
|
onClick={() => Runtime.runSync(runtime)(
|
|
Ref.update(state.ref, Chunk.remove(props.index))
|
|
)}
|
|
>
|
|
<FaDeleteLeft />
|
|
</IconButton>
|
|
</Flex>
|
|
}
|
|
</Flex>
|
|
|
|
{props._tag === "new" &&
|
|
<Flex direction="row" justify="center">
|
|
<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>
|
|
)
|
|
})
|