fix: image via props and remove songIllustration function for cover property

front/API.ts

@@ -228,14 +228,6 @@ export default class API {
 		return "11111";
 	}
 
-	/**
-	 * Retrive a song's midi partition
-	 * @param songId the id to find the song
-	 */
-	public static getSongIllustration(songId: number): string {
-		return `${baseAPIUrl}/song/${songId}/illustration`;
-	}
-
 	public static async getAllSongs(): Promise<Song[]> {
 		let songs = await API.fetch({
 			route: "/song",

front/components/ArtistCard.tsx

@@ -18,7 +18,7 @@ const ArtistCard = (props: ArtistCardProps) => {
 			<VStack m={1.5} space={3}>
 				<Image
 					style={{ zIndex: 0, aspectRatio: 1, borderRadius: CardBorderRadius }}
-					source={{ uri: API.getArtistIllustration(id) }}
+					source={{ uri: image }}
 					alt={name}
 				/>
 				<VStack>

front/components/GenreCard.tsx

@@ -5,14 +5,14 @@ import { useTheme } from "native-base";
 import { Ionicons } from "@expo/vector-icons";
 import API from "../API";
 type GenreCardProps = {
-	icon: string;
+	image: string;
 	name: string;
 	id: number;
 	onPress: () => void;
 };
 
 const GenreCard = (props: GenreCardProps) => {
-	const { icon, name, id } = props;
+	const { image, name, id } = props;
 	const theme = useTheme();
 
 	return (
@@ -29,7 +29,7 @@ const GenreCard = (props: GenreCardProps) => {
 				>
 					<Image
 						source={{
-							uri: API.getGenreIllustration(id),
+							uri: image,
 						}}
 						size="md"
 					/>

front/components/SearchResult.tsx

@@ -82,7 +82,7 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 					flexGrow={0}
 					pl={10}
 					style={{ zIndex: 0, aspectRatio: 1, borderRadius: 5 }}
-					source={{ uri: API.getSongIllustration(song.id) }}
+					source={{ uri: song.cover }}
 					alt={song.name}
 				/>
 				<HStack
@@ -226,7 +226,7 @@ const ArtistSearchComponent = (props: any) => {
 					content={artistData
 						.slice(0, props?.maxItems ?? artistData.length)
 						.map((a) => ({
-							image: a.picture ?? "https://picsum.photos/200",
+							image: API.getArtistIllustration(a.id),
 							name: a.name,
 							id: a.id,
 							onPress: () => {
@@ -257,7 +257,7 @@ const GenreSearchComponent = (props: any) => {
 					content={genreData
 						.slice(0, props?.maxItems ?? genreData.length)
 						.map((g) => ({
-							icon: "musical-note-sharp",
+							image: API.getGenreIllustration(g.id),
 							name: g.name,
 							id: g.id,
 							onPress: () => {

front/components/SongCard.tsx

@@ -7,6 +7,7 @@ type SongCardProps = {
 	cover: string;
 	name: string;
 	artistName: string;
+	songId: number;
 };
 
 const SongCard = (props: SongCardProps) => {

front/views/ScoreView.tsx

@@ -115,7 +115,7 @@ const ScoreView = ({
 						artistName:
 							artistRecommendations.find(({ data }) => data?.id == i.artistId)
 								?.data?.name ?? "",
-						id: i.id,
+						songId: i.id,
 					}))}
 					cardComponent={SongCard}
 					heading={