diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index a1f5bc7312e8b8c155af2ac88d5390e167f89e7f..fe0844f15ae24d38025de34d359c9cd30ba07463 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -16,9 +16,9 @@ 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, useContext, useEffect} from 'react';
-import {Store} from '../Store.js'
-import {apiDomain} from '../env';
+import React, { useState, useContext, useEffect } from 'react';
+import { Store } from '../Store.js'
+import { apiDomain } from '../env';
import noAvatar from "../img/default_profile.png";
import Button from '@material-ui/core/Button';
import styled from 'styled-components'
@@ -35,7 +35,7 @@ import LockIcon from '@material-ui/icons/Lock';
import ColCardOwnerOptions from './ColCardOwnerOptions.js'
import ColCardPublicOptions from './ColCardPublicOptions'
import { Link } from 'react-router-dom';
-import {putRequest} from '../Components/HelperFunctions/getAxiosConfig'
+import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
@@ -63,12 +63,12 @@ export default function CollectionCardFunction(props) {
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- function handleSuccessLike (data) {
+ function handleSuccessLike(data) {
toggleLiked(!liked)
setLikesCount(data.count)
}
const handleLike = () => {
- putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => {console.log(error)})
+ putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
}
const [followingHover, handleFollowingHover] = useState(false)
@@ -77,11 +77,11 @@ export default function CollectionCardFunction(props) {
const [slideIn, setSlide] = useState(false)
const controlSlide = () => { setSlide(!slideIn) }
- function handleSuccessFollow (data) {
+ function handleSuccessFollow(data) {
handleToggleUserFollowingCol()
}
const handleFollow = () => {
- putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => {console.log(error)})
+ putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
}
const RenderFollowButton = () => {
@@ -136,15 +136,19 @@ export default function CollectionCardFunction(props) {
<p>{props.author}</p>
</EnviadoPor>
</HeaderContainer>
- <TagContainer container direction="row">
- {
- props.tags.map((tag) =>
- <Grid item key={tag.id}>
- <span >{tag.name}</span>
- </Grid>
- )
- }
- </TagContainer>
+ {
+ props.tags ?
+ <TagContainer container direction="row">
+ {
+ props.tags.map((tag) =>
+ <Grid item key={tag.id}>
+ <span >{tag.name}</span>
+ </Grid>
+ )
+ }
+ </TagContainer> :
+ null
+ }
</SlideContentDiv>
)
}
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index e160f5d6acf1b2dd7bcd55d4387ca00bdbdbc08a..bacf2c87feb01ee0f5a236eda286391518314d6c 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -32,8 +32,6 @@ export default function ImgMediaCard(props) {
const [followedBoolean, setFollowedBoolean] = useState(props.followed)
const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) }
- const [avatar, setAvatar] = useState(props.avatar ? props.avatar : noAvatar);
-
return (
<StyledCard>
<CardDiv>
@@ -42,15 +40,15 @@ export default function ImgMediaCard(props) {
<Header>
<StyledCardMedia image={props.cover}>
<div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}>
- <Link to={props.href}>
+ <Link to={props.href} style={{textDecoration : "none"}}>
<FollowersCountButton followCount={props.follow_count} />
</Link>
- <AvatarDiv>
- <img src={avatar} alt='user avatar'
- style={{ height: "100%", width: "100%", borderRadius: "50%" }}
- onError={() => setAvatar(noAvatar)}
- />
- </AvatarDiv>
+ <Link to={props.href}>
+ <AvatarDiv>
+ <img src={props.avatar ? props.avatar : noAvatar} alt='user avatar'
+ style={{ height: "100%", width: "100%", borderRadius: "50%" }} />
+ </AvatarDiv>
+ </Link>
</div>
</StyledCardMedia>
</Header>
diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js
index 33bd2cb56acfa317bcdd2d6c60ae0ff16be5ab13..ef15bcb2bc94425dce168f57728ba19123ecc774 100644
--- a/src/Components/MenuBarMobile.js
+++ b/src/Components/MenuBarMobile.js
@@ -16,17 +16,21 @@ 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 from 'react'
+import React, { useContext } from 'react'
import MenuIcon from '@material-ui/icons/Menu';
import styled from 'styled-components'
import { Button } from '@material-ui/core'
import logo from '../img/logo_small.svg'
import { Link } from 'react-router-dom'
import MobileDrawerMenu from './MobileDrawerMenu';
+import { Store } from '../Store';
+
export default function MenuBarMobile(props) {
const [drawerOpen, setDrawerStatus] = React.useState(false);
+ const { state, dispatch } = useContext(Store)
+
const toggleDrawer = (open) => (event) => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
@@ -42,16 +46,14 @@ export default function MenuBarMobile(props) {
openSignUp={props.openSignUp} openLogin={props.openLogin}
/>
<OuterDiv>
- <DrawerButtonDiv style={{justifySelf : "flex-start", position : "absolute", left : 0}}>
- <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}>
- <MenuIcon className="icon" />
- </Button>
- </DrawerButtonDiv>
- <div className="logo">
- <Link to="/">
- <img src={logo} alt={"Plataforma Integrada"} />
+ <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}>
+ <MenuIcon className="icon" />
+ </Button>
+ <DrawerButtonDiv>
+ <Link to={"/"}>
+ <img src={logo} style={{ border: "0", verticalAlign: "middle" }} />
</Link>
- </div>
+ </DrawerButtonDiv>
</OuterDiv>
</>
)
@@ -60,40 +62,22 @@ export default function MenuBarMobile(props) {
const OuterDiv = styled.div`
height : 48px;
width : 100%;
- display : flex;
- flex-direction : row;
+ ${'' /* position : relative; */}
+ display : flex;
+ direction : row;
align-items : center;
- justify-content : center;
- position : relative;
- .logo {
- align-content : center;
- justify-self : center;
- text-align : center;
- img {
+ img {
height : 38px;
overflow : hidden;
}
- }
-
- .icon {
- vertical-align : middle !important;
- font-weight : normal !important;
- font-style : normal !important;
- font-size : 24px !important;
- line-height : 1 !important;
- letter-spacing : normal !important;
- text-transform : none !important;
- display : inline-block !important;
- white-space : nowrap !important;
- word-wrap : normal !important;
- direction : ltr !important;
- padding-right : 2px;
- color : inherit !important;
- }
`
const DrawerButtonDiv = styled.div`
- justify-self : center;
- position : absolute;
- left : 0;
+ height : 38px;
+ width : 45.55px;
+ position:absolute;
+ left:0;
+ right:0;
+ margin-left:auto;
+ margin-right:auto;
`
\ No newline at end of file
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index f872b4583c995b8ec6da6dad2d1d1c62b13d4b14..01ca7521d766886607235c6691c6e188c7085f7a 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -48,8 +48,8 @@ export default function MobileDrawerMenu (props) {
{ name : "Sobre a Plataforma", href : "sobre", icon : <InfoIcon/>},
{ name : "Contato", href : "contato", icon : <MailOutlineIcon/>},
{ name : "Central de Ajuda", href : "ajuda", icon : <HelpOutlineIcon/>},
- { name: "Busca", href: `/busca?query=${state.search.query}&search_class=${state.search.class}`, icon : <SearchIcon/>},
{ name : "Termos de Uso", href : "termos", icon : <AssignmentIcon/>},
+ { name : "Busca", href : `busca?query=${state.search.query}&search_class=${state.search.class}`, icon : <SearchIcon/> }
]
// {/*used in dynamic css selection*/}
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 47766345b4124791cac883353d10453540a8db3a..cd262e12e5e44acfc10f92095642e6a85fda34f6 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect } from 'react';
import Card from '@material-ui/core/Card';
-import {apiDomain} from '../env';
+import { apiDomain } from '../env';
import ResourceCardOptions from './ResourceCardOptions'
import noAvatar from "../img/default_profile.png";
import Button from '@material-ui/core/Button';
@@ -33,7 +33,7 @@ import { Link } from 'react-router-dom';
import { getDefaultThumbnail } from './HelperFunctions/getDefaultThumbnail'
import GetIconByName from './UploadPageComponents/GetIconByName'
import "./ResourceCard.css";
-import {putRequest} from './HelperFunctions/getAxiosConfig'
+import { putRequest } from './HelperFunctions/getAxiosConfig'
export default function ResourceCardFunction(props) {
const [thumbnail, setThumbnail] = useState(null)
@@ -63,7 +63,7 @@ export default function ResourceCardFunction(props) {
}, [])
- function handleSuccessLike (data) {
+ function handleSuccessLike(data) {
toggleLiked(!liked)
setLikesCount(data.count)
}
@@ -71,32 +71,35 @@ export default function ResourceCardFunction(props) {
const handleLike = () => {
const url = `/learning_objects/${props.id}/like/`
- putRequest(url, {}, handleSuccessLike, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
}
const SlideAnimationContent = () => {
return (
<SlideContentDiv>
- <div style={{padding : 7}}>
+ <div style={{ padding: 7 }}>
<HeaderContainer container="row" justify="flex-start" alignItems="center" >{/*marginBottom:10px*/}
<AvatarDiv item xs={2}>
<img className="img" src={userAvatar} alt="user avatar" />
</AvatarDiv>
<EnviadoPor item xs={10}>
Enviado por:
- <br />
<p>{props.author}</p>
</EnviadoPor>
</HeaderContainer>
- <TagContainer container direction="row">
- {
- props.tags && props.tags.map((tag) =>
- <Grid item key={tag.id}>
- <span >{tag.name}</span>
- </Grid>
- )
- }
- </TagContainer>
+ {
+ props.tags ?
+ <TagContainer container direction="row">
+ {
+ props.tags.map((tag) =>
+ <Grid item key={tag.id}>
+ <span >{tag.name}</span>
+ </Grid>
+ )
+ }
+ </TagContainer> :
+ null
+ }
</div>
</SlideContentDiv>
)
@@ -117,9 +120,7 @@ export default function ResourceCardFunction(props) {
</Slide >
}
<div className={`slideContentLinkBeforeActive${slideIn}`} style={{ height: '100%' }}>
- <Link to={props.href}>
- <img className="img-cover" src={thumbnail} alt="learning object thumbnail" style={{ width: "272.5px" }} />
- </Link>
+ <img className="img-cover" src={thumbnail} alt="learning object thumbnail" style={{ width: "272.5px" }} />
</div>
</Header>
<Description>
@@ -128,49 +129,39 @@ export default function ResourceCardFunction(props) {
{props.title}
</Title>
</Link>
- {
- props.published &&
- <Rating
- name="customized-empty"
- value={props.rating}
- readOnly
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- }
+ <Rating
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
<Footer>
<Type>
{GetIconByName(label)}
<span>{label}</span>
</Type>
- {
- props.published &&
- <LikeCounter>
- <span>{likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
- </ButtonNoWidth>
- </LikeCounter>
- }
+ <LikeCounter>
+ <span>{likesCount}</span>
+ <ButtonNoWidth onClick={handleLike}>
+ <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
+ </ButtonNoWidth>
+ </LikeCounter>
</Footer>
</Description>
</CardReaDiv>
-
- {
- props.published &&
- <CardReaFooter>
- <div style={{ display: "flex", height: "100%" }}>
- <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} recursoId={props.id}
- />
- </div>
- <ResourceCardOptions
- learningObjectId={props.id}
- downloadableLink={props.downloadableLink}
- thumb={props.thumbnail}
- title={props.title}
+ <CardReaFooter>
+ <div style={{ display: "flex", height: "100%" }}>
+ <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} recursoId={props.id}
/>
- </CardReaFooter>
- }
+ </div>
+ <ResourceCardOptions
+ learningObjectId={props.id}
+ downloadableLink={props.downloadableLink}
+ thumb={props.thumbnail}
+ title={props.title}
+ />
+ </CardReaFooter>
</CardDiv>
</StyledCard>
)
diff --git a/src/Components/TabPanels/PanelComponents/ButtonsArea.js b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
index b55cfd06e13cdd636e0c141eac053b737f60485e..6492f0b45d7f707b699345a3eb28a465a33f3a0a 100644
--- a/src/Components/TabPanels/PanelComponents/ButtonsArea.js
+++ b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
@@ -18,75 +18,77 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
-import {Carregados} from '../StyledComponents.js'
+import { Carregados } from '../StyledComponents.js'
import Button from '@material-ui/core/Button';
-export function ButtonsAreaRecurso (props) {
+export function ButtonsAreaRecurso(props) {
return (
<Carregados>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>
- Carregados {props.sliceLength} de {props.length}
+ <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ {props.sliceLength} recursos carregados de {props.total}
</p>
{
- props.length > 4 &&
- <React.Fragment>
- <ButtonMostrarMaisRecurso onClick={() => {props.showMore()}}>
- <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
- </ButtonMostrarMaisRecurso>
-
- <ButtonMostrarTodos onClick={() => {props.showAll()}}>
- <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
- </ButtonMostrarTodos>
- </React.Fragment>
+ props.end ?
+ null :
+ <React.Fragment>
+ <ButtonMostrarMaisRecurso onClick={() => props.showMore(4)}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ </ButtonMostrarMaisRecurso>
+ <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
+ <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ </ButtonMostrarTodos>
+ </React.Fragment>
}
</Carregados>
)
}
-export function ButtonsAreaColecao (props) {
+export function ButtonsAreaColecao(props) {
return (
<Carregados>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>
- Carregados {props.sliceLength} de {props.length}
+ <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ {props.sliceLength} coleções carregadas
</p>
-
{
- props.length > 4 &&
- <React.Fragment>
- <ButtonMostrarMaisColecao onClick={() => {props.showMore()}}>
- <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
- </ButtonMostrarMaisColecao>
-
- <ButtonMostrarTodos onClick={() => {props.showAll()}}>
- <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
- </ButtonMostrarTodos>
- </React.Fragment>
+ props.end ?
+ null
+ :
+ <React.Fragment>
+ <ButtonMostrarMaisColecao onClick={() => { props.showMore(4) }}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ </ButtonMostrarMaisColecao>
+
+ <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
+ <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ </ButtonMostrarTodos>
+ </React.Fragment>
}
-
</Carregados>
)
}
-export function ButtonsAreaRede (props) {
+export function ButtonsAreaRede(props) {
return (
<Carregados>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>
- Carregados {props.sliceLength} de {props.length}
+ <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ {props.sliceLength} usuários carregados
</p>
{
- props.length > 4 &&
- <React.Fragment>
- <ButtonMostrarMaisRede onClick={() => {props.showMore()}}>
- <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
- </ButtonMostrarMaisRede>
-
- <ButtonMostrarTodos onClick={() => {props.showAll()}}>
- <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
- </ButtonMostrarTodos>
- </React.Fragment>
+ props.end ?
+ null
+ :
+ <React.Fragment>
+ <ButtonMostrarMaisRede onClick={() => { props.showMore(4) }}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ </ButtonMostrarMaisRede>
+
+ <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
+ <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ </ButtonMostrarTodos>
+ </React.Fragment>
}
</Carregados>
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index 3b1e029ae45caa45f28068cd95693796a6331a86..5e7f2ec149a9c0ae563207ebf242768ae63f8a7b 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -23,7 +23,7 @@ import CollectionCardFunction from '../../CollectionCardFunction.js'
import Title from './PanelTitle.js'
import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
import { ButtonsAreaColecao } from './ButtonsArea'
-
+import LoadingSpinner from '../../LoadingSpinner.js'
export default function PanelTemplateColecao(props) {
const RenderFollowedColCard = (card, followerBoolean) => {
@@ -78,31 +78,35 @@ export default function PanelTemplateColecao(props) {
{
props.length === 0 ?
- (
- <NoContent text={props.noContentText}/>
- )
- :
- (
+ (
+ <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>
-
- <ButtonsAreaColecao
- sliceLength={props.sliceArr.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ {
+ props.sliceArr.map((card) =>
+ <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
+ {RenderFollowedColCard(card, props.followed)}
+ </Grid>
+ )
+ }
+ </StyledGrid>
+ {
+ props.loadingMore ?
+ <LoadingSpinner text={'Carregando Recursos...'} />
+ :
+ <ButtonsAreaColecao
+ sliceLength={props.sliceArr.length}
+ length={props.length}
+ showMore={props.showMore}
+ end={props.end}
+ />
+ }
</React.Fragment>
- )
+ )
}
</WhiteContainer>
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index 28390ab44fedca9c8e18c95af860496f2317ca55..130a38a314241c8aa54efa92d3eb28b890773661 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -23,6 +23,7 @@ import ResourceCardFunction from '../../ResourceCardFunction.js'
import Title from './PanelTitle.js'
import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
import { ButtonsAreaRecurso } from './ButtonsArea'
+import LoadingSpinner from '../../LoadingSpinner.js';
export default function Template(props) {
console.log(props.sliceArr);
@@ -44,10 +45,10 @@ export default function Template(props) {
(
[
<React.Fragment>
- <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ <StyledGrid container spacing={1} justify="center" alignItems="center" style={{ paddingLeft: "30px", paddingRight: "15px" }}>
{
props.sliceArr.map((card) =>
- <Grid item md={3} xs={12} key={card.id}>
+ <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
avatar={card.submitter.avatar}
id={card.learning_object.id}
@@ -67,13 +68,19 @@ export default function Template(props) {
)
}
</StyledGrid>
+ {
+ props.loadingMore ?
+ <LoadingSpinner text="Carregando recurso..." />
+ :
+ <ButtonsAreaRecurso
+ sliceLength={props.sliceArr.length}
+ length={props.length}
+ showMore={props.showMore}
+ end={props.end}
+ total={props.total}
+ />
+ }
- <ButtonsAreaRecurso
- sliceLength={props.sliceArr.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
</React.Fragment>
]
)
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index 127d242fd3485bbbc47761545a497e167311b5a1..fc8338325a1aff892a481225c660698f952e0a80 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -23,8 +23,10 @@ import ResourceCardFunction from '../../ResourceCardFunction.js'
import Title from './PanelTitle.js'
import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
import { ButtonsAreaRecurso } from './ButtonsArea'
+import LoadingSpinner from '../../LoadingSpinner.js'
export default function Template(props) {
+
return (
<WhiteContainer>
<Title
@@ -43,8 +45,9 @@ export default function Template(props) {
<StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
{
props.slice.map((card) =>
- <Grid item md={3} xs={12} key={card.id}>
+ <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
+ key={card.id}
avatar={card.publisher.avatar}
id={card.id}
thumbnail={card.thumbnail}
@@ -58,19 +61,23 @@ export default function Template(props) {
tags={card.tags}
href={"/recurso/" + card.id}
downloadableLink={card.default_attachment_location}
-
/>
</Grid>
)
}
</StyledGrid>
+ {
+ props.loadingMore ?
+ <LoadingSpinner text={'Carregando Recursos...'} />
+ :
+ <ButtonsAreaRecurso
+ sliceLength={props.slice.length}
+ length={props.length}
+ showMore={props.showMore}
+ end={props.end}
+ />
+ }
- <ButtonsAreaRecurso
- sliceLength={props.slice.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
</React.Fragment>
)
}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js
index e92a49db31b72e4b5d89a91f4e26658c520ba66a..0853c14eb8bc573b80906c038d228add9fa2075c 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRede.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js
@@ -1,25 +1,26 @@
import React from 'react'
import ContactCard from '../../ContactCard.js'
-import {apiDomain} from '../../../env';
+import { apiDomain } from '../../../env';
import NoContent from './NoContent.js'
-import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
+import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
import Title from './PanelTitle.js'
import Grid from '@material-ui/core/Grid';
-import {ButtonsAreaRede} from './ButtonsArea'
+import { ButtonsAreaRede } from './ButtonsArea'
+import LoadingSpinner from '../../LoadingSpinner.js'
-export default function PanelTemplateRede (props) {
+export default function PanelTemplateRede(props) {
const RenderContactCard = (card, followerBoolean) => {
if (followerBoolean) {
return (
<ContactCard
- name = {card.follower.name}
- avatar = {card.follower.avatar !== undefined && card.follower.avatar !== ""? apiDomain + card.follower.avatar : null}
+ name={card.follower.name}
+ avatar={card.follower.avatar !== undefined && card.follower.avatar !== "" ? apiDomain + card.follower.avatar : null}
cover={card.follower.cover !== undefined && card.follower.cover !== "" ? apiDomain + card.follower.cover : null}
- numCollections = {card.follower.collections_count}
- numLearningObjects = {card.follower.learning_objects_count}
+ numCollections={card.follower.collections_count}
+ numLearningObjects={card.follower.learning_objects_count}
follow_count={card.follower.follows_count}
- followed = {card.follower.followed || null}
- followerID = {card.follower.id}
+ followed={card.follower.followed || null}
+ followerID={card.follower.id}
href={'/usuario-publico/' + card.follower.id}
/>
)
@@ -27,16 +28,16 @@ export default function PanelTemplateRede (props) {
else {
return (
<ContactCard
- name = {card.followable.name}
- avatar = {card.followable.avatar !== undefined && card.followable.avatar !== "" ? apiDomain + '/' + card.followable.avatar : null}
- cover={card.followable.cover !== undefined && card.followable.cover !== "" ? apiDomain + card.followable.cover : null}
- numCollections = {card.followable.collections_count}
- numLearningObjects = {card.followable.learning_objects_count}
- follow_count={card.followable.follows_count}
- followed = {card.followable.followed || null}
- followedID = {card.followable.id}
- href={'/usuario-publico/' + card.followable.id}
- />
+ name={card.followable.name ? card.followable.name : null}
+ avatar={card.followable.avatar !== undefined && card.followable.avatar !== "" ? apiDomain + '/' + card.followable.avatar : null}
+ cover={card.followable.cover !== undefined && card.followable.cover !== "" ? apiDomain + card.followable.cover : null}
+ numCollections={card.followable.collections_count}
+ numLearningObjects={card.followable.learning_objects_count}
+ follow_count={card.followable.follows_count}
+ followed={card.followable.followed || null}
+ followedID={card.followable.id}
+ href={'/usuario-publico/' + card.followable.id}
+ />
)
}
}
@@ -54,39 +55,43 @@ export default function PanelTemplateRede (props) {
{/*otherwise, display either ContactCard and Buttons */}
{
props.length === 0 ?
- (
- [
- <NoContent text={props.noContentText}/>
- ]
- )
- :
- (
- [
- <React.Fragment>
- <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
- {
- props.sliceArr.map( (card) =>
- <>
+ (
+ [
+ <NoContent text={props.noContentText} />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
{
- card.follower &&
- <Grid item md={3} xs={12} key={card.id}>
- {RenderContactCard(card, props.follower)}
- </Grid>
+ props.sliceArr.map((card) =>
+ <>
+ {
+ card.follower &&
+ <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
+ {RenderContactCard(card, props.follower)}
+ </Grid>
+ }
+ </>
+ )
}
- </>
- )
+ </StyledGrid>
+ {
+ props.loadingMore ?
+ <LoadingSpinner text={'Carregando Recursos...'} />
+ :
+ <ButtonsAreaRede
+ sliceLength={props.sliceArr.length}
+ length={props.length}
+ showMore={props.showMore}
+ end={props.end}
+ />
}
- </StyledGrid>
-
- <ButtonsAreaRede
- sliceLength={props.sliceArr.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
- </React.Fragment>
- ]
- )
+ </React.Fragment>
+ ]
+ )
}
</WhiteContainer>
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index d77966a39660501c93ccc687a52056cd301b1eb2..c8e75d5d2774b63cbb3140a3f40d7d45abb97f84 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -173,6 +173,9 @@ export const UserProfileContainer = styled.div`
export const CoverContainer = styled.div`
height : 230px;
position : relative;
+ @media screen and (max-width: 501px) {
+ height : 128px
+ }
`
export const UserProfileInfoDiv = styled.div`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 7fc15c9ec3ce8c020b15c1bf6321697f50fa4d10..0985db2b681552b0e8a2a726cb959ef72892e7c6 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -16,42 +16,52 @@ 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 Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
-import {apiDomain} from '../../../env';
+import { apiDomain } from '../../../env';
import Bolo from '../../../img/Bolo.png'
import LoadingSpinner from '../../LoadingSpinner.js'
import ActivityListItem from '../../ActivityListItem.js'
import List from '@material-ui/core/List';
-import {getRequest} from '../../HelperFunctions/getAxiosConfig.js'
-import {getRecipientHref} from '../../Activities/getRecipientHref.js'
+import { getRequest } from '../../HelperFunctions/getAxiosConfig.js'
+import Grid from '@material-ui/core/Grid';
+import DefaultProfile from '../../../img/default_profile.png';
-export default function TabPanelAtividades (props) {
- const [loading, handleLoading] = useState(true)
+export default function TabPanelAtividades(props) {
+
+ const [loading, handleLoading] = useState(true)
+ const [loadingMore, handleLoadingMore] = useState(false);
const [notifications, setNotifications] = useState([]);
const [notificatonsLength, setLength] = useState(0);
- const [notificationsSlice, setNotificationsSlice] = useState([])
+ const [totalResults, setTotalResults] = useState(0);
+ const [limit, setLimit] = useState(4);
const showMore = (offset) => {
- var sliceLength = notificationsSlice.length
- setNotificationsSlice(notifications.slice(0, sliceLength + offset))
+ handleLoadingMore(true);
+ const url = `/feed?offset=${limit}&limit=${offset}`
+ setLimit(limit + offset)
+ getRequest(url, handleSuccess, (error) => { console.log(error) })
}
- function handleSuccess (data) {
- setNotifications(data)
- setNotificationsSlice(data.slice(0,30))
- setLength(data.length)
+ function handleSuccess(data, header) {
+ if (header.has('X-Total-Count')) {
+ setTotalResults(header.get('X-Total-Count'));
+ }
+ handleLoadingMore(false);
+ let currData = [...notifications];
+ currData = currData.concat(data);
+ setNotifications(currData)
+ setLength(currData.length)
handleLoading(false)
}
- useEffect( () => {
+ useEffect(() => {
const url = `/feed?offset=0&limit=30`
- getRequest(url, handleSuccess, (error) => {console.log(error)})
-
+ getRequest(url, handleSuccess, (error) => { console.log(error) })
}, [])
return (
@@ -62,70 +72,87 @@ export default function TabPanelAtividades (props) {
<DivTitulo>
<InnerDivTitulo>
<TituloContent>
- <p style={{margin:"0 0 10px", marginBottom : "40px"}}>Todas Notificações</p>
+ <p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p>
</TituloContent>
</InnerDivTitulo>
</DivTitulo>
{
loading ?
- (
- <LoadingSpinner text={'Carregando Atividades'}/>
- )
- :
- (
- [
- <div>
- {
- notificatonsLength === 0 ?
- (
-
- <NoNotificationsDiv>
- <div>
- <div>
- <H3Styled><img src={Bolo} alt='bolo' style={{width:"23px"}}/> Você se cadastrou na Plataforma</H3Styled>
- </div>
- <p
- style={{fontSize:"15px", fontWeight:"lighter", margin:"0 0 10px", display:"flex", justifyContent:"center", textAlign:"center"}}
- >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
- <br/>
+ (
+ <LoadingSpinner text={'Carregando Atividades'} />
+ )
+ :
+ (
+ [
+ <div>
+ {
+ notificatonsLength === 0 ?
+ (
+
+ <NoNotificationsDiv>
+ <div>
+ <div>
+ <H3Styled><img src={Bolo} alt='bolo' style={{ width: "23px" }} /> Você se cadastrou na Plataforma</H3Styled>
+ </div>
+ <p
+ style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
+ <br />
com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
</p>
- </div>
- </NoNotificationsDiv>
-
- )
- :
- (
- <>
- <List height={400} width={300}>
- {
- notificationsSlice.map( (notification) =>
- <ActivityListItem
- onMenuBar={false}
- avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
- activity = {notification.activity}
- actionType = {notification.trackable_type}
- objectType = {notification.recipient_type}
- createdAt = {notification.created_at}
- ownerName = {notification.owner.name}
- ownerHref = {'/usuario-publico/' + notification.owner.id}
- recipientName = {notification.recipient.name}
- recipientHref = {getRecipientHref(notification)}
- />
- )
- }
- </List>
- <LoadMoreButton onClick={() => {showMore(4)}}><span>CARREGAR MAIS 4</span></LoadMoreButton>
- <LoadMoreButton onClick={() => {showMore(20)}}><span>CARREGAR MAIS 20</span></LoadMoreButton>
- <span style={{fontSize:"14px", color : "#666"}}>Mostrando {notificationsSlice.length} de {notificatonsLength}</span>
- </>
- )
- }
- </div>
-
- ]
- )
- }
+ </div>
+ </NoNotificationsDiv>
+
+ )
+ :
+ (
+ <>
+ <List height={400} width={300}>
+ {
+ notifications.map((notification, id) =>
+ <ActivityListItem
+ key={id}
+ onMenuBar={false}
+ avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : DefaultProfile}
+ activity={notification.activity}
+ actionType={notification.trackable_type}
+ objectType={notification.recipient_type}
+ createdAt={notification.created_at}
+ ownerName={notification.owner.name}
+ ownerHref={'/usuario-publico/' + notification.owner.id}
+ recipientName={notification.recipient.name}
+ recipientHref={"/recurso/" + notification.recipient.id}
+ />
+ )
+ }
+ </List>
+ {
+ loadingMore ?
+ <LoadingSpinner text="Carregando mais atividades..." />
+ :
+ <Grid container direction="row" alignItems="center" justify="flex-start">
+ <Grid item xs={12} md={4}>
+ <LoadMoreButton onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
+ </Grid>
+ <Grid item xs={12} md={4}>
+ <LoadMoreButton onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
+ </Grid>
+ <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}>
+ <ShowData disabled={true}>
+ Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade" : "Atividades"}
+ de {totalResults}
+ </ShowData>
+ </Grid>
+ </Grid>
+ }
+ </>
+ )
+ }
+ </div>
+
+ ]
+ )
+ }
</div>
</Paper>
</MainContainerDesktop>
@@ -189,6 +216,29 @@ const LoadMoreButton = styled(Button)`
}
`
+const ShowData = styled(Button)`
+ outline : none !important;
+ display : inline-block !important;
+ cusor : pointer !important;
+ min-height : 36px !important;
+ min-widht : 88px !important;
+ line-height: 36px !important;
+ vertical-align: middle !important;
+ border : 0 !important;
+ padding : 0 px !important;
+ margin : 6px 8px !important;
+ text-decoration : none !important;
+ font-weight : 500 !important;
+ overflow : hidden !important;
+ text-transform : none !important;
+ font-size : 14px !important;
+ background : transparent !important;
+ color : #666 !important
+ &:hover {
+ background : rgba(158,158,158,0.2) !important
+ }
+`
+
const TituloContent = styled.div`
display : block;
z-index : 1;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index a6ec0c91cf89e1e6fd8ee9afed41d9c250be1d1a..acdd2828493659933402c652e989a906de2c54d4 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -17,6 +17,7 @@ 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 Card from '@material-ui/core/Card';
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import LoadingSpinner from '../../LoadingSpinner.js'
@@ -29,56 +30,93 @@ import Title from '../PanelComponents/PanelTitle.js'
import CollectionCardFunction from '../../CollectionCardFunction.js'
import { ButtonsAreaColecao } from '../PanelComponents/ButtonsArea'
import CriarColecaoModal from '../../CriarColecaoModal.js'
-import {fetchAllRequest} from '../../HelperFunctions/getAxiosConfig'
+import {fetchAllRequest, getRequest} from '../../HelperFunctions/getAxiosConfig'
export default function TabPanelColecoes(props) {
const [loading, handleLoading] = useState(true)
const [userCollections, setUserCollections] = useState([])
- const [userCollectionsSlice, setUserCollectionsSlice] = useState([])
-
const [followedCollections, setFollowedCollections] = useState([])
- const [followedCollectionsSlice, setFollowedCollectionsSlice] = useState([])
+
+ const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
+ const [currLimitFollowedColl, setCurrLimitFollowedColl] = useState(4)
+
+ const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
+ const [loadingMoreFollowedColl, setLoadingMoreFollowedColl] = useState(false);
+
+ const [endOfUserColl, setEndOfUserColl] = useState(false);
+ const [endOfFollowedColl, setEndOfFollowedColl] = useState(false);
function handleSuccess (responseArr) {
handleLoading(false)
setUserCollections(responseArr[0])
- setUserCollectionsSlice(responseArr[0].slice(0,3))
setFollowedCollections(responseArr[1])
- setFollowedCollectionsSlice(responseArr[1].slice(0,4))
}
const getInfo = () => {
- const urls = [`/users/${props.id}/collections`, `/users/${props.id}/following/Collection`]
+ const urls = [
+ `/users/${props.id}/collections?offset=0&limit=4`,
+ `/users/${props.id}/following/Collection?offset=0&limit=4`
+ ]
fetchAllRequest(urls, handleSuccess, (error) => {console.log(error)})
}
useEffect(() => {
+ handleLoading(true)
getInfo()
}, [])
- const showMoreUserCollections = () => {
- var sliceLength = userCollectionsSlice.length
- setUserCollectionsSlice(userCollections.slice(0, sliceLength + 4))
+ const showMoreUserCollections = (limite) => {
+ const limit = limite;
+ setLoadingMoreUserColl(true);
+ setCurrLimitUserColl(currLimitUserColl + limit)
+ const url = `/users/${props.id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...userCollections];
+ currData = [...currData.concat(data)];
+ setLoadingMoreUserColl(false);
+ setUserCollections(currData);
+ }
+ else {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ }
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllUserCollections = () => { setUserCollectionsSlice(userCollections) }
-
- const showMoreFollowedCollections = () => {
- var sliceLength = followedCollectionsSlice.length
- setFollowedCollectionsSlice(followedCollections.slice(0, sliceLength + 4))
+ const showMoreFollowedCollections = (limite) => {
+ const limit = limite;
+ setLoadingMoreFollowedColl(true);
+ setCurrLimitFollowedColl(currLimitFollowedColl + limit)
+ const url = `/users/${props.id}/following/Collection?offset=${currLimitFollowedColl}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...followedCollections];
+ currData = [...currData.concat(data)];
+ setLoadingMoreFollowedColl(false);
+ setFollowedCollections(currData);
+ }
+ else {
+ setLoadingMoreFollowedColl(false);
+ setEndOfFollowedColl(true)
+ }
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllFollowedCollections = () => { setFollowedCollectionsSlice(followedCollections) }
-
return (
<>
{
loading ?
(
<LoadingSpinner text={'CARREGANDO COLEÇÕES'} />
-
)
:
(
@@ -101,9 +139,10 @@ export default function TabPanelColecoes(props) {
</p>
</div>
}
- sliceArr={userCollectionsSlice}
+ sliceArr={userCollections}
showMore={showMoreUserCollections}
- showAll={showAllUserCollections}
+ loadingMore={loadingMoreUserColl}
+ end={endOfUserColl}
callback={getInfo}
/>
@@ -111,9 +150,10 @@ export default function TabPanelColecoes(props) {
title={"Coleções que eu sigo"}
length={followedCollections.length}
noContentText={"Você ainda não segue nenhuma coleção."}
- sliceArr={followedCollectionsSlice}
+ sliceArr={followedCollections}
showMore={showMoreFollowedCollections}
- showAll={showAllFollowedCollections}
+ loadingMore={loadingMoreFollowedColl}
+ end={endOfFollowedColl}
followed={true}
/>
</React.Fragment>
@@ -138,9 +178,9 @@ function Tentativa(props) {
/>
<StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
- <Grid item md={3} xs={12}>
+ <Grid item xs={12} sm={6} md={'auto'} lg={3}>
<CardDiv onClick={() => { handleModal() }}>
- <div style={{ backgroundColor: "#673ab7", height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
+ <div style={{ backgroundColor: "#673ab7", display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center", cursor : "pointer" }}>
<CreateNewFolderIcon style={{ color: "#fff", fontSize: "70px" }} />
<p style={{ fontSize: "16px", margin: "0 0 10px", color: "#fff" }}>
CRIAR COLEÇÃO
@@ -164,7 +204,7 @@ function Tentativa(props) {
<React.Fragment>
{
props.sliceArr.map((card) =>
- <Grid item md={3} xs={12} key={card.id}>
+ <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<CollectionCardFunction
name={card.name}
tags={card.tags}
@@ -189,21 +229,24 @@ function Tentativa(props) {
}
</StyledGrid>
{
- props.length > 0 &&
+ props.loadingMore ?
+ <LoadingSpinner text={'Carregando Recursos...'} />
+ :
<ButtonsAreaColecao
sliceLength={props.sliceArr.length}
length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
+ showMore={props.showMore}
+ end={props.end}
+ />
}
</WhiteContainer>
)
}
-const CardDiv = styled.div`
+const CardDiv = styled(Card)`
margin-top : 10px;
margin-bottom : 10px;
- width : 95%;
- float : left;
+ height : 381px;
+ width : 272.5px;
+ ${'' /* float : left; */}
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
index 796bee8acd0ae4dcf601ff3ebcbd1253199e80cd..91039db942bd3c0c5d8da4d8488a8f55155e05ae 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
@@ -16,58 +16,81 @@ 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 LoadingSpinner from '../../LoadingSpinner.js'
import TemplateCuradoria from '../PanelComponents/TemplateCuradoria.js'
-import {getRequest} from '../../HelperFunctions/getAxiosConfig'
+import { getRequest } from '../../HelperFunctions/getAxiosConfig'
-export default function TabPanelCuradoria (props) {
+export default function TabPanelCuradoria(props) {
const [loading, handleLoading] = useState(true)
- const [submissions, setSubmissions] = useState([])
- const [submissionsSlice, setSubmissionsSlice] = useState([])
+ const [loadingMoreCurating, setLoadingMoreCurating] = useState(false)
+ const [currLimitCurating, setcurrLimitCurating] = useState(4);
+ const [endOfCurating, setEndofCurating] = useState(false);
+ const [curating, setCurating] = useState([]);
+ const [totalResults, setTotalResults] = useState(0);
- const showMoreSubmissions = () => {
- var sliceLength = submissionsSlice.length
- setSubmissionsSlice(submissions.slice(0, sliceLength + 4))
- }
-
- const showAllSubmissions = () => {setSubmissionsSlice(submissions)}
+ const showMoreCurating = (limite) => {
+ setLoadingMoreCurating(true);
+ const limit = limite;
+ setcurrLimitCurating(currLimitCurating + limit)
+ const url = `/users/${props.id}/submissions?offset=${currLimitCurating}&limit=${limit}&status=submitted`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...curating];
+ currData = [...currData.concat(data)];
+ setLoadingMoreCurating(false);
+ setCurating([...currData]);
+ }
+ else {
+ setLoadingMoreCurating(false);
+ setEndofCurating(true);
+ }
- function handleSuccess (data) {
+ },
+ (error) => { console.log(error) }
+ )
+ }
+
+ function handleSuccess(data, header) {
+ if (header.has('X-Total-Count')) {
+ setTotalResults(header.get('X-Total-Count'));
+ }
handleLoading(false)
- setSubmissions(data)
- setSubmissionsSlice(data.slice(0,4))
+ setCurating(data)
}
- useEffect( () => {
- const url = `/users/${props.id}/submissions?offset=0&status=submitted`
-
- getRequest(url, handleSuccess, (error) => {console.log(error)})
+ useEffect(() => {
+ const url = `/users/${props.id}/submissions?offset=0&limit=4&status=submitted`
+ handleLoading(true)
+ getRequest(url, handleSuccess, (error) => { console.log(error) })
}, [])
return (
<React.Fragment>
{
loading ?
- (
- <LoadingSpinner text={"Carregando Recursos"}/>
- )
- :
- (
- [
- <React.Fragment>
- <TemplateCuradoria
- length={submissions.length}
- titleText = {"Recursos a serem curados"}
- noContentText = {"Você não tem nenhum recurso para ser avaliado"}
- sliceArr={submissionsSlice}
- showMore={showMoreSubmissions}
- showAll={showAllSubmissions}
- />
- </React.Fragment>
- ]
- )
- }
+ (
+ <LoadingSpinner text={"Carregando Recursos"} />
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <TemplateCuradoria
+ length={curating.length}
+ titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
+ noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
+ sliceArr={curating}
+ showMore={showMoreCurating}
+ loadingMore={loadingMoreCurating}
+ end={endOfCurating}
+ total={totalResults}
+ />
+ </React.Fragment>
+ ]
+ )
+ }
</React.Fragment>
)
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
index 4edaf7482aefccfad045c1a43ed26acdcf4e15f1..9f4cb6d9df9d8c5b5d56404594134b032149de29 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
@@ -16,90 +16,130 @@ 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 LoadingSpinner from '../../LoadingSpinner.js'
import Template from '../PanelComponents/TemplateRecurso.js'
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
-import {fetchAllRequest} from '../../HelperFunctions/getAxiosConfig'
+import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
-export default function TabPanelFavoritos (props) {
+export default function TabPanelFavoritos(props) {
const [loading, handleLoading] = useState(true)
const [likedLearnObjs, setlikedLearnObjs] = useState([])
- const [likedLearnObjsSlice, setlikedLearnObjsSlice] = useState([])
-
const [likedCollections, setlikedCollections] = useState([])
- const [likedCollectionsSlice, setlikedCollectionsSlice] = useState([])
+ const [currLimitLearnObjLiked, setCurrLimitLearnObjLiked] = useState(4);
+ const [currLimitCollLiked, setcurrLimitCollLiked] = useState(4);
- function handleSuccess (responseArr) {
- setlikedLearnObjs(responseArr[0])
- setlikedLearnObjsSlice(responseArr[0].slice(0,4))
+ const [loadingMoreLearnObj, setLoadingMoreLearnObj] = useState(false)
+ const [loadingMoreColl, setLoadingMoreColl] = useState(false)
+
+ const [endOfLearnObj, setEndofLearndObj] = useState(false)
+ const [endOfColl, setEndoffColl] = useState(false)
+
+
+ function handleSuccess(responseArr) {
+ setlikedLearnObjs(responseArr[0])
setlikedCollections(responseArr[1])
- setlikedCollectionsSlice(responseArr[1].slice(0,4))
handleLoading(false)
}
- useEffect( () => {
- const urls = [ `/users/${props.id}/learning_objects/liked`, `/users/${props.id}/collections/liked`]
+ useEffect(() => {
+ handleLoading(true);
+ const urls = [
+ `/users/${props.id}/learning_objects/liked?offset=0&limit=4`,
+ `/users/${props.id}/collections/liked?offset=0&limit=4`
+ ]
- fetchAllRequest(urls, handleSuccess, (error) => {console.log(error)})
+ fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
}, [])
- const showMoreLikedLearnObj = () => {
- var sliceLength = likedLearnObjsSlice.length
- setlikedLearnObjsSlice(likedLearnObjs.slice(0, sliceLength + 4))
+ const showMoreLikedLearnObj = (limite) => {
+ setLoadingMoreLearnObj(true);
+ const limit = limite;
+ setCurrLimitLearnObjLiked(currLimitLearnObjLiked + limit)
+ const url = `/users/${props.id}/learning_objects/liked?offset=${currLimitLearnObjLiked}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...likedLearnObjs];
+ currData = [...currData.concat(data)];
+ setLoadingMoreLearnObj(false);
+ setlikedLearnObjs(currData);
+ }
+ else {
+ setLoadingMoreLearnObj(false);
+ setEndofLearndObj(true)
+ }
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllLikedLearnObjs = () => {setlikedLearnObjsSlice(likedLearnObjs)}
-
- const showMoreLikedCollections = () => {
- var sliceLength = likedCollectionsSlice.length
- setlikedCollectionsSlice(likedCollections.slice(0, sliceLength + 4))
+ const showMoreLikedCollections = (limite) => {
+ const limit = limite;
+ setLoadingMoreColl(true);
+ setcurrLimitCollLiked(currLimitCollLiked + limit);
+ const url = `/users/${props.id}/collections/liked?offset=${currLimitCollLiked}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...likedCollections];
+ currData = [...currData.concat(data)];
+ setLoadingMoreColl(false);
+ setlikedCollections(currData);
+ }
+ else {
+ setLoadingMoreColl(false);
+ setEndoffColl(true)
+ }
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllLikedCollections = () => {setlikedCollectionsSlice(likedCollections)}
-
return (
<>
- {
- loading?
- (
- <LoadingSpinner text={'CARREGANDO...'}/>
- )
- :
- (
- [
- <React.Fragment>
- <Template
- length = {likedLearnObjs.length}
- titleText = {"Recursos Favoritados"}
- noContentText={<p style={{fontFamily:"Roboto",fontSize:"16px"}}>Quando você favorita um recurso ele aparece nesta seção. Além disso, você
- <br/>
+ {
+ loading ?
+ (
+ <LoadingSpinner text={'CARREGANDO...'} />
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <Template
+ length={likedLearnObjs.length}
+ titleText={"Recursos Favoritados"}
+ noContentText={<p style={{ fontFamily: "Roboto", fontSize: "16px" }}>Quando você favorita um recurso ele aparece nesta seção. Além disso, você
+ <br />
aumenta o prestÃgio dele na Plataforma. Para favoritar, basta clicar no Ãcone de
- <br/>
+ <br />
coração que aparece nos Recursos.
</p>}
- slice={likedLearnObjsSlice}
- showMore={showMoreLikedLearnObj}
- showAll={showAllLikedLearnObjs}
- />
-
- <PanelTemplateColecao
- title={"Coleções favoritadas"}
- length={likedCollections.length}
- noContentText={"Você ainda não curtiu nenhuma coleção."}
- sliceArr={likedCollectionsSlice}
- showMore={showMoreLikedCollections}
- showAll={showAllLikedCollections}
- followed={false}
- />
- </React.Fragment>
- ]
- )
- }
+ slice={likedLearnObjs}
+ showMore={showMoreLikedLearnObj}
+ loadingMore={loadingMoreLearnObj}
+ end={endOfLearnObj}
+ />
+
+ <PanelTemplateColecao
+ title={"Coleções favoritadas"}
+ length={likedCollections.length}
+ noContentText={"Você ainda não curtiu nenhuma coleção."}
+ sliceArr={likedCollections}
+ showMore={showMoreLikedCollections}
+ loadingMore={loadingMoreColl}
+ end={endOfColl}
+ followed={false}
+ />
+ </React.Fragment>
+ ]
+ )
+ }
</>
)
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
index 05668209a684f2c82ba2cadf6f7bd53ceb5da893..bc299620ff90ff90be2bd6352bb3ebea3c282463 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -16,108 +16,163 @@ 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 LoadingSpinner from '../../LoadingSpinner.js'
import Template from '../PanelComponents/TemplateRecurso.js'
import TemplateCuradoria from '../PanelComponents/TemplateCuradoria.js'
-import {fetchAllRequest} from '../../HelperFunctions/getAxiosConfig'
+import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
-export default function TabPanelAtividades (props) {
+export default function TabPanelAtividades(props) {
const [loading, handleLoading] = useState(true)
- const [learningObjects, setLearningObjects] = useState([]);
- const [learningObjectsSlice, setLearningObjectsSlice] = useState([])
+ const [loadingMoreLearnObj, setLoadingMoreLearnObj] = useState(false)
+ const [loadingMoreDrafts, setLoadingMoreDrafts] = useState(false)
+ const [loadingMoreCurating, setLoadingMoreCurating] = useState(false)
- const [drafts, setDrafts] = useState([]);
- const [draftsSlice, setDraftsSlice] = useState([])
+ const [currLimitLearnObj, setCurrLimitLearnObj] = useState(4);
+ const [currLimitDrafts, setcurrLimitDrafts] = useState(4);
+ const [currLimitCurating, setcurrLimitCurating] = useState(4);
+
+ const [endOfLearnObj, setEndofLearndObj] = useState(false);
+ const [endOfDrafts, setEndofDrafts] = useState(false);
+ const [endOfCurating, setEndofCurating] = useState(false);
+ const [learningObjects, setLearningObjects] = useState([]);
+ const [drafts, setDrafts] = useState([]);
const [curating, setCurating] = useState([]);
- const [curatingSlice, setCuratingSlice] = useState([])
- function handleSuccess (responseArr) {
+ function handleSuccess(responseArr) {
setLearningObjects(responseArr[0])
- setLearningObjectsSlice(responseArr[0].slice(0, 4))
setDrafts(responseArr[1])
- setDraftsSlice(responseArr[1].slice(0, 4))
setCurating(responseArr[2])
- setCuratingSlice(responseArr[2].slice(0, 4))
handleLoading(false)
}
- useEffect( () => {
+ useEffect(() => {
const urls = [
- `/users/${props.id}/learning_objects`,
- `/users/${props.id}/drafts`,
- `/users/${props.id}/submissions?status=submitted`
+ `/users/${props.id}/learning_objects?offset=0&limit=4`,
+ `/users/${props.id}/drafts?offset=0&limit=4`,
+ `/users/${props.id}/submissions?offset=0&limit=4&status=submitted`
]
-
- fetchAllRequest(urls, handleSuccess, (error) => {console.log(error)})
+ handleLoading(true);
+ fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
}, [])
- const showMoreLearnObj = () => {
- var sliceLength = learningObjectsSlice.length
- setLearningObjectsSlice(learningObjects.slice(0, sliceLength + 4))
+ const showMoreLearnObj = (limite) => {
+ setLoadingMoreLearnObj(true);
+ const limit = limite;
+ setCurrLimitLearnObj(currLimitLearnObj + limit)
+ const url = `/users/${props.id}/learning_objects?offset=${currLimitLearnObj}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...learningObjects];
+ currData = [...currData.concat(data)];
+ setLoadingMoreLearnObj(false);
+ setLearningObjects(currData);
+ }
+ else {
+ setLoadingMoreLearnObj(false);
+ setEndofLearndObj(true)
+ }
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllLearnObj = () => {setLearningObjectsSlice(learningObjects)}
-
- const showMoreDrafts = () => {
- var sliceLength = draftsSlice.length
- setDraftsSlice(drafts.slice(0, sliceLength + 4))
+ const showMoreDrafts = (limite) => {
+ setLoadingMoreDrafts(true);
+ console.log(limite);
+ const limit = limite;
+ setcurrLimitDrafts(currLimitDrafts + limit)
+ const url = `/users/${props.id}/drafts?offset=${currLimitDrafts}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...drafts];
+ currData = [...currData.concat(data)];
+ console.log('drafs: ', currData);
+ setLoadingMoreDrafts(false);
+ setDrafts([...currData]);
+ }
+ else {
+ setLoadingMoreDrafts(false);
+ setEndofDrafts(true);
+ }
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllDrafts = () => {setDraftsSlice(drafts)}
-
- const showMoreCurating = () => {
- var sliceLength = curatingSlice.length
- setCuratingSlice(curating.slice(0, sliceLength + 4))
+ const showMoreCurating = (limite) => {
+ setLoadingMoreCurating(true);
+ const limit = limite;
+ setcurrLimitCurating(currLimitCurating + limit)
+ const url = `/users/${props.id}/submissions?offset=${currLimitCurating}&limit=${limit}&status=submitted`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...curating];
+ currData = [...currData.concat(data)];
+ setLoadingMoreCurating(false);
+ setCurating([...currData]);
+ }
+ else {
+ setLoadingMoreCurating(false);
+ setEndofCurating(true);
+ }
+
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllCurating = () => {setCuratingSlice(curating)}
-
return (
<>
{
loading ?
- (
- <LoadingSpinner text={'Carregando Recursos'}/>
- )
- :
- (
- [
- <React.Fragment>
- <Template
- length = {learningObjects.length}
- titleText = {learningObjects.length === 1 ? "Recurso Publicado" : "Recursos Publicados"}
- noContentText={"Você ainda não publicou nenhum Recurso!"}
- slice={learningObjectsSlice}
- showMore={showMoreLearnObj}
- showAll={showAllLearnObj}
- />
-
- <Template
- length = {drafts.length}
- titleText = {drafts.length === 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
- noContentText={"Você não tem nenhum recurso sendo editado."}
- slice={draftsSlice}
- showMore={showMoreDrafts}
- showAll={showAllDrafts}
- />
-
- <TemplateCuradoria
- length={curating.length}
- titleText = {curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
- noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
- sliceArr={curatingSlice}
- showMore={showMoreCurating}
- showAll={showAllCurating}
- />
- </React.Fragment>
- ]
- )
+ (
+ <LoadingSpinner text={'Carregando Recursos'} />
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <Template
+ length={learningObjects.length}
+ titleText={learningObjects.length === 1 ? "Recurso Publicado" : "Recursos Publicados"}
+ noContentText={"Você ainda não publicou nenhum Recurso!"}
+ slice={learningObjects}
+ showMore={showMoreLearnObj}
+ loadingMore={loadingMoreLearnObj}
+ end={endOfLearnObj}
+ />
+
+ <Template
+ length={drafts.length}
+ titleText={drafts.length === 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
+ noContentText={"Você não tem nenhum recurso sendo editado."}
+ slice={drafts}
+ showMore={showMoreDrafts}
+ loadingMore={loadingMoreDrafts}
+ end={endOfDrafts}
+ />
+
+ <TemplateCuradoria
+ length={curating.length}
+ titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
+ noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
+ sliceArr={curating}
+ showMore={showMoreCurating}
+ loadingMore={loadingMoreCurating}
+ end={endOfCurating}
+ />
+ </React.Fragment>
+ ]
+ )
}
</>
)
diff --git a/src/Components/TabPanels/UserPageTabs/PanelRede.js b/src/Components/TabPanels/UserPageTabs/PanelRede.js
index fdebcbf9f4f2f85af5f39e26046c9af2cc442e71..9d3d577dae2be3a6dc811a26d9a0e13dd65f2e1e 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelRede.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelRede.js
@@ -16,106 +16,139 @@ 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 LoadingSpinner from '../../LoadingSpinner.js'
import ContainerRedeVazia from './ContainerRedeVazia.js'
import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
-import {fetchAllRequest} from '../../HelperFunctions/getAxiosConfig'
+import { fetchAllRequest,getRequest } from '../../HelperFunctions/getAxiosConfig'
-export default function TabPanelRede (props) {
+export default function TabPanelRede(props) {
const [loading, handleLoading] = useState(true)
const [followingList, setFollowing] = useState([])
- const [followingSlice, setFollowingSlice] = useState([])
+ const [currFollowingLimit, setCurrFollowingLimit] = useState(4)
+ const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
+ const [endOfFollowing, setEndOfFollowing] = useState(false)
const [followersList, setFollowers] = useState([])
- const [followersSlice, setFollowersSlice] = useState([])
-
- const showMoreFollowing = () => {
- var sliceLength = followingSlice.length
- setFollowingSlice(followingList.slice(0, sliceLength + 4))
+ const [currFollowerLimit, setFollowersLimit] = useState(4)
+ const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
+ const [endOfFollowers, setEndOfFollowers] = useState(false)
+
+ const showMoreFollowing = (limite) => {
+ setLoadingFollowing(true);
+ const limit = limite;
+ setCurrFollowingLimit(currFollowingLimit + limit)
+ const url = `/users/${props.id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...followingList];
+ currData = [...currData.concat(data)];
+ setLoadingFollowing(false);
+ setFollowing(currData);
+ }
+ else {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true)
+ }
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllFollowing = () => {setFollowingSlice(followingList)}
- const showMoreFollowers = () => {
- var sliceLength = followersSlice.length
- setFollowersSlice(followersList.slice(0, sliceLength + 4))
+ const showMoreFollowers = (limite) => {
+ setLoadingMoreFollowers(true);
+ const limit = limite;
+ setFollowersLimit(currFollowerLimit + limit)
+ const url = `/users/${props.id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.length >= 1) {
+ let currData = [...followersList];
+ currData = [...currData.concat(data)];
+ setLoadingMoreFollowers(false);
+ setFollowers(currData);
+ }
+ else {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true)
+ }
+ },
+ (error) => { console.log(error) }
+ )
}
- const showAllFollowers = () => {setFollowersSlice(followersList)}
- function handleSuccess (responseArr) {
- console.log(responseArr)
+ function handleSuccess(responseArr) {
setFollowing(responseArr[0])
- setFollowingSlice(responseArr[0].slice(0,4))
-
-
setFollowers(responseArr[1])
- setFollowersSlice(responseArr[1].slice(0,4))
-
handleLoading(false)
}
- useEffect( () => {
+ useEffect(() => {
+ handleLoading(true)
const urls = [
`/users/${props.id}/following/User`,
`/users/${props.id}/followers`
]
- fetchAllRequest(urls, handleSuccess, (error) => {console.log(error)})
+ fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
}, [])
return (
<>
- {
- loading ?
- (
- [
- <LoadingSpinner text={'CARREGANDO...'}/>
- ]
- )
- :
- (
- [
- <>
- {
- followingList.length === 0 && followersList.length === 0 ?
- (
- [
- <>
- <ContainerRedeVazia/>
- </>
- ]
- )
- :
- (
- <React.Fragment>
- <PanelTemplateRede
- title={followersList.length === 1 ? "Seguidor" : "Seguidores"}
- length={followersList.length}
- sliceArr={followersSlice}
- showMore={showMoreFollowers}
- showAll={showAllFollowers}
- follower={true}
- noContentText={'Você não possui nenhum seguidor'}
- />
-
- <PanelTemplateRede
- title={"Seguindo"}
- length={followingList.length}
- sliceArr={followingSlice}
- showMore={showMoreFollowing}
- showAll={showAllFollowing}
- follower={false}
- noContentText={'Você ainda não segue nenhum usuário'}
- />
- </React.Fragment>
-
- )
- }
- </>
- ]
- )
- }
+ {
+ loading ?
+ (
+ [
+ <LoadingSpinner text={'CARREGANDO...'} />
+ ]
+ )
+ :
+ (
+ [
+ <>
+ {
+ followingList.length === 0 && followersList.length === 0 ?
+ (
+ [
+ <>
+ <ContainerRedeVazia />
+ </>
+ ]
+ )
+ :
+ (
+ <React.Fragment>
+ <PanelTemplateRede
+ title={followersList.length === 1 ? "Seguidor" : "Seguidores"}
+ length={followersList.length}
+ sliceArr={followersList}
+ showMore={showMoreFollowers}
+ follower={true}
+ loadingMore={loadingMoreFollowers}
+ end={endOfFollowers}
+ noContentText={'Você não possui nenhum seguidor'}
+ />
+
+ <PanelTemplateRede
+ title={"Seguindo"}
+ length={followingList.length}
+ sliceArr={followingList}
+ showMore={showMoreFollowing}
+ follower={false}
+ loadingMore={loadingMoreFollowing}
+ end={endOfFollowing}
+ noContentText={'Você ainda não segue nenhum usuário'}
+ />
+ </React.Fragment>
+
+ )
+ }
+ </>
+ ]
+ )
+ }
</>
)
}
diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js
index 3689ae65abbe9068e4035aa67058d50b7ab018ab..368b54b6fdbb513f7c397ebf755da60f4d300a7f 100644
--- a/src/Components/UserPageComponents/Avatar.js
+++ b/src/Components/UserPageComponents/Avatar.js
@@ -68,6 +68,16 @@ const ProfileAvatarDiv = styled.div`
outline : 0;
cursor : pointer;
background-color : #a5a5a5;
+ @media screen and (max-width: 501px) {
+ height : 73px;
+ width : 73px;
+ position:absolute;
+ left:0;
+ right:0;
+ bottom : -40px;
+ margin-left:auto;
+ margin-right:auto;
+ }
`
const ChangeAvatarDiv = styled.div`
diff --git a/src/Components/UserPageComponents/UserInfo.js b/src/Components/UserPageComponents/UserInfo.js
index 8c776a95eef3a345b8407007c453c6c2a995ddf5..32985ffb962d20791c3ac1270e074d3c0171eec0 100644
--- a/src/Components/UserPageComponents/UserInfo.js
+++ b/src/Components/UserPageComponents/UserInfo.js
@@ -15,22 +15,31 @@ 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, {useContext} from 'react';
-import { Store } from '../../Store.js';
-import {UserProfileInfoDiv} from '../TabPanels/StyledComponents.js'
+import React, { useContext } from "react";
+import { Store } from "../../Store.js";
+import { UserProfileInfoDiv } from "../TabPanels/StyledComponents.js";
-export default function UserInfo (props) {
- const {state} = useContext(Store)
+export default function UserInfo(props) {
+ const { state } = useContext(Store);
- const user = state.currentUser.name
- const education = state.currentUser.education
+ const user = state.currentUser.name;
+ const education = state.currentUser.education;
return (
<UserProfileInfoDiv>
- <p style={{fontSize:"28px", color:"#fff", paddingTop:"5px", paddingBottom:"5px", fontWeight:"500", backgroundColor:"#77777796", borderRadius : "5px"}}>{user}</p>
- <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
- <p>{education}</p>
- </div>
+ <p
+ style={{
+ fontSize: "28px",
+ color: "#fff",
+ paddingTop: "5px",
+ paddingBottom: "5px",
+ fontWeight: "500",
+ backgroundColor: "#77777796",
+ borderRadius: "5px",
+ }}
+ >
+ {user}
+ </p>
</UserProfileInfoDiv>
- )
+ );
}
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index 2000c8619371ba81c0b8ea395ede083935a4a1de..e4fee36a0f3516cb25b938622f26e0e527085f03 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -16,9 +16,9 @@ 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, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
-import {apiDomain} from '../env';
+import { apiDomain } from '../env';
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import Grid from '@material-ui/core/Grid';
import FollowButton from '../Components/ContactButtons/FollowButton.js'
@@ -32,28 +32,30 @@ import TabColecoes from '../Components/TabPanels/PublicUserPageTabs/TabColecoes.
import TabRede from '../Components/TabPanels/PublicUserPageTabs/TabRede.js'
import CheckDecagram from '../img/check-decagram-blue.svg'
import ReportButton from '../Components/ReportButton.js'
-import {HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
-import {fetchAllRequest} from '../Components/HelperFunctions/getAxiosConfig'
+import { HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
+import { fetchAllRequest } from '../Components/HelperFunctions/getAxiosConfig'
+import Typography from '@material-ui/core/Typography';
+import CircularProgress from '@material-ui/core/CircularProgress';
const RenderFollowContainer = (boolUserFollowed, id, followCount) => {
return (
<FollowContainer>
<>
- {
- boolUserFollowed ?
- (
- [
- <FollowingButton followedID={id}/>
- ]
- )
- :
- (
- [
- <FollowButton followerID={id}/>
- ]
- )
- }
- <FollowersCountButton followCount={followCount}/>
+ {
+ boolUserFollowed ?
+ (
+ [
+ <FollowingButton followedID={id} />
+ ]
+ )
+ :
+ (
+ [
+ <FollowButton followerID={id} />
+ ]
+ )
+ }
+ <FollowersCountButton followCount={followCount} />
</>
</FollowContainer>
)
@@ -62,7 +64,7 @@ const RenderFollowContainer = (boolUserFollowed, id, followCount) => {
const RenderProfileAvatar = (userAvatar) => {
return (
<ProfileAvatarDiv>
- <img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
+ <img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt="user avatar" style={{ height: "inherit", width: "inherit", border: "0", verticalAlign: "middle" }} />
</ProfileAvatarDiv>
)
}
@@ -71,7 +73,7 @@ const RenderUserProfileInfo = (userName) => {
return (
<UserProfileInfoDiv>
<p
- style={{fontSize:"28px", color:"#fff", marginBottom : "2px", fontWeight:"500", borderRadius : "5px", textShadow : "0 1px 2px rgba(0,0,0,.45)"}}
+ style={{ fontSize: "28px", color: "#fff", marginBottom: "2px", fontWeight: "500", borderRadius: "5px", textShadow: "0 1px 2px rgba(0,0,0,.45)" }}
>
{userName}
</p>
@@ -85,7 +87,7 @@ const RenderCheckTeacher = (submitter_request) => {
<CheckTeacherDiv>
<p>
<span>
- <img alt="" src={CheckDecagram}/>
+ <img alt="" src={CheckDecagram} />
</span>
Professor(a)
</p>
@@ -94,14 +96,22 @@ const RenderCheckTeacher = (submitter_request) => {
}
}
-export default function PublicUserPage (props) {
+export default function PublicUserPage(props) {
/*user info variables--------------------------------------*/
- const id = props.match.params.userId
+ const WIDTH = window.innerWidth;
+ const id = props.match.params.userId
+
+ const [loading, setLoading] = useState(false);
+
const [userData, setUserData] = useState({})
const fillUserInfo = (data) => {
setUserData(data)
}
/*---------------------------------------------------------*/
+ const [following, setFollowing] = useState([]);
+ const fillFollowing = (data) => {
+ setFollowing(data);
+ }
/*content control variables--------------------------------*/
// eslint-disable-next-line
@@ -116,70 +126,109 @@ export default function PublicUserPage (props) {
/*content variables--------------------------------*/
const [learningObjArr, setLearningObjects] = useState([])
- const handleLearningObjects = (data) => {setLearningObjects(data)}
+ const handleLearningObjects = (data) => { setLearningObjects(data) }
const [collectionsArr, setCollections] = useState([])
- const handleCollections = (data) => {setCollections(data)}
+ const handleCollections = (data) => { setCollections(data) }
/*---------------------------------------------------------*/
- function handleSuccess (responseArr) {
+ function handleSuccess(responseArr) {
+ setLoading(false);
fillUserInfo(responseArr[0])
handleLearningObjects(responseArr[1])
handleCollections(responseArr[2])
+
+ fillFollowing(responseArr[3]);
}
/*Component Will Mount*/
- useEffect( () => {
- const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`]
-
- fetchAllRequest(urls, handleSuccess, (error) => {console.log(error)})
+ useEffect(() => {
+ const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`, `/users/${id}/following/User` ]
+ setLoading(true);
+ fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
}, [])
/*---------------------------------------------------------*/
return (
<React.Fragment>
- <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet" />
<BackgroundDiv>
<CustomizedBreadcrumbs
values={["Usuário Público", tabs[tabValue]]}
/>
<Grid container spacing={2}>
<Grid item xs={12}>
- <div style={{padding : "10px 0 8px 0"}}>
+ <div style={{ padding: "10px 0 8px 0" }}>
<UserProfileContainer>
<HeaderContainer>
<>
- {RenderFollowContainer(userData.followed, id, userData.follows_count)}
- {RenderProfileAvatar(userData.avatar ? userData.avatar : undefined)}
- <CoverContainer>
- {userData.cover && <img src={apiDomain + userData.cover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
- </CoverContainer>
- {RenderUserProfileInfo(userData.name)}
+ {RenderFollowContainer(userData.followed, id, userData.follows_count)}
+ {RenderProfileAvatar(userData.avatar ? userData.avatar : undefined)}
+ <CoverContainer>
+ {userData.cover && <img src={apiDomain + userData.cover} alt='' style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
+ </CoverContainer>
+ {
+ WIDTH <= 501 ? null : RenderUserProfileInfo(userData.name)
+ }
</>
</HeaderContainer>
- {RenderCheckTeacher(userData.submitter_request)}
+ {
+ WIDTH <= 501 ?
+ <Grid style={{ marginTop: '4em' }} container justify="center" alignItems="center" direction="column">
+ <Grid item>
+ <Typography variant="h4" gutterBottom style={{textAlign : "center"}}>
+ {
+ userData.name
+ }
+ </Typography>
+ </Grid>
+ <Grid style={{marginTop: '0.5em', marginBottom: '0.5em', borderTop : "0.5px solid #DCDCDC", borderBottom : "0.5px solid #DCDCDC" }} container spacing={4} justify="center" alignItems="center" direction="row">
+ <Grid item>
+ <Typography variant="h6" >
+ {
+ loading ?
+ <CircularProgress size={20}/> :
+ `${userData.follows_count} seguidores`
+ }
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Typography variant="h6" >
+ {
+ loading ?
+ <CircularProgress size={20}/> :
+ following ?
+ `${following.length} seguindo` :
+ "0 seguindo"
+ }
+ </Typography>
+ </Grid>
+ </Grid>
+ </Grid>
+ :
+ RenderCheckTeacher(userData.submitter_request)}
<RodapeDiv>
<NavBarContentContainer>
<StyledTabs
- value ={tabValue}
- onChange ={handleChangeTab}
- indicatorColor ="primary"
- textColor ="primary"
- variant = "fullwidth"
- scrollButtons = "desktop"
- TabIndicatorProps={{style : {background:"#00bcd4"}}}
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="fullwidth"
+ scrollButtons="desktop"
+ TabIndicatorProps={{ style: { background: "#00bcd4" } }}
>
{
- tabs.map( (tab) =>
+ tabs.map((tab) =>
<Tab label={tab} key={tab}
disabled={(tab === "Recursos" && learningObjArr.length === 0) || (tab === "Coleções" && collectionsArr.length === 0)}
- />
+ />
)
}
</StyledTabs>
</NavBarContentContainer>
- <ReportButton className="report-button" complainableId={userData.id} complainableType={"User"}/>
+ <ReportButton className="report-button" complainableId={userData.id} complainableType={"User"} />
</RodapeDiv>
</UserProfileContainer>
</div>
@@ -187,14 +236,14 @@ export default function PublicUserPage (props) {
<Grid item xs={12}>
{tabValue === 0 &&
- <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr}/>}
+ <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
{tabValue === 1 &&
- <TabRecursos count={userData.learning_objects_count} learningObjs={learningObjArr} id={id}/>}
+ <TabRecursos count={userData.learning_objects_count} learningObjs={learningObjArr} id={id} />}
{tabValue === 2 &&
<TabColecoes count={userData.collections_count} collections={collectionsArr}
- />}
+ />}
{tabValue === 3 &&
- <TabRede id={id} username={userData.name}/>}
+ <TabRede id={id} username={userData.name} />}
</Grid>
</Grid>
@@ -214,9 +263,19 @@ const ProfileAvatarDiv = styled.div`
position : absolute;
width : 150px;
height : 150px;
- border : 8px solid #fff;
+ border : 4px solid #fff;
outline : 0;
background-color : #fff;
+ @media screen and (max-width: 501px) {
+ height : 73px;
+ width : 73px;
+ position:absolute;
+ left:0;
+ right:0;
+ bottom : -40px;
+ margin-left:auto;
+ margin-right:auto;
+ }
`
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 89605cab6701f021f6c7ee6dee47754e16fc6a86..0b23114055d5b8144e7fe400aefd67d7bf87d015 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -16,151 +16,240 @@ 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, useContext, useEffect} from 'react';
-import styled from 'styled-components'
-import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import { Store } from '../Store.js';
-import Tab from '@material-ui/core/Tab';
-import TabPanelAtividades from '../Components/TabPanels/UserPageTabs/PanelAtividades.js'
-import TabPanelMeusRecursos from '../Components/TabPanels/UserPageTabs/PanelMeusRecursos.js'
-import TabPanelFavoritos from '../Components/TabPanels/UserPageTabs/PanelFavoritos.js'
-import TabPanelColecoes from '../Components/TabPanels/UserPageTabs/PanelColecoes.js'
-import TabPanelRede from '../Components/TabPanels/UserPageTabs/PanelRede.js'
-import TabPanelCuradoria from '../Components/TabPanels/UserPageTabs/PanelCuradoria.js'
-import Grid from '@material-ui/core/Grid';
-import {HeaderContainer, UserProfileContainer, CheckTeacherDiv, StyledTabs, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
-
-import Cover from '../Components/UserPageComponents/Cover.js'
-import ProfileAvatar from '../Components/UserPageComponents/Avatar.js'
-import UserInfo from '../Components/UserPageComponents/UserInfo.js'
-import EditProfileButton from '../Components/UserPageComponents/EditProfileButton.js'
-import SubmitterStatus from '../Components/UserPageComponents/SubmitterStatus.js'
-import {getRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
-
-export default function UserPage (props){
- const {state, dispatch} = useContext(Store)
- const id = state.currentUser.id
-
- const [tabValue, setTabValue] = useState(
- Number(props.location.state) || 0
- );
+import React, { useState, useContext, useEffect } from "react";
+import styled from "styled-components";
+import CustomizedBreadcrumbs from "../Components/TabPanels/Breadcrumbs.js";
+import { Store } from "../Store.js";
+import Tab from "@material-ui/core/Tab";
+import ModalAlterarAvatar from "../Components/ModalAlterarAvatar/ModalAlterarAvatar";
+import TabPanelAtividades from "../Components/TabPanels/UserPageTabs/PanelAtividades.js";
+import TabPanelMeusRecursos from "../Components/TabPanels/UserPageTabs/PanelMeusRecursos.js";
+import TabPanelFavoritos from "../Components/TabPanels/UserPageTabs/PanelFavoritos.js";
+import TabPanelColecoes from "../Components/TabPanels/UserPageTabs/PanelColecoes.js";
+import TabPanelRede from "../Components/TabPanels/UserPageTabs/PanelRede.js";
+import TabPanelCuradoria from "../Components/TabPanels/UserPageTabs/PanelCuradoria.js";
+import Grid from "@material-ui/core/Grid";
+import {
+ HeaderContainer,
+ UserProfileContainer,
+ CheckTeacherDiv,
+ StyledTabs,
+ RodapeDiv,
+ NavBarContentContainer,
+ BackgroundDiv,
+} from "../Components/TabPanels/StyledComponents.js";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Cover from "../Components/UserPageComponents/Cover.js";
+import ProfileAvatar from "../Components/UserPageComponents/Avatar.js";
+import UserInfo from "../Components/UserPageComponents/UserInfo.js";
+import EditProfileButton from "../Components/UserPageComponents/EditProfileButton.js";
+import SubmitterStatus from "../Components/UserPageComponents/SubmitterStatus.js";
+import { getRequest } from "../Components/HelperFunctions/getAxiosConfig.js";
+import Typography from "@material-ui/core/Typography";
+
+export default function UserPage(props) {
+ const { state, dispatch } = useContext(Store);
+ const id = state.currentUser.id;
+
+ const [follows, setFollows] = useState(0);
+ const [following, setFollowing] = useState(0);
+ const [loading, setLoading] = useState(false);
+
+ const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
const [tabs, setTabs] = useState([
- 'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede'
- ])
+ "Atividades",
+ "Meus Recursos",
+ "Favoritos",
+ "Coleções",
+ "Rede",
+ ]);
const handleChangeTab = (event, newValue) => {
- setTabValue(newValue)
- }
+ setTabValue(newValue);
+ };
- function handleSuccessfulGet (data) {
- dispatch ( {
- type: 'GET_USER',
- user: data
- }
- )
+ function handleSuccessfulGet(data) {
+ console.log(data);
+ dispatch({
+ type: "GET_USER",
+ user: data,
+ });
+
+ setFollows(data.follows_count);
- if((data.role_ids.includes(4))) {
+ if (data.role_ids.includes(4)) {
setTabs([
- 'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
- ])
+ "Atividades",
+ "Meus Recursos",
+ "Favoritos",
+ "Coleções",
+ "Rede",
+ "Curadoria",
+ ]);
}
}
- useEffect( () => {
- if (id !== '') {
- const url = `/users/${id}`
+ function handleSuccesGetFollowing(data) {
+ setFollowing(data.length);
+ setLoading(false);
+ }
- getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
+ useEffect(() => {
+ if (id !== "") {
+ const url = `/users/${id}`;
+ const url2 = `/users/${id}/following/User`;
+ setLoading(true);
+ getRequest(url, handleSuccessfulGet, (error) => {
+ console.log(error);
+ });
+ getRequest(url2, handleSuccesGetFollowing, (error) => {
+ console.log(error);
+ });
}
- }, [])
+ }, []);
const redirect = () => {
- props.history.push('/')
- }
+ props.history.push("/");
+ };
+
+ const [modalOpen, toggleModal] = useState(false);
+ const WIDTH = window.innerWidth;
return (
- <>
- <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
- {
- state.userIsLoggedIn?
- (
- <BackgroundDiv>
- <CustomizedBreadcrumbs
- values={["Minha área", tabs[tabValue]]}
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
+ />
+ {
+ state.userIsLoggedIn ? (
+ [
+ <React.Fragment>
+ <ModalAlterarAvatar
+ open={modalOpen}
+ handleClose={() => {
+ toggleModal(false);
+ }}
+ userAvatar={state.currentUser.avatar}
/>
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{padding : "10px 0 8px 0"}}>
- <UserProfileContainer>
- <HeaderContainer>
- <Cover id={id}/>
- <ProfileAvatar id={id}/>
- <UserInfo/>
- <EditProfileButton/>
- </HeaderContainer>
-
- <CheckTeacherDiv>
- <SubmitterStatus />
- </CheckTeacherDiv>
-
- <RodapeDiv>
- <NavBarContentContainer>
- <StyledTabs
- value ={tabValue}
- onChange ={handleChangeTab}
- indicatorColor ="primary"
- textColor ="primary"
- variant = "scrollable"
- scrollButtons = "auto"
- TabIndicatorProps={{style : {background:"#00bcd4"}}}
- >
- {
- tabs.map( (tab) =>
- <StyledTab label ={tab} key={tab}/>
- )
- }
-
- </StyledTabs>
- </NavBarContentContainer>
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
- <Grid item xs={12}>
- {tabValue === 0 &&
- <TabPanelAtividades id={id}/>}
- {tabValue === 1 &&
- <TabPanelMeusRecursos id={id}/>}
- {tabValue === 2 &&
- <TabPanelFavoritos id={id}/>}
- {tabValue === 3 &&
- <TabPanelColecoes id={id}/>}
- {tabValue === 4 &&
- <TabPanelRede id={id}/>}
- {tabValue === 5 &&
- <TabPanelCuradoria id={id}/>}
+ <BackgroundDiv>
+ <CustomizedBreadcrumbs values={["Minha área", tabs[tabValue]]} />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer>
+ <Cover id={id} />
+ <ProfileAvatar id={id} />
+ {WIDTH <= 501 ? null : <UserInfo />}
+ <EditProfileButton />
+ </HeaderContainer>
+ {WIDTH <= 501 ? (
+ <Grid
+ style={{ marginTop: "4em" }}
+ container
+ justify="center"
+ alignItems="center"
+ direction="column"
+ >
+ <Grid item>
+ <Typography
+ variant="h4"
+ gutterBottom
+ style={{ textAlign: "center" }}
+ >
+ {state.currentUser.name}
+ </Typography>
+ </Grid>
+ <Grid
+ style={{
+ marginTop: "0.5em",
+ marginBottom: "0.5em",
+ borderTop: "0.5px solid #eee",
+ borderBottom: "0.5px solid #eee",
+ }}
+ container
+ spacing={4}
+ justify="center"
+ alignItems="center"
+ direction="row"
+ >
+ <Grid item>
+ <Typography variant="h6">
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${follows} seguidores`
+ )}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Typography variant="h6">
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${following} seguindo`
+ )}
+ </Typography>
+ </Grid>
+ </Grid>
+ </Grid>
+ ) : (
+ <CheckTeacherDiv>
+ <SubmitterStatus />
+ </CheckTeacherDiv>
+ )}
+ <RodapeDiv>
+ <NavBarContentContainer>
+ <StyledTabs
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="scrollable"
+ scrollButtons="auto"
+ TabIndicatorProps={{
+ style: { background: "#00bcd4" },
+ }}
+ >
+ {tabs.map((tab) => (
+ <StyledTab label={tab} key={tab} />
+ ))}
+ </StyledTabs>
+ </NavBarContentContainer>
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
+ </Grid>
+ <Grid item xs={12}>
+ {tabValue === 0 && <TabPanelAtividades id={id} />}
+ {tabValue === 1 && <TabPanelMeusRecursos id={id} />}
+ {tabValue === 2 && <TabPanelFavoritos id={id} />}
+ {tabValue === 3 && <TabPanelColecoes id={id} />}
+ {tabValue === 4 && <TabPanelRede id={id} />}
+ {tabValue === 5 && <TabPanelCuradoria id={id} />}
+ </Grid>
</Grid>
- </Grid>
- </BackgroundDiv>
- )
- : (
- <>
- {redirect()}
- </>
- )
- }
- </>
-
- )
-
- }
-
+ </BackgroundDiv>
+ </React.Fragment>
+ ]
+ )
+ :
+ (
+ <>
+ { redirect() }
+ </>
+ )
+ }
+ </div>
+ )
+}
const StyledTab = styled(Tab)`
- .Mui-selected {
- border-bottom-color : #00bcd4 !important;
- }
- .MuiTab-wrapper {
- border-bottom-color : #00bcd4 !important;
- }
+ .Mui-selected {
+ border-bottom-color: #00bcd4 !important;
+ }
+ .MuiTab-wrapper {
+ border-bottom-color: #00bcd4 !important;
+ }
`