diff --git a/src/Components/AchievementDescriptionCard.js b/src/Components/AchievementDescriptionCard.js index 58eb3a176a28499b11baaf183b566fc7e5767bc6..3af102fe901acb8f237a4ba1d1637caaf30c97fd 100644 --- a/src/Components/AchievementDescriptionCard.js +++ b/src/Components/AchievementDescriptionCard.js @@ -6,25 +6,19 @@ import { Grid } from '@material-ui/core' import RequirementDialog from './RequirementsDialog.js'; export default function AchievementDescriptionCard(props) { - var teste = [ - {name: "Casas", description: "Construa três casas"}, - {name: "Carros", description: "Dirija três carros"}, - {name: "Esportes", description: "Pratique três esportes"}, - {name: "Noites", description: "Sobreviva a três noites"} - ]; return ( <Paper elevation={3}> <Grid container direction="row" justify="space-around" alignItems="center"> <Grid item xs={3}> - <AchievementImg src={props.src ? props.src : "https://material-ui.com/static/images/grid/complex.jpg"}/> + <AchievementImg src={props.src}/> </Grid> <Grid item xs={7}> - <AchievementTitle>{props.title ? props.title : "Conquistador de conquistas"}</AchievementTitle> - <AchievementDescription>{props.description ? props.description : "Conquiste conquistas"}</AchievementDescription> + <AchievementTitle>{props.title}</AchievementTitle> + <AchievementDescription>{props.description}</AchievementDescription> <RequirementDialog - title="Conquistador de conquistas" - description="Conquiste conquistas" - requirements={teste} + title={props.title} + description={props.description} + requirements={props.requirements} /> </Grid> </Grid> diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js index be46d5324827ba9d1ed3b8bb2a65349433c86483..b90d79c603a5e10a87a13e547d299e77288994fb 100644 --- a/src/Components/TabPanels/TabPanelStatusEConquistas.js +++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js @@ -14,42 +14,59 @@ import AchievementDescriptionCard from '../AchievementDescriptionCard.js' import { Grid } from '@material-ui/core' export default function TabPanelStatusEConquistas (props) { - return ( - <div> - <ContainerDivStyled> - <Paper elevation={3}> - <LevelDescriptionCard/> - </Paper> - </ContainerDivStyled> - <AchievementsContainer> - <AchievementsSectionTitle> - Conquistas - </AchievementsSectionTitle> - <AchievementsList> - <Grid container direction="row" justify="space-around" alignItems="center"> - <Grid item xs={12} md={5}> - <AchievementDescriptionCard/> - </Grid> - <Grid item xs={12} md={5}> - <AchievementDescriptionCard/> - </Grid> - </Grid> - </AchievementsList> - </AchievementsContainer> - </div> - ); + const [achievements, setAchievements] = useState([]); + + 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); + }) + }, []) + + return ( + <div> + <ContainerDivStyled> + <Paper elevation={3}> + <LevelDescriptionCard/> + </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 + title={a.title} + description={a.description} + src={a.imgsrc} + requirements={a.requirements} /> + //requirements={[{name: "teste", description: "teste"}]}/> + </Grid> + )} + )} + </Grid> + </AchievementsList> + </AchievementsContainer> + </div> + ); } const AchievementsSectionTitle = styled.h1` - font-weight: 400; + font-weight: 400; ` const AchievementsContainer = styled.div` - max-width : 1140px; - margin-left : auto; - margin-right : auto; - margin-left : 20em; - margin-bottom: 30px; - margin-top: 70px; + max-width : 1140px; + margin-left : auto; + margin-right : auto; + margin-bottom: 30px; + margin-top: 70px; ` const AchievementsList = styled.div` -` \ No newline at end of file +`