packages/example/src/todo/Todo.tsx

@@ -4,7 +4,6 @@ import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Chunk, Effect, Match, Option, Ref, Runtime, SubscriptionRef } from "effect"
 import { Component, Hook } from "effect-fc"
 import { SubscriptionSubRef } from "effect-fc/types"
-import * as React from "react"
 import { FaArrowDown, FaArrowUp } from "react-icons/fa"
 import { FaDeleteLeft } from "react-icons/fa6"
 import { TodosState } from "./TodosState.service"
@@ -21,35 +20,33 @@ const makeTodo = makeUuid4.pipe(
 
 
 export type TodoProps = (
-    | {
+    | { readonly _tag: "new", readonly index?: never }
-        readonly _tag: "new"
+    | { readonly _tag: "edit", readonly index: number }
-        readonly index?: never
-    }
-    | {
-        readonly _tag: "edit"
-        readonly index: number
-    }
 )
 
 export const Todo = Component.make(function* Todo(props: TodoProps) {
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
-    const ref = yield* Hook.useMemo(() => Match.value(props).pipe(
+    const [ref, contentRef] = yield* Hook.useMemo(() => Match.value(props).pipe(
         Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
         Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
         Match.exhaustive,
+
+        Effect.map(ref => [
+            ref,
+            SubscriptionSubRef.makeFromPath(ref, ["content"]),
+        ] as const),
     ), [props._tag, props.index])
 
-    const contentRef = React.useMemo(() => SubscriptionSubRef.makeFromPath(ref, ["content"]), [ref])
+    const [content, size] = yield* Hook.useSubscribeRefs(contentRef, state.sizeRef)
-    const [todo, todosSize] = yield* Hook.useSubscribeRefs(ref, state.sizeRef)
 
     return (
         <Flex direction="column" align="stretch" gap="2">
             <Flex direction="row" align="center" gap="2">
                 <Box flexGrow="1">
                     <TextArea
-                        value={todo.content}
+                        value={content}
                         onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
                     />
                 </Box>
@@ -59,15 +56,13 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
                         <IconButton
                             disabled={props.index <= 0}
                             onClick={() => Runtime.runSync(runtime)(
-                                Ref.updateSome(state.ref, todos => Option.gen(function*() {
+                                SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
-                                    if (props.index <= 0)
+                                    if (props.index <= 0) return yield* Option.none()
-                                        return yield* Option.none()
-
                                     const toSwapIndex = props.index - 1
                                     const toSwap = yield* Chunk.get(todos, toSwapIndex)
                                     return todos.pipe(
                                         Chunk.replace(props.index, toSwap),
-                                        Chunk.replace(toSwapIndex, todo),
+                                        Chunk.replace(toSwapIndex, yield* ref),
                                     )
                                 }))
                             )}
@@ -76,17 +71,15 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
                         </IconButton>
 
                         <IconButton
-                            disabled={props.index >= todosSize - 1}
+                            disabled={props.index >= size - 1}
                             onClick={() => Runtime.runSync(runtime)(
-                                Ref.updateSome(state.ref, todos => Option.gen(function*() {
+                                SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
-                                    if (props.index >= Chunk.size(todos) - 1)
+                                    if (props.index >= size - 1) return yield* Option.none()
-                                        return yield* Option.none()
-
                                     const toSwapIndex = props.index + 1
                                     const toSwap = yield* Chunk.get(todos, toSwapIndex)
                                     return todos.pipe(
                                         Chunk.replace(props.index, toSwap),
-                                        Chunk.replace(toSwapIndex, todo),
+                                        Chunk.replace(toSwapIndex, yield* ref),
                                     )
                                 }))
                             )}