From f78fa0300bc010ab848679f1e46d9adeadce72df Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Thu, 4 Feb 2021 12:15:20 -0300
Subject: [PATCH] Passed the correct params to collection card

---
 src/Components/AreasSubPages.js               |  95 ++++----
 src/Components/CollectionCardFunction.js      |  73 +++++-
 .../PanelComponents/TemplateColecao.js        |  96 ++++----
 .../PublicUserPageTabs/LastCollections.js     |  87 +++----
 .../PublicUserPageTabs/TabColecoes.js         |  45 ++--
 .../TabPanels/UserPageTabs/PanelColecoes.js   | 221 +++++++++---------
 6 files changed, 346 insertions(+), 271 deletions(-)

diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 4b24e10d..00984b87 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -48,38 +48,38 @@ class ReqResources extends Component {
         this.setState({ resources: res.data });
       });
   }
-  
-  resourcesPerPage(){
+
+  resourcesPerPage() {
     var pageWidth = window.innerWidth
-    if (pageWidth >= 1200){
+    if (pageWidth >= 1200) {
       return 3
     }
-    else{
+    else {
       if (pageWidth > 766) {
         return 2
       }
-      else{
+      else {
         return 1
       }
     }
   }
-  
+
 
 
   render() {
     var rows = []
     var resources_per_page = this.resourcesPerPage()
-    for(let i = 0; i < 12/resources_per_page; i++){
-      rows.push(this.state.resources.slice(i*resources_per_page, resources_per_page*(i+1)))
+    for (let i = 0; i < 12 / resources_per_page; i++) {
+      rows.push(this.state.resources.slice(i * resources_per_page, resources_per_page * (i + 1)))
     }
     return (
 
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
         {
           rows.map((row, index) => (
-            <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%",  justifyContent: "center"}} key={(index+1)}>
+            <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
               {row.map((card) => (
-                <div style={{marginLeft:10, display: 'flex' }} key={card.id*(index+1)}>
+                <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
                   <ResourceCardFunction
                     avatar={card.publisher.avatar}
                     id={card.id}
@@ -120,16 +120,16 @@ class ReqCollections extends Component {
         console.log(res.data);
       });
   }
-  collectionsPerPage(){
+  collectionsPerPage() {
     var pageWidth = window.innerWidth
-    if (pageWidth >= 1200){
+    if (pageWidth >= 1200) {
       return 3
     }
-    else{
+    else {
       if (pageWidth > 766) {
         return 2
       }
-      else{
+      else {
         return 1
       }
     }
@@ -138,18 +138,19 @@ class ReqCollections extends Component {
   render() {
     var rows = []
     var collections_per_page = this.collectionsPerPage()
-    for(let i = 0; i < 12/collections_per_page; i++){
-      rows.push(this.state.collections.slice(i*collections_per_page, collections_per_page*(i+1)))
+    for (let i = 0; i < 12 / collections_per_page; i++) {
+      rows.push(this.state.collections.slice(i * collections_per_page, collections_per_page * (i + 1)))
     }
     return (
       <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
         {
           rows.map((row, index) => (
-            <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%", justifyContent: "center" }} key={(index+1)}>
+            <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
               {row.map((card) => (
-                <div style={{marginLeft:10, display: 'flex' }} key={card.id*(index+1)}>
+                <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
                   <CollectionCardFunction
                     name={card.name}
+                    tags={card.tags}
                     rating={card.score}
                     id={card.id}
                     author={card.owner.name}
@@ -157,11 +158,15 @@ class ReqCollections extends Component {
                     thumbnails={card.items_thumbnails}
                     avatar={card.owner.avatar}
                     likeCount={card.likes_count}
+                    followed={card.followed}
+                    liked={card.liked}
+                    collections={card.collection_items}
+                    authorID={card.owner.id}
                   />
                 </div>
               ))}
             </Row>
-        ))}
+          ))}
       </Carousel>
     );
   }
@@ -183,20 +188,20 @@ class SubPages extends Component {
       case "Recursos":
         return (
           <React.Fragment>
-            <div style={{ backgroundColor: "#ff7f00", position:"relative" }}>
-              <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+            <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
+              <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
                 <img
                   src={recursos}
                   alt="aba recursos"
                   height="155"
-                  style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+                  style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
                 />
-                <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
-                      Nesta área, você tem acesso a Recursos Educacionais
-                      Digitais, isto é, a vídeos, animações e a outros recursos
-                      destinados à educação. São Recursos de portais parceiros
-                      do MEC e de professores que, como você, atuam na Educação
-                      Básica!
+                <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+                  Nesta área, você tem acesso a Recursos Educacionais
+                  Digitais, isto é, a vídeos, animações e a outros recursos
+                  destinados à educação. São Recursos de portais parceiros
+                  do MEC e de professores que, como você, atuam na Educação
+                  Básica!
                     </p>
               </div>
             </div>
@@ -241,20 +246,20 @@ class SubPages extends Component {
 
         return (
           <React.Fragment>
-            <div style={{ backgroundColor: "#e81f4f", position:"relative" }}>
-              <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+            <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
+              <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
                 <img
                   src={materiais}
                   alt="aba recursos"
                   height="155"
-                  style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+                  style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
                 />
-                <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
-                      Nesta área, você acessa livremente materiais completos de
-                      formação, como cursos já oferecidos pelo MEC e seus
-                      parceiros. São conteúdos elaborados por equipes
-                      multidisciplinares e de autoria de pesquisadores e
-                      educadores renomados nas áreas.
+                <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+                  Nesta área, você acessa livremente materiais completos de
+                  formação, como cursos já oferecidos pelo MEC e seus
+                  parceiros. São conteúdos elaborados por equipes
+                  multidisciplinares e de autoria de pesquisadores e
+                  educadores renomados nas áreas.
                     </p>
               </div>
             </div>
@@ -306,19 +311,19 @@ class SubPages extends Component {
       case "Colecoes":
         return (
           <React.Fragment>
-            <div style={{ backgroundColor: "#673ab7", position:"relative" }}>
-              <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+            <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+              <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
                 <img
                   src={colecoes}
                   alt="aba recursos"
                   height="155"
-                  style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+                  style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
                 />
-                <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
-                      Nesta área, você tem acesso às coleções criadas e
-                      organizadas pelos usuários da plataforma. É mais uma
-                      possibilidade de buscar recursos educacionais para sua
-                      aula!
+                <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+                  Nesta área, você tem acesso às coleções criadas e
+                  organizadas pelos usuários da plataforma. É mais uma
+                  possibilidade de buscar recursos educacionais para sua
+                  aula!
                     </p>
               </div>
             </div>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index b48c2eb6..5a61b287 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -44,7 +44,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import MuiAlert from '@material-ui/lab/Alert';
 
 export default function CollectionCardFunction(props) {
-    console.log(props);
+    // console.log(props);
     const { state } = useContext(Store)
 
     // eslint-disable-next-line
@@ -115,7 +115,54 @@ export default function CollectionCardFunction(props) {
     }
 
     useEffect(() => {
-        console.log("bla!");
+        // setTimeout(function () {
+        //     if (state.currentUser.id) {
+        //         const config = getAxiosConfig();
+        //         axios({
+        //             method: 'get',
+        //             url: `${apiUrl}/users/${state.currentUser.id}/following/Collection`,
+        //             headers: config.headers
+        //         }).then(
+        //             (response) => {
+        //                 const data = response.data
+        //                 for (let i = 0; i < data.length; i++)
+        //                     if (data[i].followable.id === props.id)
+        //                         toggleUserFollowingCol(true)
+        //                 saveHeaders(response)
+        //             })
+        //     }
+        //     else {
+        //         toggleLiked(false);
+        //         toggleUserFollowingCol(false);
+        //     }
+        // }, 1000);
+        
+        // setTimeout(function () {
+        //     if (state.currentUser.id) {
+        //         const config = getAxiosConfig();
+        //         axios({
+        //             method: 'get',
+        //             url: `${apiUrl}/users/${state.currentUser.id}/collections/liked`,
+        //             headers: config.headers
+        //         }).then(
+        //             (response) => {
+        //                 const data = response.data
+        //                 for (let i = 0; i < data.length; i++)
+        //                     if (data[i].id === props.id)
+        //                         toggleLiked(true)
+        //                 saveHeaders(response)
+        //             })
+        //     }
+        //     else {
+        //         toggleLiked(false);
+        //         toggleUserFollowingCol(false);
+        //     }
+        // }, 2000);
+        if(!state.currentUser.id)
+        {
+            toggleLiked(false);
+            toggleUserFollowingCol(false);
+        }
     }, [state.currentUser.id])
 
     const RenderFollowingButton = () => {
@@ -144,6 +191,26 @@ export default function CollectionCardFunction(props) {
 
     const SlideAnimationContent = () => {
         return (
+            // <SlideContentDiv>
+            //     <HeaderContainer>{/*marginBottom:10px*/}
+            //         <AvatarDiv>
+            //             <img className="img" src={userAvatar} alt="user avatar" />
+            //         </AvatarDiv>
+            //         <EnviadoPor>
+            //             Enviado por:
+            //             <br />
+            //             <p>{props.author}</p>
+            //         </EnviadoPor>
+            //     </HeaderContainer>
+            //     <TagContainer>
+            //         {
+            //             props.tags.map((tag) =>
+            //                 <span key={tag.id}>{tag.name}</span>
+
+            //             )
+            //         }
+            //     </TagContainer>
+            // </SlideContentDiv>
             <SlideContentDiv>
                 <div style={{ display: "flex", flex: "1" }}>{/*marginBottom:10px*/}
                     <SlideAvatarDiv>
@@ -187,7 +254,7 @@ export default function CollectionCardFunction(props) {
         }
         handleSuccessfulLogin(false);
     }
-    
+
     return (
         <>
             <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index dfb193fc..0aeff38c 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -21,16 +21,17 @@ import Grid from '@material-ui/core/Grid';
 import NoContent from './NoContent.js'
 import CollectionCardFunction from '../../CollectionCardFunction.js'
 import Title from './PanelTitle.js'
-import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
-import {ButtonsAreaColecao} from './ButtonsArea'
+import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
+import { ButtonsAreaColecao } from './ButtonsArea'
 
 
-export default function PanelTemplateColecao (props) {
+export default function PanelTemplateColecao(props) {
     const RenderFollowedColCard = (card, followerBoolean) => {
         if (followerBoolean) {
             return (
                 <CollectionCardFunction
-                    name={card.followable.name}
+                    name={card.name}
+                    collections={card.followable.collection_items}
                     rating={card.followable.score}
                     type={card.followable.object_type}
                     description={card.followable.description}
@@ -43,27 +44,28 @@ export default function PanelTemplateColecao (props) {
                     followed={card.followable.followed}
                     privacy={card.followable.privacy}
                     id={card.followable.id}
-                    />
+                />
             )
         }
         else {
             return (
                 <CollectionCardFunction
-                      name={card.name}
-                      rating={card.score}
-                      type={card.object_type}
-                      description={card.description}
-                      author={card.owner.name}
-                      avatar={card.owner.avatar}
-                      authorID={card.owner.id}
-                      thumbnails={card.items_thumbnails}
-                      likeCount={card.likes_count}
-                      privacy={card.privacy}
-                      liked={card.liked}
-                      followed={card.followed}
-                      tags={card.tags}
-                      id={card.id}
-                  />
+                    name={card.name}
+                    rating={card.score}
+                    type={card.object_type}
+                    collections={card.collection_items}
+                    description={card.description}
+                    author={card.owner.name}
+                    avatar={card.owner.avatar}
+                    authorID={card.owner.id}
+                    thumbnails={card.items_thumbnails}
+                    likeCount={card.likes_count}
+                    privacy={card.privacy}
+                    liked={card.liked}
+                    followed={card.followed}
+                    tags={card.tags}
+                    id={card.id}
+                />
             )
         }
     }
@@ -77,35 +79,35 @@ export default function PanelTemplateColecao (props) {
 
             {
                 props.length === 0 ?
-                (
-                    [
-                        <NoContent text={props.noContentText}/>
-                    ]
-                )
-                :
-                (
-                    [
-                        <React.Fragment>
+                    (
+                        [
+                            <NoContent text={props.noContentText} />
+                        ]
+                    )
+                    :
+                    (
+                        [
+                            <React.Fragment>
 
-                            <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
-                            {
-                                props.sliceArr.map( (card) =>
-                                <Grid item md={3} xs={12} key={card.id}>
-                                    {RenderFollowedColCard(card, props.followed)}
-                                </Grid>
-                                )
-                            }
-                            </StyledGrid>
+                                <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+                                    {
+                                        props.sliceArr.map((card) =>
+                                            <Grid item md={3} xs={12} key={card.id}>
+                                                {RenderFollowedColCard(card, props.followed)}
+                                            </Grid>
+                                        )
+                                    }
+                                </StyledGrid>
 
-                            <ButtonsAreaColecao
-                                sliceLength={props.sliceArr.length}
-                                length={props.length}
-                                showMore={() => props.showMore()}
-                                showAll={() => props.showAll()}
-                            />
-                        </React.Fragment>
-                    ]
-                )
+                                <ButtonsAreaColecao
+                                    sliceLength={props.sliceArr.length}
+                                    length={props.length}
+                                    showMore={() => props.showMore()}
+                                    showAll={() => props.showAll()}
+                                />
+                            </React.Fragment>
+                        ]
+                    )
             }
 
         </WhiteContainer>
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
index 3aab2492..2b2148c3 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import Grid from '@material-ui/core/Grid';
-import {HeaderGrid, StyledGrid} from '../StyledComponents.js'
-import {NoContent} from './TabInicio.js'
+import { HeaderGrid, StyledGrid } from '../StyledComponents.js'
+import { NoContent } from './TabInicio.js'
 import CollectionCardFunction from '../../CollectionCardFunction.js'
 import NoCol from '../../../img/Pagina_vazia_colecao.png'
 
-export default function LastCols (props) {
+export default function LastCols(props) {
     return (
         <React.Fragment>
             <HeaderGrid container>
@@ -16,47 +16,48 @@ export default function LastCols (props) {
 
 
             {
-                props.count === 0  || props.collections.length === 0?
-                (
-                    [
-                        <Grid container>
-                            <Grid item xs={12}>
-                                <NoContent
-                                    image={NoCol}
-                                    text1={props.username + " ainda não disponibilizou nenhuma coleção."}
-                                    text2={"Quando disponibilizar, elas aparecerão aqui."}
-                                />
+                props.count === 0 || props.collections.length === 0 ?
+                    (
+                        [
+                            <Grid container>
+                                <Grid item xs={12}>
+                                    <NoContent
+                                        image={NoCol}
+                                        text1={props.username + " ainda não disponibilizou nenhuma coleção."}
+                                        text2={"Quando disponibilizar, elas aparecerão aqui."}
+                                    />
+                                </Grid>
                             </Grid>
-                        </Grid>
-                    ]
-                )
-                :
-                (
-                    [
-                        <StyledGrid container spacing={1} style={{paddingLeft : "0.5em"}}>
-                            {
-                                props.collections.slice(0,4).map( (card) =>
-                                    <Grid item md={3} xs={12} key={card.id}>
-                                        <CollectionCardFunction
-                                            name={card.name}
-                                            rating={card.score}
-                                            type={card.object_type}
-                                            description={card.description}
-                                            author={card.owner.name}
-                                            avatar={card.owner.avatar}
-                                            thumbnails={card.items_thumbnails}
-                                            likeCount={card.likes_count}
-                                            liked={card.liked}
-                                            followed={card.followed}
-                                            tags={card.tags}
-                                            id={card.id}
-                                        />
-                                    </Grid>
-                                )
-                            }
-                        </StyledGrid>
-                    ]
-                )
+                        ]
+                    )
+                    :
+                    (
+                        [
+                            <StyledGrid container spacing={1} style={{ paddingLeft: "0.5em" }}>
+                                {
+                                    props.collections.slice(0, 4).map((card) =>
+                                        <Grid item md={3} xs={12} key={card.id}>
+                                            <CollectionCardFunction
+                                                name={card.name}
+                                                tags={card.tags}
+                                                rating={card.score}
+                                                id={card.id}
+                                                author={card.owner.name}
+                                                description={card.description}
+                                                thumbnails={card.items_thumbnails}
+                                                avatar={card.owner.avatar}
+                                                likeCount={card.likes_count}
+                                                followed={card.followed}
+                                                liked={card.liked}
+                                                collections={card.collection_items}
+                                                authorID={card.owner.id}
+                                            />
+                                        </Grid>
+                                    )
+                                }
+                            </StyledGrid>
+                        ]
+                    )
             }
         </React.Fragment>
     )
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 3622356c..f2beba8f 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -1,17 +1,17 @@
-import React, {useState, useEffect} from 'react'
-import {HeaderGrid, ContainerStyled, Carregados} from '../StyledComponents.js'
+import React, { useState, useEffect } from 'react'
+import { HeaderGrid, ContainerStyled, Carregados } from '../StyledComponents.js'
 import Grid from '@material-ui/core/Grid';
 import CollectionCardFunction from '../../CollectionCardFunction.js'
-import {ButtonMostrarMaisColecao} from '../PanelComponents/ButtonsArea.js'
+import { ButtonMostrarMaisColecao } from '../PanelComponents/ButtonsArea.js'
 
-export default function TabRecursos (props) {
+export default function TabRecursos(props) {
     const [arr, setArr] = useState([])
     const [colsSlice, setSlice] = useState([])
-    const handleSlice = (newArr) => {setSlice(newArr)}
+    const handleSlice = (newArr) => { setSlice(newArr) }
 
-    useEffect( () => {
+    useEffect(() => {
         setArr(props.collections)
-        setSlice(props.collections.slice(0,4))
+        setSlice(props.collections.slice(0, 4))
     }, [])
 
     const showMore = (quantity) => {
@@ -20,31 +20,32 @@ export default function TabRecursos (props) {
     }
 
     return (
-        <ContainerStyled style={{flexDirection : "column"}}>
+        <ContainerStyled style={{ flexDirection: "column" }}>
 
             <HeaderGrid container>
                 <Grid item xs={12}>
-                    <h3>Coleções públicas <b style={{fontWeight:"500"}}>({props.count})</b></h3>
+                    <h3>Coleções públicas <b style={{ fontWeight: "500" }}>({props.count})</b></h3>
                 </Grid>
             </HeaderGrid>
 
-            <Grid container spacing={1} style={{paddingLeft : "0.5em"}}>
+            <Grid container spacing={1} style={{ paddingLeft: "0.5em" }}>
                 {
-                    colsSlice.map( (card) =>
+                    colsSlice.map((card) =>
                         <Grid item md={3} xs={12} key={card.id}>
                             <CollectionCardFunction
                                 name={card.name}
+                                tags={card.tags}
                                 rating={card.score}
-                                type={card.object_type}
-                                description={card.description}
+                                id={card.id}
                                 author={card.owner.name}
-                                avatar={card.owner.avatar}
+                                description={card.description}
                                 thumbnails={card.items_thumbnails}
+                                avatar={card.owner.avatar}
                                 likeCount={card.likes_count}
-                                liked={card.liked}
                                 followed={card.followed}
-                                tags={card.tags}
-                                id={card.id}
+                                liked={card.liked}
+                                collections={card.collection_items}
+                                authorID={card.owner.id}
                             />
                         </Grid>
                     )
@@ -52,19 +53,19 @@ export default function TabRecursos (props) {
             </Grid>
 
             <Carregados>
-                <p style={{margin:"0 0 10px", fontSize:"14px"}}>
+                <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
                     Carregados {colsSlice.length} de {arr.length}
                 </p>
 
                 {
                     props.count > 5 &&
                     <React.Fragment>
-                        <ButtonMostrarMaisColecao onClick={() => {showMore(4)}}>
-                            <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS 4</span>
+                        <ButtonMostrarMaisColecao onClick={() => { showMore(4) }}>
+                            <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
                         </ButtonMostrarMaisColecao>
 
-                        <ButtonMostrarMaisColecao onClick={() => {showMore(20)}}>
-                            <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS 20</span>
+                        <ButtonMostrarMaisColecao onClick={() => { showMore(20) }}>
+                            <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
                         </ButtonMostrarMaisColecao>
                     </React.Fragment>
                 }
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index f7883396..1a397869 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -16,24 +16,24 @@ 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, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import Grid from '@material-ui/core/Grid';
 import LoadingSpinner from '../../LoadingSpinner.js'
 import axios from 'axios'
-import {apiUrl} from '../../../env';
+import { apiUrl } from '../../../env';
 import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
 import PaginaVaziaColecao from '../../../img/Pagina_vazia_colecao.png'
 
 import NoContent from '../PanelComponents/NoContent.js'
-import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
+import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
 import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
 import Title from '../PanelComponents/PanelTitle.js'
 import CollectionCardFunction from '../../CollectionCardFunction.js'
-import {ButtonsAreaColecao} from '../PanelComponents/ButtonsArea'
+import { ButtonsAreaColecao } from '../PanelComponents/ButtonsArea'
 import CriarColecaoModal from '../../CriarColecaoModal.js'
 
-export default function TabPanelColecoes (props) {
+export default function TabPanelColecoes(props) {
     const [loading, handleLoading] = useState(true)
 
     const [userCollections, setUserCollections] = useState([])
@@ -47,7 +47,7 @@ export default function TabPanelColecoes (props) {
             axios.get((`${apiUrl}/users/` + props.id + '/collections'), props.config),
             axios.get((`${apiUrl}/users/` + props.id + '/following/Collection'), props.config),
         ])
-        .then( (responseArr) => {
+            .then((responseArr) => {
                 console.log('responseArr Colecoes: ', responseArr)
                 if (responseArr[1].headers['access-token']) {
                     sessionStorage.setItem('@portalmec/accessToken', responseArr[1].headers['access-token'])
@@ -55,20 +55,20 @@ export default function TabPanelColecoes (props) {
 
                 handleLoading(false)
                 setUserCollections(responseArr[0].data)
-                setUserCollectionsSlice(responseArr[0].data.slice(0,3))
+                setUserCollectionsSlice(responseArr[0].data.slice(0, 3))
 
                 setFollowedCollections(responseArr[1].data)
-                setFollowedCollectionsSlice(responseArr[1].data.slice(0,4))
+                setFollowedCollectionsSlice(responseArr[1].data.slice(0, 4))
 
             },
-            (error) => {
-                handleLoading(false)
-                console.log('error while running axios all')
-            }
-        )
+                (error) => {
+                    handleLoading(false)
+                    console.log('error while running axios all')
+                }
+            )
     }
 
-    useEffect( () => {
+    useEffect(() => {
         getInfo()
     }, [])
 
@@ -77,86 +77,86 @@ export default function TabPanelColecoes (props) {
         setUserCollectionsSlice(userCollections.slice(0, sliceLength + 4))
     }
 
-    const showAllUserCollections = () => {setUserCollectionsSlice(userCollections)}
+    const showAllUserCollections = () => { setUserCollectionsSlice(userCollections) }
 
     const showMoreFollowedCollections = () => {
         var sliceLength = followedCollectionsSlice.length
         setFollowedCollectionsSlice(followedCollections.slice(0, sliceLength + 4))
     }
 
-    const showAllFollowedCollections = () => {setFollowedCollectionsSlice(followedCollections)}
+    const showAllFollowedCollections = () => { setFollowedCollectionsSlice(followedCollections) }
 
     return (
         <>
-        {
-            loading ?
-            (
-                <LoadingSpinner text={'CARREGANDO COLEÇÕES'}/>
+            {
+                loading ?
+                    (
+                        <LoadingSpinner text={'CARREGANDO COLEÇÕES'} />
 
-            )
-            :
-            (
-                [
-                    <React.Fragment>
-                        <Tentativa
-                            title={"Minhas Coleções"}
-                            length={userCollections.length}
-                            noContentText={
-                                <div>
-                                    <img src={PaginaVaziaColecao} alt="PaginaVaziaColecao" style={{height:"150px",width:"150px", verticalAlign:"middle", border:"0"}}/>
-                                    <br/>
-                                    <span style={{fontFamily:"Roboto", fontWeight:"lighter", fontSize:"24px"}}>
-                                        Criamos a sua primeira Coleção!
+                    )
+                    :
+                    (
+                        [
+                            <React.Fragment>
+                                <Tentativa
+                                    title={"Minhas Coleções"}
+                                    length={userCollections.length}
+                                    noContentText={
+                                        <div>
+                                            <img src={PaginaVaziaColecao} alt="PaginaVaziaColecao" style={{ height: "150px", width: "150px", verticalAlign: "middle", border: "0" }} />
+                                            <br />
+                                            <span style={{ fontFamily: "Roboto", fontWeight: "lighter", fontSize: "24px" }}>
+                                                Criamos a sua primeira Coleção!
                                     </span>
-                                    <p style={{fontFamily:"Roboto", fontSize:"16px", margin:"10px 0 0", fontWeight : "normal"}}>
-                                        Adicione nela recursos que você queira acessar mais tarde.
-                                        <br/>
+                                            <p style={{ fontFamily: "Roboto", fontSize: "16px", margin: "10px 0 0", fontWeight: "normal" }}>
+                                                Adicione nela recursos que você queira acessar mais tarde.
+                                        <br />
                                         Crie novas coleções clicando no cartão roxo "Criar Colecão".
                                     </p>
-                                </div>
-                            }
-                            sliceArr={userCollectionsSlice}
-                            showMore={showMoreUserCollections}
-                            showAll={showAllUserCollections}
-                            callback={getInfo}
-                        />
-
-                        <PanelTemplateColecao
-                            title={"Coleções que eu sigo"}
-                            length={followedCollections.length}
-                            noContentText={"Você ainda não segue nenhuma coleção."}
-                            sliceArr={followedCollectionsSlice}
-                            showMore={showMoreFollowedCollections}
-                            showAll={showAllFollowedCollections}
-                            followed={true}
-                        />
-                    </React.Fragment>
-                ]
-            )
-        }
+                                        </div>
+                                    }
+                                    sliceArr={userCollectionsSlice}
+                                    showMore={showMoreUserCollections}
+                                    showAll={showAllUserCollections}
+                                    callback={getInfo}
+                                />
+
+                                <PanelTemplateColecao
+                                    title={"Coleções que eu sigo"}
+                                    length={followedCollections.length}
+                                    noContentText={"Você ainda não segue nenhuma coleção."}
+                                    sliceArr={followedCollectionsSlice}
+                                    showMore={showMoreFollowedCollections}
+                                    showAll={showAllFollowedCollections}
+                                    followed={true}
+                                />
+                            </React.Fragment>
+                        ]
+                    )
+            }
         </>
     )
 }
 
-function Tentativa (props) {
+function Tentativa(props) {
     const [modalOpen, toggleModal] = useState(false)
-    const handleModal = () => {toggleModal(!modalOpen)};
+    const handleModal = () => { toggleModal(!modalOpen) };
 
     return (
         <WhiteContainer>
-            <CriarColecaoModal open={modalOpen} handleClose={() => {handleModal(); props.callback()}}/>
+            <CriarColecaoModal open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
 
             <Title
                 title={props.title}
                 length={props.length}
             />
 
-            <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
+            <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
                 <Grid item md={3} xs={12}>
-                    <CardDiv onClick={()=>{handleModal()}}>
-                        <div style={{backgroundColor:"#673ab7", height:"250px", display:"flex", justifyContent:"center", alignItems:"center"}}>
-                            <CreateNewFolderIcon style={{color:"#fff", fontSize:"70px"}}/>
-                            <p style={{fontSize:"16px", margin:"0 0 10px", color : "#fff"}}>
+                    <CardDiv onClick={() => { handleModal() }}>
+                        <div style={{ backgroundColor: "#673ab7", height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
+                            <CreateNewFolderIcon style={{ color: "#fff", fontSize: "70px" }} />
+                            <p style={{ fontSize: "16px", margin: "0 0 10px", color: "#fff" }}>
                                 CRIAR COLEÇÃO
                             </p>
                         </div>
@@ -165,53 +165,52 @@ function Tentativa (props) {
 
                 {
                     props.length === 0 ?
-                    (
-                        [
-                            <Grid item lg={6} md={4} sm={6} xs={12}>
-                                <NoContent text={props.noContentText}/>
-                            </Grid>
-                        ]
-                    )
-                    :
-                    (
-                        [
-                            <React.Fragment>
-                            {
-                                props.sliceArr.map( (card) =>
-                                <Grid item md={3} xs={12} key={card.id}>
-                                    <CollectionCardFunction
-                                          name={card.name}
-                                          rating={card.score}
-                                          type={card.object_type}
-                                          description={card.description}
-                                          author={card.owner.name}
-                                          avatar={card.owner.avatar}
-                                          authorID={card.owner.id}
-                                          thumbnails={card.items_thumbnails}
-                                          likeCount={card.likes_count}
-                                          liked={card.liked}
-                                          followed={card.followed}
-                                          tags={card.tags}
-                                          privacy={card.privacy}
-                                          id={card.id}
-                                      />
+                        (
+                            [
+                                <Grid item lg={6} md={4} sm={6} xs={12}>
+                                    <NoContent text={props.noContentText} />
                                 </Grid>
-                                )
-                            }
-                            </React.Fragment>
-                        ]
-                    )
-                }
-                </StyledGrid>
-                {
-                    props.length  > 0 &&
-                    <ButtonsAreaColecao
-                        sliceLength={props.sliceArr.length}
-                        length={props.length}
-                        showMore={() => props.showMore()}
-                        showAll={() => props.showAll()}
-                    />
+                            ]
+                        )
+                        :
+                        (
+                            [
+                                <React.Fragment>
+                                    {
+                                        props.sliceArr.map((card) =>
+                                            <Grid item md={3} xs={12} key={card.id}>
+                                                <CollectionCardFunction
+                                                    name={card.name}
+                                                    tags={card.tags}
+                                                    rating={card.score}
+                                                    id={card.id}
+                                                    author={card.owner.name}
+                                                    description={card.description}
+                                                    thumbnails={card.items_thumbnails}
+                                                    avatar={card.owner.avatar}
+                                                    likeCount={card.likes_count}
+                                                    followed={card.followed}
+                                                    liked={card.liked}
+                                                    collections={card.collection_items}
+                                                    authorID={card.owner.id}
+                                                />
+                                            </Grid>
+                                        )
+                                    }
+                                </React.Fragment>
+                            ]
+                        )
                 }
+            </StyledGrid>
+            {
+                props.length > 0 &&
+                <ButtonsAreaColecao
+                    sliceLength={props.sliceArr.length}
+                    length={props.length}
+                    showMore={() => props.showMore()}
+                    showAll={() => props.showAll()}
+                />
+            }
         </WhiteContainer>
     )
 }
-- 
GitLab