Select Git revision
ItemStore.js
-
Raul Almeida authored
Detailed information on reports
Raul Almeida authoredDetailed information on reports
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>
)
}