122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
import { Button, Flex, HStack, Text } from '@chakra-ui/react';
|
|
import { LuUser } from 'react-icons/lu';
|
|
import { MdEdit, MdGroup } from 'react-icons/md';
|
|
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
|
|
|
|
import { Covers } from '@/components/Cover';
|
|
import { EmptyEnd } from '@/components/EmptyEnd';
|
|
import { PageLayout } from '@/components/Layout/PageLayout';
|
|
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
|
import { SeriesEditPopUp } from '@/components/popup/ArtistEditPopUp';
|
|
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
|
|
import {
|
|
BASE_WRAP_SPACING
|
|
} from '@/constants/genericSpacing';
|
|
import { useSpecificSeries } from '@/service';
|
|
|
|
export const SeriesDetailPage = () => {
|
|
const { SeriesId } = useParams();
|
|
const SeriesIdInt = SeriesId ? parseInt(SeriesId, 10) : undefined;
|
|
const navigate = useNavigate();
|
|
const onSelectItem = (SeasonId: number) => {
|
|
navigate(`/Series/${SeriesIdInt}/Season/${SeasonId}`);
|
|
};
|
|
const { dataSeries } = useSpecificSeries(SeriesIdInt);
|
|
//const { SeasonIdsOfAnSeries } = useSeasonIdsOfAnSeries(SeriesIdInt);
|
|
|
|
if (!dataSeries) {
|
|
return (
|
|
<>
|
|
<TopBar title="Series detail" />
|
|
<PageLayoutInfoCenter>
|
|
Fail to load Series id: {SeriesId}
|
|
</PageLayoutInfoCenter>
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<TopBar>
|
|
<>
|
|
<Button
|
|
{...BUTTON_TOP_BAR_PROPERTY}
|
|
marginRight="auto"
|
|
onClick={() => navigate(`/Series/all`)}
|
|
>
|
|
<MdGroup height="full" />
|
|
<Text fontSize="24px" fontWeight="bold">
|
|
Series
|
|
</Text>
|
|
</Button>
|
|
|
|
<Button
|
|
{...BUTTON_TOP_BAR_PROPERTY}
|
|
onClick={() =>
|
|
navigate(`/Series/${SeriesId}/edit-Series/${SeriesId}`)
|
|
}
|
|
>
|
|
<MdEdit />
|
|
</Button>
|
|
</>
|
|
</TopBar>
|
|
<PageLayout>
|
|
<Flex
|
|
direction="row"
|
|
width="80%"
|
|
marginX="auto"
|
|
padding="10px"
|
|
gap="10px"
|
|
>
|
|
<Covers data={dataSeries?.covers} iconEmpty={<LuUser />} slideshow />
|
|
{/* <Flex direction="column" width="80%" marginRight="auto">
|
|
<Text fontSize="24px" fontWeight="bold">
|
|
{dataSeries?.name}
|
|
</Text>
|
|
{dataSeries?.description && (
|
|
<Text>Description: {dataSeries?.description}</Text>
|
|
)}
|
|
{dataSeries?.firstName && (
|
|
<Text>first name: {dataSeries?.firstName}</Text>
|
|
)}
|
|
{dataSeries?.surname && <Text>surname: {dataSeries?.surname}</Text>}
|
|
{dataSeries?.birth && <Text>birth: {dataSeries?.birth}</Text>}
|
|
</Flex> */}
|
|
</Flex>
|
|
|
|
<HStack
|
|
wrap="wrap"
|
|
gap={BASE_WRAP_SPACING}
|
|
marginX="auto"
|
|
padding="20px"
|
|
justify="center"
|
|
>
|
|
{/* {SeasonIdsOfAnSeries?.map((data) => (
|
|
<Flex
|
|
align="flex-start"
|
|
width={BASE_WRAP_WIDTH}
|
|
height={BASE_WRAP_HEIGHT}
|
|
border="1px"
|
|
borderColor="brand.900"
|
|
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
|
key={data}
|
|
padding="5px"
|
|
as="button"
|
|
_hover={{
|
|
boxShadow: 'outline-over',
|
|
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
|
}}
|
|
onClick={() => onSelectItem(data)}
|
|
>
|
|
<DisplaySeasonId id={data} key={data} />
|
|
</Flex>
|
|
))} */}
|
|
</HStack>
|
|
<EmptyEnd />
|
|
<Routes>
|
|
<Route path="edit-Series/:SeriesId" element={<SeriesEditPopUp />} />
|
|
</Routes>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|