usePromise

packages/example/src/routes/promise.tsx

@@ -2,44 +2,36 @@ import { R } from "@/reffuse"
 import { HttpClient } from "@effect/platform"
 import { Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect } from "effect"
-import { Suspense, use, useEffect, useMemo } from "react"
+import { Effect, Schema } from "effect"
+import { Suspense, use } from "react"
 
 
 export const Route = createFileRoute("/promise")({
     component: RouteComponent
 })
 
+
+const Result = Schema.Tuple(Schema.String)
+type Result = typeof Result.Type
+
 function RouteComponent() {
+    const promise = R.usePromise(HttpClient.HttpClient.pipe(
+        Effect.flatMap(client => client.get("https://www.uuidtools.com/api/generate/v4")),
+        HttpClient.withTracerPropagation(false),
+        Effect.flatMap(res => res.json),
+        Effect.flatMap(Schema.decodeUnknown(Result)),
+
+        Effect.scoped,
+    ))
+
     return (
         <Suspense fallback={<Text>Loading...</Text>}>
-            <AsyncComponent />
+            <AsyncComponent promise={promise} />
         </Suspense>
     )
 }
 
-function AsyncComponent() {
-
-    // const runPromise = R.useRunPromise()
-
-    // const promise = useMemo(() => HttpClient.HttpClient.pipe(
-    //     Effect.flatMap(client => client.get("https://www.uuidtools.com/api/generate/v4")),
-    //     HttpClient.withTracerPropagation(false),
-    //     Effect.flatMap(res => res.json),
-    //     Effect.tap(Console.log),
-
-    //     Effect.scoped,
-    //     runPromise,
-    // ), [runPromise])
-
-    const promise = useMemo(() => new Promise<string>((resolve => {
-        setTimeout(() => { resolve("prout") }, 500)
-    })), [])
-
-    console.log("React.use invoked with:", promise);
-    const value = use(promise)
-
-
-    return <div>Hello "/tests"!</div>
-
+function AsyncComponent({ promise }: { readonly promise: Promise<Result> }) {
+    const [uuid] = use(promise)
+    return <Text>{uuid}</Text>
 }