From b8e7b5d09d2b94db9e36a97c62c8428701588751 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Wed, 22 Feb 2023 23:36:11 +0100
Subject: [PATCH] Updated SongCardGrids in HomeView to use itemDimension

---
 front/components/SongCardGrid.tsx | 8 +++++---
 front/views/HomeView.tsx          | 5 +++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/front/components/SongCardGrid.tsx b/front/components/SongCardGrid.tsx
index 966d7f2..6a3d6eb 100644
--- a/front/components/SongCardGrid.tsx
+++ b/front/components/SongCardGrid.tsx
@@ -5,7 +5,8 @@ import { Heading, VStack } from 'native-base';
 
 type SongCardGrid = {
 	songs: Parameters<typeof SongCard>[0][];
-	maxItemPerRow?: number,
+	maxItemsPerRow?: number,
+	itemDimension?: number,
 	heading?: JSX.Element,
 }
 
@@ -13,8 +14,9 @@ const SongCardGrid = (props: SongCardGrid) => {
 	return <VStack>
 		<Heading>{props.heading}</Heading>
 		<FlatGrid
-			itemDimension={250}
-			additionalRowStyle={{ justifyContent: 'space-between' }}
+			maxItemsPerRow={props.maxItemsPerRow}
+			itemDimension={props.itemDimension ?? (props.maxItemsPerRow ? undefined : 150)}
+			additionalRowStyle={{ 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 db2d8f1..512cca0 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -42,6 +42,7 @@ const HomeView = () => {
 				<Box flex={2}>
 					<SongCardGrid
 						heading={<Translate translationKey='goNextStep'/>}
+						itemDimension={screenSize == 'small' ? 250 : 200}
 						songs={nextStepQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 							.map((song) => ({
 								albumCover: song.cover,
@@ -63,7 +64,7 @@ const HomeView = () => {
 						<Box flex={1} padding={5}>
 							<SongCardGrid
 								heading={<Translate translationKey='recentlyPlayed'/>}
-								maxItemPerRow={2}
+								itemDimension={screenSize == 'small' ? 200 : 170}
 								songs={playHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 									.map((song) => ({
 										albumCover: song.cover,
@@ -89,7 +90,7 @@ const HomeView = () => {
 									/>
 								</Box>
 								<SongCardGrid
-									maxItemPerRow={2}
+									itemDimension={screenSize == 'small' ? 150 : 120}
 									heading={<Translate translationKey='lastSearched'/>}
 									songs={searchHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 										.map((song) => ({