From 4b67552a14f0cc63db8b50e92d7881a87d3d92d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Valverd=C3=A9?= <julien.valverde@mailo.com>
Date: Tue, 25 Nov 2025 16:11:03 +0100
Subject: [PATCH] Tests

---
 packages/example/src/routes/query.tsx | 44 ++++++++++++++++-----------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/example/src/routes/query.tsx b/packages/example/src/routes/query.tsx
index 1ae4659..eab443b 100644
--- a/packages/example/src/routes/query.tsx
+++ b/packages/example/src/routes/query.tsx
@@ -1,8 +1,8 @@
 import { HttpClient, type HttpClientError } from "@effect/platform"
-import { Container, Heading, Slider, Text } from "@radix-ui/themes"
+import { Button, Container, Flex, Heading, Slider, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import { Array, Cause, Chunk, Console, Effect, flow, Match, Option, Schema, Stream } from "effect"
-import { Component, ErrorObserver, Query, Subscribable, SubscriptionRef } from "effect-fc"
+import { Component, ErrorObserver, Query, Result, Subscribable, SubscriptionRef } from "effect-fc"
 import { runtime } from "@/runtime"
 
 
@@ -14,6 +14,8 @@ const Post = Schema.Struct({
 })
 
 const ResultView = Component.makeUntraced("Result")(function*() {
+    const runPromise = yield* Component.useRunPromise()
+
     const [idRef, query] = yield* Component.useOnMount(() => Effect.gen(function*() {
         const idRef = yield* SubscriptionRef.make(1)
         const key = Stream.zipLatest(Stream.make("posts" as const), idRef.changes)
@@ -51,22 +53,30 @@ const ResultView = Component.makeUntraced("Result")(function*() {
 
     return (
         <Container>
-            <Slider
-                value={[id]}
-                onValueChange={flow(Array.head, Option.getOrThrow, setId)}
-            />
+            <Flex direction="column" align="center" gap="2">
+                <Slider
+                    value={[id]}
+                    onValueChange={flow(Array.head, Option.getOrThrow, setId)}
+                />
 
-            {Match.value(result).pipe(
-                Match.tag("Running", () => <Text>Loading...</Text>),
-                Match.tag("Success", result => <>
-                    <Heading>{result.value.title}</Heading>
-                    <Text>{result.value.body}</Text>
-                </>),
-                Match.tag("Failure", result =>
-                    <Text>An error has occured: {result.cause.toString()}</Text>
-                ),
-                Match.orElse(() => <></>),
-            )}
+                {Match.value(result).pipe(
+                    Match.tag("Running", () => <Text>Loading...</Text>),
+                    Match.tag("Success", result => <>
+                        <Heading>{result.value.title}</Heading>
+                        <Text>{result.value.body}</Text>
+                        {Result.isRefreshing(result) && <Text>Refreshing...</Text>}
+                    </>),
+                    Match.tag("Failure", result =>
+                        <Text>An error has occured: {result.cause.toString()}</Text>
+                    ),
+                    Match.orElse(() => <></>),
+                )}
+
+                <Flex direction="row" justify="center" align="center" gap="1">
+                    <Button onClick={() => runPromise(query.refresh)}>Refresh</Button>
+                    <Button onClick={() => runPromise(query.refetch)}>Refetch</Button>
+                </Flex>
+            </Flex>
         </Container>
     )
 })