diff --git a/src/Components/ComponentAlterarAvatar.js b/src/Components/ComponentAlterarAvatar.js
new file mode 100644
index 0000000000000000000000000000000000000000..3115167a84baaa71524a03d397ccc7aa4c3edc94
--- /dev/null
+++ b/src/Components/ComponentAlterarAvatar.js
@@ -0,0 +1,226 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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, {useContext,Component} from 'react';
+import { Button } from '@material-ui/core';
+import Modal from '@material-ui/core/Modal';
+import Backdrop from '@material-ui/core/Backdrop';
+import Zoom from '@material-ui/core/Fade';
+import styled from 'styled-components'
+import {Store} from '../Store.js'
+import axios from 'axios'
+import {apiUrl} from '../env';
+import CloseIcon from '@material-ui/icons/Close';
+import Profile from '../img/default_profile0.png'
+
+const ChangeAvatarDiv = styled.div`
+ color:rgba(255,255,255,.7);
+ background-color:rgba(0,0,0,.5);
+ position: absolute;bottom: 0;
+ width: inherit;
+ text-align: center;
+ font-size: 18px;
+ padding-bottom: 5px;
+ font-weight: 400;
+ height: 30%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
+
+export default function ComponentAlterarAvatar (props) {
+
+
+
+ return (
+ <ModalDiv style={{maxWidth:"500px", maxHeight:"500px"}}>
+ <HeaderDiv>
+ <span style={{width:"32px"}}/>
+ <StyledH2>Editar Foto</StyledH2>
+ <StyledCloseModalButton onClick={props.handleClose}>
+ <CloseIcon/>
+ </StyledCloseModalButton>
+ </HeaderDiv>
+ <DialogDiv>
+ <div style={{marginTop:"0"}}>
+ <form>
+ <DivAlterarFoto>
+ <DivFlowHolder>
+ <AvatarCircleDiv>
+ {
+ props.userAvatar == '' || props.userAvatar == null ?
+ (
+
+ <img src={Profile} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
+ ):
+ (
+ <img src={this.props.userAvatar} alt={'user avatar'} style={{height:"inherit", width:"inherit", objectFit:"cover"}}/>
+ )
+ }
+ <ChangeAvatarDiv>
+ <span>Alterar</span>
+ <input accept="image/*" id="icon-button-file"
+ type="file"
+ onChange={(e) => props.handleFile(e.target.files) }/>
+ </ChangeAvatarDiv>
+ </AvatarCircleDiv>
+ </DivFlowHolder>
+ </DivAlterarFoto>
+ <ButtonsDiv>
+ <ButtonCancelar><span>Cancelar</span></ButtonCancelar><ButtonConfirmar><span>Salvar Alterações</span></ButtonConfirmar>
+ </ButtonsDiv>
+ </form>
+ </div>
+ </DialogDiv>
+ </ModalDiv>
+ )
+
+}
+
+const ModalDiv = styled.div`
+ background-color : #fff;
+ border-radius : 4px;
+ min-width : 560px;
+ color : #666;
+ display: flex;
+ flex-direction : column;
+`
+
+const ButtonConfirmar = styled(Button)`
+ color : rgba(255,255,255,0.87);
+ background-color: rgb(0,188,212);
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: 0;
+ padding: 0 6px;
+ margin: 6px 8px;
+ background: transparent;
+ background-color: transparent;
+ color: currentColor;
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: none;
+ overflow: hidden;
+`
+
+const ButtonCancelar = styled(Button)`
+ outline : none;
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: 0;
+ padding: 0 6px;
+ margin: 6px 8px;
+ background:transparent;
+ color: currentColor;
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: none;
+ overflow: hidden;
+`
+
+const ButtonsDiv = styled.div`
+ display: flex;
+ justify-content:flex-end;
+`
+
+const AvatarCircleDiv = styled.div`
+ margin-bottom : 0;
+ border-radius : 50%;
+ height : 150px;
+ width : 150px;
+ position : relative;
+`
+
+const DivFlowHolder =styled.div`
+ align-self : auto;
+`
+
+const DivAlterarFoto = styled.div`
+ display : flex;
+ margin-bottom : 30px;
+ flex-direction : row;
+ align-items : center;
+ justify-content :center;
+`
+
+const DialogDiv = styled.div`
+ padding : 20px 30px;
+ overflow : visible !important;
+`
+
+const HeaderDiv = styled.div`
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ align-content : center;
+ justify-content : center;
+ max-width : 100%;
+`
+const StyledH2 = styled.h2`
+ font-size : 26px;
+ font-weight : lighter;
+ margin-top : 20px;
+ margin-bottom : 10px;
+ font-family: inherit;
+ line-height: 1.1;
+ color: inherit;
+`
+const StyledCloseModalButton = styled(Button)`
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ margin-right : -8px !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+ border-radius : 50%;
+ padding : 8px;
+ height : 40px;
+ margin : 0 6px;
+`
diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js
new file mode 100644
index 0000000000000000000000000000000000000000..ffeec90992457ab00d31c18dff77e14ba0d40b61
--- /dev/null
+++ b/src/Components/LoadingSpinner.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import LoadingGif from '../img/loading_busca.gif'
+
+ const LoadingSpinner = (props) => (
+ <div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
+ <img src={LoadingGif} />
+ <span style={{textTransform:"uppercase"}}>{props.text}</span>
+ </div>
+ );
+
+ export default LoadingSpinner;
diff --git a/src/Components/LoginContainer.js b/src/Components/LoginContainer.js
index 8546fc4c22d5be46445bbe09f7aeaad57395e905..ccdc075a1565fb8a139d21a0c8ffe1f951555fc1 100644
--- a/src/Components/LoginContainer.js
+++ b/src/Components/LoginContainer.js
@@ -36,8 +36,8 @@ class LoginContainer extends Component {
super(props);
this.state = {
- email : "",
- senha : "",
+ email : localStorage.getItem("@portalmec/email") || "",
+ senha : localStorage.getItem("@portalmec/senha") ||"",
checkboxChecked : false
};
this.handleChecked = this.handleChecked.bind(this)
@@ -55,8 +55,9 @@ class LoginContainer extends Component {
onSubmit = (e) => {
e.preventDefault();
+ const login = this.state
- this.props.handleLoginInfo(this.state);
+ this.props.handleLoginInfo(login);
this.setState({
email: "",
@@ -65,8 +66,11 @@ class LoginContainer extends Component {
}
handleChecked = (e) => {
+ const value = !this.state.checkboxChecked
+ console.log(this.state.checkboxChecked)
+ console.log(value)
this.setState({
- checkboxChecked : !this.state.checkboxChecked
+ checkboxChecked :value
})
}
@@ -124,12 +128,12 @@ class LoginContainer extends Component {
<br/>
<RememberRecover>
- <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} onchange={this.handleChecked} disabledCheckbox={this.state.checkboxChecked}/>
+ <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={this.handleChecked} />
<UserForgotTheirPasswordSpan>Esqueceu a senha? <a href="recuperar-senha" style={{textAlign: "right", color:"#4cd0e1"}}>Clique aqui!</a></UserForgotTheirPasswordSpan>
</RememberRecover>
<ConfirmContainerStyled>
- <StyledLoginButton onClick={e => this.onSubmit(e)} variant="contained">
+ <StyledLoginButton type="submit" variant="contained">
<span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
</StyledLoginButton>
</ConfirmContainerStyled>
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index d1a5451bed11beb2a0cd2d4ba67ccffaf6adedcd..c55da4507389e9b53083a5ab09ef594b92ce886f 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -122,7 +122,7 @@ export default function LoginContainer (props) {
}
return (
-
+ <div>
<ContainerStyled >
<DialogHeaderStyled>
<span style={{width:"32px"}}/>
@@ -190,7 +190,7 @@ export default function LoginContainer (props) {
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
-
+ </div>
)
}
@@ -202,7 +202,7 @@ export default function LoginContainer (props) {
display : flex;
flex-direction : column;
min-width : 440px;
-
+
align : center;
padding : 10px;
border-radius: 4px;
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 26607d36822a6865b39344305c898201d64ea482..052084e7e177ddee4f5fd4a5707fa6791d1658d5 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -79,14 +79,18 @@ export default function LoginModal (props){
}
)
// console.log(response.headers)
- // console.log(response.data)
+ console.log(login)
// console.log(response.data.data.name)
// console.log(response.data.data.uid)
localStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
localStorage.setItem('@portalmec/clientToken', response.headers.client,)
- localStorage.setItem('@portalmec/id', response.data.data.id)
- localStorage.setItem('@portalmec/username', response.data.data.name)
- localStorage.setItem('@portalmec/uid', response.data.data.uid)
+ sessionStorage.setItem('@portalmec/id', response.data.data.id)
+ sessionStorage.setItem('@portalmec/username', response.data.data.name)
+ sessionStorage.setItem('@portalmec/uid', response.data.data.uid)
+ if (login.checkboxChecked) {
+ localStorage.setItem('@portalmec/email', login.email)
+ localStorage.setItem('@portalmec/senha', login.senha) //MUDAR ISSO ASAP
+ }
props.handleClose();
props.openSnackbar();
}, (error) => {
diff --git a/src/Components/ModalAlterarAvatar.js b/src/Components/ModalAlterarAvatar.js
index f770ebf1dab4bae4f7a4da499b3546cab6d8821e..8bd1c57e9a0010946d3bf1f40e51bbdd9cfe3ccc 100644
--- a/src/Components/ModalAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar.js
@@ -20,24 +20,26 @@ import React, {useContext, useState} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
-import Zoom from '@material-ui/core/Fade';
+import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
import CloseIcon from '@material-ui/icons/Close';
+import Profile from '../img/default_profile0.png'
+import ComponentAlterarAvatar from './ComponentAlterarAvatar.js'
const StyledModal = styled(Modal)`
display : flex;
- flex-direction : column;
- border-radius : 4px;
- background-color : #fff;
- min-width : 560px;
+ align-items: center;
+ justify-content : center;
+ text-align : center;
+ padding : 10px !important;
`
export default function ModarAlterarAvatar (props){
const {state, dispatch} = useContext(Store)
-
+ const [avatarFile, setFile] = useState('')
const handleLoginInfo = (login) => {
axios.post(`${apiUrl}`,
{
@@ -47,13 +49,18 @@ export default function ModarAlterarAvatar (props){
}, (error) => {
- }
- )
+ }
+ )
+ })
}
+ const handleFile = (selectorFiles : FileList) => {
+ console.log(selectorFiles)
+ {/*setFile()*/}
+ }
return (
- <>
+
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
@@ -67,53 +74,15 @@ export default function ModarAlterarAvatar (props){
timeout: 500,
}}
>
- <Zoom in={props.open} style={{ transitionDelay :"0.4ms"}}>
- <HeaderDiv>
- <span style={{width:"32px"}}/>
- <StyledH2>Editar Foto</StyledH2>
- <StyledCloseModalButton onClick={this.props.handleClose}>
- <CloseIcon/>
- </StyledCloseModalButton>
- </HeaderDiv>
- <DialogDiv>
- </DialogDiv>
- </Zoom>
+ <Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
+
+ <ComponentAlterarAvatar
+ userAvatar={state.currentUser.userAvatar}
+ handleFile={handleFile}
+ handleClose={props.handleClose}
+ />
+ </Fade>
</StyledModal>
- </>
+
)
}
-
-const DialogDiv = styled.div`
- padding : 20px 30px;
- overflow : visible !important;
-`
-
-const HeaderDiv = styled.div`
- display : flex;
- flex-direction : row;
- align-items : center;
- align-content : center;
- max-width : 100%;
-`
-const StyledH2 = styled.h2`
- font-size : 26px;
- font-weight : lighter;
- margin-top : 20px;
- margin-bottom : 10px;
- font-family: inherit;
- line-height: 1.1;
- color: inherit;
-`
-const StyledCloseModalButton = styled(Button)`
- display : inline-block;
- position : relative;
- float : right !important;
- margin-right : -8px !important;
- background : transparent !important;
- min-width: 0 !important;
- width : 40px;
- border-radius : 50%;
- padding : 8px;
- height : 40px;
- margin : 0 6px;
-`
diff --git a/src/Components/SignUpContainer.js b/src/Components/SignUpContainer.js
index 21652735fc43c8bca9b2ea801fc046784a8172d6..9d01f58daf46303a7b3967d3eb8adc5d2e7e9ec0 100644
--- a/src/Components/SignUpContainer.js
+++ b/src/Components/SignUpContainer.js
@@ -176,7 +176,7 @@ class SignUpContainer extends Component {
onloadCallback={callback}
/>
<ConfirmContainerStyled>
- <StyledSignUpButton onClick={e => this.onSubmit(e)} variant="contained">
+ <StyledSignUpButton type="submit" variant="contained">
<span
style={{paddingLeft:"16px", paddingRight:"16px", borderRadius:"3px", boxSizing:"border-box",
fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index cf38fc14d35d28e21e53f1b8f9d87979cdeab866..49386ce7845097df7c023c79ccbefea2197d90ca 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -41,23 +41,7 @@ const StyledModalSignUp = styled(Modal)`
`
-const useStyles = makeStyles(theme => ({
- modal: {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- textAlign: "center",
- maxBlockSize: "350px",
- width: '100%',
- minBlockSize: "100px",
- },
- paper: {
- backgroundColor: "theme.palette.background.paper",
- border: '2px solid #000',
- boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);",
- align:"center",
- },
-}));
+
export default function SignUpModal (props) {
const { state, dispatch } = useContext(Store)
diff --git a/src/Components/TabPanelAtividades.js b/src/Components/TabPanelAtividades.js
index e26988af75cd77db1422a68b4f022b1c29ddef65..074c12ed9f74cc18cc119690ccc7fa47cf43a385 100644
--- a/src/Components/TabPanelAtividades.js
+++ b/src/Components/TabPanelAtividades.js
@@ -5,29 +5,22 @@ import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
import {apiUrl} from '../env';
+import Bolo from '../img/Bolo.png'
+import LoadingSpinner from './LoadingSpinner.js'
export default function TabPanelAtividades (props) {
const [notifications, setNotifications] = useState([]);
const [notificatonsLength, setLength] = useState(0);
-
- const config = {
- headers : {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json',
- 'Access-Token': localStorage.getItem('@portalmec/accessToken'),
- 'Client': localStorage.getItem('@portalmec/clientToken'),
- 'Uid': localStorage.getItem('@portalmec/uid'),
- 'Host': 'api.portalmec.c3sl.ufpr.br',
- 'Cookie': ''
- }
- }
+ const [loading, handleLoading] = useState(true)
useEffect( () => {
- axios.get(`${apiUrl}/feed`, config)
+ axios.get(`${apiUrl}/feed`, props.config)
.then( (response) => {
- // console.log(response)
- setNotifications(response)
- setLength(response.length)
+ handleLoading(false)
+ console.log(response)
+ setNotifications(response.data)
+ console.log(response.data.length)
+ setLength(response.data.length)
},
(error) => {
console.log('error while running getNotifications')
@@ -36,6 +29,7 @@ export default function TabPanelAtividades (props) {
}, [])
return (
+
<ContainerDivStyled>
<Paper elevation={3}>
<div>
@@ -46,17 +40,74 @@ export default function TabPanelAtividades (props) {
</TituloContent>
</InnerDivTitulo>
</DivTitulo>
- {/*some sort of map with a list of notifications idk what though*/}
- <div>
- <LoadMoreButton><span>CARREGAR MAIS 4</span></LoadMoreButton>
- <LoadMoreButton><span>CARREGAR MAIS 20</span></LoadMoreButton>
- </div>
+ {
+ 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/>
+ com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
+ </p>
+
+ </div>
+ </NoNotificationsDiv>
+ ]
+ )
+ :
+ (
+ [ <>
+ {/*some sort of map with a list of notifications idk what though*/}
+ <LoadMoreButton><span>CARREGAR MAIS 4</span></LoadMoreButton>
+ <LoadMoreButton><span>CARREGAR MAIS 20</span></LoadMoreButton>
+ </>
+ ]
+ )
+ }
+ </div>
+
+ ]
+ )
+ }
</div>
</Paper>
</ContainerDivStyled>
)
}
+const H3Styled = styled.h3`
+ font-size: 24px;
+ font-weight : lighter;
+ color : #00bcd4;
+ margin-top : 20px;
+ margin-bottom : 10px;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+`
+
+const NoNotificationsDiv = styled.div`
+ height : 250px;
+ display: flex;
+ align-items : center;
+ justify-content : center;
+`
+
const LoadMoreButton = styled(Button)`
outline : none !important;
display : inline-block !important;
diff --git a/src/Components/TabPanelColecoes.js b/src/Components/TabPanelColecoes.js
index 85d97654fcc3dc7598aa5c027844f2c5c60809b0..b865f48bff1ff7b11114671c1065edfb65400782 100644
--- a/src/Components/TabPanelColecoes.js
+++ b/src/Components/TabPanelColecoes.js
@@ -1,44 +1,123 @@
-import React, {useContext} from 'react'
+import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
+import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
+import LoadingSpinner from './LoadingSpinner.js'
+import axios from 'axios'
+import {apiUrl} from '../env';
export default function TabPanelColecoes (props) {
+ const [loading, handleLoading] = useState(true)
+
+ const [userCollections, setuserCollections] = useState([])
+ const [userCollectionsLength, setuserCollectionsLength] = useState(0)
+
+ const [followedCollections, setFollowedCollections] = useState([])
+ const [followedCollectionsLength, setfollowedCollectionsLength] = useState(0)
+
+ useEffect( () => {
+ axios.all([
+ axios.get((`${apiUrl}/users/` + props.id + '/collections'), props.config),
+ axios.get((`${apiUrl}/users/` + props.id + '/following/Collection'), props.config),
+ ])
+ .then( (responseArr) => {
+ handleLoading(false)
+ console.log(responseArr)
+ console.log(responseArr[0].data)
+ console.log(responseArr[1].data)
+ },
+ (error) => {
+ handleLoading(false)
+ console.log('error while running axios all')
+ }
+ )
+ }, [])
+
return (
- <React.Fragment>
- <ContainerDivStyled>
- <Paper elevation={3}>
- <DivTitulo>
- <StyledP>Minhas Coleções <b style={{fontWeight:"700", fontSize:"20px"}}>(2)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div style={{height : "400px"}}> //REMOVER ISSO
- <DivContainerRecursosPublicados>
- </DivContainerRecursosPublicados>
- <BtnAlinhaRecPvt>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 2 de 2</p>
- </BtnAlinhaRecPvt>
- </div>
- </Paper>
- </ContainerDivStyled>
-
- <ContainerDivStyled>
- <Paper elevation={3}>
- <DivTitulo>
- <StyledP>Coleções que eu sigo <b style={{fontWeight:"700", fontSize:"20px"}}>(4)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div style={{height : "400px"}}> //REMOVER ISSO
- <DivContainerRecursosPublicados>
- </DivContainerRecursosPublicados>
- <BtnAlinhaRecPvt>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 4</p>
- </BtnAlinhaRecPvt>
- </div>
- </Paper>
- </ContainerDivStyled>
- </React.Fragment>
+ <>
+ {
+ loading ?
+ (
+ <LoadingSpinner text={'CARREGANDO COLEÇÕES'}/>
+
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <DivTitulo>
+ <StyledP>Minhas Coleções <b style={{fontWeight:"700", fontSize:"20px"}}>({userCollectionsLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div style={{height : "400px"}}>
+ {
+ userCollectionsLength == 0 ?
+ (
+ [
+ <span>Adicionar tela "criar colecao" e a imagem</span>
+ ]
+ )
+ :
+ (
+ <>
+ <DivContainerRecursosPublicados>
+ </DivContainerRecursosPublicados>
+ <BtnAlinhaRecPvt>
+ <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 2 de 2</p>
+ </BtnAlinhaRecPvt>
+ </>
+ )
+ }
+
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <DivTitulo>
+ <StyledP>Coleções que eu sigo <b style={{fontWeight:"700", fontSize:"20px"}}>({followedCollectionsLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div style={{height : "400px"}}>
+ {
+ followedCollectionsLength == 0 ?
+ (
+ [
+ <>
+ <DivTextoNoPublications>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você ainda não segue nenhuma coleção.</NoPubSpan>
+ </DivConteudoNaoPublicado>
+ </DivTextoNoPublications>
+ </>
+ ]
+ )
+ :
+ (
+ [
+ <>
+ <DivContainerRecursosPublicados>
+ </DivContainerRecursosPublicados>
+ <BtnAlinhaRecPvt>
+ <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 4</p>
+ </BtnAlinhaRecPvt>
+ </>
+ ]
+ )
+ }
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ </React.Fragment>
+ ]
+ )
+ }
+ </>
)
}
diff --git a/src/Components/TabPanelFavoritos.js b/src/Components/TabPanelFavoritos.js
index 1615309d227f4fdc93533fe0d24c43cdcadc72c8..71c3e50ae0987e02446fd70d8d595abc593ba168 100644
--- a/src/Components/TabPanelFavoritos.js
+++ b/src/Components/TabPanelFavoritos.js
@@ -1,57 +1,148 @@
-import React, {useContext} from 'react'
+import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
+import axios from 'axios'
+import {apiUrl} from '../env';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
+import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
+import LoadingSpinner from './LoadingSpinner.js'
export default function TabPanelFavoritos (props) {
+ const [loading, handleLoading] = useState(true)
+
+ const [likedLearnObjs, setlikedLearnObjs] = useState([])
+ const [likedLearnObjsLength, setlikedLearnObjsLength] = useState(0)
+
+ const [likedCollections, setlikedCollections] = useState([])
+ const [likedCollectionsLength, setlikedCollectionsLength] = useState(0)
+
+ useEffect( () => {
+ axios.all([
+ axios.get((`${apiUrl}/users/` + props.id + '/learning_objects/liked'), props.config),
+ axios.get((`${apiUrl}/users/` + props.id + '/collections/liked'), props.config),
+ ])
+ .then( (responseArr) => {
+ handleLoading(false)
+ console.log(responseArr)
+ console.log(responseArr[0].data)
+ console.log(responseArr[1].data)
+ },
+ (error) => {
+ handleLoading(false)
+ console.log('error while running axios all')
+ }
+ )
+ }, [])
+
return (
- <React.Fragment>
- <ContainerDivStyled>
- <Paper elevation={3}>
- <DivTitulo>
- <StyledP>Recursos Favoritados <b style={{fontWeight:"700", fontSize:"20px"}}>(43)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div style={{height : "400px"}}> //REMOVER ISSO
- <DivContainerRecursosPublicados>
- </DivContainerRecursosPublicados>
- <BtnAlinhaRecPvt>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
- <ButtonMostrarMais>
- <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
- </ButtonMostrarMais>
- <ButtonMostrarTodos>
- <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
- </ButtonMostrarTodos>
- </BtnAlinhaRecPvt>
- </div>
- </Paper>
- </ContainerDivStyled>
+ <>
+ {
+ loading?
+ (
+ <LoadingSpinner text={'CARREGANDO...'}/>
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <DivTitulo>
+ <StyledP>Recursos Favoritados <b style={{fontWeight:"700", fontSize:"20px"}}>({likedLearnObjsLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div style={{height : "400px"}}>
+ {
+ likedLearnObjsLength == 0 ?
+ (
+ [
+ <>
+ <DivTextoNoPublications>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você ainda não curtiu nenhum Recurso.</NoPubSpan>
+ <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/>
+ coração que aparece nos Recursos.
+ </p>
+ </DivConteudoNaoPublicado>
+ </DivTextoNoPublications>
+ </>
+ ]
+ )
+ :
+ (
+ [
+ <>
+ <DivContainerRecursosPublicados>
+ </DivContainerRecursosPublicados>
+ <BtnAlinhaRecPvt>
+ <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
+ <ButtonMostrarMais>
+ <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
+ </ButtonMostrarMais>
+ <ButtonMostrarTodos>
+ <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
+ </ButtonMostrarTodos>
+ </BtnAlinhaRecPvt>
+ </>
+ ]
+ )
+ }
+ </div>
+ </Paper>
+ </ContainerDivStyled>
- <ContainerDivStyled>
- <Paper elevation={3}>
- <DivTitulo>
- <StyledP>Recursos Favoritados <b style={{fontWeight:"700", fontSize:"20px"}}>(43)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div style={{height : "400px"}}> //REMOVER ISSO
- <DivContainerRecursosPublicados>
- </DivContainerRecursosPublicados>
- <BtnAlinhaRecPvt>
- <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
- <ButtonMostrarMaisColecao>
- <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
- </ButtonMostrarMaisColecao>
- <ButtonMostrarTodos>
- <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
- </ButtonMostrarTodos>
- </BtnAlinhaRecPvt>
- </div>
- </Paper>
- </ContainerDivStyled>
- </React.Fragment>
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <DivTitulo>
+ <StyledP>Coleções Favoritadas <b style={{fontWeight:"700", fontSize:"20px"}}>({likedCollectionsLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div style={{height : "400px"}}>
+ {
+ likedCollectionsLength == 0 ?
+ (
+ [
+ <>
+ <DivTextoNoPublications>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você ainda não curtiu nenhuma coleção.</NoPubSpan>
+ </DivConteudoNaoPublicado>
+ </DivTextoNoPublications>
+ </>
+ ]
+ )
+ :
+ (
+ [
+ <>
+ <DivContainerRecursosPublicados>
+ </DivContainerRecursosPublicados>
+ <BtnAlinhaRecPvt>
+ <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
+ <ButtonMostrarMaisColecao>
+ <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
+ </ButtonMostrarMaisColecao>
+ <ButtonMostrarTodos>
+ <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
+ </ButtonMostrarTodos>
+ </BtnAlinhaRecPvt>
+ </>
+ ]
+ )
+ }
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ </React.Fragment>
+ ]
+ )
+ }
+ </>
)
}
diff --git a/src/Components/TabPanelMeusRecursos.js b/src/Components/TabPanelMeusRecursos.js
index d43f96436ed98d8cb50b9122f2f99cc6be3de4eb..1f2b432b49f754cfa3055bde367635da22796bb0 100644
--- a/src/Components/TabPanelMeusRecursos.js
+++ b/src/Components/TabPanelMeusRecursos.js
@@ -5,66 +5,160 @@ import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
import {apiUrl} from '../env';
+import LoadingSpinner from './LoadingSpinner.js'
export default function TabPanelAtividades (props) {
+ const [loading, handleLoading] = useState(true)
+
+ const [learningObjects, setLearningObjects] = useState([]);
+ const [learningObjectsLength, setLengthLearnObj] = useState(0);
+
+ const [drafts, setDrafts] = useState([]);
+ const [draftsLength, setLengthDrafts] = useState(0);
+
+ const [curating, setCurating] = useState([]);
+ const [curatingLength, setLengthCurating] = useState(0);
+
+ useEffect( () => {
+ axios.all([
+ axios.get((`${apiUrl}/users/` + props.id + '/learning_objects'), props.config),
+ axios.get((`${apiUrl}/users/` + props.id + '/drafts'), props.config),
+ axios.get((`${apiUrl}/users/` + props.id + '/submissions?stats=submitted'), props.config)
+ ])
+ .then( (responseArr) => {
+ handleLoading(false)
+ console.log(responseArr)
+ console.log(responseArr[0].data)
+ console.log(responseArr[1].data)
+ console.log(responseArr[2].data)
+
+ },
+ (error) => {
+ handleLoading(false)
+ console.log('error while running axios all')
+ }
+ )
+ }, [])
+
+
return (
- <React.Fragment>
- <ContainerDivStyled>
- <Paper elevation={3}>
-
- <DivTitulo>
- <StyledP>Recurso Publicado <b style={{fontWeight:"700", fontSize:"20px"}}>(0)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div>
- <DivTextoNoPublications>
+ <>
+ {
+ loading ?
+ (
+ <LoadingSpinner text={'Carregando Recursos'}/>
+ )
+ :
+ ([
+ <React.Fragment>
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+
+ <DivTitulo>
+ <StyledP>Recurso Publicado <b style={{fontWeight:"700", fontSize:"20px"}}>({learningObjectsLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div>
+ {
+ learningObjectsLength == 0 ?
+ (
+ [
+ <>
+ <DivTextoNoPublications>
<DivConteudoNaoPublicado>
- <NoPubSpan>Você ainda não publicou nenhum Recurso!</NoPubSpan>
+ <NoPubSpan>Você ainda não publicou nenhum Recurso!</NoPubSpan>
</DivConteudoNaoPublicado>
- </DivTextoNoPublications>
- </div>
- </Paper>
- </ContainerDivStyled>
-
- <ContainerDivStyled>
- <Paper elevation={3}>
- <DivTitulo>
- <StyledP>Rascunhos<b style={{fontWeight:"700", fontSize:"20px"}}>(7)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div style={{height : "400px"}}> //REMOVER ISSO
- <DivContainerRecursosPublicados>
- </DivContainerRecursosPublicados>
- <BtnAlinhaRecPvt>
+ </DivTextoNoPublications>
+ </>
+ ]
+ )
+ :
+ (
+ <>
+ {/**some sort of map with a list of notifications idk what though**/}
+ <span>stuff goes here</span>
+ </>
+ )
+
+ }
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+ <DivTitulo>
+ <StyledP>Rascunhos <b style={{fontWeight:"700", fontSize:"20px"}}>({draftsLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div style={{height : "400px"}}>
+ {
+ draftsLength == 0 ?
+ (
+ [
+ <>
+ <DivTextoNoPublications>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você não tem nenhum recurso sendo editado.</NoPubSpan>
+ </DivConteudoNaoPublicado>
+ </DivTextoNoPublications>
+ </>
+ ]
+ )
+ : (
+ [
+ <>
+ <DivContainerRecursosPublicados>
+ </DivContainerRecursosPublicados>
+ <BtnAlinhaRecPvt>
<p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
<ButtonMostrarMais>
- <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
+ <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
</ButtonMostrarMais>
<ButtonMostrarTodos>
- <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
+ <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
</ButtonMostrarTodos>
- </BtnAlinhaRecPvt>
- </div>
- </Paper>
- </ContainerDivStyled>
-
- <ContainerDivStyled>
- <Paper elevation={3}>
-
- <DivTitulo>
- <StyledP>Recurso sendo avaliado pela curadoria <b style={{fontWeight:"700", fontSize:"20px"}}>(0)</b></StyledP>
- <StyledHR/>
- </DivTitulo>
- <div>
+ </BtnAlinhaRecPvt>
+ </>
+ ]
+ )
+ }
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+
+ <ContainerDivStyled>
+ <Paper elevation={3}>
+
+ <DivTitulo>
+ <StyledP>Recurso sendo avaliado pela curadoria <b style={{fontWeight:"700", fontSize:"20px"}}>({curatingLength})</b></StyledP>
+ <StyledHR/>
+ </DivTitulo>
+ <div>
+ {
+ curatingLength == 0 ?
+ (
<DivTextoNoPublications>
- <DivConteudoNaoPublicado>
- <NoPubSpan>Você não tem nenhum recurso sendo avaliado pelos curadores.</NoPubSpan>
- </DivConteudoNaoPublicado>
+ <DivConteudoNaoPublicado>
+ <NoPubSpan>Você não tem nenhum recurso sendo avaliado pelos curadores.</NoPubSpan>
+ </DivConteudoNaoPublicado>
</DivTextoNoPublications>
- </div>
- </Paper>
- </ContainerDivStyled>
- </React.Fragment>
+ )
+ :
+ (
+ <>
+ {/**some sort of map with a list of notifications idk what though**/}
+ <span>stuff goes here</span>
+ </>
+ )
+ }
+ </div>
+ </Paper>
+ </ContainerDivStyled>
+ </React.Fragment>
+ ])
+ }
+ </>
)
}
@@ -118,19 +212,19 @@ export const DivContainerRecursosPublicados = styled.div`
padding-left : 15px;
`
-const NoPubSpan = styled.span`
+export const NoPubSpan = styled.span`
font-size : 24px;
font-family : Roboto;
font-weight : lighter;
`
-const DivConteudoNaoPublicado = styled.div`
+export const DivConteudoNaoPublicado = styled.div`
position : relative;
top : 50%;
transform : translateY(-50%);
`
-const DivTextoNoPublications = styled.div`
+export const DivTextoNoPublications = styled.div`
height : 360px;
text-align : center;
width : 100%;
diff --git a/src/Components/TabPanelRede.js b/src/Components/TabPanelRede.js
index cebbf1973bf36745ed01103de3c7febe707b6dfe..e3f3aa61aa8141b339621cc3bd9de01fd894621c 100644
--- a/src/Components/TabPanelRede.js
+++ b/src/Components/TabPanelRede.js
@@ -1,11 +1,15 @@
-import React, {useContext} from 'react'
+import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
+import axios from 'axios'
+import {apiUrl} from '../env';
export default function TabPanelRede (props) {
+
+
return (
<React.Fragment>
<ContainerDivStyled>
@@ -14,7 +18,7 @@ export default function TabPanelRede (props) {
<StyledP>Seguidor <b style={{fontWeight:"700", fontSize:"20px"}}>(1)</b></StyledP>
<StyledHR/>
</DivTitulo>
- <div style={{height : "400px"}}> //REMOVER ISSO
+ <div style={{height : "400px"}}>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
<BtnAlinhaRecPvt>
@@ -30,7 +34,7 @@ export default function TabPanelRede (props) {
<StyledP>Seguindo <b style={{fontWeight:"700", fontSize:"20px"}}>(1)</b></StyledP>
<StyledHR/>
</DivTitulo>
- <div style={{height : "400px"}}> //REMOVER ISSO
+ <div style={{height : "400px"}}>
<DivContainerRecursosPublicados>
</DivContainerRecursosPublicados>
<BtnAlinhaRecPvt>
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index d8fef8662cae08a6b8f544fd76f42024ca5a175f..e39dbe78513fcffff61ae14e4a54e018561cd649 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -39,6 +39,7 @@ import TabPanelColecoes from '../Components/TabPanelColecoes.js'
import TabPanelRede from '../Components/TabPanelRede.js'
import axios from 'axios'
import {apiUrl} from '../env';
+import ModarAlterarAvatar from '../Components/ModalAlterarAvatar.js'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
@@ -46,6 +47,23 @@ export default function UserPage (props){
const [value, setValue] = useState(0);
const user = localStorage.getItem('@portalmec/username')
const id = localStorage.getItem('@portalmec/id')
+ const [modalOpen, handleModal] = useState(false)
+
+ const config = {
+ headers : {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'Access-Token': localStorage.getItem('@portalmec/accessToken'),
+ 'Client': localStorage.getItem('@portalmec/clientToken'),
+ 'Uid': sessionStorage.getItem('@portalmec/uid'),
+ 'Host': 'api.portalmec.c3sl.ufpr.br',
+ 'Cookie': ''
+ }
+ }
+
+ const modalControl = () => {
+ handleModal(!modalOpen)
+ }
const handleHoverAlterarFoto = () => {
handleAlterarFoto(!hoverAlterarFoto)
@@ -97,6 +115,10 @@ export default function UserPage (props){
(
[
<React.Fragment>
+ <ModarAlterarAvatar
+ open={modalOpen}
+ handleClose={modalControl}
+ />
<HeaderDiv>
<ContainerNoPad>
<BreadcrumbsDiv>
@@ -129,7 +151,7 @@ export default function UserPage (props){
</Tooltip>
</label>
</CoverContainer>
- <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
+ <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto} onClick={modalControl}>
<img src={state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
@@ -198,11 +220,11 @@ export default function UserPage (props){
</Paper>
</MainContainerDesktop>
</div>
- {value === 0 && <TabPanelAtividades/>}
- {value === 1 && <TabPanelMeusRecursos/>}
- {value === 2 && <TabPanelFavoritos/>}
- {value === 3 && <TabPanelColecoes/>}
- {value === 4 && <TabPanelRede/>}
+ {value === 0 && <TabPanelAtividades id={id} config={config}/>}
+ {value === 1 && <TabPanelMeusRecursos id={id} config={config}/>}
+ {value === 2 && <TabPanelFavoritos id={id} config={config}/>}
+ {value === 3 && <TabPanelColecoes id={id} config={config}/>}
+ {value === 4 && <TabPanelRede id={id} config={config}/>}
</ContainerNoPad>
</HeaderDiv>
</React.Fragment>
@@ -279,7 +301,7 @@ export default function UserPage (props){
outline : 0;
cursor : pointer;
`
- const ChangeAvatarDiv = styled.div`
+ export const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
width : 100%;
diff --git a/src/img/Bolo.png b/src/img/Bolo.png
new file mode 100644
index 0000000000000000000000000000000000000000..509d2acae8705430a4707bb88fc07bd04ae33999
Binary files /dev/null and b/src/img/Bolo.png differ
diff --git a/src/img/loading_busca.gif b/src/img/loading_busca.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3ce6d59693025fbd428c063f7f565a858c20d4db
Binary files /dev/null and b/src/img/loading_busca.gif differ