its not static informations anymore

src/Components/AreasSubPages.js

@@ -16,7 +16,7 @@ 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, { Component } from "react";
+import React, { Component, useState } from "react";
 import axios from "axios";
 import { apiUrl } from "../env";
 import "./carousel.css";
@@ -30,6 +30,10 @@ import colecoes from "../img/ilustra_colecoes.png";
 import Grid from "@material-ui/core/Grid";
 import ResourceCardFunction from "./ResourceCardFunction.js";
 import CollectionCardFunction from "./CollectionCardFunction.js";
+import colecoes_obj from './FormationMaterialsResources/formationMaterials';
+import ExpandedMaterial from './ExpandedMaterials';
+
+const materials = colecoes_obj();
 
 const areaStyle = {
   paddingTop: "5px",
@@ -60,6 +64,7 @@ class ReqResources extends Component {
     var row1 = this.state.resources.slice(0, 4);
     var row2 = this.state.resources.slice(4, 8);
     var row3 = this.state.resources.slice(8, 13);
+
     return (
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
         <Row style={{ paddingBottom: "5px" }}>
@@ -206,6 +211,16 @@ class ReqCollections extends Component {
 }
 
 class SubPages extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currMaterial: {
+        open: false,
+        material: {}
+      },
+    };
+  }
+
   areaRender() {
     switch (this.props.banner) {
       case "Recursos":
@@ -254,6 +269,19 @@ class SubPages extends Component {
           </React.Fragment>
         );
       case "Materiais":
+
+        const HandleExpandMaterial = (id) => {
+          console.log(id);
+          this.setState({
+            currMaterial: {
+              open: !this.state.currMaterial.open,
+              material: { ...materials[id] }
+            }
+          })
+          console.log(this.state.currMaterial)
+        }
+
+
         return (
           <React.Fragment>
             <div style={{ backgroundColor: "#e81f4f" }}>
@@ -297,22 +325,32 @@ class SubPages extends Component {
                 showStatus={false}
               >
                 <Row>
-                  <Col md={3}>
-                    <MaterialCard name="oioi" />
-                  </Col>
-                  <Col md={3}>
-                    <MaterialCard name="oioi" />
-                  </Col>
-                  <Col md={3}>
-                    <MaterialCard name="oioi" />
-                  </Col>
-                  <Col md={3}>
-                    <MaterialCard name="oioi" />
-                  </Col>
+                  {
+                    materials.map((material, index) => {
+                      return (
+                        <Col md={3} key={index}>
+                          <MaterialCard
+                            name={material.name}
+                            thumb={material.img}
+                            score={material.score}
+                            modules={material.topics}
+                            handleExpand={HandleExpandMaterial}
+                            id={index}
+                          />
+                        </Col>
+                      )
+                    })
+                  }
                 </Row>
               </Carousel>
+              {
+                this.state.currMaterial.open ?
+                  <ExpandedMaterial material={this.state.currMaterial.material}/>
+                  :
+                  null
+              }
             </Container>
-          </React.Fragment>
+          </React.Fragment >
         );
       case "Colecoes":
         return (
@@ -362,4 +400,6 @@ class SubPages extends Component {
     return <div>{this.areaRender()}</div>;
   }
 }
+
+
 export default SubPages;