clean code

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<GenreDetailsViewProps>) => {
 	const isMobileView = screenSize == "small";
 	const navigation = useNavigation();
 
+
 	if (genreQuery.isError || songsQuery.isError) {
 		navigation.navigate('Error');
 		return <></>;
@@ -51,16 +53,17 @@ const GenreDetailsView = ({ genreId }: RouteProps<GenreDetailsViewProps>) => {
 				mt={4}
 			>
 				<CardGridCustom
-					content={songsQuery.data.slice(0, songsQuery.data.length).map((songData) => ({
-						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}
 				/>
 			</Flex>
 		</ScrollView>