From 7f59d5ec24c1d61965c498c330d2a2a01f78937a Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Sat, 13 Feb 2021 11:27:46 -0300
Subject: [PATCH] Fixed requests and responsiveness
---
.../PanelComponents/TemplateCuradoria.js | 23 +-
.../PanelComponents/TemplateRecurso.js | 27 ++-
.../TabPanels/UserPageTabs/PanelAtividades.js | 188 +++++++++------
.../UserPageTabs/PanelMeusRecursos.js | 221 +++++++++++++-----
4 files changed, 310 insertions(+), 149 deletions(-)
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index 28390ab4..29ecf98e 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()}
+ showAll={() => props.showAll()}
+ end={props.end}
+ />
+ }
- <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 7fe23657..049f186c 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -23,8 +23,14 @@ 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) {
+
+ function showMore() {
+ props.showMore()
+ }
+
return (
<WhiteContainer>
<Title
@@ -46,7 +52,7 @@ 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
avatar={card.publisher.avatar}
id={card.id}
@@ -61,19 +67,24 @@ 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={showMore}
+ showAll={() => props.showAll()}
+ 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/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index d43ce0da..ebf35d31 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -16,41 +16,48 @@ 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 { getRequest } from '../../HelperFunctions/getAxiosConfig.js'
+import Grid from '@material-ui/core/Grid';
-export default function TabPanelAtividades (props) {
- const [loading, handleLoading] = useState(true)
+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 [notificationsSlice, setNotificationsSlice] = useState([])
+
const showMore = (offset) => {
- var sliceLength = notificationsSlice.length
- setNotificationsSlice(notifications.slice(0, sliceLength + offset))
+ handleLoadingMore(true);
+ const url = `/feed?offset=${limit}&limit=${offset}`
+ limit = 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) {
+ 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 (
@@ -61,69 +68,85 @@ 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}
- />
- )
- }
- </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) =>
+ <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={"/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"}
+ </ShowData>
+ </Grid>
+ </Grid>
+ }
+ </>
+ )
+ }
+ </div>
+
+ ]
+ )
+ }
</div>
</Paper>
</MainContainerDesktop>
@@ -187,6 +210,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/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
index 05668209..7f38c40b 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -16,108 +16,205 @@ 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) {
+let currLimitLearnObj = 4;
+let currLimitDrafts = 4;
+let currLimitCurating = 4;
+
+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 [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)})
+ fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
}, [])
const showMoreLearnObj = () => {
- var sliceLength = learningObjectsSlice.length
- setLearningObjectsSlice(learningObjects.slice(0, sliceLength + 4))
+ setLoadingMoreLearnObj(true);
+ const limit = 4;
+ currLimitLearnObj = 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 showAllLearnObj = () => {
+ setLoadingMoreLearnObj(true);
+ const url = `/users/${props.id}/learning_objects`
+ getRequest(url,
+ (data) => {
+ setLearningObjects([...data]);
+ setLoadingMoreLearnObj(false);
+ setEndofLearndObj(true)
+ },
+ (error) => { console.log(error) }
+ )
+ }
const showMoreDrafts = () => {
- var sliceLength = draftsSlice.length
- setDraftsSlice(drafts.slice(0, sliceLength + 4))
+ setLoadingMoreDrafts(true);
+ const limit = 4;
+ currLimitDrafts = 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 showAllDrafts = () => {
+ setLoadingMoreDrafts(true);
+ const url = `/users/${props.id}/drafts`;
+ getRequest(url,
+ (data) => {
+ setDrafts([...data]);
+ setLoadingMoreDrafts(false);
+ setEndofDrafts(true);
+ },
+ (error) => { console.log(error) }
+ )
+ }
const showMoreCurating = () => {
- var sliceLength = curatingSlice.length
- setCuratingSlice(curating.slice(0, sliceLength + 4))
+ setLoadingMoreCurating(true);
+ const limit = 4;
+ currLimitCurating = 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)}
+ const showAllCurating = () => {
+ setLoadingMoreCurating(true);
+ const url = `/users/${props.id}/submissions`;
+ getRequest(url,
+ (data) => {
+ setCurating([...data]);
+ setLoadingMoreCurating(false);
+ setEndofCurating(true);
+ },
+ (error) => { console.log(error) }
+ )
+ }
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}
+ showAll={showAllLearnObj}
+ 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}
+ showAll={showAllDrafts}
+ 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}
+ showAll={showAllCurating}
+ loadingMore={loadingMoreCurating}
+ end={endOfCurating}
+ />
+ </React.Fragment>
+ ]
+ )
}
</>
)
--
GitLab