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

import { Box, Flex, Text, Wrap, WrapItem } from '@chakra-ui/react';
import { LuDisc3, LuFileAudio, LuMusic2, LuUser } from 'react-icons/lu';
import { useNavigate, useParams } from 'react-router-dom';

import { Album, Artist, Track } from '@/back-api';
import { Covers } from '@/components/Cover';
import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { TopBar } from '@/components/TopBar/TopBar';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album';
import { useArtistService, useSpecificArtist } from '@/service/Artist';
import { useAlbumIdsOfAnArtist, useTracksOfAnAlbum } from '@/service/Track';
import { useThemeMode } from '@/utils/theme-tools';

export type DisplayTrackProps = {
  track: Track;
};
export const DisplayTrack = ({ track }: DisplayTrackProps) => {
  return (
    <Flex direction="row" width="full" height="full">
      <Covers
        data={track?.covers}
        size="50"
        height="full"
        iconEmpty={<LuMusic2 size="50" height="full" />}
      />
      <Flex
        direction="column"
        width="full"
        height="full"
        paddingLeft="5px"
        overflowX="hidden"
      >
        <Text
          as="span"
          align="left"
          fontSize="20px"
          fontWeight="bold"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
          noOfLines={[1, 2]}
          marginY="auto"
        >
          [{track.track}] {track.name}
        </Text>
      </Flex>
    </Flex>
  );
};
export const EmptyEnd = () => {
  return (
    <Box
      width="full"
      height="25%"
      minHeight="25%"
      borderWidth="1px"
      borderColor="red"
    ></Box>
  );
};

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 onSelectItem = (trackId: number) => {
    //navigate(`/artist/${artistIdInt}/album/${albumId}`);
    let currentPlay = 0;
    const listTrackId: number[] = [];
    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) {
    <>
      <TopBar />
      <PageLayoutInfoCenter>
        Fail to load artist id: {artistId}
      </PageLayoutInfoCenter>
    </>;
  }
  return (
    <>
      <TopBar />
      <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'),
              }}
              onClick={() => onSelectItem(data.id)}
            >
              <DisplayTrack track={data} />
            </Box>
          ))}
          <EmptyEnd />
        </Flex>
      </PageLayout>
    </>
  );
};