138 lines
4.4 KiB
TypeScript
138 lines
4.4 KiB
TypeScript
import type { GetServerSideProps } from "next";
|
|
import Head from "next/head";
|
|
import { AreaRiservataLayout } from "~/components/Layout";
|
|
import { LoadingPage } from "~/components/loading";
|
|
import { Status500 } from "~/components/status-page";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
|
|
import { UserAvatar } from "~/components/user_avatar";
|
|
import { ChangePasswordForm } from "~/forms/FormChangePassword";
|
|
import { ProfileFormAccount } from "~/forms/FormProfilo_Account";
|
|
import { ProfileFormAnagrafica } from "~/forms/FormProfilo_Anagrafica";
|
|
import type { NextPageWithLayout } from "~/pages/_app";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import { useEnforcedSession } from "~/providers/SessionProvider";
|
|
import { TrpcAuthedFetchingIstance } from "~/server/utils/ssgHelper";
|
|
import { api } from "~/utils/api";
|
|
|
|
const Dashboard: NextPageWithLayout = () => {
|
|
const { t } = useTranslation();
|
|
const { data: userData, isLoading } = api.users.getClientProfilo.useQuery({
|
|
id: undefined,
|
|
});
|
|
const session = useEnforcedSession();
|
|
if (isLoading) return <LoadingPage />;
|
|
if (!userData) return <Status500 />;
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{t.heads.area_riservata_titolo}</title>
|
|
<meta content={t.heads.area_riservata_description} name="description" />
|
|
</Head>
|
|
|
|
<div className="mx-auto w-full max-w-5xl grow p-4">
|
|
<div className="flex p-1 py-2">
|
|
<UserAvatar
|
|
userId={session.user.id}
|
|
username={session.user.username}
|
|
/>
|
|
|
|
<div className="flex flex-col items-start justify-center pl-4">
|
|
<h1 className="font-bold text-2xl text-primary">Profilo Utente</h1>
|
|
<p className="text-muted-foreground text-sm">
|
|
Gestisci le tue informazioni personali e le preferenze di account.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4 pt-4">
|
|
<div className="flex flex-col-reverse gap-4 sm:flex-row">
|
|
<div className="w-full pb-10">
|
|
<Tabs className="w-full" defaultValue="account">
|
|
<TabsList className="mb-2">
|
|
<TabsTrigger value="account">Account</TabsTrigger>
|
|
<TabsTrigger value="anagrafica">Anagrafica</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent className="flex flex-col gap-8" value="account">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dati Account</CardTitle>
|
|
<CardDescription className="sr-only">
|
|
Card Description
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ProfileFormAccount
|
|
cognome={userData.cognome}
|
|
email={userData.email}
|
|
id={userData.id}
|
|
nome={userData.nome}
|
|
telefono={userData.telefono}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Cambia Password</CardTitle>
|
|
<CardDescription className="sr-only">
|
|
Card Description
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChangePasswordForm />
|
|
</CardContent>
|
|
</Card>
|
|
<div className="flex flex-col gap-2 p-2">
|
|
<h4 className="font-medium">Ti sei registrato il:</h4>
|
|
<p>{userData.created_at?.toLocaleString()}</p>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent className="h-full space-y-6" value="anagrafica">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dati Anagrafici</CardTitle>
|
|
<CardDescription className="sr-only">
|
|
Card Description
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ProfileFormAnagrafica userData={userData} />
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
export default Dashboard;
|
|
|
|
export const getServerSideProps = (async (context) => {
|
|
const access_token = context.req.cookies.access_token;
|
|
|
|
const helpers = await TrpcAuthedFetchingIstance({ access_token });
|
|
if (helpers) {
|
|
await helpers.trpc.users.getClientProfilo.prefetch({ id: undefined });
|
|
return {
|
|
props: {
|
|
trpcState: helpers.trpc.dehydrate(),
|
|
},
|
|
};
|
|
}
|
|
return {
|
|
props: {},
|
|
};
|
|
}) satisfies GetServerSideProps;
|
|
|
|
Dashboard.getLayout = function getLayout(page) {
|
|
return <AreaRiservataLayout>{page}</AreaRiservataLayout>;
|
|
};
|