1import {
 2    createFileRoute,
 3    defer,
 4    Await,
 5    Outlet,
 6} from "@tanstack/react-router";
 7import {
 8    RouterHostContext,
 9    fetchHost,
10} from "@marzneshin/modules/hosts";
11import { Suspense } from "react";
12import {
13    AlertDialog,
14    AlertDialogContent,
15    AlertDialogTitle,
16    Loading
17} from "@marzneshin/common/components";
18
19const HostProvider = () => {
20    const { host } = Route.useLoaderData()
21    return (
22        <Suspense fallback={<Loading />}>
23            <Await promise={host}>
24                {(host) => (
25                    <RouterHostContext.Provider value={{ host }}>
26                        <Suspense>
27                            <Outlet />
28                        </Suspense>
29                    </RouterHostContext.Provider>
30                )}
31            </Await>
32        </Suspense>
33    )
34}
35
36export const Route = createFileRoute('/_dashboard/hosts/$hostId')({
37    loader: async ({ params }) => {
38        const hostPromise = fetchHost({
39            queryKey: ["hosts", Number.parseInt(params.hostId)]
40        });
41
42        return {
43            host: defer(hostPromise)
44        }
45    },
46    errorComponent: () => (
47        <AlertDialog open={true}>
48            <AlertDialogContent>
49                <AlertDialogTitle>
50                    Host not found
51                </AlertDialogTitle>
52            </AlertDialogContent>
53        </AlertDialog>
54    ),
55    component: HostProvider,
56})