Fixed query error handler

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>