avatar de autores em cards pronto - cards recurso e coleçoes

src/Components/AreasSubPages.js

@@ -53,10 +53,26 @@ class ReqResources extends Component{
                       /></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} thumbnail={card.thumbnail} author={card.author}/></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}
+                      author={card.author}
+                      avatar={card.publisher.avatar}
+                      /></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} thumbnail={card.thumbnail} author={card.author}/></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}
+                      author={card.author}
+                      avatar={card.publisher.avatar}
+                      /></Col>)}
       </Row>
     </Carousel>
     )
@@ -83,23 +99,38 @@ 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} thumbnail={card.items_thumbnails} avatar={card.owner.avatar}/></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.items_thumbnails}
+                        avatar={card.owner.avatar}/></Col>)}
       </Row>
       <Row>
-      {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.items_thumbnails} avatar={card.owner.avatar}/></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.items_thumbnails}
+                        avatar={card.owner.avatar}/></Col>)}
       </Row>
       <Row>
-      {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.items_thumbnails} avatar={card.owner.avatar}/></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.items_thumbnails}
+                        avatar={card.owner.avatar}/></Col>)}
       </Row>
     </Carousel>
     )
   }
 }
 
-
-
 class SubPages extends Component{
-
   areaRender(){
     switch(this.props.banner){
     case "Recursos":

src/Components/CollectionCard.js

@@ -11,6 +11,7 @@ import FolderIcon from '@material-ui/icons/Folder';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import StarRatings from 'react-star-ratings';
 import algumaCoisa from "../img/laranja/LIVRO_DIGITAL.jpg";
+import noAvatar from "../img/default_profile.png";
 
 var authorStyle={
   position: "absolute",
@@ -26,10 +27,10 @@ var pictureStyle={
   display: "flex",
   backgroundColor: "white",
   borderRadius: "50%",
-  bottom:"23%",
-  left: "40%",
-  height: "50px",
-  width: "50px",
+  bottom:"7%",
+  left: "37%",
+  height: "70px",
+  width: "70px",
 };
 const slideStyle={
   height: "50px",
@@ -47,6 +48,10 @@ class RenderThumbs extends Component {
   render(){
     if (this.props.thumbs) {
       var array = this.props.thumbs.slice(0,4);
+      if (array.length < 3) {
+        return(
+          <img height="160" src={apiDomain+array[0]}/>)
+      }
     return(
       <Row>
         {array.map(thumb => <Col style={{padding: "0px"}} md={6}><img key={thumb.id} height="80" src={apiDomain+thumb}/> </Col>)}
@@ -60,7 +65,8 @@ class CollectionCard extends Component {
   constructor(props){
     super(props);
     this.state={
-      userStyle: "animatiOff"
+      userStyle: "animatiOff",
+      userAvatar: null,
     };
   }
   onHover(){
@@ -69,19 +75,28 @@ class CollectionCard extends Component {
   onIddle(){
     this.setState({userStyle: "animatiOff"})
   }
+  defAvatar(){
+    if (!this.state.userAvatar && (!this.props.avatar.length)){
+      this.setState({userAvatar: noAvatar});
+    }
+    if (!this.state.userAvatar && (this.props.avatar.length) ) {
+      this.setState({userAvatar:apiDomain+this.props.avatar});
+    }
+  }
   render(){
+    this.defAvatar();
    return (
      <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
      <Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
      <div className={this.state.userStyle}>
-      <img style={slideStyle} src={apiDomain+this.props.avatar}/>
+      <img style={slideStyle} src={this.state.userAvatar}/>
       <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div>
      </div>
      <RenderThumbs thumbs={this.props.thumbnail}/>
      <div style={authorStyle}>
-      <Typography variant="title" color="textSecondary" component="p" >{this.props.name}</Typography>
+      <div style={{textAlign: "center"}}>{this.props.name}</div>
        </div>
-     <img style={pictureStyle} src={apiDomain+this.props.avatar}/>
+     <img style={pictureStyle} src={this.state.userAvatar}/>
 
      </Container>
        <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>

src/Components/ResourceCard.js

@@ -27,6 +27,7 @@ import {apiDomain} from '../env';
 import AddIcon from '@material-ui/icons/CreateNewFolder';
 import Options from './CardOptions'
 import Video from '@material-ui/icons/OndemandVideo';
+import noAvatar from "../img/default_profile.png";
 
 const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
 {label: "Aplicativo" , thumb: aplicativo}, {label: "Áudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}]
@@ -38,7 +39,7 @@ const slideStyle={
 };
 const publisherStyle={
   color: "white",
-  paddinLeft: "20px",
+  paddinLeft: "30px",
   fontSize: "15px"
 
 };
@@ -49,6 +50,7 @@ class ResourceCard extends Component {
     this.state={
       thumbnail: null,
       userStyle: "animatiOff",
+      userAvatar: null,
     };
 
   }
@@ -67,13 +69,22 @@ class ResourceCard extends Component {
   onIddle(){
     this.setState({userStyle: "animatiOff"})
   }
+  defAvatar(){
+    if (!this.state.userAvatar && (!this.props.avatar.length)){
+      this.setState({userAvatar: noAvatar});
+    }
+    if (!this.state.userAvatar && (this.props.avatar) ) {
+      this.setState({userAvatar:apiDomain+this.props.avatar});
+    }
+  }
   render(){
-  this.renderType(this.props.type)
+  this.renderType(this.props.type);
+  this.defAvatar();
    return (
      <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
        <Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}>
          <div className={this.state.userStyle}>
-          <img style={slideStyle} src={apiDomain+this.props.avatar}/>
+          <img style={slideStyle} src={this.state.userAvatar}/>
           <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div>
          </div>
          <img  src={this.state.thumbnail} style={{height:"100%"}}alt="thumbnail do recurso"/>