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