Thilawyn/effect-fc
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

0.1.0 #1

Merged
Thilawyn merged 81 commits from next into master 2025-07-17 21:17:57 +02:00
Conversation 0 Commits 81 Files Changed 52 +17 -24
1 changed files with 17 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f2e6e5ae08 - Show all commits

41
packages/example/src/todo/Todo.tsx
View File

@@ -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: "edit"
readonly index: number
}
| { 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 = 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 [todo, todosSize] = yield* Hook.useSubscribeRefs(ref, state.sizeRef)
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={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*() {
if (props.index <= 0)
return yield* Option.none()
SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
if (props.index <= 0) 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*() {
if (props.index >= Chunk.size(todos) - 1)
return yield* Option.none()
SubscriptionRef.updateEffect(state.ref, todos => Effect.gen(function*() {
if (props.index >= size - 1) 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),
)
}))
)}