From c2bc406a5f788105d41066b468fa2c2fb5c01108 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Sat, 15 Mar 2025 06:43:47 +0100
Subject: [PATCH] Fixed query error handler

---
 packages/example/src/QueryErrorHandler.tsx | 41 +++++++---------------
 packages/example/src/main.tsx              |  3 +-
 packages/example/src/routes/__root.tsx     |  3 ++
 3 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/packages/example/src/QueryErrorHandler.tsx b/packages/example/src/QueryErrorHandler.tsx
index 844f7a4..88dc98f 100644
--- a/packages/example/src/QueryErrorHandler.tsx
+++ b/packages/example/src/QueryErrorHandler.tsx
@@ -1,7 +1,7 @@
 import { HttpClientError } from "@effect/platform"
 import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
 import { ErrorHandler } from "@reffuse/extension-query"
-import { Cause, Chunk, Context, Effect, Match, Option, Queue, Stream } from "effect"
+import { Cause, Chunk, Context, Effect, Match, Option, Stream } from "effect"
 import { useState } from "react"
 import { R } from "./reffuse"
 
@@ -14,36 +14,19 @@ export const QueryErrorHandlerLive = ErrorHandler.layer(QueryErrorHandler)
 
 
 export function VQueryErrorHandler() {
-    const queue = R.useMemo(() => Queue.unbounded<Cause.Cause<
+    const [failure, setFailure] = useState(Option.none<Cause.Cause<
         ErrorHandler.Error<Context.Tag.Service<QueryErrorHandler>>
-    >>(), [])
+    >>())
 
     R.useFork(() => QueryErrorHandler.pipe(Effect.flatMap(handler =>
-        Stream.runForEach(handler.errors, v => Queue.offer(queue, v))
-    )), [queue])
-
-    const [failure, setFailure] = useState(R.useMemo(() => Queue.poll(queue), []))
-
-    const next = R.useCallbackSync(() => Queue.poll(queue).pipe(
-        Effect.map(setFailure)
-    ), [queue])
-
-    // R.useFork(() => QueryErrorHandler.pipe(Effect.flatMap(handler =>
-    //     Stream.runForEach(handler.errors, flow(
-    //         Cause.failures,
-    //         Chunk.map(flow(Match.value,
-    //             Match.tag("RequestError", () => Effect.sync(() => {})),
-    //             Match.tag("ResponseError", () => Effect.sync(() => {})),
-    //             Match.exhaustive,
-    //         )),
-    //         Effect.all,
-    //     ))
-    // )), [])
-
+        Stream.runForEach(handler.errors, v => Effect.sync(() =>
+            setFailure(Option.some(v))
+        ))
+    )), [])
 
     return Option.match(failure, {
         onSome: v => (
-            <AlertDialog.Root>
+            <AlertDialog.Root open>
                 <AlertDialog.Content maxWidth="450px">
                     <AlertDialog.Title>Error</AlertDialog.Title>
                     <AlertDialog.Description size="2">
@@ -59,9 +42,11 @@ export function VQueryErrorHandler() {
                     </AlertDialog.Description>
 
                     <Flex gap="3" mt="4" justify="end">
-                        <Button variant="solid" color="red" onClick={next}>
-                            Ok
-                        </Button>
+                        <AlertDialog.Action>
+                            <Button variant="solid" color="red" onClick={() => setFailure(Option.none())}>
+                                Ok
+                            </Button>
+                        </AlertDialog.Action>
                     </Flex>
                 </AlertDialog.Content>
             </AlertDialog.Root>
diff --git a/packages/example/src/main.tsx b/packages/example/src/main.tsx
index b058a72..a544300 100644
--- a/packages/example/src/main.tsx
+++ b/packages/example/src/main.tsx
@@ -6,7 +6,7 @@ import { Layer } from "effect"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { ReffuseRuntime } from "reffuse"
-import { QueryErrorHandler, QueryErrorHandlerLive, VQueryErrorHandler } from "./QueryErrorHandler"
+import { QueryErrorHandler, QueryErrorHandlerLive } from "./QueryErrorHandler"
 import { GlobalContext } from "./reffuse"
 import { routeTree } from "./routeTree.gen"
 
@@ -33,7 +33,6 @@ createRoot(document.getElementById("root")!).render(
     <StrictMode>
         <ReffuseRuntime.Provider>
             <GlobalContext.Provider layer={layer}>
-                <VQueryErrorHandler />
                 <RouterProvider router={router} />
             </GlobalContext.Provider>
         </ReffuseRuntime.Provider>
diff --git a/packages/example/src/routes/__root.tsx b/packages/example/src/routes/__root.tsx
index 3253372..840de40 100644
--- a/packages/example/src/routes/__root.tsx
+++ b/packages/example/src/routes/__root.tsx
@@ -1,3 +1,4 @@
+import { VQueryErrorHandler } from "@/QueryErrorHandler"
 import { Container, Flex, Theme } from "@radix-ui/themes"
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/router-devtools"
@@ -26,6 +27,8 @@ function Root() {
             </Container>
 
             <Outlet />
+
+            <VQueryErrorHandler />
             <TanStackRouterDevtools />
         </Theme>
     )