Todos example work

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

@@ -1,20 +1,20 @@
 import { Todo } from "@/domain"
 import { Box, Card, Flex, IconButton, TextArea } from "@radix-ui/themes"
-import { Effect } from "effect"
+import { Effect, Ref, SubscriptionRef } 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
+    readonly todoRef: SubscriptionRef.SubscriptionRef<Todo.Todo>
+    readonly remove: Effect.Effect<void>
 }
 
-export function VTodo({ index, todo }: VTodoProps) {
+export function VTodo({ todoRef, remove }: VTodoProps) {
 
     const runSync = R.useRunSync()
+    const [todo] = R.useSubscribeRefs(todoRef)
     const editorMode = useState(false)
 
 
@@ -24,12 +24,11 @@ export function VTodo({ index, todo }: VTodoProps) {
                 <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,
+                        onChange={e => runSync(
+                            Ref.set(todoRef, Todo.Todo.make({
+                                ...todo,
+                                content: e.target.value,
+                            }, true))
                         )}
                         disabled={!editorMode}
                     />
@@ -38,12 +37,7 @@ export function VTodo({ index, todo }: VTodoProps) {
                         <Box></Box>
 
                         <Flex direction="row" align="center" gap="1">
-                            <IconButton
-                                onClick={() => TodosState.TodosState.pipe(
-                                    Effect.flatMap(state => state.remove(index)),
-                                    runSync,
-                                )}
-                            >
+                            <IconButton onClick={() => runSync(remove)}>
                                 <Delete />
                             </IconButton>
                         </Flex>