82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
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>
|
|
)
|
|
}
|