zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Front: Competencies Table

Browse Source
This commit is contained in:
Arthi-chaud
2022-10-07 12:29:12 +01:00
parent cddf1b7ff7
commit c21ed52cf0
8 changed files with 84 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/Navigation.tsx
+1 -1
View File
@@ -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
+1 -2
View File
@@ -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
+19
View File
@@ -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
+31
View File
@@ -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
+5 -14
View File
@@ -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/HomeView.test.tsx → front/views/HomeView.test.tsx
+2 -2
View File
@@ -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/HomeView.tsx → front/views/HomeView.tsx
+22 -11
View File
@@ -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
}))}
/>
<Box style={{ flexDirection }}>
<Box>
<Flex style={{ flexDirection }}>
<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
+3 -48
View File
@@ -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"