diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js index 0663a44c4412e545429c7b560bf9eb2ca9e88126..c3be595d77195988bb83f7c43106d4cd6a2f43eb 100644 --- a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js +++ b/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>