From 18d94c77e22d96e3d455f310dc5a3af97bb2500e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Tue, 14 Jan 2025 22:11:13 +0100
Subject: [PATCH] Posts

---
 packages/example/src/routes/index.tsx         | 23 ++++++++++++++-
 packages/example/src/services/FetchData.ts    | 20 ++++++++-----
 packages/example/src/services/PostState.ts    |  7 -----
 packages/example/src/services/index.ts        |  1 -
 packages/example/src/views/post/VPost.tsx     | 29 ++++++++++++++++++-
 packages/example/src/views/post/reffuse.ts    |  6 +---
 packages/example/src/views/posts/VPosts.tsx   | 25 ++++++++++++++++
 packages/example/src/views/posts/reffuse.ts   |  5 ++++
 .../src/views/posts/services/PostsState.ts    |  7 +++++
 .../example/src/views/posts/services/index.ts |  1 +
 packages/reffuse/src/Reffuse.ts               |  4 +--
 11 files changed, 104 insertions(+), 24 deletions(-)
 delete mode 100644 packages/example/src/services/PostState.ts
 create mode 100644 packages/example/src/views/posts/VPosts.tsx
 create mode 100644 packages/example/src/views/posts/reffuse.ts
 create mode 100644 packages/example/src/views/posts/services/PostsState.ts
 create mode 100644 packages/example/src/views/posts/services/index.ts

diff --git a/packages/example/src/routes/index.tsx b/packages/example/src/routes/index.tsx
index 25b530d..cde72ca 100644
--- a/packages/example/src/routes/index.tsx
+++ b/packages/example/src/routes/index.tsx
@@ -1,4 +1,10 @@
+import { Reffuse } from "@/reffuse"
+import { FetchData } from "@/services"
+import { Reffuse as PostsReffuse } from "@/views/posts/reffuse"
+import { PostsState } from "@/views/posts/services"
+import { VPosts } from "@/views/posts/VPosts"
 import { createFileRoute } from "@tanstack/react-router"
+import { Effect, Layer, SubscriptionRef } from "effect"
 
 
 export const Route = createFileRoute("/")({
@@ -6,5 +12,20 @@ export const Route = createFileRoute("/")({
 })
 
 function Index() {
-    return <></>
+
+    const postsLayer = Reffuse.useMemo(FetchData.FetchData.pipe(
+        Effect.flatMap(({ fetchPosts }) => fetchPosts),
+        Effect.flatMap(SubscriptionRef.make),
+        Effect.map(posts => Layer.succeed(PostsState.PostsState, { posts })),
+    ))
+
+
+    return (
+        <div className="container mx-auto">
+            <PostsReffuse.Provider layer={postsLayer}>
+                <VPosts />
+            </PostsReffuse.Provider>
+        </div>
+    )
+
 }
diff --git a/packages/example/src/services/FetchData.ts b/packages/example/src/services/FetchData.ts
index b0e2462..fa8f555 100644
--- a/packages/example/src/services/FetchData.ts
+++ b/packages/example/src/services/FetchData.ts
@@ -1,18 +1,24 @@
 import { Post } from "@/domain"
-import { Context, Effect, Layer } from "effect"
+import { Chunk, Context, Effect, Layer } from "effect"
 
 
 export class FetchData extends Context.Tag("FetchData")<FetchData, {
-    readonly fetchPosts: Effect.Effect<Post.Post[]>
+    readonly fetchPosts: Effect.Effect<Chunk.Chunk<Post.Post>>
 }>() {}
 
 
 export const mockLayer = Layer.succeed(FetchData, {
-    fetchPosts: Effect.succeed([
+    fetchPosts: Effect.succeed(Chunk.make(
         Post.Post.make({
             id: "1",
-            title: "Lorem ipsum",
-            content: "Lorem ipsum",
-        })
-    ])
+            title: "Lorem ipsum dolor sit amet",
+            content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget lacus sit amet diam suscipit porttitor non at felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla risus ligula, elementum nec scelerisque eget, volutpat vel sapien. Phasellus aliquam ac neque vitae sodales. Nunc sodales congue odio. Nulla eget nisl cursus, convallis lorem at, varius lectus. Aliquam vitae mauris vel mi dignissim condimentum. Proin sed dignissim sapien, ut cursus ex. Donec eget sapien sagittis, auctor metus vitae, fringilla lacus. Donec ut elit a quam aliquet consectetur interdum eu nisl. Etiam nec convallis purus, eu venenatis nulla. Phasellus non metus id mauris tincidunt cursus. Cras varius aliquet diam eu blandit. In hac habitasse platea dictumst.",
+        }),
+
+        Post.Post.make({
+            id: "2",
+            title: "Vestibulum non bibendum ligula",
+            content: "Vestibulum non bibendum ligula. Integer pellentesque, diam ac faucibus volutpat, nulla libero porttitor nunc, ac pulvinar tortor diam id ipsum. Sed id enim at odio euismod imperdiet et ac purus. Etiam tempus ipsum semper scelerisque mollis. Integer auctor, magna et tristique tempus, nisi mi euismod est, nec finibus quam nunc nec libero. Maecenas aliquet viverra magna, vitae blandit ligula pharetra id. Vestibulum vel lacus at nibh placerat tincidunt. Sed suscipit tellus vel felis euismod, et sollicitudin neque cursus. Curabitur dapibus eros vitae ligula suscipit, at facilisis risus venenatis. Sed pharetra blandit pulvinar. Vivamus vestibulum at ligula pulvinar fringilla. Suspendisse vel mattis libero, eget vulputate massa. Vivamus vehicula, lectus id tempor maximus, erat tortor blandit purus, at scelerisque nunc urna faucibus sapien.",
+        }),
+    ))
 })
