feat: add ProfilePage
This commit is contained in:
parent
57b62c335a
commit
a75881c877
52
src/pages/ProfilePage.tsx
Normal file
52
src/pages/ProfilePage.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { lazy } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Accordion, AccordionItem, AccordionPanel, Box, Stack, Table, Tbody, Td, Tr } from "@chakra-ui/react";
|
||||
|
||||
import { useProfileQuery, UserRole } from "../app/services/user";
|
||||
|
||||
const SubmissionTable = lazy(() => import("../components/SubmissionTable"));
|
||||
const TitleItem = lazy(() => import("../components/AccordionTitleItem"));
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { id } = useParams();
|
||||
const uid = Number(id) || 0;
|
||||
const { data: profile } = useProfileQuery(uid);
|
||||
const roleName = Object.entries(UserRole).filter(([, v]) => v === profile?.body.role);
|
||||
|
||||
const userInfoMenu = (
|
||||
<Accordion defaultIndex={[0]}>
|
||||
<AccordionItem>
|
||||
<TitleItem word="Profile" />
|
||||
<AccordionPanel>
|
||||
<Table variant="striped" size="sm">
|
||||
<Tbody>
|
||||
<Tr>
|
||||
<Td>Nickname</Td>
|
||||
<Td>{profile?.body.nick_name}</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td>Joined at</Td>
|
||||
<Td>{new Date(profile?.body.meta.CreatedAt || "").toLocaleString()}</Td>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<Td>Role</Td>
|
||||
<Td>{(roleName.length > 0 && roleName[0][0]) || "N/A"}</Td>
|
||||
</Tr>
|
||||
</Tbody>
|
||||
</Table>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack direction={{ base: "column", md: "row" }}>
|
||||
<Box w="100%">
|
||||
<SubmissionTable uid={uid} />
|
||||
</Box>
|
||||
<Box maxW="480px">{userInfoMenu}</Box>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
@ -13,6 +13,7 @@ const ProblemDetailPage = lazy(() => import("./pages/ProblemDetailPage"));
|
||||
const SubmitPage = lazy(() => import("./pages/SubmitPage"));
|
||||
const SubmissionListPage = lazy(() => import("./pages/SubmissionListPage"));
|
||||
const StatusPage = lazy(() => import("./pages/StatusPage"));
|
||||
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
|
||||
|
||||
export const router: RouteObject[] = [
|
||||
{
|
||||
@ -68,6 +69,22 @@ export const router: RouteObject[] = [
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "profile",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<ProfilePage />
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "profile/:id",
|
||||
element: (
|
||||
<RequireAuth>
|
||||
<ProfilePage />
|
||||
</RequireAuth>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user