142 lines
4.5 KiB
TypeScript
142 lines
4.5 KiB
TypeScript
|
|
import { MdEdit } 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 { GenderEditPopUp } from '@/components/popup/GenderEditPopUp';
|
|
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
|
|
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
|
|
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
|
import { useSpecificGender } from '@/service/Gender';
|
|
import { useTracksOfAGender } from '@/service/Track';
|
|
//import { useTracksOfAGender } from '@/service/Track';
|
|
import { useColorThemeValue } from '@/theme/ThemeContext';
|
|
import { Button, Flex, Text } from '@/ui';
|
|
|
|
export const GenderDetailPage = () => {
|
|
const { genderId } = useParams();
|
|
const genderIdInt = genderId ? parseInt(genderId, 10) : undefined;
|
|
const { playInList } = useActivePlaylistService();
|
|
const { dataGender } = useSpecificGender(genderIdInt);
|
|
const { tracksOnAGender } = useTracksOfAGender(genderIdInt);
|
|
const navigate = useNavigate();
|
|
const onSelectItem = (trackId: number) => {
|
|
//navigate(`/artist/${artistIdInt}/gender/${genderId}`);
|
|
let currentPlay = 0;
|
|
const listTrackId: number[] = [];
|
|
if (!tracksOnAGender) {
|
|
console.log('Fail to get gender...');
|
|
return;
|
|
}
|
|
for (let iii = 0; iii < tracksOnAGender.length; iii++) {
|
|
listTrackId.push(tracksOnAGender[iii].id);
|
|
if (tracksOnAGender[iii].id === trackId) {
|
|
currentPlay = iii;
|
|
}
|
|
}
|
|
playInList(currentPlay, listTrackId);
|
|
};
|
|
|
|
console.log(`dataGender = ${JSON.stringify(dataGender, null, 2)}`);
|
|
if (!dataGender) {
|
|
return (
|
|
<>
|
|
<TopBar title="Gender detail" />
|
|
<PageLayoutInfoCenter>
|
|
Fail to load artist id: {genderId}
|
|
</PageLayoutInfoCenter>
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<TopBar title="Gender detail">
|
|
<Button
|
|
{...BUTTON_TOP_BAR_PROPERTY}
|
|
onClick={() =>
|
|
navigate(`/gender/${genderId}/edit-gender/${genderId}`)
|
|
}
|
|
>
|
|
<MdEdit />
|
|
</Button>
|
|
</TopBar>
|
|
<PageLayout>
|
|
<Flex
|
|
direction="row"
|
|
gap="10px"
|
|
style={{
|
|
width: "80%",
|
|
margin: "0 auto",
|
|
padding: "10px",
|
|
}}
|
|
>
|
|
<Covers
|
|
data={dataGender?.covers}
|
|
// TODO: iconEmpty={LuDisc3}
|
|
slideshow
|
|
/>
|
|
<Flex direction="column" style={{ width: "80%", marginRight: "auto" }}>
|
|
<Text fontSize="24px" fontWeight="bold">
|
|
{dataGender?.name}
|
|
</Text>
|
|
{dataGender?.description && (
|
|
<Text>Description: {dataGender?.description}</Text>
|
|
)}
|
|
</Flex>
|
|
</Flex>
|
|
|
|
<Flex
|
|
direction="column"
|
|
gap="20px"
|
|
style={{
|
|
margin: "0 auto",
|
|
padding: "20px",
|
|
width: "80%",
|
|
}}
|
|
>
|
|
{tracksOnAGender?.map((data) => (
|
|
<Flex
|
|
key={data.id}
|
|
style={{
|
|
minWidth: "100%",
|
|
//height="60px",
|
|
border: "1px",
|
|
borderColor: "brand.900",
|
|
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
|
padding: "5px",
|
|
// _hover: {
|
|
// boxShadow: 'outline-over',
|
|
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
|
// }
|
|
}}
|
|
>
|
|
<DisplayTrackFull
|
|
track={data}
|
|
onClick={() => onSelectItem(data.id)}
|
|
contextMenu={[
|
|
{
|
|
name: 'Edit',
|
|
onClick: () => {
|
|
navigate(`/gender/${genderId}/edit-track/${data.id}`);
|
|
},
|
|
},
|
|
{ name: 'Add Playlist', onClick: () => { } },
|
|
]}
|
|
/>
|
|
</Flex>
|
|
))}
|
|
<EmptyEnd />
|
|
</Flex>
|
|
<Routes>
|
|
<Route path="edit-track/:trackId" element={<TrackEditPopUp />} />
|
|
<Route path="edit-gender/:genderId" element={<GenderEditPopUp />} />
|
|
</Routes>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|