73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { Box, Heading, useBreakpointValue, ScrollView } from 'native-base';
|
|
import { useQuery } from '../Queries';
|
|
import { LoadingView } from '../components/Loading';
|
|
import API from '../API';
|
|
import Song from '../models/Song';
|
|
import SongRow from '../components/SongRow';
|
|
import { Key } from 'react';
|
|
import { RouteProps, useNavigation } from '../Navigation';
|
|
import { ImageBackground } from 'react-native';
|
|
|
|
type ArtistDetailsViewProps = {
|
|
artistId: number;
|
|
};
|
|
|
|
const ArtistDetailsView = ({ artistId }: RouteProps<ArtistDetailsViewProps>) => {
|
|
const artistQuery = useQuery(API.getArtist(artistId));
|
|
const songsQuery = useQuery(API.getSongsByArtist(artistId));
|
|
const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
|
|
const isMobileView = screenSize == 'small';
|
|
const navigation = useNavigation();
|
|
|
|
const favoritesQuery = useQuery(API.getLikedSongs());
|
|
|
|
const handleFavoriteButton = async (state: boolean, songId: number): Promise<void> => {
|
|
if (state == false) await API.removeLikedSong(songId);
|
|
else await API.addLikedSong(songId);
|
|
};
|
|
|
|
if (artistQuery.isError || songsQuery.isError) {
|
|
navigation.navigate('Error');
|
|
return <></>;
|
|
}
|
|
if (!artistQuery.data || songsQuery.data === undefined) {
|
|
return <LoadingView />;
|
|
}
|
|
|
|
return (
|
|
<ScrollView>
|
|
<ImageBackground
|
|
style={{ width: '100%', height: isMobileView ? 200 : 300 }}
|
|
source={{ uri: API.getArtistIllustration(artistQuery.data.id) }}
|
|
></ImageBackground>
|
|
<Box>
|
|
<Heading mt={-20} ml={3} fontSize={50}>
|
|
{artistQuery.data.name}
|
|
</Heading>
|
|
<ScrollView mt={3}>
|
|
<Box>
|
|
{songsQuery.data.map((comp: Song, index: Key | null | undefined) => (
|
|
<SongRow
|
|
key={index}
|
|
song={{ ...comp, artist: artistQuery.data }}
|
|
isLiked={
|
|
!favoritesQuery.data?.find((query) => query?.songId == comp.id)
|
|
}
|
|
handleLike={(state: boolean, songId: number) =>
|
|
handleFavoriteButton(state, songId)
|
|
}
|
|
onPress={() => {
|
|
API.createSearchHistoryEntry(comp.name, 'song');
|
|
navigation.navigate('Play', { songId: comp.id });
|
|
}}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</ScrollView>
|
|
</Box>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
export default ArtistDetailsView;
|