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

Merge branch 'front/home-page' of ssh+git://github.com/Chroma-Case/Chromacase into front/home-page

Browse Source
This commit is contained in:
Arthi-chaud
2022-10-16 08:56:01 +01:00
parent 79fe1bb804 f8afb14cee
commit 09d33c00cf
3 changed files with 52 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/components/CompetenciesTable.tsx
View File

@@ -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;

3
front/i18n/Translations.ts
View File

@@ -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',

76
front/views/HomeView.tsx
View File

@@ -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} {translate('levelProgress')}</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>
<Box flex={1}>
<Divider orientation="vertical" w="1"/>
<Box flex={1} padding={5}>
<SongCardGrid
heading={translate('recentlyPlayed')}
maxItemPerRow={2}
songs={[ ...Array(4).keys() ].map(() => ({
albumCover: "",
songTitle: "Song",
@@ -76,22 +87,33 @@ const HomeView = () => {
songId: 1
}))}
/>
</Box>
</Box>
</Flex>
</Box>
<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')} >{translate('search')}</Button>
</Box>
<SongCardGrid
heading={translate('lastSearched')}
songs={[ ...Array(4).keys() ].map(() => ({
albumCover: "",
songTitle: "Song",
artistName: "Artist",
songId: 1
}))}
/>
<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')}
songs={[ ...Array(4).keys() ].map(() => ({
albumCover: "",
songTitle: "Song",
artistName: "Artist",
songId: 1
}))}
/>
</Box>
</Box>
</VStack>
</Box>
</Box>