1import {
 2    createFileRoute,
 3    Outlet,
 4} from "@tanstack/react-router";
 5import { useSuspenseQuery } from "@tanstack/react-query";
 6import { queryClient } from "@marzneshin/common/utils";
 7import {
 8    RouterUserContext,
 9    userQueryOptions,
10} from "@marzneshin/modules/users";
11import { Suspense, useMemo } from "react";
12import {
13    AlertDialog,
14    AlertDialogContent,
15} from "@marzneshin/common/components";
16
17const UserProvider = () => {
18    const { username } = Route.useLoaderData()
19    const { data: user, isPending } = useSuspenseQuery(userQueryOptions({ username }))
20    const value = useMemo(() => ({ user, isPending }), [user, isPending])
21    return (
22        <RouterUserContext.Provider value={value}>
23            <Suspense>
24                <Outlet />
25            </Suspense>
26        </RouterUserContext.Provider>
27    )
28}
29
30export const Route = createFileRoute('/_dashboard/users/$userId')({
31    loader: async ({ params }) => {
32        queryClient.ensureQueryData(userQueryOptions({ username: params.userId }))
33        return { username: params.userId };
34    },
35    errorComponent: () => (
36        <AlertDialog open={true}>
37            <AlertDialogContent>User not found</AlertDialogContent>
38        </AlertDialog>
39    ),
40    component: UserProvider,
41})