diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 4b46dc0700385baa2b787e847b8a671ed3f1f262..9b987347a51274465b78e7db062a99bd6d9a2273 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -21,7 +21,7 @@ import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfi
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabColecoes(props) {
+export default function TabColecoes({id, username}) {
const [loading, handleLoading] = useState(true)
const [errorInUserColl, setErrorInUserColl] = useState(false)
@@ -52,7 +52,7 @@ export default function TabColecoes(props) {
const getInfo = () => {
const urls = [
- `/users/${props.id}/collections?offset=0&limit=4`,
+ `/users/${id}/collections?offset=0&limit=4`,
]
fetchAllRequest(urls, handleSuccess, handleError)
}
@@ -66,7 +66,7 @@ export default function TabColecoes(props) {
const limit = limite;
setLoadingMoreUserColl(true);
setCurrLimitUserColl(currLimitUserColl + limit)
- const url = `/users/${props.id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
+ const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
getRequest(url,
(data) => {
if (data.errors) {
@@ -98,14 +98,14 @@ export default function TabColecoes(props) {
{
loading ?
(
- <LoadingSpinner text={'CARREGANDO COLEÇÕES'} />
+ <LoadingSpinner text={`Carregando coleções de ${username}`} />
)
:
(
<PanelTemplateColecao
title={"Coleções Públicas"}
length={userCollections.length}
- noContentText={props.username + " não possui nenhuma coleção."}
+ noContentText={username + " não possui nenhuma coleção."}
sliceArr={userCollections}
showMore={showMoreUserCollections}
loadingMore={loadingMoreUserColl}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
index c3be595d77195988bb83f7c43106d4cd6a2f43eb..7965d58e5111ad748a22cdf2672c25f05bc3f3ce 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
@@ -19,7 +19,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
import UserDescription from './UserDescription.js'
-import NoContentImage from '../../../img/img-16.png'
import Template from '../PanelComponents/TemplateRecurso'
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
@@ -71,7 +70,7 @@ export default function TabInicio({ id, user, learningObjs, collections }) {
}
<Template
length={learningObjs.length}
- titleText={learningObjs.length === 1 ? `Recurso de ${user.name}` : `Recursos de ${user.name}`}
+ titleText={learningObjs.length === 1 ? `Último Recurso de ${user.name}` : `Últimos recursos de ${user.name}`}
noContentText={`${user.name} não publicou nenhum recursos ainda`}
slice={learningObjs}
showMore={() => { }} // there is no function here, because we don't want to display more resources in this tab
@@ -80,7 +79,7 @@ export default function TabInicio({ id, user, learningObjs, collections }) {
error={false}
/>
<PanelTemplateColecao
- title={`Coleçoes de ${user.name}`}
+ title={`Últimas coleçoes de ${user.name}`}
length={collections.length}
noContentText={`${user.name} não publicou nenhuma coleção ainda`}
sliceArr={collections}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
index bbce193bcde870391dda55ee9a67c79aacb768b4..b8f38e36b55e62c26f5df389ba6b80bbdba6a301 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
@@ -17,94 +17,92 @@ 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 { HeaderGrid, ContainerStyled, Carregados } from '../StyledComponents.js'
-import Grid from '@material-ui/core/Grid';
-import ResourceCardFunction from '../../ResourceCardFunction.js'
-import { ButtonMostrarMaisRecurso } from '../PanelComponents/ButtonsArea'
+import LoadingSpinner from '../../LoadingSpinner.js'
+import Template from '../PanelComponents/TemplateRecurso.js'
import { getRequest } from '../../HelperFunctions/getAxiosConfig'
-import { StyledGrid } from '../StyledComponents'
-
-export default function TabRecursos(props) {
- const [arr, setArr] = useState([])
- const [objsSlice, setSlice] = useState([])
- const handleSlice = (newArr) => { setSlice(newArr) }
- useEffect(() => {
- setArr(props.learningObjs)
- setSlice(props.learningObjs.slice(0, 4))
- }, [])
+export default function TabPanelAtividades({id, username}) {
+ const [loading, handleLoading] = useState(true)
- function handleSuccess(data) {
- setArr(data)
- setSlice(data)
- }
- const showMore = (quantity) => {
- var sliceLength = objsSlice.length
- var newLength = sliceLength + quantity
+ const [errorInLearnObj, setErrorInLearnObj] = useState(false)
+ const [loadingMoreLearnObj, setLoadingMoreLearnObj] = useState(false)
+ const [currLimitLearnObj, setCurrLimitLearnObj] = useState(4);
+ const [endOfLearnObj, setEndofLearndObj] = useState(0);
+ const [learningObjects, setLearningObjects] = useState([]);
- if (newLength > 12) {
- const url = `/users/${props.id}/learning_objects?limit=${newLength}$offset=4`
- getRequest(url, handleSuccess, (error) => { console.log(error) })
+ function handleSuccess(data, headers) {
+ setErrorInLearnObj(data.errors ? true : false)
+ setLearningObjects(data)
+ if (headers.has('X-Total-Count')) {
+ setEndofLearndObj(headers.get('X-Total-Count'));
}
- else {
- handleSlice(arr.slice(0, sliceLength + quantity))
- }
-
+ handleLoading(false)
}
- return (
- <ContainerStyled style={{ flexDirection: "column" }}>
+ function handleError(error) {
+ handleLoading(false)
+ setErrorInLearnObj(true)
+ }
- <HeaderGrid container>
- <Grid item xs={12}>
- <h3>Recursos Publicados <b style={{ fontWeight: "500" }}>({props.count})</b></h3>
- </Grid>
- </HeaderGrid>
+ useEffect(() => {
+ const url = `/users/${id}/learning_objects?offset=0&limit=4`;
+ handleLoading(true);
+ getRequest(url, handleSuccess, handleError);
+ }, [])
- <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
- {
- objsSlice.map((card) =>
- <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.publisher.name}
- tags={card.tags}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Grid>
- )
+ const showMoreLearnObj = (limite) => {
+ setLoadingMoreLearnObj(true);
+ const limit = limite;
+ setCurrLimitLearnObj(currLimitLearnObj + limit)
+ const url = `/users/${id}/learning_objects?offset=${currLimitLearnObj}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingMoreLearnObj(false);
+ setErrorInLearnObj(true)
}
- </StyledGrid>
-
- <Carregados>
- <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
- Carregados {objsSlice.length} de {arr.length}
- </p>
-
- {
- props.count > 5 &&
- <React.Fragment>
- <ButtonMostrarMaisRecurso onClick={() => { showMore(4) }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
- </ButtonMostrarMaisRecurso>
-
- <ButtonMostrarMaisRecurso onClick={() => { showMore(20) }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
- </ButtonMostrarMaisRecurso>
- </React.Fragment>
+ else if (data.length >= 1) {
+ let currData = [...learningObjects];
+ currData = [...currData.concat(data)];
+ setLoadingMoreLearnObj(false);
+ setLearningObjects(currData);
}
+ else {
+ setLoadingMoreLearnObj(false);
+ }
+ },
+ (error) => {
+ setLoadingMoreLearnObj(false);
+ setErrorInLearnObj(true)
+ }
+ )
+ }
- </Carregados>
-
- </ContainerStyled>
+ return (
+ <>
+ {
+ loading ?
+ (
+ <LoadingSpinner text={`Carregando os recursos de ${username}`} />
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <Template
+ length={learningObjects.length}
+ titleText={learningObjects.length === 1 ? `Recurso publicado de ${username}` : `Recursos publicados ${username}`}
+ noContentText={`${username} ainda não publicou nenhum Recurso!`}
+ slice={learningObjects}
+ showMore={showMoreLearnObj}
+ loadingMore={loadingMoreLearnObj}
+ end={endOfLearnObj}
+ error={errorInLearnObj}
+ />
+ </React.Fragment>
+ ]
+ )
+ }
+ </>
)
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
index 6b8a8a8ee73eb0ede45b2b3ed40785697169cbac..81334d46c6edc88b10c8df88fa0df5366edec587 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
@@ -21,7 +21,7 @@ import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabRede (props) {
+export default function TabRede ({id, username}) {
const [loading, handleLoading] = useState(true)
const [errorInFollowing, setErrorInFollowing] = useState(false)
@@ -41,7 +41,7 @@ export default function TabRede (props) {
setLoadingFollowing(true);
const limit = limite;
setCurrFollowingLimit(currFollowingLimit + limit)
- const url = `/users/${props.id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
+ const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
getRequest(url,
(data) => {
if (data.errors) {
@@ -72,7 +72,7 @@ export default function TabRede (props) {
setLoadingMoreFollowers(true);
const limit = limite;
setFollowersLimit(currFollowerLimit + limit)
- const url = `/users/${props.id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
+ const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
getRequest(url,
(data) => {
if (data.errors) {
@@ -125,7 +125,7 @@ export default function TabRede (props) {
useEffect( () => {
handleLoading(true)
- const urls = [`/users/${props.id}/followers`, `/users/${props.id}/following/User`]
+ const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
fetchAllRequest(urls, handleSuccess, handleErrors)
}, [])
@@ -136,7 +136,7 @@ export default function TabRede (props) {
loading ?
(
[
- <LoadingSpinner text={'CARREGANDO...'} />
+ <LoadingSpinner text={`Carregando dados de ${username}`} />
]
)
:
@@ -144,7 +144,7 @@ export default function TabRede (props) {
[
<React.Fragment>
<PanelTemplateRede
- title={"Seguidores"}
+ title={`Seguidores de ${username}`}
length={followersList.length}
sliceArr={followersList}
showMore={showMoreFollowers}
@@ -152,11 +152,11 @@ export default function TabRede (props) {
end={endOfFollowers}
loadingMore={loadingMoreFollowers}
error={errorInFollowers}
- noContentText={props.username + ' não possui nenhum seguidor'}
+ noContentText={username + ' não possui nenhum seguidor'}
/>
<PanelTemplateRede
- title={"Seguindo"}
+ title={`${username} está seguindo`}
length={followingList.length}
sliceArr={followingList}
showMore={showMoreFollowing}
@@ -164,7 +164,7 @@ export default function TabRede (props) {
end={endOfFollowing}
loadingMore={loadingMoreFollowing}
error={errorInFollowing}
- noContentText={props.username + ' não segue nenhum usuário'}
+ noContentText={username + ' não segue nenhum usuário'}
/>
</React.Fragment>
]
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index 4e6d490f5871ebdef8ab667556b8b1ca980ebe3d..3abc14f58d9dae31f8a949f890890dcfa0f85c25 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -23,7 +23,6 @@ import Grid from '@material-ui/core/Grid';
import LoadingSpinner from '../../LoadingSpinner.js'
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
import PaginaVaziaColecao from '../../../img/Pagina_vazia_colecao.png'
-import NoContent from '../PanelComponents/NoContent.js'
import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
import Title from '../PanelComponents/PanelTitle.js'
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index 2aa9e4f5b33c969ddabd6671fd2a0904c7813bae..fa2818c2d994f455d83a25a2337f9db8cfeea654 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -37,9 +37,10 @@ import { HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoD
import { fetchAllRequest } from '../Components/HelperFunctions/getAxiosConfig'
import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
+import LoadingSpinner from '../Components/LoadingSpinner';
function RenderFollowContainer(props) {
- const { state } = useContext(Store)
+ const { state } = useContext(Store)
const [followed, setFollowed] = useState(props.followed)
const toggleFollowed = () => { setFollowed(!followed) }
@@ -155,11 +156,13 @@ export default function PublicUserPage(props) {
setId(id)
const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`, `/users/${id}/following/User`]
setLoading(true);
- fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
+ fetchAllRequest(urls, handleSuccess, (error) => { console.log(error); setLoading(false) })
}, [state.currentUser.id, props.match.params.userId])
/*---------------------------------------------------------*/
- return (
+ return loading ?
+ <LoadingSpinner text="Carregando dados do usuário..."/>
+ :
<React.Fragment>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet" />
<BackgroundDiv>
@@ -247,7 +250,7 @@ export default function PublicUserPage(props) {
{tabValue === 0 &&
<TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
{tabValue === 1 &&
- <TabRecursos count={userData.learning_objects_count} learningObjs={learningObjArr} id={id} />}
+ <TabRecursos id={id} username={userData.name} />}
{tabValue === 2 &&
<TabColecoes id={id} username={userData.name} />}
{tabValue === 3 &&
@@ -257,7 +260,6 @@ export default function PublicUserPage(props) {
</Grid>
</BackgroundDiv>
</React.Fragment>
- )
}