Posts

packages/example/src/views/post/VPost.tsx

@@ -1,7 +1,34 @@
+import { Post } from "@/domain"
+import { Chunk, Effect, Ref } from "effect"
+import { PostsState } from "../posts/services"
+import { Reffuse } from "./reffuse"
 
 
-export function VPost() {
+export interface VPostProps {
+    readonly index: number
+    readonly post: Post.Post
+}
 
 
+export function VPost({ post, index }: VPostProps) {
+
+    const runSync = Reffuse.useRunSync()
+
+
+    return (
+        <div className="flex-col gap-1 items-stretch">
+            <p>{post.title}</p>
+            <p>{post.content}</p>
+
+            <button
+                onClick={() => PostsState.PostsState.pipe(
+                    Effect.flatMap(({ posts }) => Ref.update(posts, Chunk.remove(index))),
+                    runSync,
+                )}
+            >
+                X
+            </button>
+        </div>
+    )
 
 }

packages/example/src/views/post/reffuse.ts

@@ -1,5 +1 @@
-import { Reffuse as RootReffuse } from "@/reffuse"
-import { PostState } from "@/services"
-
-
-export const Reffuse = RootReffuse.extend<PostState.PostState>()
+export { Reffuse } from "../posts/reffuse"

packages/example/src/views/posts/VPosts.tsx

@@ -0,0 +1,25 @@
+import { Chunk } from "effect"
+import { VPost } from "../post/VPost"
+import { Reffuse } from "./reffuse"
+import { PostsState } from "./services"
+
+
+export function VPosts() {
+
+    const state = Reffuse.useMemo(PostsState.PostsState)
+    const [posts] = Reffuse.useRefState(state.posts)
+
+
+    return (
+        <div className="flex-col gap-2 items-stretch">
+            {Chunk.map(posts, (post, index) => (
+                <VPost
+                    key={`${ index }-${ post.id }`}
+                    index={index}
+                    post={post}
+                />
+            ))}
+        </div>
+    )
+
+}

packages/example/src/views/posts/reffuse.ts

@@ -0,0 +1,5 @@
+import { Reffuse as RootReffuse } from "@/reffuse"
+import { PostsState } from "./services"
+
+
+export const Reffuse = RootReffuse.extend<PostsState.PostsState>()

packages/example/src/views/posts/services/PostsState.ts

@@ -0,0 +1,7 @@
+import { Post } from "@/domain"
+import { Chunk, Context, SubscriptionRef } from "effect"
+
+
+export class PostsState extends Context.Tag("PostsState")<PostsState, {
+    readonly posts: SubscriptionRef.SubscriptionRef<Chunk.Chunk<Post.Post>>
+}>() {}

packages/example/src/views/posts/services/index.ts

@@ -0,0 +1 @@
+export * as PostsState from "./PostsState"