34 lines
1017 B
TypeScript
34 lines
1017 B
TypeScript
import { Container, Flex, Heading } from "@radix-ui/themes"
|
|
import { Chunk, Console, Effect } from "effect"
|
|
import { Component } from "effect-fc"
|
|
import { useOnce, useSubscribables } from "effect-fc/hooks"
|
|
import { Todo } from "./Todo"
|
|
import { TodosState } from "./TodosState.service"
|
|
|
|
|
|
export class Todos extends Component.makeUntraced("Todos")(function*() {
|
|
const state = yield* TodosState
|
|
const [todos] = yield* useSubscribables(state.ref)
|
|
|
|
yield* useOnce(() => Effect.andThen(
|
|
Console.log("Todos mounted"),
|
|
Effect.addFinalizer(() => Console.log("Todos unmounted")),
|
|
))
|
|
|
|
const TodoFC = yield* Todo
|
|
|
|
return (
|
|
<Container>
|
|
<Heading align="center">Todos</Heading>
|
|
|
|
<Flex direction="column" align="stretch" gap="2" mt="2">
|
|
<TodoFC _tag="new" />
|
|
|
|
{Chunk.map(todos, todo =>
|
|
<TodoFC key={todo.id} _tag="edit" id={todo.id} />
|
|
)}
|
|
</Flex>
|
|
</Container>
|
|
)
|
|
}) {}
|