having a bug with api :/

front/API.ts

@@ -237,6 +237,31 @@ export default class API {
 		);
 	}
 
+	/**
+	 * @description retrieves songs from a specific artist
+	 * @param artistId is the id of the artist that composed the songs aimed
+	 * @param skip is how much songs do we skip before returning the list
+	 * @param take is how much songs should be returned
+	 * @returns a Promise of Songs type array
+	 */
+	public static async getSongsByArtist(artistId: number): Promise<Song[]> {
+		// let queryString = `/song?artisId=${artistId}`;
+
+		// if (skip) {
+		// 	queryString = `${queryString}&skip=${skip}`;
+		// }
+		// if (take) {
+		// 	queryString = `${queryString}&take=${take}`;
+		// }
+		// return await API.fetch({
+		// 	route: queryString,
+		// });
+
+		return API.fetch({
+			route: `/song?artistId=${artistId}`,
+		});
+	}
+
 	/**
 	 * Retrieve a song
 	 * @param songId the id to find the song

front/components/SongRow.tsx

@@ -20,6 +20,8 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 					style={{ zIndex: 0, aspectRatio: 1, borderRadius: 5 }}
 					source={{ uri: song.cover }}
 					alt={song.name}
+                    borderColor={'white'}
+                    borderWidth={1}
 				/>
 				<HStack
 					style={{
@@ -36,7 +38,7 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 							flexShrink: 1,
 						}}
 						isTruncated
-						pl={10}
+						pl={5}
 						maxW={"100%"}
 						bold
 						fontSize="md"
@@ -59,6 +61,7 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 					colorScheme="primary"
 					variant={"outline"}
 					size="sm"
+                    mr={5}
 					onPress={onPress}
 				/>
 			</HStack>

front/views/ArtistDetailsView.tsx

@@ -7,15 +7,24 @@ import API from '../API';
 import Song from '../models/Song';
 import SongRow from '../components/SongRow';
 import { useNavigation } from '@react-navigation/native';
+import { useEffect, useState } from 'react';
 
 const ArtistDetailsView = ({ artistId }: any) => {
-    const { isLoading, data: artistData, error } = useQuery(['artist', artistId], () => API.getArtist(artistId));
+    const { isLoading: isLoadingArtist, data: artistData, error: errorArtist } = useQuery(['artist', artistId], () => API.getArtist(artistId));
+    // const { isLoading: isLoadingSongs, data: songData = [], error: errorSongs } = useQuery(['songs', artistId], () => API.getSongsByArtist(artistId))
     const screenSize = useBreakpointValue({ base: "small", md: "big" });
 	const isMobileView = screenSize == "small";
-    let songData = [] as Song[];
     const navigation = useNavigation();
+    const [merde, setMerde] = useState<any>(null);
 
-    if (isLoading) {
+    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 (isLoadingArtist) {
         return <Center m={10} ><LoadingComponent /></Center>;
     }
 
@@ -33,7 +42,7 @@ const ArtistDetailsView = ({ artistId }: any) => {
                 <Box>
                     <Heading m={3} >Abba</Heading>
                     <Box>
-                        {songData.map((comp, index) => (
+                        {merde.map((comp, index) => (
                             <SongRow
                                 key={index}
                                 song={comp}

front/views/SearchView.tsx

@@ -47,7 +47,7 @@ const SearchView = (props: RouteProps<SearchViewProps>) => {
 
 	const { isLoading: isLoadingSong, data: songData = [] } = useQuery(
 		['song', stringQuery],
-		() => API.searchSongs(stringQuery),
+		() => API.getSongsByArtist(112),
 		{ enabled: !!stringQuery }
 	);