From b5dc9284a2f922899fecb649026b4384f78edb88 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Fri, 19 Feb 2021 10:10:03 -0300
Subject: [PATCH] Fixed Responsiveness and requests. Need to display
X_total_count
---
.../TabPanels/PanelComponents/ButtonsArea.js | 50 +++--
.../PanelComponents/TemplateColecao.js | 50 ++---
.../PanelComponents/TemplateCuradoria.js | 1 +
.../PanelComponents/TemplateRecurso.js | 9 +-
.../TabPanels/PanelComponents/TemplateRede.js | 105 +++++-----
.../TabPanels/UserPageTabs/PanelAtividades.js | 18 +-
.../TabPanels/UserPageTabs/PanelColecoes.js | 107 +++++++----
.../TabPanels/UserPageTabs/PanelCuradoria.js | 97 ++++++----
.../TabPanels/UserPageTabs/PanelFavoritos.js | 152 +++++++++------
.../UserPageTabs/PanelMeusRecursos.js | 16 +-
.../TabPanels/UserPageTabs/PanelRede.js | 179 +++++++++++-------
11 files changed, 471 insertions(+), 313 deletions(-)
diff --git a/src/Components/TabPanels/PanelComponents/ButtonsArea.js b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
index 81f99370..6492f0b4 100644
--- a/src/Components/TabPanels/PanelComponents/ButtonsArea.js
+++ b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
@@ -25,7 +25,7 @@ export function ButtonsAreaRecurso(props) {
return (
<Carregados>
<p style={{ margin: "0 0 10px", fontSize: "14px" }}>
- Carregados {props.sliceLength} de {props.length}
+ {props.sliceLength} recursos carregados de {props.total}
</p>
{
@@ -49,19 +49,22 @@ export function ButtonsAreaColecao(props) {
return (
<Carregados>
<p style={{ margin: "0 0 10px", fontSize: "14px" }}>
- Carregados {props.sliceLength} de {props.length}
+ {props.sliceLength} coleções carregadas
</p>
+ {
+ props.end ?
+ null
+ :
+ <React.Fragment>
+ <ButtonMostrarMaisColecao onClick={() => { props.showMore(4) }}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ </ButtonMostrarMaisColecao>
- <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>
-
+ <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
+ <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ </ButtonMostrarTodos>
+ </React.Fragment>
+ }
</Carregados>
)
}
@@ -70,18 +73,23 @@ export function ButtonsAreaRede(props) {
return (
<Carregados>
<p style={{ margin: "0 0 10px", fontSize: "14px" }}>
- Carregados {props.sliceLength} de {props.length}
+ {props.sliceLength} usuários carregados
</p>
- <React.Fragment>
- <ButtonMostrarMaisRede onClick={() => { props.showMore() }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS</span>
- </ButtonMostrarMaisRede>
+ {
+ 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.showAll() }}>
- <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR TODOS</span>
- </ButtonMostrarTodos>
- </React.Fragment>
+ <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 3b1e029a..5e7f2ec1 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 24034337..130a38a3 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -77,6 +77,7 @@ export default function Template(props) {
length={props.length}
showMore={props.showMore}
end={props.end}
+ total={props.total}
/>
}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index de25433a..12175db5 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -27,10 +27,6 @@ import LoadingSpinner from '../../LoadingSpinner.js'
export default function Template(props) {
- function showMore(limite) {
- props.showMore(limite)
- }
-
return (
<WhiteContainer>
<Title
@@ -54,6 +50,7 @@ export default function Template(props) {
props.slice.map((card) =>
<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}
@@ -74,12 +71,12 @@ export default function Template(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos'} />
+ <LoadingSpinner text={'Carregando Recursos...'} />
:
<ButtonsAreaRecurso
sliceLength={props.slice.length}
length={props.length}
- showMore={showMore}
+ showMore={props.showMore}
end={props.end}
/>
}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js
index e92a49db..0853c14e 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/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 29cc7d1b..0985db2b 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -30,24 +30,26 @@ import Grid from '@material-ui/core/Grid';
import DefaultProfile from '../../../img/default_profile.png';
-let limit = 30;
-
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 [totalResults, setTotalResults] = useState(0);
+ const [limit, setLimit] = useState(4);
const showMore = (offset) => {
handleLoadingMore(true);
const url = `/feed?offset=${limit}&limit=${offset}`
- limit = limit + offset;
+ setLimit(limit + offset)
getRequest(url, handleSuccess, (error) => { console.log(error) })
}
- function handleSuccess(data) {
+ 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);
@@ -107,8 +109,9 @@ export default function TabPanelAtividades(props) {
<>
<List height={400} width={300}>
{
- notifications.map((notification) =>
+ notifications.map((notification, id) =>
<ActivityListItem
+ key={id}
onMenuBar={false}
avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : DefaultProfile}
activity={notification.activity}
@@ -136,7 +139,8 @@ export default function TabPanelAtividades(props) {
</Grid>
<Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}>
<ShowData disabled={true}>
- Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade" : "Atividades"}
+ Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade" : "Atividades"}
+ de {totalResults}
</ShowData>
</Grid>
</Grid>
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index a6ec0c91..acdd2828 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 796bee8a..91039db9 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 4edaf748..9f4cb6d9 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 a3f35076..bc299620 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -22,10 +22,6 @@ import Template from '../PanelComponents/TemplateRecurso.js'
import TemplateCuradoria from '../PanelComponents/TemplateCuradoria.js'
import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
-let currLimitLearnObj = 4;
-let currLimitDrafts = 4;
-let currLimitCurating = 4;
-
export default function TabPanelAtividades(props) {
const [loading, handleLoading] = useState(true)
@@ -33,6 +29,10 @@ export default function TabPanelAtividades(props) {
const [loadingMoreDrafts, setLoadingMoreDrafts] = useState(false)
const [loadingMoreCurating, setLoadingMoreCurating] = useState(false)
+ 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);
@@ -57,14 +57,14 @@ export default function TabPanelAtividades(props) {
`/users/${props.id}/drafts?offset=0&limit=4`,
`/users/${props.id}/submissions?offset=0&limit=4&status=submitted`
]
-
+ handleLoading(true);
fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
}, [])
const showMoreLearnObj = (limite) => {
setLoadingMoreLearnObj(true);
const limit = limite;
- currLimitLearnObj = currLimitLearnObj + limit;
+ setCurrLimitLearnObj(currLimitLearnObj + limit)
const url = `/users/${props.id}/learning_objects?offset=${currLimitLearnObj}&limit=${limit}`;
getRequest(url,
(data) => {
@@ -87,7 +87,7 @@ export default function TabPanelAtividades(props) {
setLoadingMoreDrafts(true);
console.log(limite);
const limit = limite;
- currLimitDrafts = currLimitDrafts + limit;
+ setcurrLimitDrafts(currLimitDrafts + limit)
const url = `/users/${props.id}/drafts?offset=${currLimitDrafts}&limit=${limit}`;
getRequest(url,
(data) => {
@@ -110,7 +110,7 @@ export default function TabPanelAtividades(props) {
const showMoreCurating = (limite) => {
setLoadingMoreCurating(true);
const limit = limite;
- currLimitCurating = currLimitCurating + limit;
+ setcurrLimitCurating(currLimitCurating + limit)
const url = `/users/${props.id}/submissions?offset=${currLimitCurating}&limit=${limit}&status=submitted`;
getRequest(url,
(data) => {
diff --git a/src/Components/TabPanels/UserPageTabs/PanelRede.js b/src/Components/TabPanels/UserPageTabs/PanelRede.js
index fdebcbf9..9d3d577d 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>
+
+ )
+ }
+ </>
+ ]
+ )
+ }
</>
)
}
--
GitLab