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 ( <> Fail to load artist id: {artistId} ); } return ( <> <> {dataArtist?.name} {dataArtist?.description && ( Description: {dataArtist?.description} )} {dataArtist?.firstName && ( first name: {dataArtist?.firstName} )} {dataArtist?.surname && surname: {dataArtist?.surname}} {dataArtist?.birth && birth: {dataArtist?.birth}} {albumIdsOfAnArtist?.map((data) => ( onSelectItem(data)} > ))} } /> ); };