packages/effect-fc/src/hooks/Hooks/useSubscribe.ts

@@ -1,18 +1,18 @@
-import { Effect, Equivalence, pipe, type Readable, Stream, type Subscribable } from "effect"
+import { Effect, Equivalence, pipe, Stream, type Subscribable } from "effect"
 import * as React from "react"
 import { useFork } from "./useFork.js"
 import { useOnce } from "./useOnce.js"
 
 
 export const useSubscribe: {
-    <const T extends readonly (Readable.Readable<any, any, any> & Subscribable.Subscribable<any, any, any>)[]>(
+    <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
         ...elements: T
     ): Effect.Effect<
         { [K in keyof T]: Effect.Effect.Success<T[K]["get"]> | Stream.Stream.Success<T[K]["changes"]> },
         Effect.Effect.Error<T[number]["get"]> | Stream.Stream.Error<T[number]["changes"]>,
         Effect.Effect.Context<T[number]["get"]> | Stream.Stream.Context<T[number]["changes"]>
     >
-} = Effect.fnUntraced(function* <const T extends readonly (Readable.Readable<any, any, any> & Subscribable.Subscribable<any, any, any>)[]>(
+} = Effect.fnUntraced(function* <const T extends readonly Subscribable.Subscribable<any, any, any>[]>(
     ...elements: T
 ) {
     const [reactStateValue, setReactStateValue] = React.useState(yield* useOnce(() =>

packages/effect-fc/src/types/PropertyPath.ts

@@ -38,8 +38,7 @@ export type ValueFromPath<T, P extends any[]> = P extends [infer Head, ...infer
             : never
     : T
 
-export type AnyKey = string | number | symbol
+export type AnyPath = readonly PropertyKey[]
-export type AnyPath = readonly AnyKey[]
 
 
 export const unsafeGet: {

packages/effect-fc/src/types/SubscriptionSubRef.ts

@@ -1,4 +1,4 @@
-import { Chunk, Effect, Effectable, Option, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
+import { Chunk, Effect, Effectable, Option, type Predicate, Readable, Ref, Stream, Subscribable, SubscriptionRef, SynchronizedRef, type Types, type Unify } from "effect"
 import * as PropertyPath from "./PropertyPath.js"
 
 
@@ -7,7 +7,7 @@ export type SubscriptionSubRefTypeId = typeof SubscriptionSubRefTypeId
 
 export interface SubscriptionSubRef<in out A, in out B extends SubscriptionRef.SubscriptionRef<any>>
 extends SubscriptionSubRef.Variance<A, B>, SubscriptionRef.SubscriptionRef<A> {
-    readonly parent: SubscriptionRef.SubscriptionRef<B>
+    readonly parent: B
 
     readonly [Unify.typeSymbol]?: unknown
     readonly [Unify.unifySymbol]?: SubscriptionSubRefUnify<this>
@@ -105,7 +105,7 @@ export const makeFromPath = <
     (parentValue, value) => Option.getOrThrow(PropertyPath.immutableSet(parentValue, path, value)),
 )
 
-export const makeFromChunkRef: {
+export const makeFromChunkIndex: {
     <B extends SubscriptionRef.SubscriptionRef<Chunk.NonEmptyChunk<any>>>(
         parent: B,
         index: number,
@@ -128,3 +128,30 @@ export const makeFromChunkRef: {
     parentValue => Chunk.unsafeGet(parentValue, index),
     (parentValue, value) => Chunk.replace(parentValue, index, value),
 ) as any
+
+export const makeFromChunkFindFirst: {
+    <B extends SubscriptionRef.SubscriptionRef<Chunk.NonEmptyChunk<any>>>(
+        parent: B,
+        findFirstPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never>,
+    ): SubscriptionSubRef<
+        Effect.Effect.Success<B> extends Chunk.NonEmptyChunk<infer A> ? A : never,
+        B
+    >
+    <B extends SubscriptionRef.SubscriptionRef<Chunk.Chunk<any>>>(
+        parent: B,
+        findFirstPredicate: Predicate.Predicate<Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never>,
+    ): SubscriptionSubRef<
+        Effect.Effect.Success<B> extends Chunk.Chunk<infer A> ? A : never,
+        B
+    >
+} = (
+    parent: SubscriptionRef.SubscriptionRef<Chunk.Chunk<never>>,
+    findFirstPredicate: Predicate.Predicate.Any,
+) => new SubscriptionSubRefImpl(
+    parent,
+    parentValue => Option.getOrThrow(Chunk.findFirst(parentValue, findFirstPredicate)),
+    (parentValue, value) => Option.getOrThrow(Option.andThen(
+        Chunk.findFirstIndex(parentValue, findFirstPredicate),
+        index => Chunk.replace(parentValue, index, value),
+    )),
+) as any

packages/example/src/todo/Todo.tsx

@@ -4,7 +4,7 @@ import { TextAreaInput } from "@/lib/TextAreaInput"
 import { TextFieldInput } from "@/lib/TextFieldInput"
 import { Box, Button, Flex, IconButton } from "@radix-ui/themes"
 import { GetRandomValues, makeUuid4 } from "@typed/id"
-import { Chunk, DateTime, Effect, Match, Option, Ref, Runtime, Schema, SubscriptionRef } from "effect"
+import { Chunk, DateTime, Effect, flow, identity, Match, Option, Ref, Runtime, Schema, SubscriptionRef } from "effect"
 import { Component, Memo } from "effect-fc"
 import { useMemo, useOnce, useSubscribe } from "effect-fc/hooks"
 import { SubscriptionSubRef } from "effect-fc/types"
@@ -14,7 +14,7 @@ import { TodosState } from "./TodosState.service"
 
 
 const StringTextAreaInput = TextAreaInput({ schema: Schema.String })
-const OptionalDateInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })
+const OptionalDateTimeInput = TextFieldInput({ optional: true, schema: DateTimeUtcFromZonedInput })
 
 const makeTodo = makeUuid4.pipe(
     Effect.map(id => Domain.Todo.Todo.make({
@@ -27,31 +27,38 @@ const makeTodo = makeUuid4.pipe(
 
 
 export type TodoProps = (
-    | { readonly _tag: "new", readonly index?: never }
+    | { readonly _tag: "new" }
-    | { readonly _tag: "edit", readonly index: number }
+    | { readonly _tag: "edit", readonly id: string }
 )
 
 export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps) {
     const runtime = yield* Effect.runtime()
     const state = yield* TodosState
 
-    const [ref, contentRef, completedAtRef] = yield* useMemo(() => Match.value(props).pipe(
+    const { ref, indexRef, contentRef, completedAtRef } = yield* useMemo(() => Match.value(props).pipe(
-        Match.tag("new", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
+        Match.tag("new", () => Effect.Do.pipe(
-        Match.tag("edit", ({ index }) => Effect.succeed(SubscriptionSubRef.makeFromChunkRef(state.ref, index))),
+            Effect.bind("ref", () => Effect.andThen(makeTodo, SubscriptionRef.make)),
+            Effect.bind("indexRef", () => SubscriptionRef.make(-1)),
+        )),
+        Match.tag("edit", ({ id }) => Effect.Do.pipe(
+            Effect.let("ref", () => SubscriptionSubRef.makeFromChunkFindFirst(state.ref, v => v.id === id)),
+            Effect.let("indexRef", () => SubscriptionSubRef.makeFromGetSet(state.ref, {
+                get: flow(Chunk.findFirstIndex(v => v.id === id), Option.getOrThrow),
+                set: identity,
+            })),
+        )),
         Match.exhaustive,
 
-        Effect.map(ref => [
+        Effect.let("contentRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["content"])),
-            ref,
+        Effect.let("completedAtRef", ({ ref }) => SubscriptionSubRef.makeFromPath(ref, ["completedAt"])),
-            SubscriptionSubRef.makeFromPath(ref, ["content"]),
-            SubscriptionSubRef.makeFromPath(ref, ["completedAt"]),
-        ] as const),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    ), [props._tag, props.index])
+    ), [props._tag, props._tag === "edit" ? props.id : undefined])
 
-    const [size] = yield* useSubscribe(state.sizeRef)
+    const [index, size] = yield* useSubscribe(indexRef, state.sizeRef)
 
     const StringTextAreaInputFC = yield* StringTextAreaInput
-    const OptionalDateInputFC = yield* OptionalDateInput
+    const OptionalDateTimeInputFC = yield* OptionalDateTimeInput
+
 
     return (
         <Flex direction="row" align="center" gap="2">
@@ -60,7 +67,7 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
                     <StringTextAreaInputFC ref={contentRef} />
 
                     <Flex direction="row" justify="center" align="center" gap="2">
-                        <OptionalDateInputFC
+                        <OptionalDateTimeInputFC
                             type="datetime-local"
                             ref={completedAtRef}
                             defaultValue={yield* useOnce(() => DateTime.now)}
@@ -85,30 +92,40 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
             {props._tag === "edit" &&
                 <Flex direction="column" justify="center" align="center" gap="1">
                     <IconButton
-                        disabled={props.index <= 0}
+                        disabled={index <= 0}
                         onClick={() => Runtime.runSync(runtime)(
-                            SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
+                            SubscriptionRef.updateEffect(state.ref, todos => Effect.Do.pipe(
-                                if (props.index <= 0) return yield* Option.none()
+                                Effect.bind("todo", () => ref),
-                                return todos.pipe(
+                                Effect.bind("index", () => Chunk.findFirstIndex(todos, v => v.id === props.id)),
-                                    Chunk.replace(props.index, yield* Chunk.get(todos, props.index - 1)),
+                                Effect.bind("previous", () => Chunk.get(todos, index - 1)),
-                                    Chunk.replace(props.index - 1, yield* ref),
+                                Effect.andThen(({ todo, index, previous }) => index > 0
-                                )
+                                    ? todos.pipe(
-                            }))
+                                        Chunk.replace(index, previous),
+                                        Chunk.replace(index - 1, todo),
+                                    )
+                                    : todos
+                                ),
+                            ))
                         )}
                     >
                         <FaArrowUp />
                     </IconButton>
 
                     <IconButton
-                        disabled={props.index >= size - 1}
+                        disabled={index >= size - 1}
                         onClick={() => Runtime.runSync(runtime)(
-                            SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
+                            SubscriptionRef.updateEffect(state.ref, todos => Effect.Do.pipe(
-                                if (props.index >= size - 1) return yield* Option.none()
+                                Effect.bind("todo", () => ref),
-                                return todos.pipe(
+                                Effect.bind("index", () => Chunk.findFirstIndex(todos, v => v.id === props.id)),
-                                    Chunk.replace(props.index, yield* Chunk.get(todos, props.index + 1)),
+                                Effect.bind("next", () => Chunk.get(todos, index + 1)),
-                                    Chunk.replace(props.index + 1, yield* ref),
+                                Effect.andThen(({ todo, index, next }) => index < Chunk.size(todos) - 1
-                                )
+                                    ? todos.pipe(
-                            }))
+                                        Chunk.replace(index, next),
+                                        Chunk.replace(index + 1, todo),
+                                    )
+                                    : todos
+                                ),
+                            ))
                         )}
                     >
                         <FaArrowDown />
@@ -116,7 +133,10 @@ export class Todo extends Component.makeUntraced(function* Todo(props: TodoProps
 
                     <IconButton
                         onClick={() => Runtime.runSync(runtime)(
-                            Ref.update(state.ref, Chunk.remove(props.index))
+                            SubscriptionRef.updateEffect(state.ref, todos => Effect.andThen(
+                                Chunk.findFirstIndex(todos, v => v.id === props.id),
+                                index => Chunk.remove(todos, index),
+                            ))
                         )}
                     >
                         <FaDeleteLeft />

packages/example/src/todo/Todos.tsx

@@ -24,8 +24,8 @@ export class Todos extends Component.makeUntraced(function* Todos() {
             <Flex direction="column" align="stretch" gap="2" mt="2">
                 <TodoFC _tag="new" />
 
-                {Chunk.map(todos, (v, k) =>
+                {Chunk.map(todos, todo =>
-                    <TodoFC key={v.id} _tag="edit" index={k} />
+                    <TodoFC key={todo.id} _tag="edit" id={todo.id} />
                 )}
             </Flex>
         </Container>