diff --git a/front/views/GenreDetailsView.tsx b/front/views/GenreDetailsView.tsx index 694b129..f206199 100644 --- a/front/views/GenreDetailsView.tsx +++ b/front/views/GenreDetailsView.tsx @@ -1,6 +1,6 @@ import { SafeAreaView } from 'react-native'; import { VStack, Text, Box, Flex, Image, Heading, IconButton, Icon, Container, Center, useBreakpointValue, ScrollView } from 'native-base'; -import { useQuery } from '../Queries'; +import { useQueries, useQuery } from '../Queries'; import { LoadingView } from '../components/Loading'; import { RouteProps, useNavigation } from '../Navigation'; import API from '../API'; @@ -8,6 +8,7 @@ import Artist from '../models/Artist'; import ArtistCard from '../components/ArtistCard'; import CardGridCustom from '../components/CardGridCustom'; import { translate } from '../i18n/i18n'; +import SongCard from '../components/SongCard'; const colorRange = ['#364fc7', '#5c940d', '#c92a2a', '#d6336c', '#20c997']; @@ -22,6 +23,7 @@ const GenreDetailsView = ({ genreId }: RouteProps) => { const isMobileView = screenSize == "small"; const navigation = useNavigation(); + if (genreQuery.isError || songsQuery.isError) { navigation.navigate('Error'); return <>; @@ -51,16 +53,17 @@ const GenreDetailsView = ({ genreId }: RouteProps) => { mt={4} > ({ - image: API.getArtistIllustration(songData.id), + content={songsQuery.data.map((songData) => ({ name: songData.name, - id: songData.id, + cover: songData.cover, + artistName: songData.artistId.toString(), + songId: songData.id, onPress: () => { - API.createSearchHistoryEntry(songData.name, 'artist'); + API.createSearchHistoryEntry(songData.name, 'song'); navigation.navigate('Song', { songId: songData.id }); }, }))} - cardComponent={ArtistCard} + cardComponent={SongCard} />