1import { Suspense } from "react";
 2import {
 3    createFileRoute,
 4    defer,
 5    Await,
 6    useNavigate,
 7} from "@tanstack/react-router";
 8import { HostsMutationDialog } from "@marzneshin/modules/hosts";
 9import { fetchInbound } from "@marzneshin/modules/inbounds";
10import { Loading, AlertDialog, AlertDialogContent } from "@marzneshin/common/components";
11
12const HostCreate = () => {
13    const { inboundId } = Route.useParams();
14    const { inbound } = Route.useLoaderData()
15    const navigate = useNavigate({ from: "/hosts/$inboundId/create" });
16
17    return (
18        <Suspense fallback={<Loading />}>
19            <Await promise={inbound}>
20                {(inbound) => (
21                    <HostsMutationDialog
22                        entity={null}
23                        protocol={inbound.protocol}
24                        inboundId={Number(inboundId)}
25                        onClose={() => navigate({ to: "/hosts" })}
26                    />
27                )}
28            </Await>
29        </Suspense>
30    );
31}
32
33export const Route = createFileRoute('/_dashboard/hosts/$inboundId/create')({
34    loader: async ({ params }) => {
35        const inboundPromise = fetchInbound({
36            queryKey: ["inbounds", Number.parseInt(params.inboundId)]
37        });
38
39        return {
40            inbound: defer(inboundPromise)
41        }
42    },
43    errorComponent: () => (
44        <AlertDialog open={true}>
45            <AlertDialogContent>Host not found</AlertDialogContent>
46        </AlertDialog>
47    ),
48    component: HostCreate,
49});