From b8a133875bbe903286e4dcb501fc64c1debb3808 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Thu, 15 Apr 2021 12:47:28 -0300
Subject: [PATCH] Fix reported bugs
---
src/Components/ActivityListItem.js | 95 +++---
src/Components/ButtonGuardarColecao.js | 2 +-
src/Components/Dropdown.js | 8 +-
src/Components/GuardarModal.js | 251 ++++++++------
src/Components/MenuBar.js | 2 +-
.../ModalLearningObjectPublished.js | 4 +-
src/Components/Notifications.js | 4 +-
src/Components/ResourceCardFunction.js | 2 +-
.../UserPageTabs/PanelEditarPerfil.js | 192 ++++++-----
.../UserPageTabs/PanelGerenciarConta.js | 4 +-
.../PanelSolicitarContaProfessor.js | 2 +-
.../UploadPageComponents/ButtonsDiv.js | 80 ++---
.../UploadPageComponents/PartThree.js | 312 +++++++++---------
.../UploadPageComponents/PartTwo.js | 6 +-
.../UploadPageComponents/StyledComponents.js | 4 +-
src/Pages/EditLearningObjectPage.js | 1 +
src/Pages/EditProfilePage.js | 140 +++++---
17 files changed, 608 insertions(+), 501 deletions(-)
diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index e6d9d2b7..0d249401 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -16,14 +16,14 @@ 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, {useEffect} from 'react'
+import React, { useEffect } from 'react'
import styled from 'styled-components'
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import noAvatar from "../img/default_profile.png";
-import {GetActivityProperties, Tag, ObjectColor} from './Activities/Definitions.js'
+import { GetActivityProperties, Tag, ObjectColor } from './Activities/Definitions.js'
//icons
import FavoriteIcon from '@material-ui/icons/Favorite';
import CreateIcon from '@material-ui/icons/Create';
@@ -34,32 +34,32 @@ import ReportIcon from '@material-ui/icons/Report';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import ThumbDownIcon from '@material-ui/icons/ThumbDown';
import DeleteIcon from '@material-ui/icons/Delete';
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
const GetObjectColor = (tag) => {
return ObjectColor[tag]
}
const getNotificationIcon = (iconType) => {
- switch(iconType) {
+ switch (iconType) {
case 'create':
- return <CreateIcon className="icon"/>;
+ return <CreateIcon className="icon" />;
case 'favorite':
- return <FavoriteIcon className="icon"/>;
+ return <FavoriteIcon className="icon" />;
case 'get_app':
- return <GetAppIcon className="icon"/>;
+ return <GetAppIcon className="icon" />;
case 'star':
- return <StarIcon className="icon"/>;
+ return <StarIcon className="icon" />;
case 'report':
- return <ReportIcon className="icon"/>;
+ return <ReportIcon className="icon" />;
case 'cloud_upload':
- return <CloudUploadIcon className="icon"/>;
+ return <CloudUploadIcon className="icon" />;
case 'delete':
- return <DeleteIcon className="icon"/>;
+ return <DeleteIcon className="icon" />;
case 'thumb_down':
- return <ThumbDownIcon className="icon"/>;
- default :
- return <SpeakerNotesIcon className="icon"/>;
+ return <ThumbDownIcon className="icon" />;
+ default:
+ return <SpeakerNotesIcon className="icon" />;
}
}
@@ -73,45 +73,46 @@ const getTimeDifference = (timestamp) => {
let duration = moment.duration(now.diff(then))
// {/*console.log('duration: ', duration)*/}
let timeDiff;
- if (duration._data.years > 0) {
+ if (duration._data.years > 0) {
timeDiff = duration._data.years + (duration._data.years > 1 ? ' anos' : ' ano')
}
else if (duration._data.months > 0) {
- timeDiff = duration._data.months + (duration._data.months > 1? ' meses' : ' mês')
+ timeDiff = duration._data.months + (duration._data.months > 1 ? ' meses' : ' mês')
}
- else if(duration._data.days > 0) {
+ else if (duration._data.days > 0) {
timeDiff = duration._data.days + (duration._data.days > 1 ? ' dias' : ' dia')
}
- else if(duration._data.hours > 0) {
+ else if (duration._data.hours > 0) {
timeDiff = duration._data.hours + (duration._data.hours > 1 ? ' horas' : ' hora')
}
- else if(duration._data.minutes > 0) {
+ else if (duration._data.minutes > 0) {
timeDiff = duration._data.minutes + (duration._data.minutes > 1 ? ' minutos' : ' minuto')
}
return timeDiff;
}
-export default function ActivityListItem (props) {
+export default function ActivityListItem(props) {
const [activity, setActivity] = React.useState({
- tag : '',
- icon : '',
- text : '',
- text2 : '',
+ tag: '',
+ icon: '',
+ text: '',
+ text2: '',
})
- useEffect( () => {
+ useEffect(() => {
const newTag = Tag[(props.actionType === 'CuratorAssignment' ? props.actionType : props.objectType)]
- const {icon, text, text2 } = GetActivityProperties(props.activity)
+ const { icon, text, text2 } = GetActivityProperties(props.activity)
// {/*console.log('icon, text, text2: ', icon, text, text2)*/}
- setActivity({...activity,
- tag : newTag,
- icon : icon,
- text : text,
- text2 : text2
+ setActivity({
+ ...activity,
+ tag: newTag,
+ icon: icon,
+ text: text,
+ text2: text2
})
- }, [] )
+ }, [])
return (
<StyledListItem onMenuBar={props.onMenuBar}>
@@ -119,30 +120,34 @@ export default function ActivityListItem (props) {
!props.onMenuBar &&
<>
- <ListItemAvatar>
- <Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar}/>
- </ListItemAvatar>
- {getNotificationIcon(activity.icon)}
+ <ListItemAvatar>
+ <Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar} />
+ </ListItemAvatar>
+ {getNotificationIcon(activity.icon)}
</>
}
<ListItemText
- primary = {
- <div>
- <span className = {`tag-object ${GetObjectColor(activity.tag)}`}>
+ primary={
+ <div>
+ <span className={`tag-object ${GetObjectColor(activity.tag)}`}>
{activity.tag}
</span>
- <span className="time-ago-span"> · há {getTimeDifference(props.createdAt)}</span>
- </div>
- }
- secondary = {
+ <span className="time-ago-span"> · há {getTimeDifference(props.createdAt)}</span>
+ </div>
+ }
+ secondary={
<div>
+
<span>
- <Link to={props.ownerHref} className="owner-name-a" >{props.ownerName}</Link> {activity.text} <Link to={props.recipientHref} className="recipient-name-a">{props.recipientName}</Link> {activity.text2}
+ <Link to={{
+ pathname: props.ownerHref,
+ state: '0',
+ }} className="owner-name-a" >{props.ownerName}</Link> {activity.text} <Link to={props.recipientHref} className="recipient-name-a">{props.recipientName}</Link> {activity.text2}
</span>
</div>
}
- />
+ />
</StyledListItem>
)
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 4d8865f7..564c0718 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -58,7 +58,7 @@ export default function ButtonGuardarColecao(props) {
</Snackbar>
<GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
- />
+ />
<StyledButton onClick={handleGuardar}>
<CreateNewFolderIcon /> GUARDAR
</StyledButton>
diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js
index a1a45fb6..cc064489 100644
--- a/src/Components/Dropdown.js
+++ b/src/Components/Dropdown.js
@@ -52,6 +52,10 @@ export default function PositionedPopper(props) {
setPlacement(newPlacement);
};
+ const handleItemClicked = () => {
+ setOpen(false)
+ }
+
useEffect(() => {
const handleClickOutside = (event) => {
innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
@@ -72,7 +76,7 @@ export default function PositionedPopper(props) {
<MenuList>
{
props.items.map((item) =>
- <Link style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
+ <Link onClick={handleItemClicked} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
)
}
</MenuList>
@@ -81,7 +85,7 @@ export default function PositionedPopper(props) {
)}
</Popper>
<Button
- style={{ textTransform: "none", fontSize: "14px"}}
+ style={{ textTransform: "none", fontSize: "14px" }}
aria-controls="menu-list-grow"
aria-haspopup="true"
onClick={handleClick('bottom')}
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index 3a231ac2..2526d20c 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -16,167 +16,200 @@ 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, useState} from 'react';
+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 Fade from '@material-ui/core/Fade';
-import styled from 'styled-components'
-import {Store} from '../Store.js'
-import {apiDomain} from '../env';
+import styled from 'styled-components'
+import { Store } from '../Store.js'
+import { apiDomain } from '../env';
import CloseIcon from '@material-ui/icons/Close';
import PublicIcon from '@material-ui/icons/Public';
import LockIcon from '@material-ui/icons/Lock';
import LoadingSpinner from './LoadingSpinner.js'
import CriarColecaoForm from './CriarColecaoForm.js'
import SnackbarComponent from './SnackbarComponent'
-import {getRequest, postRequest} from './HelperFunctions/getAxiosConfig'
+import { getRequest, postRequest } from './HelperFunctions/getAxiosConfig'
-function CloseModalButton (props) {
+function CloseModalButton(props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon />
</StyledCloseModalButton>
)
}
-export default function ReportModal (props) {
- const {state} = useContext(Store)
+export default function ReportModal(props) {
+ const { state } = useContext(Store)
const [collsArr, setcolls] = useState([])
const [loading, toggleLoading] = useState(true)
const [creatingCol, setCreating] = useState(false)
+ const [snackbarOpen, setSnackOpen] = useState({
+ open: false,
+ severity: "",
+ text: "",
+ color: ""
+ })
- function handleSuccessGetCols (data) {
+ function handleSuccessGetCols(data) {
setcolls(data)
toggleLoading(false)
}
+
+ function handleError(error) {
+ toggleLoading(false)
+ setSnackOpen({
+ open: true,
+ severity: "error",
+ text: "Error ao guardar o recurso",
+ color: "red",
+ })
+ }
+
const getCols = () => {
if (collsArr.length === 0) {
const id = state.currentUser.id
const url = `/users/${id}/collections/`
- getRequest(url, handleSuccessGetCols, (error) => {console.log('error')})
+ getRequest(url, handleSuccessGetCols, handleError)
}
}
- function handleSuccessPostToCol (data) {
- toggleSnackbar(true)
+ function handleSuccessPostToCol(data) {
+ setSnackOpen({
+ open: true,
+ severity: "info",
+ text: "O Recurso foi guardado na coleção!",
+ color: ""
+ })
setCreating(false)
props.handleClose()
}
+
const postToCol = (colId) => {
const url = `/collections/${colId}/items`
const payload = {
- "collection" : {
- "items" : [ {"id":props.recursoId, "type":"LearningObject"} ]
+ "collection": {
+ "items": [{ "id": props.recursoId, "type": "LearningObject" }]
}
}
- postRequest( url, payload, handleSuccessPostToCol, (error) => {console.log(error)})
+ postRequest(url, payload, handleSuccessPostToCol, handleError)
}
- const [snackbarOpen, toggleSnackbar] = useState(false)
-
return (
- <React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"O Recurso foi guardado na coleção!"}
+ <React.Fragment>
+ <SnackbarComponent
+ snackbarOpen={snackbarOpen.open}
+ severity={snackbarOpen.severity}
+ handleClose={() => {
+ setSnackOpen({
+ open: false,
+ severity: "",
+ text: "",
+ color: ""
+ })
+ }}
+ text={snackbarOpen.text}
+ color={snackbarOpen.color}
/>
- <StyledModal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- open={props.open}
-
- centered="true"
- onClose={props.handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- onRendered={() => {getCols()}}
- >
- <Fade in={props.open}>
- <Container>
- <Header>
- <span style={{width:"32px"}}/>
- <h2>Guardar recurso</h2>
- <CloseModalButton handleClose={props.handleClose}/>
- </Header>
- <Content style={{paddingTop : "0"}}>
- <ResourceInfo>
- <img src={apiDomain + props.thumb} alt="thumbnail recurso"/>
- <div className="text">
- <h3>{props.title}</h3>
- </div>
- </ResourceInfo>
- {
- loading ?
- (
- <LoadingSpinner text="Carregando coleções"/>
- )
- :
- (
- <ChooseColContainer>
- {
- creatingCol ?
- (
- <CriarColecaoForm
- handleClose={() => setCreating(false)}
- finalize = {postToCol}
- />
- )
- :
- (
- state.currentUser.collections_count === 0 ?
- (
- <>
- <div classname="no-cols">
- <h2>Você não possui coleções ainda.</h2>
- </div>
- </>
- )
- :
- (
- <>
- <ChooseCol>
- <h2>Escolha uma Coleção: </h2>
- <div className="cols-list">
- {
- collsArr.map(collection =>
- <div className="row" key={collection.id}>
- <div style={{display : "flex", flexDirection : "row", justifyContent : "space-between", alignItems : "center"}}>
+ <StyledModal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
+
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ onRendered={() => { getCols() }}
+ >
+ <Fade in={props.open}>
+ <Container>
+ <Header>
+ <span style={{ width: "32px" }} />
+ <h2>Guardar recurso</h2>
+ <CloseModalButton handleClose={props.handleClose} />
+ </Header>
+ <Content style={{ paddingTop: "0" }}>
+ <ResourceInfo>
+ <img src={apiDomain + props.thumb} alt="thumbnail recurso" />
+ <div className="text">
+ <h3>{props.title}</h3>
+ </div>
+ </ResourceInfo>
+ {
+ loading ?
+ (
+ <LoadingSpinner text="Carregando coleções" />
+ )
+ :
+ (
+ <ChooseColContainer>
+ {
+ creatingCol ?
+ (
+ <CriarColecaoForm
+ handleClose={() => setCreating(false)}
+ finalize={postToCol}
+ />
+ )
+ :
+ (
+ collsArr.length === 0 ?
+ (
+ <>
+ <div classname="no-cols">
+ <h2>Você não possui coleções ainda.</h2>
+ </div>
+ </>
+ )
+ :
+ (
+ <>
+ <ChooseCol>
+ <h2>Escolha uma Coleção: </h2>
+ <div className="cols-list">
{
- collection.privacy === "public" ?
- <PublicIcon className="icon"/>
- : <LockIcon className="icon"/>
+ collsArr.map(collection =>
+ <div className="row" key={collection.id}>
+ <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
+ {
+ collection.privacy === "public" ?
+ <PublicIcon className="icon" />
+ : <LockIcon className="icon" />
+ }
+ <h5>{collection.name}</h5>
+ </div>
+ <GuardarBotao onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
+ </div>
+ )
}
- <h5>{collection.name}</h5>
</div>
- <GuardarBotao onClick={() => {postToCol(collection.id)}}>GUARDAR</GuardarBotao>
+ </ChooseCol>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
</div>
- )
- }
- </div>
- </ChooseCol>
- <div style={{display : "flex", justifyContent : "center"}}>
- <CriarColButton onClick={() => {setCreating(true)}}>CRIAR COLEÇÃO</CriarColButton>
- </div>
- </>
- )
-
- )
- }
- </ChooseColContainer>
- )
- }
- </Content>
- </Container>
- </Fade>
- </StyledModal>
- </React.Fragment>
+ </>
+ )
+
+ )
+ }
+ </ChooseColContainer>
+ )
+ }
+ </Content>
+ </Container>
+ </Fade>
+ </StyledModal>
+ </React.Fragment>
)
}
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 21cc08c7..13449817 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -183,7 +183,7 @@ export default function MenuBar(props) {
</div>
<MenuList items={minhaArea} />
-
+
</>
)
: (
diff --git a/src/Components/ModalLearningObjectPublished.js b/src/Components/ModalLearningObjectPublished.js
index 2a8fbd78..566460be 100644
--- a/src/Components/ModalLearningObjectPublished.js
+++ b/src/Components/ModalLearningObjectPublished.js
@@ -53,7 +53,7 @@ export default function ModalLearningObjectPublished (props) {
<Container>
<Header>
<span style={{width:"32px"}}/>
- <h2>O seu recurso foi publicado!</h2>
+ <h2>O seu recurso foi para a curadoria!</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
@@ -64,7 +64,7 @@ export default function ModalLearningObjectPublished (props) {
</Grid>
<Grid item xs={8} style={{paddingRight : "15px", paddingLeft : "15px", paddingTop : "20px"}}>
<div className="main-content-text">
- <p>Seu recurso já está disponível na Plataforma. Você receberá notificações sempre que alguém favoritar, compartilhar e relatar experiência com o Recurso.</p>
+ <p>Seu recurso estará disponível na plataforma após a avaliação da curadoria. Você receberá notificações sempre que alguém favoritar, compartilhar e relatar experiência com o Recurso.</p>
</div>
</Grid>
</Grid>
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index 09b1f99b..e1ff9f17 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.js
@@ -109,7 +109,7 @@ export default function Notification (props) {
<StyledNotificationsIcon/>
</StyledBadge>
</StyledNotificationButton>
- <StyledMenu
+ <StyledMenu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
@@ -131,7 +131,7 @@ export default function Notification (props) {
objectType = {notification.recipient_type}
createdAt = {notification.created_at}
ownerName = {notification.owner.name}
- ownerHref = {'/usuario-publico/' + notification.owner.id}
+ ownerHref = {'/perfil'}
recipientName = {notification.recipient.name}
recipientHref = {getRecipientHref(notification)}
/>
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index cd262e12..d688ca3e 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -152,7 +152,7 @@ export default function ResourceCardFunction(props) {
</CardReaDiv>
<CardReaFooter>
<div style={{ display: "flex", height: "100%" }}>
- <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} recursoId={props.id}
+ <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
/>
</div>
<ResourceCardOptions
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index fd318296..0f2d25af 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -16,34 +16,34 @@ 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, useState} from 'react'
+import React, { useContext, useState } from 'react'
import styled from 'styled-components'
import { Store } from '../../../Store.js';
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Tooltip from '@material-ui/core/Tooltip';
import FormInput from "../../FormInput.js"
import ValidateUserInput from '../../HelperFunctions/FormValidationFunction.js'
-import {apiDomain} from '../../../env.js'
+import { apiDomain } from '../../../env.js'
import ModalAlterarCover from '../../ModalAlterarCover/ModalAlterarCover.js'
import ModalAlterarAvatar from '../../ModalAlterarAvatar/ModalAlterarAvatar.js'
import Profile from '../../../img/default_profile0.png'
-export default function TabPanelEditarPerfil (props) {
+export default function TabPanelEditarPerfil(props) {
// eslint-disable-next-line
- const {state} = useContext(Store)
+ const { state } = useContext(Store)
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
const [formNome, setNome] = useState({
- key : false,
- value : ""
+ key: false,
+ value: ""
})
const [formAboutMe, setAboutMe] = useState({
- key : false,
- value : "",
+ key: false,
+ value: "",
})
const handleHoverAlterarFoto = () => {
@@ -53,7 +53,7 @@ export default function TabPanelEditarPerfil (props) {
const [tempCover, setTempCover] = useState('')
const [open, toggleOpen] = useState(false)
- const controlModal = () => {toggleOpen(!open)}
+ const controlModal = () => { toggleOpen(!open) }
const updateCover = (selectorFiles) => {
const objectURL = URL.createObjectURL(selectorFiles[0])
@@ -65,40 +65,44 @@ export default function TabPanelEditarPerfil (props) {
const userInput = e.target.value
const flag = ValidateUserInput(type, userInput)
- if(type === 'username') {
- setNome({...formNome,
- key : flag,
- value : userInput
+ if (type === 'username') {
+ setNome({
+ ...formNome,
+ key: flag,
+ value: userInput
})
}
else if (type === 'aboutMe') {
- setAboutMe({...formAboutMe,
- key : flag,
- value : userInput,
+ setAboutMe({
+ ...formAboutMe,
+ key: flag,
+ value: userInput,
})
}
}
const limpaCamposForm = () => {
- setNome({...formNome,
- key : false,
- value : ''
+ setNome({
+ ...formNome,
+ key: false,
+ value: ''
})
- setAboutMe({...formAboutMe,
- key : false,
- value : ''
+ setAboutMe({
+ ...formAboutMe,
+ key: false,
+ value: ''
})
}
const [alterarAvatatarOpen, toggleAlterarAvatar] = useState(false)
- const controlModalAvatar = () => {toggleAlterarAvatar(!alterarAvatatarOpen)}
+ const controlModalAvatar = () => { toggleAlterarAvatar(!alterarAvatatarOpen) }
const handleSubmit = (e) => {
e.preventDefault()
- const info = {user : {name : formNome.value, description : formAboutMe.value, email : sessionStorage.getItem('@portalmec/uid')}}
+ const info = { user: { name: formNome.value, description: formAboutMe.value, email: sessionStorage.getItem('@portalmec/uid') } }
const flagNome = formNome.key
const flagAboutMe = formAboutMe.key
@@ -111,7 +115,7 @@ export default function TabPanelEditarPerfil (props) {
return (
<React.Fragment>
<ModalAlterarCover
- open = {open}
+ open={open}
handleClose={controlModal}
cover={tempCover}
id={state.currentUser.id}
@@ -123,67 +127,67 @@ export default function TabPanelEditarPerfil (props) {
id={state.currentUser.id}
/>
<div className="card-config">
- <h1 style={{fontWeight:"300"}}>Editar Perfil </h1>
- <div className='content-div'>
- <div style={{padding:"0", display:"flex", flexDirection:"column"}}>
- <HeaderContainer>
- <div style={{position:"relative", height:"100%"}}>
- <img src={state.currentUser.cover ? `${apiDomain}` + state.currentUser.cover : null} alt="user cover avatar" style={{width:"100%", height:"100%", objectFit:"cover"}}/>
- <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)}/>
- <label htmlFor="icon-button-file">
- <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
- <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
- <PhotoCamera />
- </IconButton>
- </Tooltip>
- </label>
- </div>
- <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
- <img src={state.currentUser.avatar ? `${apiDomain}` + state.currentUser.avatar : Profile} alt = "user avatar"/>
- <ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
- <span onClick={()=>{controlModalAvatar()}}>Alterar Foto</span>
- </ChangeAvatarDiv>
- </ProfileAvatarDiv>
- </HeaderContainer>
- <br/>
- <br/>
- <br/>
- <br/>
- </div>
-
- <div style={{paddingTop:"90px"}}>
- <div style={{display:"flex", flexDirection:"row"}}>
- <form onSubmit={e => handleSubmit(e)}>
- <FormInput
- inputType={"text"}
- name={"Nome Completo"}
- value={formNome.value}
- placeholder={"Nome Completo"}
- handleChange={e => handleChange(e, 'username')}
- required={true}
- error={formNome.key}
- />
- <FormInput
- inputType={"text"}
- name={"Sobre Mim"}
- value={formAboutMe.value}
- multi = {true}
- rows="3"
- rowsMax = "3"
- error={formAboutMe.key}
- placeholder={"Sobre Mim"}
- handleChange={e => handleChange(e, 'aboutMe')}
- required={false}
- help = {formAboutMe.value.length + '/160'}
- />
- </form>
+ <h1 style={{ fontWeight: "300" }}>Editar Perfil </h1>
+ <div className='content-div'>
+ <div style={{ padding: "0", display: "flex", flexDirection: "column" }}>
+ <HeaderContainer>
+ <div style={{ position: "relative", height: "100%" }}>
+ <img src={state.currentUser.cover ? `${apiDomain}` + state.currentUser.cover : null} alt={state.currentUser.cover ? "user cover avatar" : ""} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+ <input accept="image/*" style={{ display: "none" }} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)} />
+ <label htmlFor="icon-button-file">
+ <Tooltip title={<span style={{ fontSize: "14px", overflow: "hidden", transition: "all .5s ease" }}>ALTERAR CAPA</span>} placement="left">
+ <IconButton style={{ position: "absolute", right: "0", top: "0", color: "#fff" }} color="primary" aria-label="upload picture" component="span">
+ <PhotoCamera />
+ </IconButton>
+ </Tooltip>
+ </label>
</div>
- <ButtonsDiv>
- <Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
- <ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
- </ButtonsDiv>
+ <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
+ <img src={state.currentUser.avatar ? `${apiDomain}` + state.currentUser.avatar : Profile} alt="user avatar" />
+ <ChangeAvatarDiv style={{ display: hoverAlterarFoto ? 'flex' : 'none' }}>
+ <span onClick={() => { controlModalAvatar() }}>Alterar Foto</span>
+ </ChangeAvatarDiv>
+ </ProfileAvatarDiv>
+ </HeaderContainer>
+ <br />
+ <br />
+ <br />
+ <br />
+ </div>
+
+ <div style={{ paddingTop: "90px" }}>
+ <div style={{ display: "flex", flexDirection: "row" }}>
+ <form onSubmit={e => handleSubmit(e)}>
+ <FormInput
+ inputType={"text"}
+ name={"Nome Completo"}
+ value={formNome.value}
+ placeholder={"Nome Completo"}
+ handleChange={e => handleChange(e, 'username')}
+ required={true}
+ error={formNome.key}
+ />
+ <FormInput
+ inputType={"text"}
+ name={"Sobre Mim"}
+ value={formAboutMe.value}
+ multi={true}
+ rows="3"
+ rowsMax="3"
+ error={formAboutMe.key}
+ placeholder={"Sobre Mim"}
+ handleChange={e => handleChange(e, 'aboutMe')}
+ required={false}
+ help={formAboutMe.value.length + '/160'}
+ />
+ </form>
</div>
- </div >
+ <ButtonsDiv>
+ <Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
+ <ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
+ </ButtonsDiv>
+ </div>
+ </div >
</div>
</React.Fragment>
)
@@ -275,12 +279,12 @@ const ChangeAvatarDiv = styled.div`
`
const ProfileAvatarDiv = styled.div`
- bottom : -10px;
- left : 120px !important;
+ bottom: -20px;
+ left : 120px;
border-radius : 100%;
position : absolute;
- max-width : 100px !important;
- max-height : 100px !important;
+ max-width : 100px;
+ max-height : 100px;
overflow : hidden;
border : 8px solid #fff;
outline : 0;
@@ -288,6 +292,16 @@ const ProfileAvatarDiv = styled.div`
z-index : 10;
background-color : #fff !important;
+ @media screen and (max-width: 769px) {
+ max-width : 75px;
+ max-height : 75px;
+ position:absolute;
+ left:0;
+ right:0;
+ bottom : -40px;
+ margin-left:auto;
+ margin-right:auto;
+ }
img {
border:0;
vertical-align:middle;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
index 0207eb9f..29edb847 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
@@ -130,7 +130,7 @@ export default function TabPanelGerenciarConta (props) {
<div className='content-div'>
<h1>Gerenciar Conta</h1>
<div style={{display : "flex", flexDirection : "column"}}>
- <form style={{width:"500px", margin : "0 0 20px 0"}} onSubmit={e => onSubmit(e, 'senha')}>
+ <form style={{margin : "0 0 20px 0"}} onSubmit={e => onSubmit(e, 'senha')}>
<h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar Senha</h4>
<FormInput
inputType={"password"}
@@ -178,7 +178,7 @@ export default function TabPanelGerenciarConta (props) {
<div className='card-config'>
<div className='content-div'>
<div style={{display : "flex", flexDirection : "column"}}>
- <form style={{width:"500px"}} onSubmit={(e) => onSubmit(e, 'email')}>
+ <form onSubmit={(e) => onSubmit(e, 'email')}>
<h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar e-mail</h4>
<FormInput
inputType={"text"}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
index 3e0fe1c7..a31c0676 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
@@ -35,7 +35,7 @@ export default function TabPanelSolicitarContaProfessor (props) {
{
state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected' ?
(
- <div style={{paddingLeft:"100px", paddingRight:"101px"}}>
+ <div>
<ImageDiv/>
<StyledH2>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2>
<StyledP>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
index b6aaaa3c..8e4d1945 100644
--- a/src/Components/UploadPageComponents/ButtonsDiv.js
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -16,63 +16,63 @@ 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} from 'react'
+import React, { useState } from 'react'
import ModalCancelar from './ModalCancelar.js'
import { GreyButton, OrangeButton } from './StyledComponents';
import Grid from '@material-ui/core/Grid';
-import {Redirect} from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
-export default function ButtonsDiv (props) {
+export default function ButtonsDiv(props) {
const [modalCancelar, toggleModalCancelar] = useState(false)
const [redirectTrue, toggleRedirect] = useState(false)
return (
<>
- <ModalCancelar
- open={modalCancelar}
- handleClose={() => {toggleModalCancelar(false)}}
- draftID={props.draftID}
- />
-
- {
- redirectTrue &&
- <Redirect to="/"/>
- }
- <Grid container justify="center">
-
- {/*botao excluir na pagina de editar*/}
- <Grid item md={2} xs={6}>
- <GreyButton onClick={() => {toggleModalCancelar(true)}}>
- <span className="button-text">
- CANCELAR
- </span>
- </GreyButton>
- </Grid>
+ <ModalCancelar
+ open={modalCancelar}
+ handleClose={() => { toggleModalCancelar(false) }}
+ draftID={props.draftID}
+ />
{
- props.onPartTwo &&
- <Grid item md={2} xs={6}>
- <GreyButton onClick={() => {props.stepperControl(-1)}}>
+ redirectTrue &&
+ <Redirect to="/" />
+ }
+ <Grid container justify="center" alignItems="center" spacing={3}>
+
+ {/*botao excluir na pagina de editar*/}
+ <Grid item>
+ <GreyButton onClick={() => { toggleModalCancelar(true) }}>
<span className="button-text">
- VOLTAR
- </span>
+ CANCELAR
+ </span>
</GreyButton>
</Grid>
- }
- <Grid item md={4} xs={12}>
- <GreyButton onClick={() => {if(window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true)}}>
- <span className="button-text">
- CONTINUAR MAIS TARDE
+ {
+ props.onPartTwo &&
+ <Grid item>
+ <GreyButton onClick={() => { props.stepperControl(-1) }}>
+ <span className="button-text">
+ VOLTAR
+ </span>
+ </GreyButton>
+ </Grid>
+ }
+
+ <Grid item>
+ <GreyButton onClick={() => { if (window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true) }}>
+ <span className="button-text">
+ CONTINUAR MAIS TARDE
</span>
- </GreyButton>
- </Grid>
+ </GreyButton>
+ </Grid>
- <Grid item md={4} xs={12}>
- <OrangeButton type="submit">
- SALVAR E AVANÇAR
- </OrangeButton>
+ <Grid item>
+ <OrangeButton type="submit">
+ SALVAR E AVANÇAR
+ </OrangeButton>
+ </Grid>
</Grid>
- </Grid>
</>
)
}
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index 3b4b6b81..97f3ce81 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -16,11 +16,11 @@ 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, useContext} from 'react'
-import {Store} from '../../Store.js'
+import React, { useState, useEffect, useContext } from 'react'
+import { Store } from '../../Store.js'
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
-import {apiDomain} from '../../env';
+import { apiDomain } from '../../env';
import Stepper from './Stepper.js'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
@@ -31,15 +31,15 @@ import DateRangeIcon from '@material-ui/icons/DateRange';
import UpdateIcon from '@material-ui/icons/Update';
import TranslateIcon from '@material-ui/icons/Translate';
import AssignmentIcon from '@material-ui/icons/Assignment';
-import { GrayButton, OrangeButton} from './StyledComponents';
+import { GrayButton, OrangeButton } from './StyledComponents';
import ModalCancelar from './ModalCancelar.js'
-import {getDefaultThumbnail} from '../HelperFunctions/getDefaultThumbnail'
-import {getRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { getDefaultThumbnail } from '../HelperFunctions/getDefaultThumbnail'
+import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
-export default function PartThree (props) {
+export default function PartThree(props) {
var moment = require('moment')
- const {state} = useContext(Store)
- const [loading, setLoading] = useState(true)
+ const { state } = useContext(Store)
+ const [loading, setLoading] = useState(false)
const [draft, setDraft] = useState({})
const [subjects, setSubjects] = useState('')
@@ -47,21 +47,27 @@ export default function PartThree (props) {
const [description, setDescription] = useState('')
const [author, setAuthor] = useState('')
- function handleSuccess (data) {
+ function handleSuccess(data) {
+ console.log(data.tags)
+ console.log(data.language)
+ console.log(data.subjects)
+ // console.log(data.tags)
+
setDraft(data)
/*extract subjects*/
setSubjects(data.subjects.map((subject)=>(subject.name)).join(', '))
- setTags(data.tags.map(tag => tag.name))
+ // setTags(data.tags.map(tag => tag.name))
setDescription(data.description)
setAuthor(data.author)
setLoading(false)
}
useEffect(() => {
+ setLoading(true)
if (state.currentUser.id !== "") {
const url = `/learning_objects/${props.draftID}`
- getRequest(url, handleSuccess, (error) => {console.log(error)})
+ getRequest(url, handleSuccess, (error) => { console.log(error) })
}
}, [state.currentUser.id])
@@ -71,158 +77,166 @@ export default function PartThree (props) {
const checkAccessLevel = (levelToCheck) => {
if (state.currentUser.id !== '') {
- return(checkUserRole(levelToCheck))
+ return (checkUserRole(levelToCheck))
}
}
const checkUserRole = (userRole) => {
- return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
+ return (state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
}
return (
<React.Fragment>
- {
- !loading ?
- (
- <React.Fragment>
- <ModalCancelar
- open={modalCancelar}
- handleClose={() => {toggleModalCancelar(false)}}
- draftID={draft.id}
- />
- <Grid container style={{backgroundColor : "#f4f4f4"}}>
- <Grid item xs={12}>
- <StyledSessao1 className="page-content-preview">
- <div className="cabecalho">
- <div className="feedback-upload">
- <Stepper activeStep={props.activeStep}/>
- <h2>Quase lá, agora só falta publicar!</h2>
- <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
- </div>
- </div>
- </StyledSessao1>
-
- <CaixaContainer>
- <div>
- <div className="cabecalho-objeto">
- <img alt="" className="img-objeto"
- src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail}/>
- <div className="texto-objeto">
- <h3>{draft.name}</h3>
- <div className="rating-objeto">
- <Rating
- name="customized-empty"
- value={draft.score}
- precision={0.5}
- style={{color:"#666"}}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- </div>
-
- <div className="relacionado">
- Relacionado com: {subjects}
+ {
+ !loading ?
+ (
+ <React.Fragment>
+ <ModalCancelar
+ open={modalCancelar}
+ handleClose={() => { toggleModalCancelar(false) }}
+ draftID={draft.id}
+ />
+ <Grid container style={{ backgroundColor: "#f4f4f4" }}>
+ <Grid item xs={12}>
+ <StyledSessao1 className="page-content-preview">
+ <div className="cabecalho">
+ <div className="feedback-upload">
+ <Stepper activeStep={props.activeStep} />
+ <h2>Quase lá, agora só falta publicar!</h2>
+ <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
+ </div>
</div>
+ </StyledSessao1>
+
+ <CaixaContainer>
+ <div>
+ <div className="cabecalho-objeto">
+ <img alt="" className="img-objeto"
+ src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail} />
+ <div className="texto-objeto">
+ <h3>{draft.name}</h3>
+ <div className="rating-objeto">
+ <Rating
+ name="customized-empty"
+ value={draft.score}
+ precision={0.5}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ </div>
+
+ <div className="relacionado">
+ Relacionado com: {subjects}
+ </div>
+
+ {
+ draft.tags &&
+ <div className="tags-objeto">
+ {draft.tags.map((tag) => {
+ return (
+ <div className="tag" key={tag.name}>{tag.name}</div>
+ )
+ })}
+ </div>
+ }
+
+ </div>
+ </div>
- <div className="tags-objeto">
- {tags.map((tag) => <div className="tag" key={tag}>{tag}</div>)}
- </div>
- </div>
- </div>
-
- <div className="sobre-objeto">
- <Grid container>
- <Grid item xs={windowWidth > 990 ? 7 : 12} className="left">
- <div className="titulo">
- Sobre o Recurso
+ <div className="sobre-objeto">
+ <Grid container>
+ <Grid item xs={windowWidth > 990 ? 7 : 12} className="left">
+ <div className="titulo">
+ Sobre o Recurso
</div>
- <div className="sobre-conteudo">
- <p className="descricao">{description}</p>
- {
- author !== '' &&
- <p className="autor">
- <b>Autoria:</b>
- <br/>
- {author}
- </p>
- }
+ <div className="sobre-conteudo">
+ <p className="descricao">{description}</p>
+ {
+ author !== '' &&
+ <p className="autor">
+ <b>Autoria:</b>
+ <br />
+ {author}
+ </p>
+ }
+ </div>
+ </Grid>
+
+ <Grid item xs={windowWidth > 990 ? 4 : 12} className="right">
+ <span className="meta-objeto">
+ <MoreIcon /> <b>Tipo de mídia: </b>{draft.object_type}
+ </span>
+
+ <span className="meta-objeto">
+ <SdCardIcon /> <b>Tamanho: </b>
+ </span>
+
+ <span className="meta-objeto">
+ <DateRangeIcon /> <b>Enviado: </b>
+ {moment(draft.created_at).format("DD/MM/YYYY")}
+ </span>
+
+ <span className="meta-objeto">
+ <UpdateIcon /><b>Atualização: </b>
+ {moment(draft.updated_at).format("DD/MM/YYYY")}
+ </span>
+
+ { draft.language &&
+ draft.language.map((language =>
+ <span className="meta-objeto" key={language.id}>
+ <TranslateIcon /><b>Idioma: </b>{language.name}
+ </span>
+ ))
+ }
+
+ <span className="meta-objeto">
+ <AssignmentIcon /><b>Licença: </b>{draft.license ? draft.license.name : ""}
+ </span>
+ </Grid>
+ </Grid>
</div>
- </Grid>
-
- <Grid item xs={windowWidth > 990 ? 4 : 12} className="right">
- <span className="meta-objeto">
- <MoreIcon/> <b>Tipo de mídia: </b>{draft.object_type}
- </span>
-
- <span className="meta-objeto">
- <SdCardIcon/> <b>Tamanho: </b>
- </span>
-
- <span className="meta-objeto">
- <DateRangeIcon/> <b>Enviado: </b>
- {moment(draft.created_at).format("DD/MM/YYYY")}
- </span>
-
- <span className="meta-objeto">
- <UpdateIcon/><b>Atualização: </b>
- {moment(draft.updated_at).format("DD/MM/YYYY")}
- </span>
-
- {
- draft.language.map( (language =>
- <span className="meta-objeto" key={language.id}>
- <TranslateIcon/><b>Idioma: </b>{language.name}
- </span>
- ))
- }
-
- <span className="meta-objeto">
- <AssignmentIcon/><b>Licença: </b>{draft.license.name}
- </span>
- </Grid>
- </Grid>
- </div>
- </div>
- </CaixaContainer>
- <Sessao3>
- <form>
- <Grid container>
- <Grid item xs={windowWidth > 990 ? 6 : 12} style={{paddingRight : "15px", paddingLeft : "15px", textAlign: windowWidth > 990 ? 'right' : 'center'}}>
- <span style={{fontSize : "14px"}}>
- Para segurança da plataforma <br/> marque que você não é um robô
+ </div>
+ </CaixaContainer>
+ <Sessao3>
+ <form>
+ <Grid container>
+ <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px", textAlign: windowWidth > 990 ? 'right' : 'center' }}>
+ <span style={{ fontSize: "14px" }}>
+ Para segurança da plataforma <br /> marque que você não é um robô
</span>
- </Grid>
-
- <Grid item xs={windowWidth > 990 ? 6 : 12} style={{paddingRight : "15px", paddingLeft : "15px", textAlign: windowWidth > 990 ? 'left' : 'center'}}>
- <span>Recaptcha</span>
- </Grid>
- <Grid item xs={12} style={{paddingRight : "15px", paddingLeft : "15px", marginTop : "30px", textAlign : 'center'}}>
- <GrayButton onClick={() => {props.stepperControl(-1)}}>VOLTAR</GrayButton>
- <GrayButton onClick={() => {toggleModalCancelar(true)}}>CANCELAR</GrayButton>
- {
- checkAccessLevel("partner") ?
- (
- <OrangeButton onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
- )
- :
- (
- <OrangeButton onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
- )
-
- }
+ </Grid>
+
+ <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px", textAlign: windowWidth > 990 ? 'left' : 'center' }}>
+ <span>Recaptcha</span>
+ </Grid>
+ <Grid item xs={12} style={{ paddingRight: "15px", paddingLeft: "15px", marginTop: "30px", textAlign: 'center' }}>
+ <GrayButton onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
+ <GrayButton onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
+ {
+ checkAccessLevel("partner") ?
+ (
+ <OrangeButton onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
+ )
+ :
+ (
+ <OrangeButton onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
+ )
+
+ }
+ </Grid>
+ </Grid>
+ </form>
+ </Sessao3>
</Grid>
</Grid>
- </form>
- </Sessao3>
- </Grid>
- </Grid>
- </React.Fragment>
- )
- :
- (
- <LoadingSpinner text="CARREGANDO"/>
- )
- }
- </React.Fragment>
+ </React.Fragment>
+ )
+ :
+ (
+ <LoadingSpinner text="CARREGANDO" />
+ )
+ }
+ </React.Fragment>
)
}
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
index 6ab05cee..221998c8 100644
--- a/src/Components/UploadPageComponents/PartTwo.js
+++ b/src/Components/UploadPageComponents/PartTwo.js
@@ -125,12 +125,12 @@ export default function PartTwo (props) {
<Grid item xs={12} style={{paddingBottom : "40px"}}>
<Licenca draftID={props.draftID} onBlurCallback={SendInfo}/>
- </Grid>
+ </Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
<StyledFormControl required >
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Confirme se você concorda com os <a href="/termos" style={{color : "#ff7f00"}}>termos de uso e de propriedade intelectual</a></b>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}} onClick={() => window.open("/termos/", "_blank")}>
+ <b>Confirme se você concorda com os <strong style={{color : "#ff7f00"}}>termos de uso e de propriedade intelectual</strong></b>
</StyledFormLabel>
<FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={<Checkbox checked={termsCheckbox} onChange={toggleCheckbox}/>}
/>
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 944e96cf..3c157e6f 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -28,13 +28,13 @@ import GetIconByName from './GetIconByName.js'
export const StyledFormHelperText = styled(FormHelperText)`
.MuiFormHelperText-root {
- text-align : right !important.
+ text-align : right !important;
}
`
export const DottedBox = styled.div`
align-self : center;
- width : ${props => props.thumbnail ? "100%" : "320px"};
+ /* width : ${props => props.thumbnail ? "100%" : "320px"}; */
background-color : ${props => props.thumbnail ? "transparent" : "#f4f4f4"};
border : ${props => props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4"};
align-items : center;
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
index 5e04a247..1f929c47 100644
--- a/src/Pages/EditLearningObjectPage.js
+++ b/src/Pages/EditLearningObjectPage.js
@@ -110,6 +110,7 @@ export default function EditLearningObjectPage (props) {
toggleSnackbar(true)
props.history.push("/")
}
+
const handleDelete = () => {
const url = `/learning_objects/${learningObject.id}`
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
index 381a2872..a7e77555 100644
--- a/src/Pages/EditProfilePage.js
+++ b/src/Pages/EditProfilePage.js
@@ -1,4 +1,4 @@
-import React, {useState, useContext} from 'react';
+import React, { useState, useContext } from 'react';
import styled from 'styled-components'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
@@ -7,14 +7,14 @@ import TabPanelEditarPerfil from '../Components/TabPanels/UserPageTabs/PanelEdit
import TabPanelSolicitarContaProfessor from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import TabPanelGerenciarConta from '../Components/TabPanels/UserPageTabs/PanelGerenciarConta.js'
import Snackbar from '@material-ui/core/Snackbar';
-import {Alert} from '../Components/LoginModal.js'
+import { Alert } from '../Components/LoginModal.js'
import Grid from '@material-ui/core/Grid'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import {putRequest} from '../Components/HelperFunctions/getAxiosConfig'
-import {Store} from '../Store.js'
+import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
+import { Store } from '../Store.js'
-export default function EditProfilePage (props) {
- const {state, dispatch} = useContext(Store)
+export default function EditProfilePage(props) {
+ const { state, dispatch } = useContext(Store)
const id = state.currentUser.id
// eslint-disable-next-line
@@ -26,25 +26,39 @@ export default function EditProfilePage (props) {
setTabValue(newValue)
}
- const [snackbarOpened, handleSnackbar] = useState(false)
+ const [snackbarOpened, handleSnackbar] = useState({
+ open: false,
+ severity: "",
+ text: ""
+ })
const handleCloseSnackbar = (event, reason) => {
if (reason === 'clickaway') {
return;
}
- handleSnackbar(false);
+ handleSnackbar({
+ open: false,
+ severity: "",
+ text: ""
+ });
}
const updateUserInfo = (newUserInfo) => {
const url = `/users/${id}`
putRequest(url, newUserInfo,
- (data) => {props.history.push('/perfil')},
- (error) => {console.log(error)}
+ (data) => { props.history.push('/perfil') },
+ (error) => {
+ handleSnackbar({
+ open: true,
+ severity: "error",
+ text: "Ocorreu um erro!"
+ });
+ }
)
}
- function handleSuccessUpdateEmail (data) {
+ function handleSuccessUpdateEmail(data) {
let auth_headers = JSON.parse(sessionStorage.getItem('@portalmec/auth_headers'))
auth_headers['uid'] = data.uid
@@ -52,17 +66,34 @@ export default function EditProfilePage (props) {
sessionStorage.setItem('@portalmec/auth_headers', JSON.stringify(auth_headers))
const target = state.currentUser
- const source = {uid : data.uid}
+ const source = { uid: data.uid }
+
+ handleSnackbar({
+ open: true,
+ severity: "success",
+ text: "O email foi atualizado com sucesso!"
+ });
+
dispatch({
- type : 'USER_UPDATED_EMAIL',
- currUser : Object.assign(target, source)
+ type: 'USER_UPDATED_EMAIL',
+ currUser: Object.assign(target, source)
})
}
const updateUserEmail = (newUserInfo) => {
const url = `/users/${id}`
- putRequest(url, newUserInfo, handleSuccessUpdateEmail, (error) => {console.log(error)}
+ putRequest(
+ url,
+ newUserInfo,
+ handleSuccessUpdateEmail,
+ (error) => {
+ handleSnackbar({
+ open: true,
+ severity: "error",
+ text: "Ocorreu um erro!"
+ });
+ }
)
}
@@ -70,63 +101,72 @@ export default function EditProfilePage (props) {
const url = `/users/${id}`
putRequest(url, newUserInfo,
- (data) => {handleSnackbar(true)},
- (error) => {console.log(error)}
+ (data) => {
+ handleSnackbar({
+ open: true,
+ severity: "success",
+ text: "A senha foi alterada com sucesso"
+ });
+ },
+ (error) => {
+ handleSnackbar({
+ open: true,
+ severity: "error",
+ text: "Ocorreu um erro!"
+ });
+ }
)
}
return (
- <div style={{backgroundColor:"#f4f4f4", color:"#666"}}>
- <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+ <div style={{ backgroundColor: "#f4f4f4", color: "#666" }}>
+ <Snackbar open={snackbarOpened.open} autoHideDuration={1000} onClose={handleCloseSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
- <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Senha alterada com sucesso!</Alert>
+ <Alert severity={snackbarOpened.severity} >{snackbarOpened.text}</Alert>
</Snackbar>
<CustomizedBreadcrumbs
values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
/>
- <div style={{justifyContent:"center", width:"1170px", margin:"auto"}}>
- <MainContainerDiv container spacing={3}>
- <Grid item xs={3} style={{width : "auto", fontFamily:"Roboto"}} >
- <Paper elevation={3} style= {{width:"max-content"}}>
+ <MainContainerDiv container spacing={3} justify="center" align="center">
+ <Grid item xs={12} md={3} style={{ fontFamily: "Roboto" }} >
+ <Paper elevation={3}>
<ConfiguracoesMenu>
- <h4 style={{marginTop:"10px", fontFamily:"inherit", display:"flex", justifyContent:"center"}}>
- Configurações da Conta
+ <h4 style={{ marginTop: "10px", fontFamily: "inherit", display: "flex", justifyContent: "center" }}>
+ Configurações da Conta
</h4>
<StyledTabs
- orientation = "vertical"
- variant = "scrollable"
- value = {tabValue}
- onChange = {handleChangeTab}
- TabIndicatorProps = {{style : {display : "none"}}}
+ orientation="vertical"
+ variant="scrollable"
+ value={tabValue}
+ onChange={handleChangeTab}
+ TabIndicatorProps={{ style: { display: "none" } }}
>
- <StyledTab label={tabs[0]}/>
- <StyledTab label={tabs[1]}/>
- <StyledTab label={tabs[2]}/>
+ <StyledTab label={tabs[0]} />
+ <StyledTab label={tabs[1]} />
+ <StyledTab label={tabs[2]} />
</StyledTabs>
</ConfiguracoesMenu>
</Paper>
</Grid>
- <TabContentDiv item xs={9}>
- <Paper elevation={3} style= {{width:"100%"}}>
- {tabValue === 0 && <TabPanelEditarPerfil updateUserInfo={updateUserInfo}/>}
- {tabValue === 1 && <TabPanelSolicitarContaProfessor/>}
+ <TabContentDiv item xs={12} md={9}>
+ <Paper elevation={3} style={{ width: "100%" }}>
+ {tabValue === 0 && <TabPanelEditarPerfil updateUserInfo={updateUserInfo} />}
+ {tabValue === 1 && <TabPanelSolicitarContaProfessor />}
</Paper>
- {tabValue === 2 && <TabPanelGerenciarConta updateUserEmail={updateUserEmail}
+ {tabValue === 2 && <TabPanelGerenciarConta updateUserEmail={updateUserEmail}
updateUserPassword={updateUserPassword}
- />}
+ />}
</TabContentDiv>
</MainContainerDiv>
- </div>
</div>
)
}
const TabContentDiv = styled(Grid)`
- width : auto;
-
+
.card-config {
padding : 40px;
margin : 20px 0 20px 10px;
@@ -179,6 +219,8 @@ const TabContentDiv = styled(Grid)`
`
const StyledTabs = styled(Tabs)`
+ display : flex;
+ justify-content : center;
.Mui-selected {
background-color : #f4f4f4;
}
@@ -195,16 +237,10 @@ const ConfiguracoesMenu = styled.div`
border-radius : 3px;
padding : 20px 0;
background-color : #fff;
- text-align : start;
`
const MainContainerDiv = styled(Grid)`
padding : 0;
- width : 1170;
- margin-right : auto;
- margin-left : auto;
- display : flex;
- flex-direction : row;
- align-content : center;
- justify-content : center;
+ width : 90%;
+ margin: 0 auto;
`
--
GitLab