From 3fa4dd1e72e62e44762cc1b85df504a1f956eeeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20CHAUVIN?= <chloe.chauvin@epitech.eu>
Date: Tue, 11 Oct 2022 04:45:14 +0200
Subject: [PATCH 1/5] [WIP] dividers

---
 front/views/HomeView.tsx | 50 +++++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index bf0b686..da06927 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useQuery } from "react-query";
 import API from "../API";
 import LoadingComponent from "../components/Loading";
-import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading } from 'native-base';
+import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading, Divider } from 'native-base';
 import { useNavigation } from "@react-navigation/native";
 import SongCardGrid from '../components/SongCardGrid';
 import CompetenciesTable from '../components/CompetenciesTable'
@@ -13,13 +13,16 @@ const ProgressBar = ({ xp }: { xp: number}) => {
 	const nextLevel = level + 1;
 	const nextLevelThreshold = nextLevel * 1000;
 	const progessValue = 100 * xp / nextLevelThreshold;
-	return <VStack alignItems={'center'}>
-		<Text>{`${translate('level')} ${level}`}</Text>
-		<Box w="90%" maxW="400">
-			<Progress value={progessValue} mx="4" />
-		</Box>
-		<Text>{xp} / {nextLevelThreshold} bonnes notes</Text>
-	</VStack>
+
+	return (
+		<VStack alignItems={'center'}>
+			<Text>{`${translate('level')} ${level}`}</Text>
+			<Box w="90%" maxW="400">
+				<Progress value={progessValue} mx="4" />
+			</Box>
+			<Text>{xp} / {nextLevelThreshold} bonnes notes</Text>
+		</VStack>
+	);
 }
 
 const HomeView = () => {
@@ -28,6 +31,7 @@ const HomeView = () => {
 	const screenSize = useBreakpointValue({ base: 'small', md: "big"});
 	const flexDirection = useBreakpointValue({ base: 'column', xl: "row"});
 	const userQuery = useQuery(['user'], () => API.getUserInfo());
+
 	if (!userQuery.data) {
 		return <Box style={{ flexGrow: 1, justifyContent: 'center' }}>
 			<LoadingComponent/>
@@ -35,12 +39,14 @@ const HomeView = () => {
 	}
 	return <ScrollView>
 		<Box style={{ display: 'flex', padding: 30 }}>
+
 			<Box textAlign={ screenSize == 'small' ? 'center' : undefined } style={{ flexDirection, justifyContent: 'center', display: 'flex' }}>
 				<Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>{`${translate('welcome')} ${userQuery.data.name}!`} </Text>
 				<Box flex={1}>
 					<ProgressBar xp={userQuery.data.xp}/>
 				</Box>
 			</Box>
+
 			<Box paddingY={5} style={{ flexDirection }}>
 				<Box flex={2}>
 					<SongCardGrid
@@ -52,23 +58,28 @@ const HomeView = () => {
 							songId: 1
 						}))}
 					/>
+
 					<Flex style={{ flexDirection }}>
 						<Box flex={1} paddingY={5}>
 							<Heading>{translate('mySkillsToImprove')}</Heading>
 							<Box padding={5}>
 								<CompetenciesTable
-									pedalsCompetency={Math.random() * 100}
+									pedalsCompetency=	{Math.random() * 100}
 									rightHandCompetency={Math.random() * 100}
-									leftHandCompetency={Math.random() * 100}
-									accuracyCompetency={Math.random() * 100}
-									arpegeCompetency={Math.random() * 100}
-									chordsCompetency={Math.random() * 100}
+									leftHandCompetency=	{Math.random() * 100}
+									accuracyCompetency=	{Math.random() * 100}
+									arpegeCompetency=	{Math.random() * 100}
+									chordsCompetency=	{Math.random() * 100}
 								/>
 							</Box>
 						</Box>
+
+						<Divider bg="red.500" size={1} mx={3} height={500} orientation="vertical"/>
+
 						<Box flex={1}>
 							<SongCardGrid
 								heading={translate('recentlyPlayed')}
