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

[WIP] dividers

Browse Source
This commit is contained in:
Chloé CHAUVIN
2022-10-11 04:45:14 +02:00
parent ab3ba6b8c0
commit 3fa4dd1e72
1 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/views/HomeView.tsx
+37 -13
View File
@@ -2,7 +2,7 @@ import React from "react";
import { useQuery } from "react-query"; 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, 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 { useNavigation } from "@react-navigation/native";
import SongCardGrid from '../components/SongCardGrid'; import SongCardGrid from '../components/SongCardGrid';
import CompetenciesTable from '../components/CompetenciesTable' import CompetenciesTable from '../components/CompetenciesTable'
@@ -13,13 +13,16 @@ const ProgressBar = ({ xp }: { xp: number}) => {
const nextLevel = level + 1; const nextLevel = level + 1;
const nextLevelThreshold = nextLevel * 1000; const nextLevelThreshold = nextLevel * 1000;
const progessValue = 100 * xp / nextLevelThreshold; const progessValue = 100 * xp / nextLevelThreshold;
return <VStack alignItems={'center'}>
<Text>{`${translate('level')} ${level}`}</Text> return (
<Box w="90%" maxW="400"> <VStack alignItems={'center'}>
<Progress value={progessValue} mx="4" /> <Text>{`${translate('level')} ${level}`}</Text>
</Box> <Box w="90%" maxW="400">
<Text>{xp} / {nextLevelThreshold} bonnes notes</Text> <Progress value={progessValue} mx="4" />
</VStack> </Box>
<Text>{xp} / {nextLevelThreshold} bonnes notes</Text>
</VStack>
);
} }
const HomeView = () => { const HomeView = () => {
@@ -28,6 +31,7 @@ const HomeView = () => {
const screenSize = useBreakpointValue({ base: 'small', md: "big"}); const screenSize = useBreakpointValue({ base: 'small', md: "big"});
const flexDirection = useBreakpointValue({ base: 'column', xl: "row"}); const flexDirection = useBreakpointValue({ base: 'column', xl: "row"});
const userQuery = useQuery(['user'], () => API.getUserInfo()); const userQuery = useQuery(['user'], () => API.getUserInfo());
if (!userQuery.data) { if (!userQuery.data) {
return <Box style={{ flexGrow: 1, justifyContent: 'center' }}> return <Box style={{ flexGrow: 1, justifyContent: 'center' }}>
<LoadingComponent/> <LoadingComponent/>
@@ -35,12 +39,14 @@ const HomeView = () => {
} }
return <ScrollView> return <ScrollView>
<Box style={{ display: 'flex', padding: 30 }}> <Box style={{ display: 'flex', padding: 30 }}>
<Box textAlign={ screenSize == 'small' ? 'center' : undefined } style={{ flexDirection, justifyContent: 'center', display: 'flex' }}> <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> <Text fontSize="xl" flex={screenSize == 'small' ? 1 : 2}>{`${translate('welcome')} ${userQuery.data.name}!`} </Text>
<Box flex={1}> <Box flex={1}>
<ProgressBar xp={userQuery.data.xp}/> <ProgressBar xp={userQuery.data.xp}/>
</Box> </Box>
</Box> </Box>
<Box paddingY={5} style={{ flexDirection }}> <Box paddingY={5} style={{ flexDirection }}>
<Box flex={2}> <Box flex={2}>
<SongCardGrid <SongCardGrid
@@ -52,23 +58,28 @@ const HomeView = () => {
songId: 1 songId: 1
}))} }))}
/> />
<Flex style={{ flexDirection }}> <Flex style={{ flexDirection }}>
<Box flex={1} paddingY={5}> <Box flex={1} paddingY={5}>
<Heading>{translate('mySkillsToImprove')}</Heading> <Heading>{translate('mySkillsToImprove')}</Heading>
<Box padding={5}> <Box padding={5}>
<CompetenciesTable <CompetenciesTable
pedalsCompetency={Math.random() * 100} pedalsCompetency= {Math.random() * 100}
rightHandCompetency={Math.random() * 100} rightHandCompetency={Math.random() * 100}
leftHandCompetency={Math.random() * 100} leftHandCompetency= {Math.random() * 100}
accuracyCompetency={Math.random() * 100} accuracyCompetency= {Math.random() * 100}
arpegeCompetency={Math.random() * 100} arpegeCompetency= {Math.random() * 100}
chordsCompetency={Math.random() * 100} chordsCompetency= {Math.random() * 100}
/> />
</Box> </Box>
</Box> </Box>
<Divider bg="red.500" size={1} mx={3} height={500} orientation="vertical"/>
<Box flex={1}> <Box flex={1}>
<SongCardGrid <SongCardGrid
heading={translate('recentlyPlayed')} heading={translate('recentlyPlayed')}
maxItemPerRow={2}
songs={[ ...Array(4).keys() ].map(() => ({ songs={[ ...Array(4).keys() ].map(() => ({
albumCover: "", albumCover: "",
songTitle: "Song", songTitle: "Song",
@@ -77,13 +88,24 @@ const HomeView = () => {
}))} }))}
/> />
</Box> </Box>
</Flex> </Flex>
</Box> </Box>
<VStack padding={5} flex={1} space={10}> <VStack padding={5} flex={1} space={10}>
<Divider
bg="red.500"
size={1}
orientation="vertical"
/>
<Box style={{ flexDirection: 'row', justifyContent:'center' }}> <Box style={{ flexDirection: 'row', justifyContent:'center' }}>
<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button> <Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >{translate('search')}</Button>
</Box> </Box>
<SongCardGrid <SongCardGrid
maxItemPerRow={2}
heading={translate('lastSearched')} heading={translate('lastSearched')}
songs={[ ...Array(4).keys() ].map(() => ({ songs={[ ...Array(4).keys() ].map(() => ({
albumCover: "", albumCover: "",
@@ -93,7 +115,9 @@ const HomeView = () => {
}))} }))}
/> />
</VStack> </VStack>
</Box> </Box>
</Box> </Box>
</ScrollView> </ScrollView>