diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 4b24e10d5da5d2ca057066ee45387fe2c9bf3f75..00984b874570c7dbc173cf5f290f972314ca1535 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -48,38 +48,38 @@ class ReqResources extends Component {
this.setState({ resources: res.data });
});
}
-
- resourcesPerPage(){
+
+ resourcesPerPage() {
var pageWidth = window.innerWidth
- if (pageWidth >= 1200){
+ if (pageWidth >= 1200) {
return 3
}
- else{
+ else {
if (pageWidth > 766) {
return 2
}
- else{
+ else {
return 1
}
}
}
-
+
render() {
var rows = []
var resources_per_page = this.resourcesPerPage()
- for(let i = 0; i < 12/resources_per_page; i++){
- rows.push(this.state.resources.slice(i*resources_per_page, resources_per_page*(i+1)))
+ for (let i = 0; i < 12 / resources_per_page; i++) {
+ rows.push(this.state.resources.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%", justifyContent: "center"}} key={(index+1)}>
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
{row.map((card) => (
- <div style={{marginLeft:10, display: 'flex' }} key={card.id*(index+1)}>
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
<ResourceCardFunction
avatar={card.publisher.avatar}
id={card.id}
@@ -120,16 +120,16 @@ class ReqCollections extends Component {
console.log(res.data);
});
}
- collectionsPerPage(){
+ collectionsPerPage() {
var pageWidth = window.innerWidth
- if (pageWidth >= 1200){
+ if (pageWidth >= 1200) {
return 3
}
- else{
+ else {
if (pageWidth > 766) {
return 2
}
- else{
+ else {
return 1
}
}
@@ -138,18 +138,19 @@ class ReqCollections extends Component {
render() {
var rows = []
var collections_per_page = this.collectionsPerPage()
- for(let i = 0; i < 12/collections_per_page; i++){
- rows.push(this.state.collections.slice(i*collections_per_page, collections_per_page*(i+1)))
+ for (let i = 0; i < 12 / collections_per_page; i++) {
+ rows.push(this.state.collections.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%", justifyContent: "center" }} key={(index+1)}>
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
{row.map((card) => (
- <div style={{marginLeft:10, display: 'flex' }} key={card.id*(index+1)}>
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
<CollectionCardFunction
name={card.name}
+ tags={card.tags}
rating={card.score}
id={card.id}
author={card.owner.name}
@@ -157,11 +158,15 @@ class ReqCollections extends Component {
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}
/>
</div>
))}
</Row>
- ))}
+ ))}
</Carousel>
);
}
@@ -183,20 +188,20 @@ class SubPages extends Component {
case "Recursos":
return (
<React.Fragment>
- <div style={{ backgroundColor: "#ff7f00", position:"relative" }}>
- <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={recursos}
alt="aba recursos"
height="155"
- style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
- <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
- Nesta área, você tem acesso a Recursos Educacionais
- Digitais, isto é, a vídeos, animações e a outros recursos
- destinados à educação. São Recursos de portais parceiros
- do MEC e de professores que, como você, atuam na Educação
- Básica!
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+ Nesta área, você tem acesso a Recursos Educacionais
+ Digitais, isto é, a vídeos, animações e a outros recursos
+ destinados à educação. São Recursos de portais parceiros
+ do MEC e de professores que, como você, atuam na Educação
+ Básica!
</p>
</div>
</div>
@@ -241,20 +246,20 @@ class SubPages extends Component {
return (
<React.Fragment>
- <div style={{ backgroundColor: "#e81f4f", position:"relative" }}>
- <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={materiais}
alt="aba recursos"
height="155"
- style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
- <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
- Nesta área, você acessa livremente materiais completos de
- formação, como cursos já oferecidos pelo MEC e seus
- parceiros. São conteúdos elaborados por equipes
- multidisciplinares e de autoria de pesquisadores e
- educadores renomados nas áreas.
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+ Nesta área, você acessa livremente materiais completos de
+ formação, como cursos já oferecidos pelo MEC e seus
+ parceiros. São conteúdos elaborados por equipes
+ multidisciplinares e de autoria de pesquisadores e
+ educadores renomados nas áreas.
</p>
</div>
</div>
@@ -306,19 +311,19 @@ class SubPages extends Component {
case "Colecoes":
return (
<React.Fragment>
- <div style={{ backgroundColor: "#673ab7", position:"relative" }}>
- <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight: 195, paddingLeft: 10, paddingRight: 10, paddingTop: 20, paddingBottom: 20 }}>
<img
src={colecoes}
alt="aba recursos"
height="155"
- style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
/>
- <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
- Nesta área, você tem acesso às coleções criadas e
- organizadas pelos usuários da plataforma. É mais uma
- possibilidade de buscar recursos educacionais para sua
- aula!
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825 ? "25%" : "0px" }}>
+ Nesta área, você tem acesso às coleções criadas e
+ organizadas pelos usuários da plataforma. É mais uma
+ possibilidade de buscar recursos educacionais para sua
+ aula!
</p>
</div>
</div>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index b48c2eb60ba4bc0eaa4225c3c736c70a468069c9..5a61b28768c93cab48190f216df2abd887ec40d1 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -44,7 +44,7 @@ import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
export default function CollectionCardFunction(props) {
- console.log(props);
+ // console.log(props);
const { state } = useContext(Store)
// eslint-disable-next-line
@@ -115,7 +115,54 @@ export default function CollectionCardFunction(props) {
}
useEffect(() => {
- console.log("bla!");
+ // setTimeout(function () {
+ // if (state.currentUser.id) {
+ // const config = getAxiosConfig();
+ // axios({
+ // method: 'get',
+ // url: `${apiUrl}/users/${state.currentUser.id}/following/Collection`,
+ // headers: config.headers
+ // }).then(
+ // (response) => {
+ // const data = response.data
+ // for (let i = 0; i < data.length; i++)
+ // if (data[i].followable.id === props.id)
+ // toggleUserFollowingCol(true)
+ // saveHeaders(response)
+ // })
+ // }
+ // else {
+ // toggleLiked(false);
+ // toggleUserFollowingCol(false);
+ // }
+ // }, 1000);
+
+ // setTimeout(function () {
+ // if (state.currentUser.id) {
+ // const config = getAxiosConfig();
+ // axios({
+ // method: 'get',
+ // url: `${apiUrl}/users/${state.currentUser.id}/collections/liked`,
+ // headers: config.headers
+ // }).then(
+ // (response) => {
+ // const data = response.data
+ // for (let i = 0; i < data.length; i++)
+ // if (data[i].id === props.id)
+ // toggleLiked(true)
+ // saveHeaders(response)
+ // })
+ // }
+ // else {
+ // toggleLiked(false);
+ // toggleUserFollowingCol(false);
+ // }
+ // }, 2000);
+ if(!state.currentUser.id)
+ {
+ toggleLiked(false);
+ toggleUserFollowingCol(false);
+ }
}, [state.currentUser.id])
const RenderFollowingButton = () => {
@@ -144,6 +191,26 @@ export default function CollectionCardFunction(props) {
const SlideAnimationContent = () => {
return (
+ // <SlideContentDiv>
+ // <HeaderContainer>{/*marginBottom:10px*/}
+ // <AvatarDiv>
+ // <img className="img" src={userAvatar} alt="user avatar" />
+ // </AvatarDiv>
+ // <EnviadoPor>
+ // Enviado por:
+ // <br />
+ // <p>{props.author}</p>
+ // </EnviadoPor>
+ // </HeaderContainer>
+ // <TagContainer>
+ // {
+ // props.tags.map((tag) =>
+ // <span key={tag.id}>{tag.name}</span>
+
+ // )
+ // }
+ // </TagContainer>
+ // </SlideContentDiv>
<SlideContentDiv>
<div style={{ display: "flex", flex: "1" }}>{/*marginBottom:10px*/}
<SlideAvatarDiv>
@@ -187,7 +254,7 @@ export default function CollectionCardFunction(props) {
}
handleSuccessfulLogin(false);
}
-
+
return (
<>
<SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index dfb193fc5a5db0774c39c7df8095153eedc36c59..0aeff38c9fc728897ba68e667a561acee8e918e5 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -21,16 +21,17 @@ import Grid from '@material-ui/core/Grid';
import NoContent from './NoContent.js'
import CollectionCardFunction from '../../CollectionCardFunction.js'
import Title from './PanelTitle.js'
-import {WhiteContainer, StyledGrid} from '../StyledComponents.js'
-import {ButtonsAreaColecao} from './ButtonsArea'
+import { WhiteContainer, StyledGrid } from '../StyledComponents.js'
+import { ButtonsAreaColecao } from './ButtonsArea'
-export default function PanelTemplateColecao (props) {
+export default function PanelTemplateColecao(props) {
const RenderFollowedColCard = (card, followerBoolean) => {
if (followerBoolean) {
return (
<CollectionCardFunction
- name={card.followable.name}
+ name={card.name}
+ collections={card.followable.collection_items}
rating={card.followable.score}
type={card.followable.object_type}
description={card.followable.description}
@@ -43,27 +44,28 @@ export default function PanelTemplateColecao (props) {
followed={card.followable.followed}
privacy={card.followable.privacy}
id={card.followable.id}
- />
+ />
)
}
else {
return (
<CollectionCardFunction
- name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- author={card.owner.name}
- avatar={card.owner.avatar}
- authorID={card.owner.id}
- thumbnails={card.items_thumbnails}
- likeCount={card.likes_count}
- privacy={card.privacy}
- liked={card.liked}
- followed={card.followed}
- tags={card.tags}
- id={card.id}
- />
+ name={card.name}
+ rating={card.score}
+ type={card.object_type}
+ collections={card.collection_items}
+ description={card.description}
+ author={card.owner.name}
+ avatar={card.owner.avatar}
+ authorID={card.owner.id}
+ thumbnails={card.items_thumbnails}
+ likeCount={card.likes_count}
+ privacy={card.privacy}
+ liked={card.liked}
+ followed={card.followed}
+ tags={card.tags}
+ id={card.id}
+ />
)
}
}
@@ -77,35 +79,35 @@ export default function PanelTemplateColecao (props) {
{
props.length === 0 ?
- (
- [
- <NoContent text={props.noContentText}/>
- ]
- )
- :
- (
- [
- <React.Fragment>
+ (
+ [
+ <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>
+ <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()}
- />
- </React.Fragment>
- ]
- )
+ <ButtonsAreaColecao
+ sliceLength={props.sliceArr.length}
+ length={props.length}
+ showMore={() => props.showMore()}
+ showAll={() => props.showAll()}
+ />
+ </React.Fragment>
+ ]
+ )
}
</WhiteContainer>
diff --git a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
index 3aab2492a7eb15ad72766c1a8506520d3489ae5c..2b2148c349cbabe20df750340ee94a2bc54ab267 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/LastCollections.js
@@ -1,11 +1,11 @@
import React from 'react'
import Grid from '@material-ui/core/Grid';
-import {HeaderGrid, StyledGrid} from '../StyledComponents.js'
-import {NoContent} from './TabInicio.js'
+import { HeaderGrid, StyledGrid } from '../StyledComponents.js'
+import { NoContent } from './TabInicio.js'
import CollectionCardFunction from '../../CollectionCardFunction.js'
import NoCol from '../../../img/Pagina_vazia_colecao.png'
-export default function LastCols (props) {
+export default function LastCols(props) {
return (
<React.Fragment>
<HeaderGrid container>
@@ -16,47 +16,48 @@ export default function LastCols (props) {
{
- props.count === 0 || props.collections.length === 0?
- (
- [
- <Grid container>
- <Grid item xs={12}>
- <NoContent
- image={NoCol}
- text1={props.username + " ainda não disponibilizou nenhuma coleção."}
- text2={"Quando disponibilizar, elas aparecerão aqui."}
- />
+ props.count === 0 || props.collections.length === 0 ?
+ (
+ [
+ <Grid container>
+ <Grid item xs={12}>
+ <NoContent
+ image={NoCol}
+ text1={props.username + " ainda não disponibilizou nenhuma coleção."}
+ text2={"Quando disponibilizar, elas aparecerão aqui."}
+ />
+ </Grid>
</Grid>
- </Grid>
- ]
- )
- :
- (
- [
- <StyledGrid container spacing={1} style={{paddingLeft : "0.5em"}}>
- {
- props.collections.slice(0,4).map( (card) =>
- <Grid item md={3} xs={12} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- author={card.owner.name}
- avatar={card.owner.avatar}
- thumbnails={card.items_thumbnails}
- likeCount={card.likes_count}
- liked={card.liked}
- followed={card.followed}
- tags={card.tags}
- id={card.id}
- />
- </Grid>
- )
- }
- </StyledGrid>
- ]
- )
+ ]
+ )
+ :
+ (
+ [
+ <StyledGrid container spacing={1} style={{ paddingLeft: "0.5em" }}>
+ {
+ props.collections.slice(0, 4).map((card) =>
+ <Grid item md={3} xs={12} key={card.id}>
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.score}
+ 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>
+ ]
+ )
}
</React.Fragment>
)
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 3622356c42741f668544d26565a31a3825848ae4..f2beba8f40a5d8fb825d1d221a2d0190c8ae8efb 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -1,17 +1,17 @@
-import React, {useState, useEffect} from 'react'
-import {HeaderGrid, ContainerStyled, Carregados} from '../StyledComponents.js'
+import React, { useState, useEffect } from 'react'
+import { HeaderGrid, ContainerStyled, Carregados } from '../StyledComponents.js'
import Grid from '@material-ui/core/Grid';
import CollectionCardFunction from '../../CollectionCardFunction.js'
-import {ButtonMostrarMaisColecao} from '../PanelComponents/ButtonsArea.js'
+import { ButtonMostrarMaisColecao } from '../PanelComponents/ButtonsArea.js'
-export default function TabRecursos (props) {
+export default function TabRecursos(props) {
const [arr, setArr] = useState([])
const [colsSlice, setSlice] = useState([])
- const handleSlice = (newArr) => {setSlice(newArr)}
+ const handleSlice = (newArr) => { setSlice(newArr) }
- useEffect( () => {
+ useEffect(() => {
setArr(props.collections)
- setSlice(props.collections.slice(0,4))
+ setSlice(props.collections.slice(0, 4))
}, [])
const showMore = (quantity) => {
@@ -20,31 +20,32 @@ export default function TabRecursos (props) {
}
return (
- <ContainerStyled style={{flexDirection : "column"}}>
+ <ContainerStyled style={{ flexDirection: "column" }}>
<HeaderGrid container>
<Grid item xs={12}>
- <h3>Coleções públicas <b style={{fontWeight:"500"}}>({props.count})</b></h3>
+ <h3>Coleções públicas <b style={{ fontWeight: "500" }}>({props.count})</b></h3>
</Grid>
</HeaderGrid>
- <Grid container spacing={1} style={{paddingLeft : "0.5em"}}>
+ <Grid container spacing={1} style={{ paddingLeft: "0.5em" }}>
{
- colsSlice.map( (card) =>
+ colsSlice.map((card) =>
<Grid item md={3} xs={12} key={card.id}>
<CollectionCardFunction
name={card.name}
+ tags={card.tags}
rating={card.score}
- type={card.object_type}
- description={card.description}
+ id={card.id}
author={card.owner.name}
- avatar={card.owner.avatar}
+ description={card.description}
thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
likeCount={card.likes_count}
- liked={card.liked}
followed={card.followed}
- tags={card.tags}
- id={card.id}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
/>
</Grid>
)
@@ -52,19 +53,19 @@ export default function TabRecursos (props) {
</Grid>
<Carregados>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>
+ <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 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 onClick={() => { showMore(20) }}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
</ButtonMostrarMaisColecao>
</React.Fragment>
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index f7883396f3359173d24eace08e1826429bdd8210..1a39786969ecda9d71a3fbd96080f84e11f10dc6 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -16,24 +16,24 @@ 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 Grid from '@material-ui/core/Grid';
import LoadingSpinner from '../../LoadingSpinner.js'
import axios from 'axios'
-import {apiUrl} from '../../../env';
+import { apiUrl } from '../../../env';
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 { WhiteContainer, StyledGrid } from '../StyledComponents.js'
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
import Title from '../PanelComponents/PanelTitle.js'
import CollectionCardFunction from '../../CollectionCardFunction.js'
-import {ButtonsAreaColecao} from '../PanelComponents/ButtonsArea'
+import { ButtonsAreaColecao } from '../PanelComponents/ButtonsArea'
import CriarColecaoModal from '../../CriarColecaoModal.js'
-export default function TabPanelColecoes (props) {
+export default function TabPanelColecoes(props) {
const [loading, handleLoading] = useState(true)
const [userCollections, setUserCollections] = useState([])
@@ -47,7 +47,7 @@ export default function TabPanelColecoes (props) {
axios.get((`${apiUrl}/users/` + props.id + '/collections'), props.config),
axios.get((`${apiUrl}/users/` + props.id + '/following/Collection'), props.config),
])
- .then( (responseArr) => {
+ .then((responseArr) => {
console.log('responseArr Colecoes: ', responseArr)
if (responseArr[1].headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', responseArr[1].headers['access-token'])
@@ -55,20 +55,20 @@ export default function TabPanelColecoes (props) {
handleLoading(false)
setUserCollections(responseArr[0].data)
- setUserCollectionsSlice(responseArr[0].data.slice(0,3))
+ setUserCollectionsSlice(responseArr[0].data.slice(0, 3))
setFollowedCollections(responseArr[1].data)
- setFollowedCollectionsSlice(responseArr[1].data.slice(0,4))
+ setFollowedCollectionsSlice(responseArr[1].data.slice(0, 4))
},
- (error) => {
- handleLoading(false)
- console.log('error while running axios all')
- }
- )
+ (error) => {
+ handleLoading(false)
+ console.log('error while running axios all')
+ }
+ )
}
- useEffect( () => {
+ useEffect(() => {
getInfo()
}, [])
@@ -77,86 +77,86 @@ export default function TabPanelColecoes (props) {
setUserCollectionsSlice(userCollections.slice(0, sliceLength + 4))
}
- const showAllUserCollections = () => {setUserCollectionsSlice(userCollections)}
+ const showAllUserCollections = () => { setUserCollectionsSlice(userCollections) }
const showMoreFollowedCollections = () => {
var sliceLength = followedCollectionsSlice.length
setFollowedCollectionsSlice(followedCollections.slice(0, sliceLength + 4))
}
- const showAllFollowedCollections = () => {setFollowedCollectionsSlice(followedCollections)}
+ const showAllFollowedCollections = () => { setFollowedCollectionsSlice(followedCollections) }
return (
<>
- {
- loading ?
- (
- <LoadingSpinner text={'CARREGANDO COLEÇÕES'}/>
+ {
+ loading ?
+ (
+ <LoadingSpinner text={'CARREGANDO COLEÇÕES'} />
- )
- :
- (
- [
- <React.Fragment>
- <Tentativa
- title={"Minhas Coleções"}
- length={userCollections.length}
- noContentText={
- <div>
- <img src={PaginaVaziaColecao} alt="PaginaVaziaColecao" style={{height:"150px",width:"150px", verticalAlign:"middle", border:"0"}}/>
- <br/>
- <span style={{fontFamily:"Roboto", fontWeight:"lighter", fontSize:"24px"}}>
- Criamos a sua primeira Coleção!
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <Tentativa
+ title={"Minhas Coleções"}
+ length={userCollections.length}
+ noContentText={
+ <div>
+ <img src={PaginaVaziaColecao} alt="PaginaVaziaColecao" style={{ height: "150px", width: "150px", verticalAlign: "middle", border: "0" }} />
+ <br />
+ <span style={{ fontFamily: "Roboto", fontWeight: "lighter", fontSize: "24px" }}>
+ Criamos a sua primeira Coleção!
</span>
- <p style={{fontFamily:"Roboto", fontSize:"16px", margin:"10px 0 0", fontWeight : "normal"}}>
- Adicione nela recursos que você queira acessar mais tarde.
- <br/>
+ <p style={{ fontFamily: "Roboto", fontSize: "16px", margin: "10px 0 0", fontWeight: "normal" }}>
+ Adicione nela recursos que você queira acessar mais tarde.
+ <br />
Crie novas coleções clicando no cartão roxo "Criar Colecão".
</p>
- </div>
- }
- sliceArr={userCollectionsSlice}
- showMore={showMoreUserCollections}
- showAll={showAllUserCollections}
- callback={getInfo}
- />
-
- <PanelTemplateColecao
- title={"Coleções que eu sigo"}
- length={followedCollections.length}
- noContentText={"Você ainda não segue nenhuma coleção."}
- sliceArr={followedCollectionsSlice}
- showMore={showMoreFollowedCollections}
- showAll={showAllFollowedCollections}
- followed={true}
- />
- </React.Fragment>
- ]
- )
- }
+ </div>
+ }
+ sliceArr={userCollectionsSlice}
+ showMore={showMoreUserCollections}
+ showAll={showAllUserCollections}
+ callback={getInfo}
+ />
+
+ <PanelTemplateColecao
+ title={"Coleções que eu sigo"}
+ length={followedCollections.length}
+ noContentText={"Você ainda não segue nenhuma coleção."}
+ sliceArr={followedCollectionsSlice}
+ showMore={showMoreFollowedCollections}
+ showAll={showAllFollowedCollections}
+ followed={true}
+ />
+ </React.Fragment>
+ ]
+ )
+ }
</>
)
}
-function Tentativa (props) {
+function Tentativa(props) {
const [modalOpen, toggleModal] = useState(false)
- const handleModal = () => {toggleModal(!modalOpen)};
+ const handleModal = () => { toggleModal(!modalOpen) };
return (
<WhiteContainer>
- <CriarColecaoModal open={modalOpen} handleClose={() => {handleModal(); props.callback()}}/>
+ <CriarColecaoModal open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
<Title
title={props.title}
length={props.length}
/>
- <StyledGrid container spacing={1} style={{paddingLeft : "30px", paddingRight : "15px"}}>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
<Grid item md={3} xs={12}>
- <CardDiv onClick={()=>{handleModal()}}>
- <div style={{backgroundColor:"#673ab7", height:"250px", display:"flex", justifyContent:"center", alignItems:"center"}}>
- <CreateNewFolderIcon style={{color:"#fff", fontSize:"70px"}}/>
- <p style={{fontSize:"16px", margin:"0 0 10px", color : "#fff"}}>
+ <CardDiv onClick={() => { handleModal() }}>
+ <div style={{ backgroundColor: "#673ab7", height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
+ <CreateNewFolderIcon style={{ color: "#fff", fontSize: "70px" }} />
+ <p style={{ fontSize: "16px", margin: "0 0 10px", color: "#fff" }}>
CRIAR COLEÇÃO
</p>
</div>
@@ -165,53 +165,52 @@ function Tentativa (props) {
{
props.length === 0 ?
- (
- [
- <Grid item lg={6} md={4} sm={6} xs={12}>
- <NoContent text={props.noContentText}/>
- </Grid>
- ]
- )
- :
- (
- [
- <React.Fragment>
- {
- props.sliceArr.map( (card) =>
- <Grid item md={3} xs={12} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- rating={card.score}
- type={card.object_type}
- description={card.description}
- author={card.owner.name}
- avatar={card.owner.avatar}
- authorID={card.owner.id}
- thumbnails={card.items_thumbnails}
- likeCount={card.likes_count}
- liked={card.liked}
- followed={card.followed}
- tags={card.tags}
- privacy={card.privacy}
- id={card.id}
- />
+ (
+ [
+ <Grid item lg={6} md={4} sm={6} xs={12}>
+ <NoContent text={props.noContentText} />
</Grid>
- )
- }
- </React.Fragment>
- ]
- )
- }
- </StyledGrid>
- {
- props.length > 0 &&
- <ButtonsAreaColecao
- sliceLength={props.sliceArr.length}
- length={props.length}
- showMore={() => props.showMore()}
- showAll={() => props.showAll()}
- />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ {
+ props.sliceArr.map((card) =>
+ <Grid item md={3} xs={12} key={card.id}>
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.score}
+ 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>
+ )
+ }
+ </React.Fragment>
+ ]
+ )
}
+ </StyledGrid>
+ {
+ props.length > 0 &&
+ <ButtonsAreaColecao
+ sliceLength={props.sliceArr.length}
+ length={props.length}
+ showMore={() => props.showMore()}
+ showAll={() => props.showAll()}
+ />
+ }
</WhiteContainer>
)
}