gitscope
← marzneshin / v0.5.4 / dashboard/src/routes/_dashboard/nodes/$nodeId.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/routes/_dashboard/nodes/$nodeId.tsx · TypeScript
Blame Raw
 1import {
 2    createFileRoute,
 3    defer,
 4    Await,
 5    Outlet
 6} from "@tanstack/react-router";
 7import {
 8    fetchNode,
 9    RouterNodeContext
10} from "@marzneshin/features/nodes";
11import { Suspense } from "react";
12import {
13    AlertDialog,
14    AlertDialogContent,
15    Loading,
16} from "@marzneshin/components";
17
18const NodeProvider = () => {
19    const { node } = Route.useLoaderData()
20
21    return (
22        <Suspense fallback={<Loading />}>
23            <Await promise={node}>
24                {(node) => (
25                    <RouterNodeContext.Provider value={{ node }}>
26                        <Suspense>
27                            <Outlet />
28                        </Suspense>
29                    </RouterNodeContext.Provider>
30                )}
31            </Await>
32        </Suspense>
33    );
34};
35
36export const Route = createFileRoute('/_dashboard/nodes/$nodeId')({
37    loader: async ({ params }) => {
38        const nodePromise = fetchNode({
39            queryKey: ["nodes", Number.parseInt(params.nodeId)]
40        });
41
42        return {
43            node: defer(nodePromise)
44        }
45    },
46    component: NodeProvider,
47    errorComponent: () => (
48        <AlertDialog open={true}>
49            <AlertDialogContent>Node not found</AlertDialogContent>
50        </AlertDialog>
51    ),
52})