From cddf1b7ff7c995b86c3d84193b93b1d0eff279e2 Mon Sep 17 00:00:00 2001
From: Arthi-chaud <arthur.jamet@gmail.com>
Date: Fri, 7 Oct 2022 11:30:56 +0100
Subject: [PATCH] Front: Home View: Song Card Grid

---
 front/components/SongCard.tsx     |  1 +
 front/components/SongCardGrid.tsx | 26 ++++++++++++++
 front/views/HomeView/HomeView.tsx | 60 ++++++++++++++++++++-----------
 3 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 front/components/SongCardGrid.tsx

diff --git a/front/components/SongCard.tsx b/front/components/SongCard.tsx
index 096ef28..7c6409e 100644
--- a/front/components/SongCard.tsx
+++ b/front/components/SongCard.tsx
@@ -23,6 +23,7 @@ const SongCard = (props: SongCardProps) => {
 	return <Pressable onPress={() => navigation.navigate('Song', { songId })}>
 		{({ isHovered,  isFocused }) => (
 		<Box
+			shadow={3}
 			flexDirection='column'
 			alignContent='space-around'
 			bg={(isHovered || isFocused) ? 'coolGray.200' : undefined }
diff --git a/front/components/SongCardGrid.tsx b/front/components/SongCardGrid.tsx
new file mode 100644
index 0000000..89ffeb7
--- /dev/null
+++ b/front/components/SongCardGrid.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import SongCard from './SongCard';
+import { FlatGrid } from 'react-native-super-grid';
+import { Heading, VStack } from 'native-base';
+
+type SongCardGrid = {
+	songs: Parameters<typeof SongCard>[0][];
+	maxItemPerRow?: number,
+	heading?: string
+}
+
+const SongCardGrid = (props: SongCardGrid) => {
+	return <VStack>
+		<Heading>{props.heading}</Heading>
+		<FlatGrid
+			maxItemsPerRow={props.maxItemPerRow ?? 5}
+			additionalRowStyle={{ justifyContent: 'space-between' }}
+			data={props.songs}
+			renderItem={({ item }) => <SongCard {...item} /> }
+			spacing={20}
+		/>
+	</VStack>
+	
+}
+
+export default SongCardGrid;
\ No newline at end of file
diff --git a/front/views/HomeView/HomeView.tsx b/front/views/HomeView/HomeView.tsx
index 725c3cd..aa6eabd 100644
--- a/front/views/HomeView/HomeView.tsx
+++ b/front/views/HomeView/HomeView.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { useQuery } from "react-query";
 import API from "../../API";
 import LoadingComponent from "../../components/Loading";
-import { Box, ScrollView, useBreakpointValue, Text, VStack, Progress, Button, HStack } from 'native-base';
+import { Box, ScrollView, useBreakpointValue, Text, Heading, VStack, Progress, Button, HStack, useTheme } from 'native-base';
 import SongCard from "../../components/SongCard";
 import { FlatGrid } from 'react-native-super-grid';
+import { useNavigation } from "@react-navigation/native";
+import SongCardGrid from '../../components/SongCardGrid'
 
 const ProgressBar = ({ xp }: { xp: number}) => {
 	const level = Math.floor(xp / 1000);
@@ -21,6 +23,8 @@ const ProgressBar = ({ xp }: { xp: number}) => {
 }
 
 const HomeView = () => {
+	const theme = useTheme();
+	const navigation = useNavigation();
 	const screenSize = useBreakpointValue({ base: 'small', md: "big"});
 	const flexDirection = useBreakpointValue({ base: 'column', xl: "row"});
 	const userQuery = useQuery(['user'], () => API.getUserInfo());
@@ -39,28 +43,42 @@ const HomeView = () => {
 			</Box>
 			<Box paddingY={5} style={{ flexDirection }}>
 				<Box flex={2}>
-					<Text fontSize="md">Passer à l'étape supérieure</Text>
-					<FlatGrid
-						maxItemsPerRow={screenSize === 'small' ? 2 : undefined}
-						data={[ ...Array(4).keys() ]}
-						renderItem={({ item }) =>
-							<SongCard albumCover={"https://meelo.arthichaud.me/api/illustrations/releases/120"} songTitle={"Song"} artistName={"Artist"}/>
-						}
-						spacing={20}
+					<SongCardGrid
+						heading="Passer à l'étape supérieure"
+						songs={[ ...Array(4).keys() ].map(() => ({
+							albumCover: "",
+							songTitle: "Song",
+							artistName: "Artist",
+							songId: 1
+						}))}
 					/>
-				</Box>
-				<VStack flex={1}>
-					<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
-						<Button size="sm">Search</Button>
+					<Box style={{ flexDirection }}>
+						<Box>
+							<SongCardGrid
+								heading="Récemment joués"
+								songs={[ ...Array(4).keys() ].map(() => ({
+									albumCover: "",
+									songTitle: "Song",
+									artistName: "Artist",
+									songId: 1
+								}))}
+							/>
+						</Box>
 					</Box>
-					<Text fontSize="md">Dernière recherches</Text>
-					<FlatGrid
-						maxItemsPerRow={2}
-						data={[ ...Array(4).keys() ]}
-						renderItem={({ item }) =>
-							<SongCard albumCover={"https://meelo.arthichaud.me/api/illustrations/releases/120"} songTitle={"Song"} artistName={"Artist"}/>
-						}
-						spacing={20}
+				</Box>
+				<VStack flex={1} space={5}>
+					<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
+						<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >Search</Button>
+					</Box>
+					<SongCardGrid
+						maxItemPerRow={screenSize == 'big' ? 2 : undefined}
+						heading="Dernieres recherches"
+						songs={[ ...Array(4).keys() ].map(() => ({
+							albumCover: "",
+							songTitle: "Song",
+							artistName: "Artist",
+							songId: 1
+						}))}
 					/>
 				</VStack>
 			</Box>