0.1.0 (#1)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/reffuse/pulls/1

packages/example/src/todos/views/VNewTodo.tsx

@@ -0,0 +1,52 @@
+import { Todo } from "@/domain"
+import { Box, Button, Card, Flex, TextArea } from "@radix-ui/themes"
+import { Effect, Option } from "effect"
+import { R } from "../reffuse"
+import { TodosState } from "../services"
+
+
+export function VNewTodo() {
+
+    const runSync = R.useRunSync()
+
+    const createEmptyTodo = Todo.generateUniqueID.pipe(
+        Effect.map(id => Todo.Todo.make({
+            id,
+            content: "",
+            completedAt: Option.none(),
+        }, true))
+    )
+
+    const todoRef = R.useRefFromEffect(createEmptyTodo)
+    const [todo, setTodo] = R.useRefState(todoRef)
+
+
+    return (
+        <Box>
+            <Card>
+                <Flex direction="column" align="stretch" gap="2">
+                    <TextArea
+                        value={todo.content}
+                        onChange={e => setTodo(prev =>
+                            Todo.Todo.make({ ...prev, content: e.target.value }, true)
+                        )}
+                    />
+
+                    <Flex direction="row" justify="center" align="center">
+                        <Button
+                            onClick={() => TodosState.TodosState.pipe(
+                                Effect.flatMap(state => state.prepend(todo)),
+                                Effect.flatMap(() => createEmptyTodo),
+                                Effect.map(setTodo),
+                                runSync,
+                            )}
+                        >
+                            Add
+                        </Button>
+                    </Flex>
+                </Flex>
+            </Card>
+        </Box>
+    )
+
+}

packages/example/src/todos/views/VTodo.tsx

@@ -0,0 +1,56 @@
+import { Todo } from "@/domain"
+import { Box, Card, Flex, IconButton, TextArea } from "@radix-ui/themes"
+import { Effect } from "effect"
+import { Delete } from "lucide-react"
+import { useState } from "react"
+import { R } from "../reffuse"
+import { TodosState } from "../services"
+
+
+export interface VTodoProps {
+    readonly index: number
+    readonly todo: Todo.Todo
+}
+
+export function VTodo({ index, todo }: VTodoProps) {
+
+    const runSync = R.useRunSync()
+    const editorMode = useState(false)
+
+
+    return (
+        <Box>
+            <Card>
+                <Flex direction="column" align="stretch" gap="1">
+                    <TextArea
+                        value={todo.content}
+                        onChange={e => TodosState.TodosState.pipe(
+                            Effect.flatMap(state => state.replace(
+                                index,
+                                Todo.Todo.make({ ...todo, content: e.target.value }, true),
+                            )),
+                            runSync,
+                        )}
+                        disabled={!editorMode}
+                    />
+
+                    <Flex direction="row" justify="between" align="center">
+                        <Box></Box>
+
+                        <Flex direction="row" align="center" gap="1">
+                            <IconButton
+                                onClick={() => TodosState.TodosState.pipe(
+                                    Effect.flatMap(state => state.remove(index)),
+                                    runSync,
+                                )}
+                            >
+                                <Delete />
+                            </IconButton>
+                        </Flex>
+                    </Flex>
+                </Flex>
+            </Card>
+        </Box>
+    )
+
+}

packages/example/src/todos/views/VTodos.tsx

@@ -0,0 +1,36 @@
+import { Box, Flex } from "@radix-ui/themes"
+import { Chunk, Effect, Stream } from "effect"
+import { R } 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
+    R.useFork(TodosState.TodosState.pipe(
+        Effect.flatMap(state =>
+            Stream.runForEach(state.todos.changes, () => state.saveToLocalStorage)
+        )
+    ))
+
+    const todosRef = R.useMemo(TodosState.TodosState.pipe(Effect.map(state => state.todos)))
+    const [todos] = R.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>
+    )
+
+}