thumbs dos recursos prontas

src/Components/AreasSubPages.js

@@ -32,7 +32,6 @@ class ReqResources extends Component{
     axios.get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
     .then(res=> {
       this.setState({resources: res.data});
-
     });
   }
   render(){
@@ -42,13 +41,13 @@ class ReqResources extends Component{
     return(
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
       <Row style={{paddingBottom: "5px"}}>
-      {row1.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+      {row1.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail}/></Col>)}
       </Row>
       <Row>
-      {row2.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+      {row2.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail}/></Col>)}
       </Row>
       <Row>
-      {row3.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+      {row3.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail}/></Col>)}
       </Row>
     </Carousel>
     )
@@ -75,13 +74,13 @@ class ReqCollections extends Component{
     return(
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
       <Row style={{paddingBottom: "5px"}}>
-      {row1.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description}/></Col>)}
+      {row1.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
       </Row>
       <Row>
-      {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+      {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
       </Row>
       <Row>
-      {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+      {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
       </Row>
     </Carousel>
     )

src/Components/ResourceCard.js

@@ -23,6 +23,7 @@ import software from "../img/laranja/SOFTWARE.jpg";
 import texto from "../img/laranja/TEXTO.jpg";
 import video from "../img/laranja/VIDEO.jpg";
 
+import {apiDomain} from '../env';
 import AddIcon from '@material-ui/icons/CreateNewFolder';
 import Options from './CardOptions'
 import Video from '@material-ui/icons/OndemandVideo';
@@ -34,16 +35,19 @@ class ResourceCard extends Component {
   constructor(props) {
     super(props);
     this.state={
-      thumbnail: this.props.thumbnail,
+      thumbnail: null,
       userStyle: "animation",
     };
 
   }
   renderType(type){
-    if (!this.state.thumbnail) {
+    if (!this.state.thumbnail && !this.props.thumbnail ) {
       var aux = types.find(function(element){ return element.label === type});
       this.setState({thumbnail: aux.thumb});
     }
+    if (!this.state.thumbnail && this.props.thumbnail ) {
+      this.setState({thumbnail: apiDomain + this.props.thumbnail});
+    }
   }
   onHover(){
     this.setState({userStyle: "animationOn"});
@@ -55,9 +59,9 @@ class ResourceCard extends Component {
   this.renderType(this.props.type)
    return (
      <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
-       <Container style={{padding:"0px", backgroundColor: "#ff7f00"}}>
+       <Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}>
        <div className={this.state.userStyle}>aaaaaaaaaaa</div>
-       <img  src={this.state.thumbnail} alt="thumbnail do recurso"/>
+       <img  src={this.state.thumbnail} style={{height:"100%"}}alt="thumbnail do recurso"/>
        </Container>
        <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
          <Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}>

src/Pages/Home.js

 import React, {Component} from 'react';
 import './Styles/Home.css';
 import SearchSection from '../Components/SearchSection';
-// import SubPages from '../Components/AreasSubPages';
+import SubPages from '../Components/AreasSubPages';
 import StatsBar from '../Components/StatsBar';
 import Funcionalities from '../Components/Funcionalities';
 class App extends Component {
@@ -23,7 +23,7 @@ class App extends Component {
       return (
         <React.Fragment>
           <SearchSection function={this.changeBanner} banner={this.state.bannerState}/>
-
+          <SubPages banner={this.state.bannerState}/>
           <StatsBar/>
           <Funcionalities/>
         </React.Fragment>

src/env.js

@@ -4,3 +4,4 @@ var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
     apiUrl = apiDomain + '/' + apiVersion;
 
 export {apiUrl};
+export {apiDomain};