0.1.4 (#6)

Co-authored-by: Julien Valverdé <julien.valverde@mailo.com>
Reviewed-on: https://gitea:3000/Thilawyn/reffuse/pulls/6

packages/example/src/routes/query/usemutation.tsx

@@ -0,0 +1,81 @@
+import { R } from "@/reffuse"
+import { HttpClient } from "@effect/platform"
+import { Button, Container, Flex, Slider, Text } from "@radix-ui/themes"
+import { QueryProgress } from "@reffuse/extension-query"
+import { createFileRoute } from "@tanstack/react-router"
+import * as AsyncData from "@typed/async-data"
+import { Array, Console, Effect, flow, Option, Schema, Stream } from "effect"
+import { useState } from "react"
+
+
+export const Route = createFileRoute("/query/usemutation")({
+    component: RouteComponent
+})
+
+
+const Result = Schema.Array(Schema.String)
+
+function RouteComponent() {
+    const runFork = R.useRunFork()
+
+    const [count, setCount] = useState(1)
+
+    const mutation = R.useMutation({
+        mutation: ([count]: readonly [count: number]) => Console.log(`Querying ${ count } IDs...`).pipe(
+            Effect.andThen(QueryProgress.QueryProgress.update(() =>
+                AsyncData.Progress.make({ loaded: 0, total: Option.some(100) })
+            )),
+            Effect.andThen(Effect.sleep("500 millis")),
+            Effect.tap(() => QueryProgress.QueryProgress.update(() =>
+                AsyncData.Progress.make({ loaded: 50, total: Option.some(100) })
+            )),
+            Effect.andThen(HttpClient.get(`https://www.uuidtools.com/api/generate/v4/count/${ count }`)),
+            HttpClient.withTracerPropagation(false),
+            Effect.flatMap(res => res.json),
+            Effect.flatMap(Schema.decodeUnknown(Result)),
+            Effect.scoped,
+        )
+    })
+
+    const [state] = R.useRefState(mutation.state)
+
+
+    return (
+        <Container>
+            <Flex direction="column" align="center" gap="2">
+                <Slider
+                    min={1}
+                    max={100}
+                    value={[count]}
+                    onValueChange={flow(
+                        Array.head,
+                        Option.getOrThrow,
+                        setCount,
+                    )}
+                />
+
+                <Text>
+                    {AsyncData.match(state, {
+                        NoData: () => "No data yet",
+                        Loading: progress =>
+                            `Loading...
+                            ${ Option.match(progress, {
+                                onSome: ({ loaded, total }) => ` (${ loaded }/${ Option.getOrElse(total, () => "unknown") })`,
+                                onNone: () => "",
+                            }) }`,
+                        Success: value => `Value: ${ value }`,
+                        Failure: cause => `Error: ${ cause }`,
+                    })}
+                </Text>
+
+                <Button onClick={() => mutation.forkMutate(count).pipe(
+                    Effect.flatMap(([, state]) => Stream.runForEach(state, Console.log)),
+                    Effect.andThen(Console.log("Mutation done.")),
+                    runFork,
+                )}>
+                    Get
+                </Button>
+            </Flex>
+        </Container>
+    )
+}

packages/example/src/routes/query/usequery.tsx

@@ -3,7 +3,7 @@ import { HttpClient } from "@effect/platform"
 import { Button, Container, Flex, Slider, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import * as AsyncData from "@typed/async-data"
-import { Array, Console, Effect, flow, Option, Schema } from "effect"
+import { Array, Console, Effect, flow, Option, Schema, Stream } from "effect"
 import { useState } from "react"
 
 
@@ -15,7 +15,7 @@ export const Route = createFileRoute("/query/usequery")({
 const Result = Schema.Array(Schema.String)
 
 function RouteComponent() {
-    const runSync = R.useRunSync()
+    const runFork = R.useRunFork()
 
     const [count, setCount] = useState(1)
 
@@ -59,7 +59,15 @@ function RouteComponent() {
                     })}
                 </Text>
 
-                <Button onClick={() => runSync(query.refresh)}>Refresh</Button>
+                <Button
+                    onClick={() => query.forkRefresh.pipe(
+                        Effect.flatMap(([, state]) => Stream.runForEach(state, Console.log)),
+                        Effect.andThen(Console.log("Refresh finished or stopped")),
+                        runFork,
+                    )}
+                >
+                    Refresh
+                </Button>
             </Flex>
         </Container>
     )