121 lines
4.0 KiB
TypeScript
121 lines
4.0 KiB
TypeScript
import { Button, Flex, Text, HStack } 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 { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
|
|
import { DisplayAlbumId } from '@/components/album/DisplayAlbumId';
|
|
import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp';
|
|
import { useSpecificArtist } from '@/service/Artist';
|
|
import { useAlbumIdsOfAnArtist } from '@/service/Track';
|
|
import { useThemeMode } from '@/utils/theme-tools';
|
|
import { BASE_WRAP_HEIGHT, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
|
|
|
|
export const ArtistDetailPage = () => {
|
|
const { artistId } = useParams();
|
|
const artistIdInt = artistId ? parseInt(artistId, 10) : undefined;
|
|
const { mode } = useThemeMode();
|
|
const navigate = useNavigate();
|
|
const onSelectItem = (albumId: number) => {
|
|
navigate(`/artist/${artistIdInt}/album/${albumId}`);
|
|
};
|
|
const { dataArtist } = useSpecificArtist(artistIdInt);
|
|
const { albumIdsOfAnArtist } = useAlbumIdsOfAnArtist(artistIdInt);
|
|
|
|
if (!dataArtist) {
|
|
return (
|
|
<>
|
|
<TopBar title="Artist detail" />
|
|
<PageLayoutInfoCenter>
|
|
Fail to load artist id: {artistId}
|
|
</PageLayoutInfoCenter>
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<TopBar>
|
|
<>
|
|
<Button
|
|
{...BUTTON_TOP_BAR_PROPERTY}
|
|
marginRight="auto"
|
|
onClick={() => navigate(`/artist/all`)}
|
|
>
|
|
<MdGroup height="full" />
|
|
<Text fontSize="24px" fontWeight="bold">
|
|
Artists
|
|
</Text>
|
|
</Button>
|
|
|
|
<Button
|
|
{...BUTTON_TOP_BAR_PROPERTY}
|
|
onClick={() =>
|
|
navigate(`/artist/${artistId}/edit-artist/${artistId}`)
|
|
}
|
|
>
|
|
<MdEdit />
|
|
</Button>
|
|
</>
|
|
</TopBar>
|
|
<PageLayout>
|
|
<Flex
|
|
direction="row"
|
|
width="80%"
|
|
marginX="auto"
|
|
padding="10px"
|
|
gap="10px"
|
|
>
|
|
<Covers
|
|
data={dataArtist?.covers}
|
|
// TODO: iconEmpty={LuUser}
|
|
slideshow
|
|
/>
|
|
<Flex direction="column" width="80%" marginRight="auto">
|
|
<Text fontSize="24px" fontWeight="bold">
|
|
{dataArtist?.name}
|
|
</Text>
|
|
{dataArtist?.description && (
|
|
<Text>Description: {dataArtist?.description}</Text>
|
|
)}
|
|
{dataArtist?.firstName && (
|
|
<Text>first name: {dataArtist?.firstName}</Text>
|
|
)}
|
|
{dataArtist?.surname && <Text>surname: {dataArtist?.surname}</Text>}
|
|
{dataArtist?.birth && <Text>birth: {dataArtist?.birth}</Text>}
|
|
</Flex>
|
|
</Flex>
|
|
|
|
<HStack wrap="wrap" /*spacing={BASE_WRAP_SPACING}*/ marginX="auto" padding="20px" justify="center">
|
|
{albumIdsOfAnArtist?.map((data) => (
|
|
<Flex align="flex-start"
|
|
width={BASE_WRAP_WIDTH}
|
|
height={BASE_WRAP_HEIGHT}
|
|
border="1px"
|
|
borderColor="brand.900"
|
|
backgroundColor={mode('#FFFFFF88', '#00000088')}
|
|
key={data}
|
|
padding="5px"
|
|
as="button"
|
|
_hover={{
|
|
boxShadow: 'outline-over',
|
|
bgColor: mode('#FFFFFFF7', '#000000F7'),
|
|
}}
|
|
onClick={() => onSelectItem(data)}
|
|
>
|
|
<DisplayAlbumId id={data} key={data} />
|
|
</Flex>
|
|
))}
|
|
</HStack>
|
|
<EmptyEnd />
|
|
<Routes>
|
|
<Route path="edit-artist/:artistId" element={<ArtistEditPopUp />} />
|
|
</Routes>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|