From 24853561f186b6f51f17ce8ea23bcd54b3938c85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Thu, 1 May 2025 17:10:45 +0200
Subject: [PATCH] Working useScope

---
 packages/example/src/routes/tests.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/example/src/routes/tests.tsx b/packages/example/src/routes/tests.tsx
index be24b3e..9b859ea 100644
--- a/packages/example/src/routes/tests.tsx
+++ b/packages/example/src/routes/tests.tsx
@@ -1,8 +1,12 @@
 import { R } from "@/reffuse"
-import { Flex } from "@radix-ui/themes"
+import { Button, Flex } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
+import { GetRandomValues, makeUuid4 } from "@typed/id"
 import { Console, Effect, Scope } from "effect"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
+
+
+const makeUuid = Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)
 
 
 export const Route = createFileRoute("/tests")({
@@ -11,16 +15,23 @@ export const Route = createFileRoute("/tests")({
 
 function RouteComponent() {
     const runSync = R.useRunSync()
-    const componentScope = R.useScope()
 
-    useEffect(() => Effect.addFinalizer(() => Console.log("Component scope cleanup!")).pipe(
-        Effect.andThen(Console.log("Component mounted")),
-        Effect.provideService(Scope.Scope, componentScope),
+    const [uuid, setUuid] = useState(R.useMemo(() => makeUuid, []))
+    const generateUuid = R.useCallbackSync(() => makeUuid.pipe(
+        Effect.tap(v => Effect.sync(() => setUuid(v)))
+    ), [])
+
+    const scope = R.useScope([uuid])
+
+    useEffect(() => Effect.addFinalizer(() => Console.log("Scope cleanup!")).pipe(
+        Effect.andThen(Console.log("Scope changed")),
+        Effect.provideService(Scope.Scope, scope),
         runSync,
-    ), [componentScope, runSync])
+    ), [scope, runSync])
 
     return (
         <Flex direction="row" justify="center" align="center" gap="2">
+            <Button onClick={generateUuid}>Generate UUID</Button>
         </Flex>
     )
 }