Skip to content
Snippets Groups Projects
Select Git revision
  • Develop
  • master default protected
  • Develop_copy_to_implement_acessibility
  • Develop_copy_to_implement_acessibility_in_admin
  • vinicius_accessibility_from_copy
  • luis_accesibility_before_develop
  • vinicius_accessiblity
  • Fixing_bugs
  • Otimizando_Vinicius
  • Password_recovery_fix
  • fix_admin_bugs_luis
  • luis_gamefication
  • gamificacaoLucas
  • GameficationAdmin
  • fixHomeScreen
  • Fix_perfil
  • fix_remaining_bugs
  • homologa
  • centraliza-axios
  • Gamification
  • v1.2.0
  • v1.1.1
  • v1.1.0
  • V1.0.1
  • V1.0.0
  • V1.0.0-RC
26 results

ItemStore.js

Blame
  • ItemStore.js 3.32 KiB
    /*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, {useState, useContext, useEffect}  from 'react';
    import styled from 'styled-components';
    import axios from 'axios';
    import Grid from '@material-ui/core/Grid';
    import Card from '@material-ui/core/Card';
    import CardActions from '@material-ui/core/CardActions';
    import CardContent from '@material-ui/core/CardContent';
    import Container from '@material-ui/core/Container';
    import UserCardGamified from '../Components/UserCardGamified.js';
    import StoreGuide from '../Components/StoreGuide.js';
    import ItemCarousel from '../Components/ItemCarousel.js';
    import {apiUrl} from '../env';
    
    const SectionTitle = styled.h3`
    	font-weight: 100;
    	margin-bottom: 0;
    `
    
    const StoreDivider = styled.hr`
    	width: 50px;
    	margin-left: 0;
    `
    
    const StoreSection = styled.div`
    	font-size: 1.5em;
    	margin-top: 60px;
    	margin-bottom: 20px;
    `
    
    export default function ItemStoreContainer (props) {
    				const [avatar_frames, setAvatarFrames] = useState([]);
    				const [card_frames, setCardFrames] = useState([]);
    				const [cover_frames, setCoverFrames] = useState([]);
    				const [badges, setBadges] = useState([]);
    
    				useEffect(() => {
    					axios.all(
    						['avatar_frame', 'card_frame', 'cover_frame', 'badge'].map((r) => {
    							return axios.get(apiUrl+'/' + 'user_items/index?item_type='+r+'&unlock_rule=purchase');
    						})).then(axios.spread((avatar, card, cover, badge) => {
    							setAvatarFrames(avatar);
    							setCardFrames(card);
    							setCoverFrames(cover);
    							setBadges(badge);
    						}));
    				}, [])
    
            return (
    					<Container style={{paddingTop : "2em", backgroundColor : "#f4f4f4", width: '100%'}}>
    						<Grid container
    							direction="row"
    							justify="space-around"
    							alignItems="stretch"
    							style={{
    								marginTop: '2em',
    								marginBottom: '2em',
    							}}
    						>
    							<UserCardGamified/>
    							<StoreGuide/>
    						</Grid>
    						<StoreSection>
    							<SectionTitle>Bordas de avatar</SectionTitle>
    							<StoreDivider/>
    							<ItemCarousel items={avatar_frames}/>
    						</StoreSection>
    
    						<StoreSection>
    							<SectionTitle>Insígnias</SectionTitle>
    							<StoreDivider/>
    							<ItemCarousel items={badges}/>
    						</StoreSection>
    
    						<StoreSection>
    							<SectionTitle>Bordas de card</SectionTitle>
    							<StoreDivider/>
    							<ItemCarousel items={card_frames}/>
    						</StoreSection>
    
    						<StoreSection>
    							<SectionTitle>Bordas de capa de perfil</SectionTitle>
    							<StoreDivider/>
    							<ItemCarousel items={cover_frames}/>
    						</StoreSection>
    					</Container>
            )
    }