diff --git a/src/Admin/Components/Components/Inputs/EditItem/CompEditImg.js b/src/Admin/Components/Components/Inputs/EditItem/CompEditImg.js index 4d2c2c2db2fb10a4d6e11b8c1b4eb71fb2780a5d..a9f683c751593c35e8894c33a04c1b0c36f705e3 100644 --- a/src/Admin/Components/Components/Inputs/EditItem/CompEditImg.js +++ b/src/Admin/Components/Components/Inputs/EditItem/CompEditImg.js @@ -53,7 +53,7 @@ function ChooseImage(props) { } <ButtonsDiv> <ButtonCancelar onClick={() => props.handleComplete('')}> - <span>Cancelar</span> + <span>Manter imagem</span> </ButtonCancelar> </ButtonsDiv> diff --git a/src/Components/ItemCard.js b/src/Components/ItemCard.js index 39943f03576fda6cd9ff43b66517e925f3eb8d0a..cbd148c2b8b77f39ace9be00f00794be0896b77e 100644 --- a/src/Components/ItemCard.js +++ b/src/Components/ItemCard.js @@ -92,6 +92,7 @@ export default function ItemCard(props) { name={props.name} totalPrice={props.price - props.discount} myQntOfPoints={props.myQntOfPoints} + onFinishPurchase={props.onFinishPurchase} /> </CardContent> </Card> diff --git a/src/Components/ItemCardAction.js b/src/Components/ItemCardAction.js index 474ac5e2e1bdfe18dd1d80435385b6b831a4edd2..eb4da1c40441ebc362b5938c2e342c2355c23fb0 100644 --- a/src/Components/ItemCardAction.js +++ b/src/Components/ItemCardAction.js @@ -39,9 +39,9 @@ const actionStyle = (operation) => { paddingTop: '1em', marginBottom: 0, fontWeight: 'bold', - cursor: 'pointer' + cursor: 'pointer', + color: '#666666', } - stl.color = operation !== 'buy' ? '#02a5c3' : '#666666'; return stl; } @@ -82,8 +82,10 @@ export default function ItemCardAction(props) { (data, header) => { if (data.error) handleSnackbar(true, data.error, 'error') - else + else { handleSnackbar(true, 'Item comprado com sucesso', 'success') + props.onFinishPurchase(props.totalPrice) + } }, (error) => { handleSnackbar(true, 'Ocorreu algum erro', 'error') diff --git a/src/Components/ItemCarousel.js b/src/Components/ItemCarousel.js index be2f7e667c872933ede3c1391fb51f33dc9fa82b..e4641aab053b6b9a3798b9328842b2b83866761b 100644 --- a/src/Components/ItemCarousel.js +++ b/src/Components/ItemCarousel.js @@ -80,7 +80,7 @@ export default function ItemCarousel(props) { price={i.price} discount={i.discount} myQntOfPoints={props.myQntOfPoints} - action={'buy'} + onFinishPurchase={props.onFinishPurchase} /> })} <IconButton onClick={goRight} disabled={props.disabled}> diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js index 469fa378e9dd7787829eee223147c59710c96b30..da0362ea3128702e940fafcac8fa94dda42153b9 100644 --- a/src/Components/MobileDrawerMenu.js +++ b/src/Components/MobileDrawerMenu.js @@ -40,11 +40,12 @@ export default function MobileDrawerMenu(props) { const buildMyAreaTabs = () => { const minhaArea = [ { name: "Perfil e Atividades", href: "/perfil", value: '0' }, - { name: "Recursos Publicados", href: "/perfil", value: '1' }, - { name: "Favoritos", href: "/perfil", value: '2' }, - { name: "Coleções", href: "/perfil", value: '3' }, - { name: "Rede", href: "/perfil", value: '4' }, - { name: "Configurações", href: "/editarperfil", value: '5' }, + { name: "Status e conquista", href: "/perfil", value: '1' }, + { name: "Recursos Publicados", href: "/perfil", value: '2' }, + { name: "Favoritos", href: "/perfil", value: '3' }, + { name: "Coleções", href: "/perfil", value: '4' }, + { name: "Rede", href: "/perfil", value: '5' }, + { name: "Configurações", href: "/editarperfil", value: '6' }, ] if (state.currentUser.roles) { @@ -57,7 +58,7 @@ export default function MobileDrawerMenu(props) { canUserAdmin = true index++ } - + if (canUserAdmin) minhaArea.push({ name: "Administrador", diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js index b2acbffa10b74d204a2dd087e2fe72f0f7d423f1..ce9594c515c3cc9c6df341503f8fb45c5eeffc01 100644 --- a/src/Components/TabPanels/TabPanelStatusEConquistas.js +++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js @@ -21,7 +21,7 @@ import React, { useContext, useState } 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 { UserProfileContainer } from './StyledComponents.js' import LevelDescriptionCard from '../LevelDescriptionCard.js' import AchievementDescriptionCard from '../AchievementDescriptionCard.js' import { Grid } from '@material-ui/core' @@ -82,215 +82,6 @@ export default function TabPanelStatusEConquistas(props) { steps: 5, currStep: 2 }, - - ] - }, - { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, - { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, - { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, - ] - }, { - title: "Doctor Strange", - imgsrc: "https://www.filmstories.co.uk/wp-content/uploads/2020/01/doctor-strange-850x600.jpg", - description: "Hey, its doctor strange here!", - requirements: [{ - name: "Curtidor!", - description: "Curtir 5 coleções", - steps: 5, - currStep: 3, - }, - { - name: "Divulgador!", - description: "Divulgar 5 coleções", - steps: 5, - currStep: 2 - }, ] }, ]); @@ -323,18 +114,18 @@ export default function TabPanelStatusEConquistas(props) { return ( <CardContainer> - <ContainerDivStyled style={{ display: "block" }}> + <UserProfileContainer style={{ display: "block" }}> <Paper elevation={3}> <LevelDescriptionCard xp_to_next_lvl={xpToNextLevel} - bar_size={barSize} + bar_size={3} coins={coins} xp={xp} level={level} /> </Paper> - </ContainerDivStyled> - <AchievementsContainer> + </UserProfileContainer> + <UserProfileContainer> <AchievementsList> <AchievementsSectionTitle> Conquistas @@ -356,7 +147,7 @@ export default function TabPanelStatusEConquistas(props) { )} </Grid> </AchievementsList> - </AchievementsContainer> + </UserProfileContainer> </CardContainer> ); } diff --git a/src/Pages/ItemStore.js b/src/Pages/ItemStore.js index caea1641caa91f50ae97eb48c029d5fa1289f590..5833de28f3f13e566a92db13771ecf69a5753cca 100644 --- a/src/Pages/ItemStore.js +++ b/src/Pages/ItemStore.js @@ -37,6 +37,7 @@ const SectionTitle = styled.h3` const ErrorTextCenter = styled.h3` font-weight: 100; margin-bottom: 0; + text-align: center; ` const StoreDivider = styled.hr` @@ -79,6 +80,7 @@ export default function ItemStoreContainer(props) { const [stopLoadingCardFrame, setStopLoadingCardFrame] = useState(false) const [currUser, setCurrUser] = useState({}); + const [currUserPoints, setCurrUserPoints] = useState(0) const [isLoading, setIsLoading] = useState(true); const [currBadgePage, setCurrBadgePage] = useState(0) const [currAvatarFramePage, setCurrAvatarFramePage] = useState(0) @@ -89,10 +91,15 @@ export default function ItemStoreContainer(props) { return `/items?filter={"state" : "active"}&item_type=${objType}&unlock_rule=purchase&page=${page}&range=[0,9]&results_per_page=10&sort=["id","DESC"]` } + const handleFinishPurchase = (itemPrice) => { + setCurrUserPoints((previousState) => previousState - itemPrice) + } + useEffect(() => { axios.get((`${apiUrl}/users/` + state.currentUser.id)) .then((response) => { setCurrUser(response.data); + setCurrUserPoints(response.data.points) setIsLoading(false); }, (error) => { @@ -195,7 +202,7 @@ export default function ItemStoreContainer(props) { numCollections={currUser.collections_count} numLearningObjects={currUser.learning_objects_count} follow_count={currUser.follows_count} - points={currUser.points} + points={currUserPoints} // followed={currUser.followed || null} // followerID={currUser.follower.id} href={'/usuario-publico/' + currUser.id} @@ -219,6 +226,7 @@ export default function ItemStoreContainer(props) { disabled={disabledBadges} stop={stopLoadingBadges} myQntOfPoints={currUser.points} + onFinishPurchase={handleFinishPurchase} /> </StoreSection> } @@ -238,6 +246,7 @@ export default function ItemStoreContainer(props) { disabled={disabledCardFrame} stop={stopLoadingCardFrame} myQntOfPoints={currUser.points} + onFinishPurchase={handleFinishPurchase} /> </StoreSection> } @@ -257,6 +266,7 @@ export default function ItemStoreContainer(props) { disabled={disabledAvatarFrame} stop={stopLoadingAvatarFrame} myQntOfPoints={currUser.points} + onFinishPurchase={handleFinishPurchase} /> </StoreSection> } @@ -276,6 +286,7 @@ export default function ItemStoreContainer(props) { disabled={disabledCoverFrame} stop={stopLoadingCoverFrame} myQntOfPoints={currUser.points} + onFinishPurchase={handleFinishPurchase} /> </StoreSection> }