Replace placeholders with actual functionality

AchievementDescriptionCard isn't just dummy text anymore; it works
with actual parameters passed by his parent TabPanel.
The tabpanel itself doesn't get information from the API yet.

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>

src/Components/TabPanels/TabPanelStatusEConquistas.js

@@ -14,6 +14,18 @@ import AchievementDescriptionCard from '../AchievementDescriptionCard.js'
 import { Grid } from '@material-ui/core'
 
 export default function TabPanelStatusEConquistas (props) {
+	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>
@@ -27,12 +39,18 @@ export default function TabPanelStatusEConquistas (props) {
 			</AchievementsSectionTitle>
 			<AchievementsList>
 			<Grid container direction="row" justify="space-around" alignItems="center">
+				{achievements.map(
+					(a) => { return (
 							<Grid item xs={12} md={5}>
-                <AchievementDescriptionCard/>
-              </Grid>
-              <Grid item xs={12} md={5}>
-                <AchievementDescriptionCard/>
+								<AchievementDescriptionCard
+									title={a.title}
+									description={a.description}
+									src={a.imgsrc}
+									requirements={a.requirements}	/>
+									//requirements={[{name: "teste", description: "teste"}]}/>
 							</Grid>
+						)}
+				)}
 			</Grid>
 			</AchievementsList>
 		</AchievementsContainer>
@@ -47,7 +65,6 @@ const AchievementsContainer = styled.div`
 	max-width : 1140px;
 	margin-left : auto;
 	margin-right : auto;
-  margin-left : 20em;
 	margin-bottom: 30px;
 	margin-top: 70px;
 `