diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index 279ffa96b70221a6d28b2d34bdcf8082fdadd2b7..a075780622f76c453592afb7d07b84de6ccd3df3 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -42,7 +42,6 @@ export default function ColCardOwnerOptions (props) {
}
const [modalExcluirOpen, toggleModalExcluir] = useState(false)
- const openModalExcluir = () => {toggleModalExcluir(true)}
const [modalEditarOpen, toggleModalEditar] = useState(false)
@@ -50,7 +49,7 @@ export default function ColCardOwnerOptions (props) {
return (
<>
<ModalExcluirColecao id={props.id}
- open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}}
+ open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
/>
<ModalEditarColecao id={props.id}
open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
@@ -78,7 +77,7 @@ export default function ColCardOwnerOptions (props) {
<ListItemIcon><CreateIcon /></ListItemIcon>Editar
</StyledMenuItem>
- <StyledMenuItem onClick={openModalExcluir}>
+ <StyledMenuItem onClick={() => {toggleModalExcluir(true)}} >
<ListItemIcon><DeleteForeverIcon /></ListItemIcon>Excluir
</StyledMenuItem>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 85f59e03ce1471a18330239ee2480e0ef1b41d99..6f7322e7261536655d78098ad28b3639e87af2a5 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -272,6 +272,7 @@ export default function CollectionCardFunction(props) {
id={props.id}
changeColName={changeColName}
changeColPrivacy={changeColPrivacy}
+ removeColl={props.removeColl}
/>
</Grid>
</Grid>
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index 879112aebb46690447dcc1b3cdecb62e90adbbff..f23b819d88584a3ee2fab19dd94bf3935c90b782 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -31,6 +31,7 @@ export default function ModalExcluirColecao (props) {
function handleDeleteSuccess (data) {
toggleSnackbar(true)
+ props.removeColl(props.id)
props.handleClose()
}
const handleDelete = () => {
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js
index 4fd3364085585a62ff575b4833c9aedd7ba97394..c792b7d2de531c63ef2ec1b44b2f4a61b992b163 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRede.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js
@@ -76,7 +76,7 @@ export default function PanelTemplateRede(props) {
props.sliceArr.map((card) =>
<>
{
- card.follower &&
+ card.follower && card.followable &&
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
{RenderContactCard(card, props.follower)}
</Grid>
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
index 553b9788dc860e290de3b72bf1acdfd7e06b1730..6e32577f77617b47bda1298c2a583ce7a50cf249 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
@@ -54,7 +54,7 @@ export default function LastCols(props) {
<StyledGrid container spacing={1} style={{ paddingLeft: "0.5em" }}>
{
props.collections.slice(0, 4).map((card) =>
- <Grid item md={3} xs={12} key={card.id}>
+ <Grid item container md={3} xs={12} key={card.id}>
<CollectionCardFunction
name={card.name}
tags={card.tags}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 22fe8e4da3e4ba7e536b2227ca7319f39f600805..4b46dc0700385baa2b787e847b8a671ed3f1f262 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -17,79 +17,104 @@ 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, StyledGrid } from '../StyledComponents.js'
-import Grid from '@material-ui/core/Grid';
-import CollectionCardFunction from '../../CollectionCardFunction.js'
-import { ButtonMostrarMaisColecao } from '../PanelComponents/ButtonsArea.js'
-
-export default function TabRecursos(props) {
- const [arr, setArr] = useState([])
- const [colsSlice, setSlice] = useState([])
- const handleSlice = (newArr) => { setSlice(newArr) }
-
+import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
+import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
+import LoadingSpinner from '../../LoadingSpinner.js'
+
+export default function TabColecoes(props) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInUserColl, setErrorInUserColl] = useState(false)
+
+ const [userCollections, setUserCollections] = useState([])
+
+ const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
+
+ const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
+
+ const [endOfUserColl, setEndOfUserColl] = useState(false);
+
+ function handleSuccess(responseArr, headersArr) {
+ setErrorInUserColl(responseArr[0].errors ? true : false)
+
+ handleLoading(false)
+ setUserCollections(responseArr[0])
+
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfUserColl(headersArr[0].get('X-Total-Count'));
+ }
+ }
+
+ function handleError(error) {
+ handleLoading(false)
+ setErrorInUserColl(true)
+ }
+
+ const getInfo = () => {
+ const urls = [
+ `/users/${props.id}/collections?offset=0&limit=4`,
+ ]
+ fetchAllRequest(urls, handleSuccess, handleError)
+ }
+
useEffect(() => {
- setArr(props.collections)
- setSlice(props.collections.slice(0, 4))
+ handleLoading(true)
+ getInfo()
}, [])
-
- const showMore = (quantity) => {
- var sliceLength = colsSlice.length
- handleSlice(arr.slice(0, sliceLength + quantity))
+
+ 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.errors) {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ setErrorInUserColl(true)
+ }
+ else if (data.length >= 1) {
+ let currData = [...userCollections];
+ currData = [...currData.concat(data)];
+ setLoadingMoreUserColl(false);
+ setUserCollections(currData);
+ }
+ else {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ }
+ },
+ (error) => {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ setErrorInUserColl(true)
+ }
+ )
}
return (
- <ContainerStyled style={{ flexDirection: "column" }}>
-
- <HeaderGrid container>
- <Grid item xs={12}>
- <h3>Coleções públicas <b style={{ fontWeight: "500" }}>({props.count})</b></h3>
- </Grid>
- </HeaderGrid>
-
- <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
- {
- colsSlice.map((card) =>
- <Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.review_average}
- id={card.id}
- author={card.owner.name}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner.avatar}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner.id}
- />
- </Grid>
- )
- }
- </StyledGrid>
-
- <Carregados>
- <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
- Carregados {colsSlice.length} de {arr.length}
- </p>
-
- {
- props.count > 5 &&
- <React.Fragment>
- <ButtonMostrarMaisColecao onClick={() => { showMore(4) }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
- </ButtonMostrarMaisColecao>
-
- <ButtonMostrarMaisColecao onClick={() => { showMore(20) }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
- </ButtonMostrarMaisColecao>
- </React.Fragment>
- }
-
- </Carregados>
-
- </ContainerStyled>
+ <>
+ {
+ loading ?
+ (
+ <LoadingSpinner text={'CARREGANDO COLEÇÕES'} />
+ )
+ :
+ (
+ <PanelTemplateColecao
+ title={"Coleções Públicas"}
+ length={userCollections.length}
+ noContentText={props.username + " não possui nenhuma coleção."}
+ sliceArr={userCollections}
+ showMore={showMoreUserCollections}
+ loadingMore={loadingMoreUserColl}
+ end={endOfUserColl}
+ followed={false}
+ error={errorInUserColl}
+ />
+ )
+ }
+ </>
)
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
index a9350fd39b2524192edcce8d781f72e3d94c0bf5..6b8a8a8ee73eb0ede45b2b3ed40785697169cbac 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
@@ -18,35 +18,94 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {useState, useEffect} from 'react'
import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
-import {fetchAllRequest} from '../../HelperFunctions/getAxiosConfig'
+import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
+import LoadingSpinner from '../../LoadingSpinner.js'
export default function TabRede (props) {
- const [followers, setFollowers] = useState([])
- const [followersSlice, setFollowersSlice] = useState([])
-
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInFollowing, setErrorInFollowing] = useState(false)
+ const [errorInFollowers, setErrorInFollowers] = useState(false)
+
+ const [followingList, setFollowing] = useState([])
+ const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
+ const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
const [endOfFollowing, setEndOfFollowing] = useState(false)
+
+ const [followersList, setFollowers] = useState([])
+ const [currFollowerLimit, setFollowersLimit] = useState(12)
+ const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
const [endOfFollowers, setEndOfFollowers] = useState(false)
- const showMoreFollowers = () => {
- let varSlice = followersSlice.length
- setFollowersSlice(followers.slice(0, varSlice + 4))
- }
- const showAllFollowers = () => {setFollowersSlice(followers)}
-
- const [following, setFollowing] = useState([])
- const [followingSlice, setFollowingSlice] = useState([])
- const showMoreFollowing = (num) => {
- let varSlice = followingSlice.length
- setFollowingSlice(following.slice(0, varSlice + num))
- }
- const showAllFollowing = () => {setFollowingSlice(following)}
-
- function handleSuccess (responseArr, headersArr) {
+ 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.errors) {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
+ }
+ else if (data.length >= 1) {
+ let currData = [...followingList];
+ currData = [...currData.concat(data)];
+ setLoadingFollowing(false);
+ setFollowing(currData);
+ }
+ else {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ }
+ },
+ (error) => {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
+ }
+ )
+ }
+
+ 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.errors) {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+ else {
+ if (data.length >= 1) {
+ let currData = [...followersList];
+ currData = [...currData.concat(data)];
+ setLoadingMoreFollowers(false);
+ setFollowers(currData);
+ }
+ else {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true)
+ }
+ }
+ },
+ (error) => {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+ )
+ }
+
+ async function handleSuccess (responseArr, headersArr) {
+ setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
setFollowers(responseArr[0])
- setFollowersSlice(responseArr[0].slice(0,4))
-
setFollowing(responseArr[1])
- setFollowingSlice(responseArr[1].slice(0,4))
if (headersArr[1].has('X-Total-Count')) {
setEndOfFollowing(headersArr[1].get('X-Total-Count'));
@@ -54,38 +113,63 @@ export default function TabRede (props) {
if (headersArr[0].has('X-Total-Count')) {
setEndOfFollowers(headersArr[0].get('X-Total-Count'));
}
+ handleLoading(false)
+ }
+
+ function handleErrors() {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
}
useEffect( () => {
+ handleLoading(true)
const urls = [`/users/${props.id}/followers`, `/users/${props.id}/following/User`]
- fetchAllRequest(urls, handleSuccess, (error) => {console.log(error)})
+ fetchAllRequest(urls, handleSuccess, handleErrors)
}, [])
return (
- <React.Fragment>
- <PanelTemplateRede
- title={"Seguidores"}
- length={followers.length}
- sliceArr={followersSlice}
- showMore={showMoreFollowers}
- showAll={showAllFollowers}
- follower={true}
- end={endOfFollowers}
- noContentText={props.username + ' não possui nenhum seguidor'}
- />
-
- <PanelTemplateRede
- title={"Seguindo"}
- length={following.length}
- sliceArr={followingSlice}
- showMore={showMoreFollowing}
- showAll={showAllFollowing}
- follower={false}
- end={endOfFollowing}
- noContentText={props.username + ' não segue nenhum usuário'}
- />
- </React.Fragment>
+ <>
+ {
+ loading ?
+ (
+ [
+ <LoadingSpinner text={'CARREGANDO...'} />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <PanelTemplateRede
+ title={"Seguidores"}
+ length={followersList.length}
+ sliceArr={followersList}
+ showMore={showMoreFollowers}
+ follower={true}
+ end={endOfFollowers}
+ loadingMore={loadingMoreFollowers}
+ error={errorInFollowers}
+ noContentText={props.username + ' não possui nenhum seguidor'}
+ />
+
+ <PanelTemplateRede
+ title={"Seguindo"}
+ length={followingList.length}
+ sliceArr={followingList}
+ showMore={showMoreFollowing}
+ follower={false}
+ end={endOfFollowing}
+ loadingMore={loadingMoreFollowing}
+ error={errorInFollowing}
+ noContentText={props.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 420071c2cf0b7ec4b7a4feb7a12826ad1041b063..eef4d1eaa7df0728081c75d13d87e15db0f199b7 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -50,6 +50,12 @@ export default function TabPanelColecoes(props) {
const [endOfUserColl, setEndOfUserColl] = useState(false);
const [endOfFollowedColl, setEndOfFollowedColl] = useState(false);
+ const removeColl = (itemId) => {
+ let newSlice = userCollections.filter(item => item.id !== itemId);
+ setUserCollections(newSlice);
+ setEndOfUserColl(String(endOfUserColl - 1))
+ };
+
function handleSuccess(responseArr, headersArr) {
setErrorInUserColl(responseArr[0].errors ? true : false)
setErrorInFollowedColl(responseArr[1].errors ? true : false)
@@ -181,10 +187,11 @@ export default function TabPanelColecoes(props) {
end={endOfUserColl}
callback={getInfo}
error={errorInUserColl}
+ removeColl={removeColl}
/>
<PanelTemplateColecao
- title={"Coleções que eu sigo"}
+ title={"Coleções que você segue"}
length={followedCollections.length}
noContentText={"Você ainda não segue nenhuma coleção."}
sliceArr={followedCollections}
@@ -272,6 +279,7 @@ function Tentativa(props) {
liked={card.liked}
collections={card.collection_items}
authorID={card.owner.id}
+ removeColl={props.removeColl}
/>
</Grid>
)
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index 2571305e25d7bd36fdbe233bc1dccb8132599b5b..070d3cb4f7e265299ddf3efe5dfbad3124f57cbe 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -42,7 +42,7 @@ function RenderFollowContainer(props) {
const { state } = useContext(Store)
const [followed, setFollowed] = useState(props.followed)
const toggleFollowed = () => { setFollowed(!followed) }
- console.log(followed);
+
return (
<FollowContainer>
<>
@@ -103,7 +103,7 @@ export default function PublicUserPage(props) {
const { state } = useContext(Store)
/*user info variables--------------------------------------*/
const WIDTH = window.innerWidth;
- const id = props.match.params.userId
+ const [id, setId] = useState(props.match.params.userId)
const [loading, setLoading] = useState(false);
@@ -148,10 +148,12 @@ export default function PublicUserPage(props) {
/*Component Will Mount*/
useEffect(() => {
+ const id = props.match.params.userId
+ 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) })
- }, [state.currentUser.id])
+ }, [state.currentUser.id, props.match.params.userId])
/*---------------------------------------------------------*/
return (
@@ -238,18 +240,19 @@ export default function PublicUserPage(props) {
</div>
</Grid>
- <Grid item xs={12}>
- {tabValue === 0 &&
- <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
- {tabValue === 1 &&
- <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} />}
-
- </Grid>
+ {
+ !loading &&
+ <Grid item xs={12}>
+ {tabValue === 0 &&
+ <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
+ {tabValue === 1 &&
+ <TabRecursos count={userData.learning_objects_count} learningObjs={learningObjArr} id={id} />}
+ {tabValue === 2 &&
+ <TabColecoes id={id} username={userData.name} />}
+ {tabValue === 3 &&
+ <TabRede id={id} username={userData.name} />}
+ </Grid>
+ }
</Grid>
</BackgroundDiv>
</React.Fragment>