Files
reffuse/packages/example/src/routes/tests.tsx
Julien Valverdé 59b7115d19
All checks were successful
Lint / lint (push) Successful in 13s
Fix
2025-05-10 05:33:14 +02:00

49 lines
1.6 KiB
TypeScript

import { R } from "@/reffuse"
import { Button, Flex, Text } from "@radix-ui/themes"
import { createFileRoute } from "@tanstack/react-router"
import { GetRandomValues, makeUuid4 } from "@typed/id"
import { Console, Effect, Option, Scope } from "effect"
import { useEffect, useState } from "react"
const makeUuid = Effect.provide(makeUuid4, GetRandomValues.CryptoRandom)
export const Route = createFileRoute("/tests")({
component: RouteComponent
})
function RouteComponent() {
const runSync = R.useRunSync()
const [uuid, setUuid] = useState(R.useMemo(() => makeUuid, []))
const generateUuid = R.useCallbackSync(() => makeUuid.pipe(
Effect.tap(v => Effect.sync(() => setUuid(v)))
), [])
const uuidStream = R.useStreamFromReactiveValues([uuid])
const [uuidStreamLatestValue, pullUuidStream] = R.usePullStream(uuidStream)
const scope = R.useScope([uuid])
useEffect(() => Effect.addFinalizer(() => Console.log("Scope cleanup!")).pipe(
Effect.andThen(Console.log("Scope changed")),
Effect.provideService(Scope.Scope, scope),
runSync,
), [scope, runSync])
return (
<Flex direction="column" justify="center" align="center" gap="2">
<Text>{uuid}</Text>
<Button onClick={generateUuid}>Generate UUID</Button>
<Text>
{Option.match(uuidStreamLatestValue, {
onSome: ([v]) => v,
onNone: () => <></>,
})}
</Text>
<Button onClick={() => runSync(pullUuidStream)}>Pull UUID</Button>
</Flex>
)
}