From 3ca2bdaa9060276f13a7bc5527fd5924db0227eb Mon Sep 17 00:00:00 2001
From: Arthur Jamet <arthur.jamet@gmail.com>
Date: Mon, 20 Mar 2023 09:28:36 +0000
Subject: [PATCH] Song Card: Rework Layout for responsivity

---
 front/components/SongCard.tsx     | 28 ++++++++++++++--------------
 front/components/SongCardGrid.tsx | 11 ++++-------
 front/views/HomeView.tsx          |  3 ---
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/front/components/SongCard.tsx b/front/components/SongCard.tsx
index 45fdf74..3c25da4 100644
--- a/front/components/SongCard.tsx
+++ b/front/components/SongCard.tsx
@@ -15,22 +15,22 @@ const SongCard = (props: SongCardProps) => {
 	return (
 		<Card
 			shadow={3}
-			flexDirection='column'
-			alignContent='space-around'
 			onPress={() => navigation.navigate('Song', { songId })}
 		>
-			<Image
-				style={{ zIndex: 0, aspectRatio: 1, margin: 5, borderRadius: CardBorderRadius}}
-				source={{ uri: albumCover }}
-				alt={[props.songTitle, props.artistName].join('-')}
-			/>
-			<VStack padding={3}>
-				<Text isTruncated bold fontSize='md' noOfLines={2} height={50}>
-					{songTitle}
-				</Text>
-				<Text isTruncated >
-					{artistName}
-				</Text>
+			<VStack m={1.5} space={3}>
+				<Image
+					style={{ zIndex: 0, aspectRatio: 1, borderRadius: CardBorderRadius}}
+					source={{ uri: albumCover }}
+					alt={[props.songTitle, props.artistName].join('-')}
+				/>
+				<VStack>
+					<Text isTruncated bold fontSize='md' noOfLines={2} height={50}>
+						{songTitle}
+					</Text>
+					<Text isTruncated >
+						{artistName}
+					</Text>
+				</VStack>
 			</VStack>
 		</Card>
 	)
diff --git a/front/components/SongCardGrid.tsx b/front/components/SongCardGrid.tsx
index 6408fff..c003c34 100644
--- a/front/components/SongCardGrid.tsx
+++ b/front/components/SongCardGrid.tsx
@@ -2,23 +2,20 @@ import React from 'react';
 import SongCard from './SongCard';
 import { FlatGrid } from 'react-native-super-grid';
 import { Heading, VStack } from 'native-base';
-import { RequireExactlyOne } from 'type-fest';
 
 type SongCardGrid = {
 	songs: Parameters<typeof SongCard>[0][];
 	heading?: JSX.Element,
-} & RequireExactlyOne<{
-	maxItemsPerRow: number,
-	itemDimension: number,
-}>
+	maxItemsPerRow?: number,
+	style?: Parameters<typeof FlatGrid>[0]['additionalRowStyle']
+}
 
 const SongCardGrid = (props: SongCardGrid) => {
 	return <VStack space={5}>
 		<Heading>{props.heading}</Heading>
 		<FlatGrid
 			maxItemsPerRow={props.maxItemsPerRow}
-			itemDimension={props.itemDimension ?? (props.maxItemsPerRow ? undefined : 150)}
-			additionalRowStyle={{ justifyContent: 'flex-start' }}
+			additionalRowStyle={props.style ?? { justifyContent: 'flex-start' }}
 			data={props.songs}
 			renderItem={({ item }) => <SongCard {...item} /> }
 			spacing={10}
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index 2aa3549..d97f726 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -47,7 +47,6 @@ const HomeView = () => {
 			<VStack flex={{ lg: 2 }} space={5}>
 				<SongCardGrid
 					heading={<Translate translationKey='goNextStep'/>}
-					itemDimension={screenSize == 'small' ? 200 : 120}
 					songs={nextStepQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 						.map((song) => ({
 							albumCover: song.cover,
@@ -67,7 +66,6 @@ const HomeView = () => {
 					<Box flex={{ md: 1 }}>
 						<SongCardGrid
 							heading={<Translate translationKey='recentlyPlayed'/>}
-							itemDimension={screenSize == 'small' ? 200 : 120}
 							songs={playHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 								.map((song) => ({
 									albumCover: song.cover,
@@ -94,7 +92,6 @@ const HomeView = () => {
 				</HStack>
 				<Box style={{ width: '100%' }}>
 					<SongCardGrid
-						itemDimension={screenSize == 'small' ? 200 : 120}
 						heading={<Translate translationKey='lastSearched'/>}
 						songs={searchHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 							.map((song) => ({