Add get to level description card

TODO: backend percentage to next level

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

src/Components/TabPanels/TabPanelStatusEConquistas.js

 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}	/>