init genreDetailsView

back/src/song/song.controller.ts

@@ -146,4 +146,10 @@ export class SongController {
 			songId: id,
 		});
 	}
+
+    @Get('/artist/:artistId')
+    async getSongByArtist(@Param('artistId', ParseIntPipe) artistId: number) {
+        const res = await this.songService.songByArtist(artistId)
+        return res;
+    }
 }

back/src/song/song.service.ts

@@ -6,6 +6,14 @@ import { PrismaService } from 'src/prisma/prisma.service';
 export class SongService {
 	constructor(private prisma: PrismaService) {}
 
+	async songByArtist(data: number): Promise<Song[]> {
+		return this.prisma.song.findMany({
+			where: {
+				artistId: {equals: data},
+			},
+		});
+	}
+
 	async createSong(data: Prisma.SongCreateInput): Promise<Song> {
 		return this.prisma.song.create({
 			data,

front/API.ts

@@ -278,10 +278,32 @@ export default class API {
 	 * @param artistId is the id of the artist that composed the songs aimed
 	 * @returns a Promise of Songs type array
 	 */
-	public static async getSongsByArtist(artistId: number): Promise<Song[]> {
-		return API.fetch({
-			route: `/song?artistId=${artistId}`,
-		});
+	public static getSongsByArtist(artistId: string): Query<Song[]> {
+		return {
+			key: ['songs', artistId],
+			exec: async () => {
+				const songs = await API.fetch({
+					route: `/song/artist/${artistId}`,
+				});
+
+				// this is a dummy illustration, we will need to fetch the real one from the API
+				return songs.data.map(
+					// To be fixed with #168
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					(song: any) =>
+						({
+							id: song.id as number,
+							name: song.name as string,
+							artistId: song.artistId as number,
+							albumId: song.albumId as number,
+							genreId: song.genreId as number,
+							details: song.difficulties,
+							cover: `${baseAPIUrl}/song/${song.id}/illustration`,
+							metrics: {},
+						} as Song)
+				);
+			},
+		};
 	}
 
 	/**

front/views/ArtistDetailsView.tsx

@@ -10,25 +10,17 @@ import { Key, useEffect, useState } from 'react';
 import { useNavigation } from '../Navigation';
 
 const ArtistDetailsView = ({ artistId }: any) => {
-	const { isLoading, data: artistData, isError } = useQuery(API.getArtist(artistId));
-	// const { isLoading: isLoadingSongs, data: songData = [], error: errorSongs } = useQuery(['songs', artistId], () => API.getSongsByArtist(artistId))
+	const { isLoading: isLoadingArt, data: artistData, error: isErrorArt } = useQuery(API.getArtist(artistId));
+	const { isLoading: isLoadingSong, data: songData = [], error: isErrorSong } = useQuery(API.getSongsByArtist(artistId));
 	const screenSize = useBreakpointValue({ base: "small", md: "big" });
 	const isMobileView = screenSize == "small";
 	const navigation = useNavigation();
-	const [merde, setMerde] = useState<any>(null);
 
-	useEffect(() => {
-		// Code to be executed when the component is focused
-		console.warn('Component focused!');
-		setMerde(API.getSongsByArtist(112));
-		// Call your function or perform any other actions here
-	}, []);
-
-	if (isLoading) {
+	if (isLoadingArt) {
 		return <LoadingView />;
 	}
 
-	if (isError) {
+	if (isErrorArt) {
 		navigation.navigate('Error');
 	}
 
@@ -44,9 +36,9 @@ const ArtistDetailsView = ({ artistId }: any) => {
 				resizeMode='cover'
 				/>
 				<Box>
-					<Heading m={3} >Abba</Heading>
+					<Heading mt={-20} ml={3} fontSize={50} >{artistData?.name}</Heading>
 					<Box>
-						{merde.map((comp: Song | SongWithArtist, index: Key | null | undefined) => (
+						{songData.map((comp: Song | SongWithArtist, index: Key | null | undefined) => (
 							<SongRow
 								key={index}
 								song={comp}

front/views/GenreDetailsView.tsx

@@ -0,0 +1,14 @@
+import { SafeAreaView } from 'react-native';
+import { VStack, Text, Box, Image, Heading, IconButton, Icon, Container, Center, useBreakpointValue } from 'native-base';
+
+
+
+const GenreDetailsView = ({ genreId }: any) => {
+	return (
+		<SafeAreaView>
+			<Box>
+				
+			</Box>
+		</SafeAreaView>
+	);
+}