Todos example refactoring

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

@@ -1,25 +1,27 @@
 import { Todo } from "@/domain"
 import { Box, Button, Card, Flex, TextArea } from "@radix-ui/themes"
-import { Effect, Option, SubscriptionRef } from "effect"
+import { Effect, Option, Ref } from "effect"
 import { R } from "../reffuse"
 import { TodosState } from "../services"
 
 
-const createEmptyTodo = Todo.generateUniqueID.pipe(
-    Effect.map(id => Todo.Todo.make({
-        id,
-        content: "",
-        completedAt: Option.none(),
-    }, true))
-)
+const createEmptyTodo = Effect.map(Todo.generateUniqueID, id => Todo.Todo.make({
+    id,
+    content: "",
+    completedAt: Option.none(),
+}, true))
 
 
 export function VNewTodo() {
 
-    const runSync = R.useRunSync()
+    const todoRef = R.useRef(() => createEmptyTodo)
+    const [content, setContent] = R.useRefState(R.useSubRef(todoRef, ["content"]))
 
-    const todoRef = R.useMemo(() => createEmptyTodo.pipe(Effect.flatMap(SubscriptionRef.make)), [])
-    const [todo, setTodo] = R.useRefState(todoRef)
+    const add = R.useCallbackSync(() => Effect.all([TodosState.TodosState, todoRef]).pipe(
+        Effect.flatMap(([state, todo]) => state.prepend(todo)),
+        Effect.andThen(createEmptyTodo),
+        Effect.flatMap(v => Ref.set(todoRef, v)),
+    ), [todoRef])
 
 
     return (
@@ -27,23 +29,12 @@ export function VNewTodo() {
             <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)
-                        )}
+                        value={content}
+                        onChange={e => setContent(e.target.value)}
                     />
 
                     <Flex direction="row" justify="center" align="center">
-                        <Button
-                            onClick={() => TodosState.TodosState.pipe(
-                                Effect.flatMap(state => state.prepend(todo)),
-                                Effect.andThen(createEmptyTodo),
-                                Effect.map(setTodo),
-                                runSync,
-                            )}
-                        >
-                            Add
-                        </Button>
+                        <Button onClick={add}>Add</Button>
                     </Flex>
                 </Flex>
             </Card>