diff --git a/packages/example/src/services/PostState.ts b/packages/example/src/services/PostState.ts
deleted file mode 100644
index e14ced3..0000000
--- a/packages/example/src/services/PostState.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Post } from "@/domain"
-import { Context, SubscriptionRef } from "effect"
-
-
-export class PostState extends Context.Tag("PostState")<PostState, {
-    post: SubscriptionRef.SubscriptionRef<Post.Post>
-}>() {}
diff --git a/packages/example/src/services/index.ts b/packages/example/src/services/index.ts
index c49d4f1..d677cf1 100644
--- a/packages/example/src/services/index.ts
+++ b/packages/example/src/services/index.ts
@@ -1,2 +1 @@
 export * as FetchData from "./FetchData"
-export * as PostState from "./PostState"
diff --git a/packages/example/src/views/post/VPost.tsx b/packages/example/src/views/post/VPost.tsx
index 6f7a972..0effa47 100644
--- a/packages/example/src/views/post/VPost.tsx
+++ b/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>
+    )
 
 }
diff --git a/packages/example/src/views/post/reffuse.ts b/packages/example/src/views/post/reffuse.ts
index 947aad7..25017fe 100644
--- a/packages/example/src/views/post/reffuse.ts
+++ b/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"
diff --git a/packages/example/src/views/posts/VPosts.tsx b/packages/example/src/views/posts/VPosts.tsx
new file mode 100644
index 0000000..23fedcb
--- /dev/null
+++ b/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>
+    )
+
+}
diff --git a/packages/example/src/views/posts/reffuse.ts b/packages/example/src/views/posts/reffuse.ts
new file mode 100644
index 0000000..99ce681
--- /dev/null
+++ b/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>()
diff --git a/packages/example/src/views/posts/services/PostsState.ts b/packages/example/src/views/posts/services/PostsState.ts
new file mode 100644
index 0000000..74d3aca
--- /dev/null
+++ b/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>>
+}>() {}
diff --git a/packages/example/src/views/posts/services/index.ts b/packages/example/src/views/posts/services/index.ts
new file mode 100644
index 0000000..e8a8ec6
--- /dev/null
+++ b/packages/example/src/views/posts/services/index.ts
@@ -0,0 +1 @@
+export * as PostsState from "./PostsState"
diff --git a/packages/reffuse/src/Reffuse.ts b/packages/reffuse/src/Reffuse.ts
index a638b6b..801f7bb 100644
--- a/packages/reffuse/src/Reffuse.ts
+++ b/packages/reffuse/src/Reffuse.ts
@@ -79,14 +79,14 @@ export class Reffuse<
 
     useMemo<A, E>(
         effect: Effect.Effect<A, E, RuntimeR | ContextR>,
-        deps: React.DependencyList,
+        deps?: React.DependencyList,
         options?: RenderOptions,
     ): A {
         const runSync = this.useRunSync()
 
         return React.useMemo(() => runSync(effect), [
             ...options?.doNotReExecuteOnRuntimeOrContextChange ? [] : [runSync],
-            ...deps,
+            ...(deps ?? []),
         ])
     }