karusic/front2/src/scene/artist/ArtistAlbumDetailPage.tsx

import { Box, Flex, Text } from '@chakra-ui/react';
import { LuDisc3, LuUser } from 'react-icons/lu';
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 { TopBar } from '@/components/TopBar/TopBar';
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
import { DisplayTrack } from '@/components/track/DisplayTrack';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album';
import { useSpecificArtist } from '@/service/Artist';
import { useTracksOfAnAlbum } from '@/service/Track';
import { useThemeMode } from '@/utils/theme-tools';

export const ArtistAlbumDetailPage = () => {
  const { artistId, albumId } = useParams();
  const artistIdInt = artistId ? parseInt(artistId, 10) : undefined;
  const albumIdInt = albumId ? parseInt(albumId, 10) : undefined;
  const { mode } = useThemeMode();
  const { playInList } = useActivePlaylistService();
  const { dataArtist } = useSpecificArtist(artistIdInt);
  const { dataAlbum } = useSpecificAlbum(albumIdInt);
  const { tracksOnAnAlbum } = useTracksOfAnAlbum(albumIdInt);
  const navigate = useNavigate();
  const onSelectItem = (trackId: number) => {
    let currentPlay = 0;
    const listTrackId: number[] = [];
    if (!tracksOnAnAlbum) {
      console.error('Fail to get the album ...');
      return;
    }
    for (let iii = 0; iii < tracksOnAnAlbum.length; iii++) {
      listTrackId.push(tracksOnAnAlbum[iii].id);
      if (tracksOnAnAlbum[iii].id === trackId) {
        currentPlay = iii;
      }
    }
    playInList(currentPlay, listTrackId);
  };

  console.log(`dataAlbum = ${JSON.stringify(dataAlbum, null, 2)}`);
  if (!dataAlbum) {
    return (
      <>
        <TopBar title="Album detail" />
        <PageLayoutInfoCenter>
          Fail to load artist id: {artistId}
        </PageLayoutInfoCenter>
      </>
    );
  }
  return (
    <>
      <TopBar title="Album detail" />
      <PageLayout>
        <Flex
          direction="row"
          width="80%"
          marginX="auto"
          padding="10px"
          gap="10px"
        >
          <Covers
            data={dataArtist?.covers}
            iconEmpty={<LuUser size="100" height="full" />}
          />
          <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>

        <Flex
          direction="row"
          width="80%"
          marginX="auto"
          padding="10px"
          gap="10px"
        >
          <Covers
            data={dataAlbum?.covers}
            iconEmpty={<LuDisc3 size="100" height="full" />}
          />
          <Flex direction="column" width="80%" marginRight="auto">
            <Text fontSize="24px" fontWeight="bold">
              {dataAlbum?.name}
            </Text>
            {dataAlbum?.description && (
              <Text>Description: {dataAlbum?.description}</Text>
            )}
            {dataAlbum?.publication && (
              <Text>first name: {dataAlbum?.publication}</Text>
            )}
          </Flex>
        </Flex>

        <Flex
          direction="column"
          gap="20px"
          marginX="auto"
          padding="20px"
          width="80%"
        >
          {tracksOnAnAlbum?.map((data) => (
            <Box
              minWidth="100%"
              height="60px"
              border="1px"
              borderColor="brand.900"
              backgroundColor={mode('#FFFFFF88', '#00000088')}
              key={data.id}
              padding="5px"
              as="button"
              _hover={{
                boxShadow: 'outline-over',
                bgColor: mode('#FFFFFFF7', '#000000F7'),
              }}
            >
              <DisplayTrack
                track={data}
                onClick={() => onSelectItem(data.id)}
                contextMenu={[
                  {
                    name: 'Edit',
                    onClick: () => {
                      navigate(
                        `/artist/${artistIdInt}/album/${albumId}/edit/${data.id}`
                      );
                    },
                  },
                  { name: 'Add Playlist', onClick: () => {} },
                ]}
              />
            </Box>
          ))}
          <EmptyEnd />
        </Flex>
        <Routes>
          <Route path="edit/:trackId" element={<TrackEditPopUp />} />
        </Routes>
      </PageLayout>
    </>
  );
};