+								maxItemPerRow={2}
 								songs={[ ...Array(4).keys() ].map(() => ({
 									albumCover: "",
 									songTitle: "Song",
@@ -77,13 +88,24 @@ const HomeView = () => {
 								}))}
 							/>
 						</Box>
+						
 					</Flex>
 				</Box>
+
+
 				<VStack padding={5} flex={1} space={10}>
+
+				<Divider 
+					bg="red.500" 
+					size={1} 
+					orientation="vertical"
+				/>
+
 					<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
 						<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
 					</Box>
 					<SongCardGrid
+						maxItemPerRow={2}
 						heading={translate('lastSearched')}
 						songs={[ ...Array(4).keys() ].map(() => ({
 							albumCover: "",
@@ -93,7 +115,9 @@ const HomeView = () => {
 						}))}
 					/>
 				</VStack>
+
 			</Box>
+
 		</Box>
 	</ScrollView>
 	

From 9c1d496e0b0020a3eb9b4f1d03233586297c5858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20CHAUVIN?= <chloe.chauvin@epitech.eu>
Date: Fri, 14 Oct 2022 13:56:25 +0200
Subject: [PATCH 2/5] [ADD] dividers

---
 front/views/HomeView.tsx | 41 ++++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index da06927..bdfdaf3 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -74,9 +74,9 @@ const HomeView = () => {
 							</Box>
 						</Box>
 
-						<Divider bg="red.500" size={1} mx={3} height={500} orientation="vertical"/>
+						<Divider orientation="vertical" w="1"/>
 
-						<Box flex={1}>
+						<Box flex={1} padding={5}>
 							<SongCardGrid
 								heading={translate('recentlyPlayed')}
 								maxItemPerRow={2}
@@ -95,25 +95,26 @@ const HomeView = () => {
 
 				<VStack padding={5} flex={1} space={10}>
 
-				<Divider 
-					bg="red.500" 
-					size={1} 
-					orientation="vertical"
-				/>
+						<Box style={{flexDirection: 'row'}}>
+							<Divider orientation="vertical" w="1"/>
+							
+							<Box flex="2" padding={5}>
+								<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
+									<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
+								</Box>
 
-					<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
-						<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
-					</Box>
-					<SongCardGrid
-						maxItemPerRow={2}
-						heading={translate('lastSearched')}
-						songs={[ ...Array(4).keys() ].map(() => ({
-							albumCover: "",
-							songTitle: "Song",
-							artistName: "Artist",
-							songId: 1
-						}))}
-					/>
+								<SongCardGrid
+									maxItemPerRow={2}
+									heading={translate('lastSearched')}
+									songs={[ ...Array(4).keys() ].map(() => ({
+										albumCover: "",
+										songTitle: "Song",
+										artistName: "Artist",
+										songId: 1
+									}))}
+								/>
+							</Box>
+						</Box>
 				</VStack>
 
 			</Box>

From 5b081c8acb6cc0b52fdf6b63cd57b7b7aa63cc82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20CHAUVIN?= <chloe.chauvin@epitech.eu>
Date: Fri, 14 Oct 2022 13:56:46 +0200
Subject: [PATCH 3/5] [UPD]

---
 front/components/CompetenciesTable.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/components/CompetenciesTable.tsx b/front/components/CompetenciesTable.tsx
index 6dc772c..628d346 100644
--- a/front/components/CompetenciesTable.tsx
+++ b/front/components/CompetenciesTable.tsx
@@ -2,6 +2,7 @@ import { useNavigation } from "@react-navigation/core";
 import { HStack, VStack, Text, Progress, Pressable } from "native-base";
 import { translate } from "../i18n/i18n";
 import Card from './Card';
+
 type CompetenciesTableProps = {
 	pedalsCompetency: number;
 	rightHandCompetency: number;

From e13e2c617ea839c6506fad50450708039f984835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20CHAUVIN?= <chloe.chauvin@epitech.eu>
Date: Sat, 15 Oct 2022 13:32:35 +0200
Subject: [PATCH 4/5] [UPD] translations

---
 front/i18n/Translations.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/front/i18n/Translations.ts b/front/i18n/Translations.ts
index 6acc31d..3093038 100644
--- a/front/i18n/Translations.ts
+++ b/front/i18n/Translations.ts
@@ -17,6 +17,7 @@ export const en = {
 	recentlyPlayed: 'Recently played',
 	search: 'Search',
 	lastSearched: "Last searched",
+	levelProgress: 'good notes',
 
 	// competencies
 	pedalsCompetency: 'Pedals',
@@ -47,7 +48,7 @@ export const fr: typeof en = {
 	recentlyPlayed: "Récemment joués",
 	lastSearched: "Dernières recherches",
 	search: 'Rechercher',
-	
+	levelProgress: 'bonnes notes',
 
 	// competencies
 	pedalsCompetency: 'Pédales',

From f8afb14cee586ece7b85bef7bae2df1df5ea870d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20CHAUVIN?= <chloe.chauvin@epitech.eu>
Date: Sat, 15 Oct 2022 13:32:53 +0200
Subject: [PATCH 5/5] [UPD] translations

---
 front/views/HomeView.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index bdfdaf3..951e135 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -20,7 +20,7 @@ const ProgressBar = ({ xp }: { xp: number}) => {
 			<Box w="90%" maxW="400">
 				<Progress value={progessValue} mx="4" />
 			</Box>
-			<Text>{xp} / {nextLevelThreshold} bonnes notes</Text>
+			<Text>{xp} / {nextLevelThreshold} {translate('levelProgress')}</Text>
 		</VStack>
 	);
 }
@@ -87,22 +87,21 @@ const HomeView = () => {
 									songId: 1
 								}))}
 							/>
-						</Box>
-						
+						</Box>						
 					</Flex>
 				</Box>
 
-
 				<VStack padding={5} flex={1} space={10}>
 
 						<Box style={{flexDirection: 'row'}}>
+
 							<Divider orientation="vertical" w="1"/>
-							
+
 							<Box flex="2" padding={5}>
 								<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
 									<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
 								</Box>
-
+								
 								<SongCardGrid
 									maxItemPerRow={2}
 									heading={translate('lastSearched')}
@@ -116,9 +115,7 @@ const HomeView = () => {
 							</Box>
 						</Box>
 				</VStack>
-
 			</Box>
-
 		</Box>
 	</ScrollView>