TabPanelStatusEConquistas.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/


import React, {useContext, useState, useEffect} from 'react'
import { Store } from '../../Store.js'
import styled from 'styled-components'
import Paper from '@material-ui/core/Paper';
import {ContainerDivStyled} from './StyledComponents.js'
import axios from 'axios'
import {apiUrl} from '../../env';
import LevelDescriptionCard from '../LevelDescriptionCard.js'
import AchievementDescriptionCard from '../AchievementDescriptionCard.js'
import { Grid } from '@material-ui/core'

export default function TabPanelStatusEConquistas (props) {
	// eslint-disable-next-line
	const [achievements, setAchievements] = useState([]);
	// eslint-disable-next-line
	const [level, setLevel] = useState(0);
	// eslint-disable-next-line
	const [xp, setXP] = useState(0);
	// eslint-disable-next-line
	const [coins, setCoins] = useState(0);
	// eslint-disable-next-line
	const [barSize, setBarSize] = useState(0);
	// eslint-disable-next-line
	const [xpToNextLevel, setXpToNextLevel] = useState(0);
	const { state } = useContext(Store)

	useEffect(() => {
		axios.all(
				['xp_to_next_lvl', 'percent_to_next_level', 'points', 'xp', 'get_level',
				'completed_achievements'].map((r) => {
					return axios.get(apiUrl + '/' + r + '?id=' + 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
				xp_to_next_lvl={xpToNextLevel}
				bar_size={barSize}
				coins={coins}
				xp={xp}
				level={level}
				/>
			</Paper>
		</ContainerDivStyled>
		<AchievementsContainer>
			<AchievementsSectionTitle>
			Conquistas
			</AchievementsSectionTitle>
			<AchievementsList>
			<Grid container direction="row" justify="space-around" alignItems="center">
				{achievements.map(
					(a) => { return (
							<Grid item xs={12} md={5}>
								<AchievementDescriptionCard
									name={a.title}
									description={a.description}
									src={a.imgsrc}
									requirements={a.requirements}
                                    />

							</Grid>
						)}
				)}
			</Grid>
			</AchievementsList>
		</AchievementsContainer>
		</div>
	);
}

const AchievementsSectionTitle = styled.h1`
	font-weight: 400;
`
const AchievementsContainer = styled.div`
	max-width : 1140px;
	margin-left : auto;
	margin-right : auto;
	margin-bottom: 30px;
	margin-top: 70px;
`
const AchievementsList = styled.div`
`