Improving the style of the page

src/Components/TabPanels/PublicUserPageTabs/TabInicio.js

@@ -20,10 +20,8 @@ import React from 'react'
 import styled from 'styled-components'
 import UserDescription from './UserDescription.js'
 import NoContentImage from '../../../img/img-16.png'
-import Grid from '@material-ui/core/Grid';
-import LastLearnObjs from './LastLearnObj.js'
-import LastCols from './LastCollections.js'
-import {ContainerStyled} from '../StyledComponents.js'
+import Template from '../PanelComponents/TemplateRecurso'
+import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
 
 const NoContentContainer = styled.div`
     height : 250px;
@@ -46,11 +44,11 @@ const NoContentContainer = styled.div`
     }
 `
 /*Displays given image and text saying user hasn't posted anything yet*/
-export function NoContent (props) {
+export function NoContent(props) {
     return (
         <NoContentContainer>
-            <div style={{paddingTop : "1em"}}>
-                <img alt="" src={props.image} style={{width : "130px", verticalAlign : "middle", border : "0"}}/>
+            <div style={{ paddingTop: "1em" }}>
+                <img alt="" src={props.image} style={{ width: "130px", verticalAlign: "middle", border: "0" }} />
                 <h3>
                     {props.text1}
                 </h3>
@@ -63,55 +61,36 @@ export function NoContent (props) {
     )
 }
 
-export default function TabInicio (props) {
-
+export default function TabInicio({ id, user, learningObjs, collections }) {
     return (
         <React.Fragment>
             {/*display user description*/}
-            {props.user.description &&
-                <UserDescription text={props.user.description}/>
-            }
             {
-                props.user.learning_objects_count === 0 && props.user.collections_count === 0 ?
-                (
-                    [
-                        <ContainerStyled>
-                            <Grid container>
-                                <Grid item xs={12}>
-                                    <NoContent
-                                        image={NoContentImage}
-                                        text1={props.user.name + " ainda não disponibilizou nenhum recurso ou coleção."}
-                                        text2={"Quando disponibilizar, eles aparecerão aqui."}
-                                    />
-                                </Grid>
-                            </Grid>
-                        </ContainerStyled>
-                    ]
-                )
-                :
-                (
-                    [
-                        <React.Fragment>
-                            <ContainerStyled style={{flexDirection : "column"}}>
-                                <LastLearnObjs
-                                    count={props.user.learning_objects_count}
-                                    username={props.user.name}
-                                    learningObjs={props.learningObjs}
-                                    />
-                            </ContainerStyled>
-
-                            <ContainerStyled style={{flexDirection : "column", paddingTop : "1em"}}>
-                                <LastCols
-                                    count={props.user.collections_count}
-                                    username={props.user.name}
-                                    collections={props.collections}
-                                    />
-                            </ContainerStyled>
-                        </React.Fragment>
-                    ]
-                )
+                user.description &&
+                <UserDescription text={user.description} />
             }
-            {/*display last published learning objects and last alterations in user collections*/}
+            <Template
+                length={learningObjs.length}
+                titleText={learningObjs.length === 1 ? `Recurso de ${user.name}` : `Recursos de ${user.name}`}
+                noContentText={`${user.name} não publicou nenhum recursos ainda`}
+                slice={learningObjs}
+                showMore={() => { }} // there is no function here, because we don't want to display more resources in this tab
+                loadingMore={false}
+                end={learningObjs.length}
+                error={false}
+            />
+            <PanelTemplateColecao
+                title={`Coleçoes de ${user.name}`}
+                length={collections.length}
+                noContentText={`${user.name} não publicou nenhuma coleção ainda`}
+                sliceArr={collections}
+                showMore={() => { }} // there is no function here, because we don't want to display more collections in this tab
+                loadingMore={false}
+                end={collections.length}
+                followed={false}
+                error={false}
+            />
+
 
         </React.Fragment>