0.1.0 (#1)

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

packages/example/src/todo/Todo.tsx

@@ -0,0 +1,115 @@
+import * as Domain from "@/domain"
+import { Box, Button, Flex, IconButton, TextArea } from "@radix-ui/themes"
+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 { FaArrowDown, FaArrowUp } from "react-icons/fa"
+import { FaDeleteLeft } from "react-icons/fa6"
+import { TodosState } from "./TodosState.service"
+
+
+const makeTodo = makeUuid4.pipe(
+    Effect.map(id => Domain.Todo.Todo.make({
+        id,
+        content: "",
+        completedAt: Option.none(),
+    })),
+    Effect.provide(GetRandomValues.CryptoRandom),
+)
+
+
+export type TodoProps = (
+    | { readonly _tag: "new", 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, 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 [content, size] = yield* Hook.useSubscribeRefs(contentRef, state.sizeRef)
+
+    return (
+        <Flex direction="column" align="stretch" gap="2">
+            <Flex direction="row" align="center" gap="2">
+                <Box flexGrow="1">
+                    <TextArea
+                        value={content}
+                        onChange={e => Runtime.runSync(runtime)(Ref.set(contentRef, e.target.value))}
+                    />
+                </Box>
+
+                {props._tag === "edit" &&
+                    <Flex direction="column" justify="center" align="center" gap="1">
+                        <IconButton
+                            disabled={props.index <= 0}
+                            onClick={() => Runtime.runSync(runtime)(
+                                SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
+                                    if (props.index <= 0) return yield* Option.none()
+                                    return todos.pipe(
+                                        Chunk.replace(props.index, yield* Chunk.get(todos, props.index - 1)),
+                                        Chunk.replace(props.index - 1, yield* ref),
+                                    )
+                                }))
+                            )}
+                        >
+                            <FaArrowUp />
+                        </IconButton>
+
+                        <IconButton
+                            disabled={props.index >= size - 1}
+                            onClick={() => Runtime.runSync(runtime)(
+                                SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
+                                    if (props.index >= size - 1) return yield* Option.none()
+                                    return todos.pipe(
+                                        Chunk.replace(props.index, yield* Chunk.get(todos, props.index + 1)),
+                                        Chunk.replace(props.index + 1, yield* ref),
+                                    )
+                                }))
+                            )}
+                        >
+                            <FaArrowDown />
+                        </IconButton>
+
+                        <IconButton
+                            onClick={() => Runtime.runSync(runtime)(
+                                Ref.update(state.ref, Chunk.remove(props.index))
+                            )}
+                        >
+                            <FaDeleteLeft />
+                        </IconButton>
+                    </Flex>
+                }
+            </Flex>
+
+            {props._tag === "new" &&
+                <Flex direction="row" justify="center">
+                    <Button
+                        onClick={() => ref.pipe(
+                            Effect.andThen(todo => Ref.update(state.ref, Chunk.prepend(todo))),
+                            Effect.andThen(makeTodo),
+                            Effect.andThen(todo => Ref.set(ref, todo)),
+                            Runtime.runSync(runtime),
+                        )}
+                    >
+                        Add
+                    </Button>
+                </Flex>
+            }
+        </Flex>
+    )
+}).pipe(
+    Component.memo
+)

packages/example/src/todo/Todos.tsx

@@ -0,0 +1,32 @@
+import { Container, Flex, Heading } from "@radix-ui/themes"
+import { Chunk, Console, Effect } from "effect"
+import { Component, Hook } from "effect-fc"
+import { Todo } from "./Todo"
+import { TodosState } from "./TodosState.service"
+
+
+export const Todos = Component.make(function* Todos() {
+    const state = yield* TodosState
+    const [todos] = yield* Hook.useSubscribeRefs(state.ref)
+
+    yield* Hook.useOnce(() => Effect.andThen(
+        Console.log("Todos mounted"),
+        Effect.addFinalizer(() => Console.log("Todos unmounted")),
+    ))
+
+    const VTodo = yield* Component.useFC(Todo)
+
+    return (
+        <Container>
+            <Heading align="center">Todos</Heading>
+
+            <Flex direction="column" align="stretch" gap="2" mt="2">
+                <VTodo _tag="new" />
+
+                {Chunk.map(todos, (v, k) =>
+                    <VTodo key={v.id} _tag="edit" index={k} />
+                )}
+            </Flex>
+        </Container>
+    )
+})

packages/example/src/todo/TodosState.service.ts

@@ -0,0 +1,50 @@
+import { Todo } from "@/domain"
+import { KeyValueStore } from "@effect/platform"
+import { BrowserKeyValueStore } from "@effect/platform-browser"
+import { Chunk, Console, Effect, Option, Schema, Stream, SubscriptionRef } from "effect"
+import { SubscriptionSubRef } from "effect-fc/types"
+
+
+export class TodosState extends Effect.Service<TodosState>()("TodosState", {
+    effect: Effect.fn("TodosState")(function*(key: string) {
+        const kv = yield* KeyValueStore.KeyValueStore
+
+        const readFromLocalStorage = Console.log("Reading todos from local storage...").pipe(
+            Effect.andThen(kv.get(key)),
+            Effect.andThen(Option.match({
+                onSome: Schema.decode(
+                    Schema.parseJson(Schema.Chunk(Todo.TodoFromJson))
+                ),
+                onNone: () => Effect.succeed(Chunk.empty()),
+            }))
+        )
+
+        const saveToLocalStorage = (todos: Chunk.Chunk<Todo.Todo>) => Effect.andThen(
+            Console.log("Saving todos to local storage..."),
+            Chunk.isNonEmpty(todos)
+                ? Effect.andThen(
+                    Schema.encode(
+                        Schema.parseJson(Schema.Chunk(Todo.TodoFromJson))
+                    )(todos),
+                    v => kv.set(key, v),
+                )
+                : kv.remove(key)
+        )
+
+        const ref = yield* SubscriptionRef.make(yield* readFromLocalStorage)
+        const sizeRef = SubscriptionSubRef.makeFromPath(ref, ["length"])
+
+        yield* Effect.forkScoped(ref.changes.pipe(
+            Stream.debounce("500 millis"),
+            Stream.runForEach(saveToLocalStorage),
+        ))
+        yield* Effect.addFinalizer(() => ref.pipe(
+            Effect.andThen(saveToLocalStorage),
+            Effect.ignore,
+        ))
+
+        return { ref, sizeRef } as const
+    }),
+
+    dependencies: [BrowserKeyValueStore.layerLocalStorage],
+}) {}