Front: Competencies Table

front/Navigation.tsx

@@ -1,7 +1,7 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
 import AuthenticationView from './views/AuthenticationView';
-import HomeView from './views/HomeView/HomeView';
+import HomeView from './views/HomeView';
 import { NavigationContainer } from '@react-navigation/native';
 import { useSelector } from './state/Store';
 import SongLobbyView from './views/SongLobbyView';

front/Theme.tsx

@@ -4,7 +4,6 @@ import { extendTheme } from 'native-base';
  * Using the Material Color guidelines
  */
 const Theme = extendTheme({
-	roundness: 10,
 	colors: {
 		primary:
 		{
@@ -45,7 +44,7 @@ const Theme = extendTheme({
 			800: '#262626',
 			900: '#0d0d0d',
 		},
-		accent:
+		secondary:
 		{
 			50: '#d8ffff',
 			100: '#acffff',

front/components/Card.tsx

@@ -0,0 +1,19 @@
+import { useTheme, Box } from 'native-base';
+import React from 'react';
+
+export const CardBorderRadius = 10;
+
+const cardBorder = (theme: ReturnType<typeof useTheme>) => ({
+	borderColor: theme.colors.text[100],
+	borderRadius: CardBorderRadius,
+	borderWidth: 1 
+})
+
+const Card = (props: any) => {
+	const theme = useTheme();
+	return <Box {...props} style={{ ...props.style,  ...cardBorder(theme) }}>
+		{ props.children }
+	</Box>
+}
+
+export default Card;

front/components/CompetenciesTable.tsx

@@ -0,0 +1,31 @@
+import { HStack, VStack, Text, Progress, useTheme } from "native-base";
+import { translate } from "../i18n/i18n";
+import Card from './Card';
+type CompetenciesTableProps = {
+	pedalsCompetency: number;
+	rightHandCompetency: number;
+	leftHandCompetency: number;
+	accuracyCompetency: number;
+	arpegeCompetency: number;
+	chordsCompetency: number;
+}
+
+const CompetenciesTable = (props: CompetenciesTableProps) => {
+	return <Card padding={5}>
+		<HStack space={5} flex={1}> 
+			<VStack space={5}> 
+			{ Object.keys(props).map((competencyName) => (
+				<Text bold>{translate(competencyName as keyof CompetenciesTableProps)}</Text>
+			))}
+			</VStack>
+			<VStack space={5} flex={1}>
+			{ Object.keys(props).map((competencyName) => (
+				<Progress flex={1} value={props[competencyName as keyof CompetenciesTableProps]} />
+			))}
+			</VStack>
+		</HStack>
+		
+	</Card>
+}
+
+export default CompetenciesTable

front/components/SongCard.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Box, VStack, Text, AspectRatio, Image, useTheme, Pressable } from 'native-base';
+import Card, { CardBorderRadius } from './Card';
+import { VStack, Text, Image, Pressable } from 'native-base';
 import { useNavigation } from "@react-navigation/core";
 type SongCardProps = {
 	albumCover: string;
@@ -8,29 +9,19 @@ type SongCardProps = {
 	songId: number
 }
 
-const borderRadius = 10;
-
-const cardBorder = (theme: ReturnType<typeof useTheme>) => ({
-	borderColor: theme.colors.text[100],
-	borderRadius,
-	borderWidth: 1 
-})
-
 const SongCard = (props: SongCardProps) => {
 	const { albumCover, songTitle, artistName, songId } = props;
 	const navigation = useNavigation();
-	const theme = useTheme();
 	return <Pressable onPress={() => navigation.navigate('Song', { songId })}>
 		{({ isHovered,  isFocused }) => (
-		<Box
+		<Card
 			shadow={3}
 			flexDirection='column'
 			alignContent='space-around'
 			bg={(isHovered || isFocused) ? 'coolGray.200' : undefined }
-			style={ cardBorder(theme) }
 		>
 			<Image
-				style={{ zIndex: 0, aspectRatio: 1, margin: 5, borderRadius}}
+				style={{ zIndex: 0, aspectRatio: 1, margin: 5, borderRadius: CardBorderRadius}}
 				source={{ uri: "https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg" }}
 				alt={[props.songTitle, props.artistName].join('-')}
 			/>
@@ -42,7 +33,7 @@ const SongCard = (props: SongCardProps) => {
 					{artistName}
 				</Text>
 			</VStack>
-		</Box>
+		</Card>
 		)}
 	</Pressable>
 }

front/views/HomeView.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import store from '../../state/Store';
+import store from '../state/Store';
 import { fireEvent, render, screen } from '@testing-library/react-native';
 
 import HomeView from './HomeView';
-import { en, fr } from '../../i18n/Translations';
+import { en, fr } from '../i18n/Translations';
 
 describe('<HomeView />', () => {
   const view = <Provider store={store}><HomeView /></Provider>;

front/views/HomeView.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import { useQuery } from "react-query";
-import API from "../../API";
+import API from "../API";
-import LoadingComponent from "../../components/Loading";
+import LoadingComponent from "../components/Loading";
-import { Box, ScrollView, useBreakpointValue, Text, Heading, VStack, Progress, Button, HStack, useTheme } from 'native-base';
+import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading } 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'
+import SongCardGrid from '../components/SongCardGrid';
+import CompetenciesTable from '../components/CompetenciesTable'
 
 const ProgressBar = ({ xp }: { xp: number}) => {
 	const level = Math.floor(xp / 1000);
@@ -52,8 +51,21 @@ const HomeView = () => {
 							songId: 1
 						}))}
 					/>
-					<Box style={{ flexDirection }}>
+					<Flex style={{ flexDirection }}>
-						<Box>
+						<Box flex={1} paddingY={5}>
+							<Heading>Mes Competences à améliorer</Heading>
+							<Box padding={5}>
+								<CompetenciesTable
+									pedalsCompetency={Math.random() * 100}
+									rightHandCompetency={Math.random() * 100}
+									leftHandCompetency={Math.random() * 100}
+									accuracyCompetency={Math.random() * 100}
+									arpegeCompetency={Math.random() * 100}
+									chordsCompetency={Math.random() * 100}
+								/>
+							</Box>
+						</Box>
+						<Box flex={1}>
 							<SongCardGrid
 								heading="Récemment joués"
 								songs={[ ...Array(4).keys() ].map(() => ({
@@ -64,14 +76,13 @@ const HomeView = () => {
 								}))}
 							/>
 						</Box>
-					</Box>
+					</Flex>
 				</Box>
-				<VStack flex={1} space={5}>
+				<VStack padding={5} flex={1} space={10}>
 					<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: "",

front/yarn.lock

@@ -1086,14 +1086,6 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@callstack/react-theme-provider@^3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.7.tgz#b7ce1a53d63ad5e83574b831ae0af6b7c6cc40e7"
-  integrity sha512-Ab6rbD2w4u9W3yf7LQQ8evx9m8fZNsoWxt+MFm3AyZnyKQNCJf4K7ip9tHHZgSs+HTdoj38lEqPehvFOVQKvAg==
-  dependencies:
-    deepmerge "^3.2.0"
-    hoist-non-react-statics "^3.3.0"
-
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -3991,7 +3983,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.3:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4010,27 +4002,11 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.6.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
-  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^3.1.2:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
-  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
-  dependencies:
-    color-convert "^1.9.3"
-    color-string "^1.6.0"
-
 colorette@^1.0.7:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
@@ -5672,11 +5648,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
 is-buffer@^1.1.5, is-buffer@~1.1.1, is-buffer@~1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -8204,7 +8175,7 @@ react-native-gradle-plugin@^0.0.6:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45"
   integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg==
 
-react-native-iphone-x-helper@^1.0.3, react-native-iphone-x-helper@^1.3.1:
+react-native-iphone-x-helper@^1.0.3:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
@@ -8217,15 +8188,6 @@ react-native-keyboard-aware-scroll-view@^0.9.5:
     prop-types "^15.6.2"
     react-native-iphone-x-helper "^1.0.3"
 
-react-native-paper@^4.12.4:
-  version "4.12.4"
-  resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.4.tgz#c04ce40d225dc267b7ee32be705dd553f44e0c0c"
-  integrity sha512-NMfLSIN0Ql/KCTSimhgzbEOgz371dqDAgChnp2VE4H7n1B0Pwy0bzPKmY/T8trVvEdmJRXrbXAusaFq8elDXNg==
-  dependencies:
-    "@callstack/react-theme-provider" "^3.0.7"
-    color "^3.1.2"
-    react-native-iphone-x-helper "^1.3.1"
-
 react-native-safe-area-context@4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.2.4.tgz#4df42819759c4d3c74252c8678c2772cfa2271a6"
@@ -8879,13 +8841,6 @@ simple-plist@^1.1.0:
     bplist-parser "0.3.1"
     plist "^3.0.5"
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
-  dependencies:
-    is-arrayish "^0.3.1"
-
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"