Front: DiscoveryView: Remove Dummy Data

front/components/V2/GoldenRatio.tsx

@@ -3,62 +3,42 @@ import { View } from 'react-native';
 import { useBreakpointValue } from 'native-base';
 import HomeMainSongCard from './HomeMainSongCard';
 import GoldenRatioPanel from './GoldenRatioPanel';
+import Song from '../../models/Song';
+import { useNavigation } from '../../Navigation';
 
-type HomeCardProps = {
-	image: string;
-	title: string;
-	artist: string;
-	fontSize: number;
-	onPress?: () => void;
+type GoldenRatioProps = {
+	songs: Song[];
 };
 
-const cards = [
-	{
-		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
-		title: 'Beethoven',
-		artist: 'Synphony No. 9',
-		fontSize: 46,
-	},
-	{
-		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
-		title: 'Mozart',
-		artist: 'Lieder Kantate KV 619',
-		fontSize: 36,
-	},
-	{
-		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
-		title: 'Back',
-		artist: 'Truc Truc',
-		fontSize: 26,
-	},
-	{
-		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
-		title: 'Mozart',
-		artist: 'Machin Machin',
-		fontSize: 22,
-	},
-] as [HomeCardProps, HomeCardProps, HomeCardProps, HomeCardProps];
-
-const GoldenRatio = () => {
+const GoldenRatio = (props: GoldenRatioProps) => {
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';
+	const navigation = useNavigation();
+	const fontSizes = [46, 36, 26, 22];
+	const cards = props.songs.map((s, i) => ({
+		image: s.cover,
+		title: s.name,
+		artist: s.artist?.name ?? '',
+		fontSize: fontSizes.at(i) ?? fontSizes.at(-1)!,
+		onPress: () => navigation.navigate('Play', { songId: s.id }),
+	}));
 
 	return (
 		<GoldenRatioPanel
 			direction={isPhone ? 'column' : 'row'}
-			header={<HomeMainSongCard {...cards[0]} />}
+			header={<HomeMainSongCard {...cards[0]!} />}
 		>
 			<GoldenRatioPanel
 				direction={isPhone ? 'row' : 'column'}
-				header={<HomeMainSongCard {...cards[1]} />}
+				header={<HomeMainSongCard {...cards[1]!} />}
 			>
 				<GoldenRatioPanel
 					direction={isPhone ? 'column-reverse' : 'row-reverse'}
-					header={<HomeMainSongCard {...cards[2]} />}
+					header={<HomeMainSongCard {...cards[2]!} />}
 				>
 					<GoldenRatioPanel
 						direction={isPhone ? 'row-reverse' : 'column-reverse'}
-						header={<HomeMainSongCard {...cards[3]} />}
+						header={<HomeMainSongCard {...cards[3]!} />}
 					>
 						<View style={{ display: 'flex', width: '100%', height: '100%' }}></View>
 					</GoldenRatioPanel>