From c21ed52cf00624d481507813dc7be7dd2f3013cb Mon Sep 17 00:00:00 2001 From: Arthi-chaud Date: Fri, 7 Oct 2022 12:29:12 +0100 Subject: [PATCH] Front: Competencies Table --- front/Navigation.tsx | 2 +- front/Theme.tsx | 3 +- front/components/Card.tsx | 19 ++++++++ front/components/CompetenciesTable.tsx | 31 ++++++++++++ front/components/SongCard.tsx | 19 ++------ front/views/{HomeView => }/HomeView.test.tsx | 4 +- front/views/{HomeView => }/HomeView.tsx | 33 ++++++++----- front/yarn.lock | 51 ++------------------ 8 files changed, 84 insertions(+), 78 deletions(-) create mode 100644 front/components/Card.tsx create mode 100644 front/components/CompetenciesTable.tsx rename front/views/{HomeView => }/HomeView.test.tsx (89%) rename front/views/{HomeView => }/HomeView.tsx (72%) diff --git a/front/Navigation.tsx b/front/Navigation.tsx index 555f244..466cfaa 100644 --- a/front/Navigation.tsx +++ b/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'; diff --git a/front/Theme.tsx b/front/Theme.tsx index 62725e9..5baa003 100644 --- a/front/Theme.tsx +++ b/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', diff --git a/front/components/Card.tsx b/front/components/Card.tsx new file mode 100644 index 0000000..4ae34b6 --- /dev/null +++ b/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) => ({ + borderColor: theme.colors.text[100], + borderRadius: CardBorderRadius, + borderWidth: 1 +}) + +const Card = (props: any) => { + const theme = useTheme(); + return + { props.children } + +} + +export default Card; \ No newline at end of file diff --git a/front/components/CompetenciesTable.tsx b/front/components/CompetenciesTable.tsx new file mode 100644 index 0000000..7c5147a --- /dev/null +++ b/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 + + + { Object.keys(props).map((competencyName) => ( + {translate(competencyName as keyof CompetenciesTableProps)} + ))} + + + { Object.keys(props).map((competencyName) => ( + + ))} + + + + +} + +export default CompetenciesTable \ No newline at end of file diff --git a/front/components/SongCard.tsx b/front/components/SongCard.tsx index 7c6409e..98bc10a 100644 --- a/front/components/SongCard.tsx +++ b/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) => ({ - 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 navigation.navigate('Song', { songId })}> {({ isHovered, isFocused }) => ( - {[props.songTitle, @@ -42,7 +33,7 @@ const SongCard = (props: SongCardProps) => { {artistName} - + )} } diff --git a/front/views/HomeView/HomeView.test.tsx b/front/views/HomeView.test.tsx similarity index 89% rename from front/views/HomeView/HomeView.test.tsx rename to front/views/HomeView.test.tsx index 75204c7..e50b902 100644 --- a/front/views/HomeView/HomeView.test.tsx +++ b/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('', () => { const view = ; diff --git a/front/views/HomeView/HomeView.tsx b/front/views/HomeView.tsx similarity index 72% rename from front/views/HomeView/HomeView.tsx rename to front/views/HomeView.tsx index aa6eabd..1b3b509 100644 --- a/front/views/HomeView/HomeView.tsx +++ b/front/views/HomeView.tsx @@ -1,12 +1,11 @@ import React from "react"; import { useQuery } from "react-query"; -import API from "../../API"; -import LoadingComponent from "../../components/Loading"; -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 API from "../API"; +import LoadingComponent from "../components/Loading"; +import { Box, ScrollView, Flex, useBreakpointValue, Text, VStack, Progress, Button, useTheme, Heading } from 'native-base'; 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 }))} /> - - + + + Mes Competences à améliorer + + + + + ({ @@ -64,14 +76,13 @@ const HomeView = () => { }))} /> - + - + ({ albumCover: "", diff --git a/front/yarn.lock b/front/yarn.lock index 9b25d1c..eae09d3 100644 --- a/front/yarn.lock +++ b/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"