diff --git a/packages/example-next/src/routeTree.gen.ts b/packages/example-next/src/routeTree.gen.ts index 5904b93..b70ab97 100644 --- a/packages/example-next/src/routeTree.gen.ts +++ b/packages/example-next/src/routeTree.gen.ts @@ -15,7 +15,6 @@ import { Route as BlankRouteImport } from './routes/blank' import { Route as FormRouteImport } from './routes/form' import { Route as LensformRouteImport } from './routes/lensform' import { Route as QueryRouteImport } from './routes/query' -import { Route as ResultRouteImport } from './routes/result' const IndexRoute = IndexRouteImport.update({ id: '/', @@ -47,11 +46,6 @@ const QueryRoute = QueryRouteImport.update({ path: '/query', getParentRoute: () => rootRouteImport, } as any) -const ResultRoute = ResultRouteImport.update({ - id: '/result', - path: '/result', - getParentRoute: () => rootRouteImport, -} as any) export interface FileRoutesByFullPath { '/': typeof IndexRoute @@ -60,7 +54,6 @@ export interface FileRoutesByFullPath { '/form': typeof FormRoute '/lensform': typeof LensformRoute '/query': typeof QueryRoute - '/result': typeof ResultRoute } export interface FileRoutesByTo { '/': typeof IndexRoute @@ -69,7 +62,6 @@ export interface FileRoutesByTo { '/form': typeof FormRoute '/lensform': typeof LensformRoute '/query': typeof QueryRoute - '/result': typeof ResultRoute } export interface FileRoutesById { __root__: typeof rootRouteImport @@ -79,23 +71,13 @@ export interface FileRoutesById { '/form': typeof FormRoute '/lensform': typeof LensformRoute '/query': typeof QueryRoute - '/result': typeof ResultRoute } export interface FileRouteTypes { fileRoutesByFullPath: FileRoutesByFullPath - fullPaths: - '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query' | '/result' + fullPaths: '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query' fileRoutesByTo: FileRoutesByTo - to: '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query' | '/result' - id: - | '__root__' - | '/' - | '/async' - | '/blank' - | '/form' - | '/lensform' - | '/query' - | '/result' + to: '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query' + id: '__root__' | '/' | '/async' | '/blank' | '/form' | '/lensform' | '/query' fileRoutesById: FileRoutesById } export interface RootRouteChildren { @@ -105,7 +87,6 @@ export interface RootRouteChildren { FormRoute: typeof FormRoute LensformRoute: typeof LensformRoute QueryRoute: typeof QueryRoute - ResultRoute: typeof ResultRoute } declare module '@tanstack/react-router' { @@ -152,13 +133,6 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof QueryRouteImport parentRoute: typeof rootRouteImport } - '/result': { - id: '/result' - path: '/result' - fullPath: '/result' - preLoaderRoute: typeof ResultRouteImport - parentRoute: typeof rootRouteImport - } } } @@ -169,7 +143,6 @@ const rootRouteChildren: RootRouteChildren = { FormRoute: FormRoute, LensformRoute: LensformRoute, QueryRoute: QueryRoute, - ResultRoute: ResultRoute, } export const routeTree = rootRouteImport ._addFileChildren(rootRouteChildren) diff --git a/packages/example-next/src/routes/__root.tsx b/packages/example-next/src/routes/__root.tsx index 783b032..aba3a8d 100644 --- a/packages/example-next/src/routes/__root.tsx +++ b/packages/example-next/src/routes/__root.tsx @@ -19,7 +19,6 @@ function Root() { Blank Async Query - Result Form LensForm diff --git a/packages/example-next/src/routes/async.tsx b/packages/example-next/src/routes/async.tsx index 44c41a9..45c12c2 100644 --- a/packages/example-next/src/routes/async.tsx +++ b/packages/example-next/src/routes/async.tsx @@ -1,11 +1,19 @@ import { Container, Flex, Heading, Slider, Text, TextField } from "@radix-ui/themes" import { createFileRoute } from "@tanstack/react-router" +import { Console, Effect } from "effect" import { Async, Component, Memoized } from "effect-fc-next" import * as React from "react" -import { fetchPost } from "@/post" import { runtime } from "@/runtime" +const fetchPost = (id: number) => Effect.sleep("500 millis").pipe( + Effect.as({ + title: `Post ${id}`, + body: `This is the content of post ${id}.`, + }), +) + + interface AsyncFetchPostViewProps { readonly id: number } @@ -13,6 +21,11 @@ interface AsyncFetchPostViewProps { const AsyncFetchPostView = Component.make("AsyncFetchPostView")(function*( props: AsyncFetchPostViewProps, ) { + yield* Component.useOnMount(() => Effect.gen(function*() { + yield* Effect.addFinalizer(() => Console.log("AsyncFetchPostView unmounted")) + yield* Console.log("AsyncFetchPostView mounted") + })) + const post = yield* Component.useOnChange( () => fetchPost(props.id), [props.id], @@ -51,7 +64,7 @@ const AsyncRouteComponent = Component.make("AsyncRouteView")(function*() { onValueChange={([value]) => setId(value ?? 1)} /> - Loading post...} /> + ) diff --git a/packages/example-next/src/routes/result.tsx b/packages/example-next/src/routes/result.tsx deleted file mode 100644 index 3ca96cb..0000000 --- a/packages/example-next/src/routes/result.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Button, Container, Flex, Heading, Text } from "@radix-ui/themes" -import { createFileRoute } from "@tanstack/react-router" -import { AsyncResult } from "effect/unstable/reactivity" -import { Component, Mutation, View } from "effect-fc-next" -import { fetchPost, type Post } from "@/post" -import { runtime } from "@/runtime" - - -const PostResultView = (props: { readonly result: AsyncResult.AsyncResult }) => - AsyncResult.match(props.result, { - onInitial: () => Ready to load., - onFailure: () => Request failed., - onSuccess: result => ( - <> - {result.value.title} - {result.value.body} - - ), - }) - -const ResultRouteComponent = Component.make("ResultRouteView")(function*() { - const mutation = yield* Component.useOnMount(() => Mutation.make({ - f: (_: undefined) => fetchPost(1), - })) - const [result] = yield* View.useAll([mutation.state]) - const runPromise = yield* Component.useRunPromise() - - return ( - - - - - - - - ) -}).pipe( - Component.withContext(runtime.context), -) - -export const Route = createFileRoute("/result")({ - component: ResultRouteComponent, -})