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>

front/views/V2/DiscoveryView.tsx

@@ -10,10 +10,12 @@ import GoldenRatio from '../../components/V2/GoldenRatio';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 const HomeView = (props: RouteProps<{}>) => {
-	const songsQuery = useQuery(API.getSongSuggestions(['artist']));
+	const suggestionsQuery = useQuery(API.getSongSuggestions(['artist']));
 	const navigation = useNavigation();
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';
+	const topSuggestions = suggestionsQuery.data?.slice(0, 4) ?? [];
+	const suggestions = suggestionsQuery.data?.slice(4) ?? [];
 
 	return (
 		<ScaffoldCC routeName={props.route.name}>
@@ -33,7 +35,7 @@ const HomeView = (props: RouteProps<{}>) => {
 							aspectRatio: isPhone ? 0.618 : 1.618,
 						}}
 					>
-						<GoldenRatio />
+						<GoldenRatio songs={topSuggestions} />
 					</View>
 					<View
 						style={{
@@ -64,7 +66,7 @@ const HomeView = (props: RouteProps<{}>) => {
 								gap: 16,
 							}}
 						>
-							{songsQuery.data?.map((song) => (
+							{suggestions.map((song) => (
 								<SongCardInfo
 									key={song.id}
 									song={song}