diff --git a/src/Components/LevelDescriptionCard.js b/src/Components/LevelDescriptionCard.js index 96c00d37f5360287c9b81f597f961888710cb7fb..90e43b78d1343e2e5fa971349e87bc7b175b54e4 100644 --- a/src/Components/LevelDescriptionCard.js +++ b/src/Components/LevelDescriptionCard.js @@ -18,21 +18,21 @@ export default function LevelDescriptionCard(props) { <Grid container direction="row" justify="space-between" alignItems="center"> <Grid item xs={6} md={4}> <CurrentLevelNumber> - Nível + Nível {props.level} </CurrentLevelNumber> <CurrentLevelXP> - XP 4096 + XP {props.xp} </CurrentLevelXP> </Grid> <Grid item xs={6} md={4} alignContent='flex-end'> <CurrentCoins> - 256 COINS + {props.coins} COINS </CurrentCoins> <NextLevelXP> - 512 XP PARA O NÍVEL 32 + {props.xp_to_next_lvl} XP PARA O NÍVEL {props.level+1} </NextLevelXP> </Grid> - <ShinyProgressBar percentage='66' /> + <ShinyProgressBar percentage={props.bar_size} /> </Grid> </LevelDescDiv> ); @@ -74,4 +74,4 @@ const CurrentLevelXP = styled.h2` const LevelDescDiv = styled.div` margin: 20px; padding: 20px; -` \ No newline at end of file +` diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js index b90d79c603a5e10a87a13e547d299e77288994fb..d126b660a716fc908bc507979cb0b2a39d5baf3a 100644 --- a/src/Components/TabPanels/TabPanelStatusEConquistas.js +++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js @@ -1,4 +1,5 @@ import React, {useContext, useState, useEffect} from 'react' +import { Store } from '../../Store.js' import styled from 'styled-components' import { Container } from 'react-grid-system' import Paper from '@material-ui/core/Paper'; @@ -15,22 +16,41 @@ import { Grid } from '@material-ui/core' export default function TabPanelStatusEConquistas (props) { const [achievements, setAchievements] = useState([]); + const [level, setLevel] = useState(0); + const [xp, setXP] = useState(0); + const [coins, setCoins] = useState(0); + const [barSize, setBarSize] = useState(0); + const [xpToNextLevel, setXpToNextLevel] = useState(0); + const { state } = useContext(Store) useEffect(() => { - axios.get(`https://api.portalmec.c3sl.ufpr.br/v1/users/1`) - .then(res => { - const achievements = res.data; - console.log("Teste"); - console.log(achievements); - //this.setAchievements(achievements); - }) + axios.all( + ['xp_to_next_lvl', 'percent_to_next_level', 'points', 'xp', 'get_level', + 'completed_achievements'].map((r) => { + return axios.get(apiUrl + '/' + r + '/' + state.currentUser.id); + }).then(axios.spread((xp_to_next_lvl, percent_to_next_level, points, + xp, level, completed_achievements) => { + this.setXpToNextLevel(xp_to_next_lvl); + this.setBarSize(100-percent_to_next_level); + this.setCoins(points); + this.setXP(xp); + this.setLevel(level); + this.setAchievements(completed_achievements); + }))) + }, []) return ( <div> <ContainerDivStyled> <Paper elevation={3}> - <LevelDescriptionCard/> + <LevelDescriptionCard + xp_to_next_lvl={xpToNextLevel} + bar_size={barSize} + coins={coins} + xp={xp} + level={level} + /> </Paper> </ContainerDivStyled> <AchievementsContainer> @@ -43,7 +63,7 @@ export default function TabPanelStatusEConquistas (props) { (a) => { return ( <Grid item xs={12} md={5}> <AchievementDescriptionCard - title={a.title} + name={a.title} description={a.description} src={a.imgsrc} requirements={a.requirements} />