37 lines
1020 B
TypeScript
37 lines
1020 B
TypeScript
import { Box, Flex } from "@radix-ui/themes"
|
|
import { Chunk, Effect, Stream } from "effect"
|
|
import { Reffuse } from "../reffuse"
|
|
import { TodosState } from "../services"
|
|
import { VNewTodo } from "./VNewTodo"
|
|
import { VTodo } from "./VTodo"
|
|
|
|
|
|
export function VTodos() {
|
|
|
|
// Sync changes to the todos with the local storage
|
|
Reffuse.useFork(TodosState.TodosState.pipe(
|
|
Effect.flatMap(state =>
|
|
Stream.runForEach(state.todos, () => state.saveToLocalStorage)
|
|
)
|
|
))
|
|
|
|
const todosRef = Reffuse.useMemo(TodosState.TodosState.pipe(Effect.map(state => state.todos)))
|
|
const [todos] = Reffuse.useRefState(todosRef)
|
|
|
|
|
|
return (
|
|
<Flex direction="column" align="center" gap="3">
|
|
<Box width="500px">
|
|
<VNewTodo />
|
|
</Box>
|
|
|
|
{Chunk.map(todos, (todo, index) => (
|
|
<Box key={todo.id} width="500px">
|
|
<VTodo index={index} todo={todo} />
|
|
</Box>
|
|
))}
|
|
</Flex>
|
|
)
|
|
|
|
}
|