diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js index e6d9d2b7d0de16dbcad37d965ba11c4ed394f2c6..0d249401c851757d490eff07d316748ddad437c0 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/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js index dda8cf98d425f8b15121dd020f070b39291edfb3..5a2aa3b94c81a92f99c949b5474703a724519d8d 100644 --- a/src/Components/AreasSubPagesFunction.js +++ b/src/Components/AreasSubPagesFunction.js @@ -187,7 +187,7 @@ function ReqCollections(props) { function TabRecurso() { const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vídeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!" - const [currOrder, setCurrOrder] = useState("Mais Recentes"); + const [currOrder, setCurrOrder] = useState("Mais Relevante"); const [currValue, setCurrValue] = useState("score"); const [ordenar] = useState([ { label: "Mais Estrelas", value: "review_average" }, @@ -284,8 +284,8 @@ function TabRecurso() { function TabColecoes() { const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!" - const [currOrder, setCurrOrder] = useState("Mais Recentes"); - const [currValue, setCurrValue] = useState("publicationdesc"); + const [currOrder, setCurrOrder] = useState("Mais Relevante"); + const [currValue, setCurrValue] = useState("score"); const [ordenar] = useState([ { label: "Mais Estrelas", value: "review_average" }, { label: "Mais Relevante", value: "score" }, diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js index 4d8865f7cb57e8c35ece36587f77922b0d0ab48a..564c07183b23510edf5ba1170651a63fff879122 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/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js index ced5cb77028a259d4aa39136ff48f18f696ec114..85f59e03ce1471a18330239ee2480e0ef1b41d99 100644 --- a/src/Components/CollectionCardFunction.js +++ b/src/Components/CollectionCardFunction.js @@ -242,8 +242,8 @@ export default function CollectionCardFunction(props) { <Footer> <Type> <FolderIcon /> - <span style={{ fontWeight: "bold" }}>{props.collections.length} </span> - <span>{props.collections.length !== 1 ? "Recursos" : "Recurso"}</span> + <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span> + <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span> </Type> <LikeCounter> <span>{likesCount}</span> diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js index a1a45fb6213f3c0f97be42dde448cf89b1ba83a6..cc064489e05b8550c0b787fc7b15a13fa156a758 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 3a231ac260b33ab13c140f17acb59693910e7817..2526d20c997cfd6b9433d4b414a282e6968ab384 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 21cc08c712993cf257ec4f56f77c8448f253c45e..13449817cb95cd33fce90e5af36715cf5c3db3bc 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/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js index 8604461a878c3b4e781d23ef9bc6f779bea276b6..71e0a37d95053eb414256d80cf4434448520b0ef 100644 --- a/src/Components/ModalAvaliarRecurso.js +++ b/src/Components/ModalAvaliarRecurso.js @@ -16,7 +16,7 @@ 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, useEffect } from 'react'; import { Button } from '@material-ui/core'; import Modal from '@material-ui/core/Modal'; import Backdrop from '@material-ui/core/Backdrop'; @@ -31,42 +31,31 @@ import CloseModalButton from './CloseModalButton' import Snackbar from '@material-ui/core/Snackbar'; import TextField from '@material-ui/core/TextField'; import { withStyles } from '@material-ui/core/styles'; +import { getRequest } from './HelperFunctions/getAxiosConfig' +import LoadingSpinner from '../Components/LoadingSpinner' const StyledRadio = withStyles({ - root: { - color: '#666', - '&$checked': { - color: '#ff7f00', + root: { + color: '#666', + '&$checked': { + color: '#ff7f00', + }, }, - }, - checked: {}, + checked: {}, })((props) => <Radio color="default" {...props} />); -export default function ModalAvaliarRecurso (props) { +export default function ModalAvaliarRecurso(props) { - const options = [ - { - text : "O recurso apresenta conteúdo de cunho político-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda política)?", id : 1 - }, - { - text : "O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?", id : 2 - }, - { - text : "O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?", id : 3 - }, - { - text : "Outro motivo para rejeição (falta de descrição, autor, objeto, erros)? Indicar na justificativa se for o caso?", id : 4 - } - ] + const [options, setOptions] = useState([]) - const [avaliacao, setAvaliacao] = useState([null,null,null,null]) + const [avaliacao, setAvaliacao] = useState([null, null, null, null]) const handleRadios = (event, id) => { let newValue = avaliacao newValue[id - 1] = (event.target.value === "Sim" ? true : false) setAvaliacao(newValue) - if(avaliacao.indexOf(null) === -1) { + if (avaliacao.indexOf(null) === -1) { toggleDisableButton(false) } } @@ -90,100 +79,129 @@ export default function ModalAvaliarRecurso (props) { const handleAvaliar = () => { let criteria = options avaliacao.map((criterium, index) => - criteria[index]['accepted'] = !criterium + criteria[index]['accepted'] = !criterium ) props.confirm(criteria, justificativa, avaliacao.filter((item) => item === true).length > 0 ? false : true) returnToDefault() } const returnToDefault = () => { - setAvaliacao([null,null,null,null]) + setAvaliacao([null, null, null, null]) setJustificativa('') toggleDisableButton(true) } + useEffect(() => { + getRequest( + "/questions", + (data, header) => { + const cpyOption = [] + const cpyAvaliacao = [] + for (let index = 0; index < data.length; index++) { + const option = data[index]; + cpyOption.push({ + text: option.description, + id: option.id + }) + cpyAvaliacao.push(null) + } + setOptions(cpyOption) + setAvaliacao(cpyAvaliacao) + }, + (error) => { + + } + ) + }, []) + return ( <> - <Snackbar open={snackbarCancelar} autoHideDuration={1000} onClose={toggleSnackbarCancelar} - anchorOrigin = {{ vertical:'top', horizontal:'right' }} - message="Você cancelou a avaliação deste recurso." + <Snackbar open={snackbarCancelar} autoHideDuration={1000} onClose={toggleSnackbarCancelar} + anchorOrigin={{ vertical: 'top', horizontal: 'right' }} + message="Você cancelou a avaliação deste recurso." /> - <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, - }} - > - <Fade in={props.open}> - <Container> - <Header> - <h2>Você está avaliando o recurso - <span style={{fontWeight : "bolder"}}> {props.title}</span> - </h2> - <CloseModalButton handleClose={props.handleClose}/> - </Header> - - <Content> - <Grid container> - <Grid item xs={12}> - <p>Esse recurso está em conformidade com os critérios? Marque as opções e justifique aquela(s) que não estiverem em conformidade.</p> - </Grid> - - <FormControl component="fieldset" style={{display:"BlockRuby"}} fullWidth={true}> - { - options.map( (option) => - <Grid item xs={12} key={option.id} style={{paddingTop : "10px"}}> + { + options ? + <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, + }} + > + + <Fade in={props.open}> + <Container> + <Header> + <h2>Você está avaliando o recurso + <span style={{ fontWeight: "bolder" }}> {props.title}</span> + </h2> + <CloseModalButton handleClose={props.handleClose} /> + </Header> + + <Content> <Grid container> - <Grid item xs={10}> - <div style={{height : "100%", display : "flex", alignItems : "center"}}> - <p>{option.text}</p> - </div> - </Grid> - <Grid item xs={2}> - <RadioGroup row onChange={(e) => {handleRadios(e, option.id)}}> - <FormControlLabel value={"Sim"} control={<StyledRadio/>} label="Sim"/> - <FormControlLabel value={"Não"} control={<StyledRadio/>} label="Não"/> - </RadioGroup> - </Grid> + <Grid item xs={12}> + <p>Esse recurso está em conformidade com os critérios? Marque as opções e justifique aquela(s) que não estiverem em conformidade.</p> + </Grid> + + <FormControl component="fieldset" style={{ display: "BlockRuby" }} fullWidth={true}> + { + options.map((option) => + <Grid item xs={12} key={option.id} style={{ paddingTop: "10px" }}> + <Grid container> + <Grid item xs={10}> + <div style={{ height: "100%", display: "flex", alignItems: "center" }}> + <p>{option.text}</p> + </div> + </Grid> + <Grid item xs={2}> + <RadioGroup row onChange={(e) => { handleRadios(e, option.id) }}> + <FormControlLabel value={"Sim"} control={<StyledRadio />} label="Sim" /> + <FormControlLabel value={"Não"} control={<StyledRadio />} label="Não" /> + </RadioGroup> + </Grid> + </Grid> + </Grid> + ) + } + </FormControl> + + <Grid item xs={12}> + <FormControl style={{ width: "100%", height: "100px" }}> + <StyledTextField + id={"title-form"} + label={"Justificativa (opcional)"} + type={"text"} + value={justificativa} + onChange={e => { handleChangeJustificativa(e) }} + multiline + fullWidth + /> + </FormControl> + </Grid> + + <Grid item xs={12}> + <ButtonsDiv> + <ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar> + <GreyButton onClick={() => { handleCancel() }}>CANCELAR</GreyButton> + </ButtonsDiv> + </Grid> </Grid> - </Grid> - ) - } - </FormControl> - - <Grid item xs={12}> - <FormControl style={{width : "100%", height : "100px"}}> - <StyledTextField - id = {"title-form"} - label={"Justificativa (opcional)"} - type = {"text"} - value = {justificativa} - onChange = {e => {handleChangeJustificativa(e)}} - multiline - fullWidth - /> - </FormControl> - </Grid> - - <Grid item xs={12}> - <ButtonsDiv> - <ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => {handleAvaliar()}}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar> - <GreyButton onClick={ () => {handleCancel()}}>CANCELAR</GreyButton> - </ButtonsDiv> - </Grid> - </Grid> - </Content> - - </Container> - </Fade> - </StyledModal> - </> + </Content> + + </Container> + </Fade> + </StyledModal> + : + <LoadingSpinner /> + } + </> ) } diff --git a/src/Components/ModalConfirmarCuradoria.js b/src/Components/ModalConfirmarCuradoria.js index 4687b1876be5b3ae5376901a97eb2e00aca3df66..046106be576a7eea000031277db1c74a2f74df55 100644 --- a/src/Components/ModalConfirmarCuradoria.js +++ b/src/Components/ModalConfirmarCuradoria.js @@ -23,9 +23,9 @@ import Backdrop from '@material-ui/core/Backdrop'; import Fade from '@material-ui/core/Fade'; import styled from 'styled-components' import CloseModalButton from './CloseModalButton' -import {postRequest} from './HelperFunctions/getAxiosConfig' +import { postRequest } from './HelperFunctions/getAxiosConfig' -export default function ModalConfirmarCuradoriaOpen (props) { +export default function ModalConfirmarCuradoriaOpen(props) { const handleCancel = () => { props.handleClose() @@ -35,24 +35,31 @@ export default function ModalConfirmarCuradoriaOpen (props) { const transformReportCriteria = (criteria) => { let newArr = [] criteria.map((criterium) => - newArr.push({"question_id" : criterium.id, "accepted" : criterium.accepted}) + newArr.push({ "question_id": criterium.id, "accepted": criterium.accepted }) ) return newArr } - function handleSuccess (data) { + function handleSuccess(data) { props.finalizeCuratorshipFlow() } const handleConfirmation = () => { const url = `/submissions/${props.recursoId}/answer` let payload = { - "submission" : { - "justification" : props.justificativa, - "answers" : transformReportCriteria(props.reportCriteria) + "submission": { + "justification": props.justificativa, + "answers": transformReportCriteria(props.reportCriteria) } } - postRequest(url, payload, handleSuccess, (error) => {console.log(error)}) + postRequest( + url, + payload, + handleSuccess, + (error) => { + props.handleErrorAprove() + } + ) } return ( @@ -71,44 +78,44 @@ export default function ModalConfirmarCuradoriaOpen (props) { <Fade in={props.open}> <Container recusado={!props.aceito}> <Header> - <span style={{width:"32px"}}/> + <span style={{ width: "32px" }} /> <h2>Recurso a ser {props.aceito ? 'aprovado' : 'recusado'}</h2> - <CloseModalButton handleClose={props.handleClose}/> + <CloseModalButton handleClose={props.handleClose} /> </Header> <Content> { props.aceito ? - ( - <p>Este recurso será publicado na plataforma. Você confirma essa avaliação? + ( + <p>Este recurso será publicado na plataforma. Você confirma essa avaliação? + </p> + ) + : + ( + <> + <p>Agradecemos a sua contribuição. Você avaliou que o recurso não está em conformidade com o(s) seguinte(s) critério(s): </p> - ) - : - ( - <> - <p>Agradecemos a sua contribuição. Você avaliou que o recurso não está em conformidade com o(s) seguinte(s) critério(s): - </p> - { - props.reportCriteria.filter((criterium) => criterium.accepted === false).map( (criterium) => - <p key={criterium.id} className="reason-offensive">{criterium.text}</p> - ) - } - <p>Você confirma essa avaliação? Ao confirmar, o recurso não será publicado na plataforma.</p> - </> - ) + { + props.reportCriteria.filter((criterium) => criterium.accepted === false).map((criterium) => + <p key={criterium.id} className="reason-offensive">{criterium.text}</p> + ) + } + <p>Você confirma essa avaliação? Ao confirmar, o recurso não será publicado na plataforma.</p> + </> + ) } - <ButtonsDiv> - { - props.aceito ? + <ButtonsDiv> + { + props.aceito ? ( - <ButtonEnviarAvaliar onClick={() => {handleConfirmation()}}>SIM, CONFIRMAR</ButtonEnviarAvaliar> + <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar> ) : ( - <ButtonEnviarAvaliar onClick={() => {handleConfirmation()}}>SIM, CONFIRMAR</ButtonEnviarAvaliar> + <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar> ) - } - <GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton> - </ButtonsDiv> + } + <GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton> + </ButtonsDiv> </Content> </Container> </Fade> diff --git a/src/Components/ModalLearningObjectPublished.js b/src/Components/ModalLearningObjectPublished.js index 2a8fbd78bb463b752ded4ac47d16a11292f060b0..566460be99d3b1880e179745f8777fb7a9f94a56 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 09b1f99b4caf1e4fffd7dafe130713af08bfe87c..b452b2157622560976cd9af179cabb1bd87e9d45 100644 --- a/src/Components/Notifications.js +++ b/src/Components/Notifications.js @@ -15,20 +15,21 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, {useState, useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import NotificationsIcon from '@material-ui/icons/Notifications'; import { Button } from '@material-ui/core'; import Badge from '@material-ui/core/Badge'; import styled from 'styled-components' import Menu from '@material-ui/core/Menu'; -import {apiDomain} from '../env.js' +import { apiDomain } from '../env.js' import ActivityListItem from './ActivityListItem.js' -import {getRequest} from './HelperFunctions/getAxiosConfig.js' +import { getRequest, postRequest } from './HelperFunctions/getAxiosConfig.js' import { withStyles } from '@material-ui/core/styles'; -import {Link} from 'react-router-dom' -import {getRecipientHref} from './Activities/getRecipientHref.js' +import { Link } from 'react-router-dom' +import { getRecipientHref } from './Activities/getRecipientHref.js' +import SnackBar from '../Components/SnackbarComponent' -const StyledBadge = styled(Badge) ` +const StyledBadge = styled(Badge)` .MuiBadge-dot-45{ height : 9px ; width : 9px ; @@ -53,39 +54,58 @@ const StyledNotificationButton = styled(Button)` ` const StyledMenu = withStyles({ - paper: { - border: '1px solid #d3d4d5', - }, + paper: { + border: '1px solid #d3d4d5', + }, })((props) => ( - <Menu - elevation={0} - getContentAnchorEl={null} - anchorOrigin={{ - horizontal: 'center', - vertical: "bottom", - }} - transformOrigin={{ - vertical: 'top', - horizontal: 'center', - }} - {...props} - /> + <Menu + elevation={0} + getContentAnchorEl={null} + anchorOrigin={{ + horizontal: 'center', + vertical: "bottom", + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'center', + }} + {...props} + /> )); -export default function Notification (props) { +export default function Notification(props) { const [anchorEl, setAnchorEl] = React.useState(null); const [notifications, setNotifications] = useState([]); + const [snack, setSnack] = useState({ + open: false, + text: "", + severity: "", + color: "" + }); // eslint-disable-next-line const [notificatonsLength, setLength] = useState(0); - function handleAxiosSuccess (data) { - setNotifications(data) - setLength(data.length) + function handleAxiosSuccess(data) { + if (data.errors) + setSnack({ + open: true, + text: "Erro ao buscar suas notificações", + severity: "error", + color: "red" + }) + else { + setNotifications(data) + setLength(data.length) + } } - function handleAxiosError (error) { - console.log('error getNotifications') - console.log(error) + function handleAxiosError(error) { + setSnack({ + open: true, + text: "Erro ao buscar suas notificações", + severity: "error", + color: "red" + }) } @@ -102,50 +122,111 @@ export default function Notification (props) { function handleClose() { setAnchorEl(null); } + + function handleClickNotification() { + const payload = { + "activities": { + "ids": [] + } + } + + for (let index = 0; index < notifications.length; index++) { + const notification = notifications[index]; + payload.activities.ids.push(notification.id) + } + + postRequest( + '/activities/view', + payload, + (data) => { + if (data.errors) + setSnack({ + open: true, + text: "Erro ao marcar as notificações como lidas!", + severity: "error", + color: "red" + }) + else { + setSnack({ + open: true, + text: "Todas as notificações foram marcadas como lidas!", + severity: "success", + color: "green" + }) + setNotifications([]) + } + }, + (error) => { + setSnack({ + open: true, + text: "Erro ao marcar as notificações como lidas!", + severity: "error", + color: "red" + }) + }, + ) + + + } + return ( <React.Fragment> - <StyledNotificationButton onClick={handleClick}> - <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge"> - <StyledNotificationsIcon/> - </StyledBadge> - </StyledNotificationButton> - <StyledMenu - id="simple-menu" - anchorEl={anchorEl} - keepMounted - open={Boolean(anchorEl)} - onClose={handleClose} - > - <ContainerDiv> - <div className="cabecalho"> - <span style={{fontSize : "15px"}}>NOTIFICAÇÕES •</span> - <span className="cabecalho-marcar">Marcar todas como lidas</span> - </div> - { - notifications.map( (notification) => - <ActivityListItem - onMenuBar={true} - avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null} - activity = {notification.activity} - actionType = {notification.trackable_type} - objectType = {notification.recipient_type} - createdAt = {notification.created_at} - ownerName = {notification.owner.name} - ownerHref = {'/usuario-publico/' + notification.owner.id} - recipientName = {notification.recipient.name} - recipientHref = {getRecipientHref(notification)} - /> - ) - } - <div style={{padding : "0 15px", borderTop : "1px solid #dadada"}}> - <Link to="/perfil"> - <NoPadButton> - MOSTRAR TODAS + <SnackBar + snackbarOpen={snack.open} + handleClose={() => { + setSnack({ + open: false, + text: "", + severity: "", + color: "" + }) + }} + severity={snack.severity} + color={snack.color} + text={snack.text} + /> + <StyledNotificationButton onClick={handleClick}> + <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge"> + <StyledNotificationsIcon /> + </StyledBadge> + </StyledNotificationButton> + <StyledMenu + id="simple-menu" + anchorEl={anchorEl} + keepMounted + open={Boolean(anchorEl)} + onClose={handleClose} + > + <ContainerDiv> + <div className="cabecalho"> + <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES •</span> + <span className="cabecalho-marcar" onClick={handleClickNotification}>Marcar todas como lidas</span> + </div> + { + notifications.map((notification) => + <ActivityListItem + onMenuBar={true} + avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : null} + activity={notification.activity} + actionType={notification.trackable_type} + objectType={notification.recipient_type} + createdAt={notification.created_at} + ownerName={notification.owner.name} + ownerHref={'/perfil'} + recipientName={notification.recipient.name} + recipientHref={getRecipientHref(notification)} + /> + ) + } + <div style={{ padding: "0 15px", borderTop: "1px solid #dadada" }}> + <Link to="/perfil"> + <NoPadButton> + MOSTRAR TODAS </NoPadButton> - </Link> - </div> - </ContainerDiv> - </StyledMenu> + </Link> + </div> + </ContainerDiv> + </StyledMenu> </React.Fragment> ) @@ -177,6 +258,7 @@ const ContainerDiv = styled.div` -webkit-text-decoration-line: underline; text-decoration-line: underline; float: right; + cursor: pointer;s } } ` diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js index cd262e12e5e44acfc10f92095642e6a85fda34f6..d688ca3e6e154871fc8633416529f651e531e530 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 fd318296f00edc5d3a7cf31d092ed31f685b8290..0f2d25afb8ec829e53ce5f9b9d861a54166e66ee 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 0207eb9f2bfe9a7002cb841581fef44b0dab2e41..29edb847bc0aed30c5bef936117d0f95370d5958 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 3e0fe1c7a7382116d02fbab3aeb0c44423393605..a31c0676151a96e765c4d3da889f4df67e9e413b 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 b6aaaa3c829fa41698743a5fe720b9fd82c06148..8e4d194578dc53db54ff9934e9aef996e4582026 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 3b4b6b81ecbda32d0fa721e0ffc059e0c47f4cff..b1eb3f564739b77c4c13ffb2e5e6a04a2699004d 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,37 +31,42 @@ 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('') - const [tags, setTags] = useState([]) 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 +76,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 6ab05cee54ac0f62067fb87aecde4b16e045df1c..221998c85f4e04e0a35204fcb89bd675b95b68f0 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 944e96cfc068b0c4ecd38eeb30f44932991ee583..3c157e6f38eceec0f2376bcba6a8328fb6b64abe 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 5e04a247c29d2b1fe130a18e5b15af4fab026d69..1f929c4765c2bd93cd375167b52b8ba09dcec820 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 381a2872bd9441e8442b2944dbe1d9daabe70d07..a7e7755588243eaf22194f14a97f0673f5453563 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; ` diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js index 0c2346800c1fb04252d7ce81f2b58f0f1a3d87bb..834a2c13e37779d62476666f5f5f64a8c5138b21 100644 --- a/src/Pages/ResourcePage.js +++ b/src/Pages/ResourcePage.js @@ -16,257 +16,307 @@ 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, useState, useContext} from 'react' -import {Store} from '../Store.js' -import styled from 'styled-components' -import {apiDomain} from '../env'; -import Grid from '@material-ui/core/Grid'; -import TextoObjeto from '../Components/ResourcePageComponents/TextoObjeto.js' -import Footer from '../Components/ResourcePageComponents/Footer.js' -import Sobre from '../Components/ResourcePageComponents/Sobre.js' -import CommentsArea from '../Components/ResourcePageComponents/CommentsArea.js' +import React, { useEffect, useState, useContext } from "react"; +import { Store } from "../Store.js"; +import styled from "styled-components"; +import { apiDomain } from "../env"; +import Grid from "@material-ui/core/Grid"; +import TextoObjeto from "../Components/ResourcePageComponents/TextoObjeto.js"; +import Footer from "../Components/ResourcePageComponents/Footer.js"; +import Sobre from "../Components/ResourcePageComponents/Sobre.js"; +import CommentsArea from "../Components/ResourcePageComponents/CommentsArea.js"; import noAvatar from "../img/default_profile.png"; -import Snackbar from '@material-ui/core/Snackbar'; -import Alert from '../Components/Alert.js'; -import VideoPlayer from '../Components/ResourcePageComponents/VideoPlayer.js' -import LoadingSpinner from '../Components/LoadingSpinner.js' -import { makeStyles } from '@material-ui/core/styles'; -import AppBar from '@material-ui/core/AppBar'; -import ButtonAvaliarRecurso from '../Components/ButtonAvaliarRecurso' -import ModalAvaliarRecurso from '../Components/ModalAvaliarRecurso' -import ModalConfirmarCuradoria from '../Components/ModalConfirmarCuradoria' -import {getRequest} from '../Components/HelperFunctions/getAxiosConfig' - -function urlVerify (url) { - return (url ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 : false) +import Snackbar from "@material-ui/core/Snackbar"; +import Alert from "../Components/Alert.js"; +import VideoPlayer from "../Components/ResourcePageComponents/VideoPlayer.js"; +import LoadingSpinner from "../Components/LoadingSpinner.js"; +import { makeStyles } from "@material-ui/core/styles"; +import AppBar from "@material-ui/core/AppBar"; +import ButtonAvaliarRecurso from "../Components/ButtonAvaliarRecurso"; +import ModalAvaliarRecurso from "../Components/ModalAvaliarRecurso"; +import ModalConfirmarCuradoria from "../Components/ModalConfirmarCuradoria"; +import { getRequest } from "../Components/HelperFunctions/getAxiosConfig"; + +function urlVerify(url) { + return url + ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1 + : false; } -export default function LearningObjectPage (props){ - const {state} = useContext(Store) - const id = props.match.params.recursoId - const [carregando, toggle] = useState(true) - const [recurso, setRecurso] = useState({}) - - function handleSuccessfulGet (data) { - setRecurso(data) - toggle(false) - } - useEffect( () => { - const url = `/learning_objects/${id}` - - getRequest(url, handleSuccessfulGet, (error) => {console.log(error)}) - - }, []) - - - const [snackbarOpen, toggleSnackbar] = useState(false) - const handleSnackbar = (index) => {setIndex(index); toggleSnackbar(true)} - const snackbarText = [ - "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!", - "Seu comentário foi publicado com sucesso!", - "Comentário editado com sucesso.", - "Comentário deletado com sucesso.", - "O Recurso foi guardado na coleção!" - ] - const [snackbarIndex, setIndex] = useState(0) - const classes = useStyles() - const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false) - const handleModalCuradoria = (value) => {toggleModalCuradoria(value)} - - const checkAccessLevel = (levelToCheck) => { - if (state.currentUser.id !== '') { - return(checkUserRole(levelToCheck)) - } - else { - return(false) - } - } - - const checkUserRole = (userRole) => { - return(state.currentUser.roles.filter((role) => role.name === userRole).length > 0) - } - - const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(false) - const handleModalConfirmarCuradoria = (value) => {toggleModalConfirmarCuradoria(value)} - const [reportCriteria, setReportCriteria] = useState([]) - const [justificativa, setJustificativa] = useState('') - const [submissionAccepted, setSubmissionAccepted] = useState('') - - const handleConfirm = (criteria, justification, accepted) => { - console.log('criteria: ', criteria) - console.log('justification: ', justification) - setReportCriteria(criteria) - setJustificativa(justification) - setSubmissionAccepted(accepted) - handleModalCuradoria(false) - handleModalConfirmarCuradoria(true) - } - - const finalizeCuratorshipFlow = () => { - handleModalConfirmarCuradoria(false) - const url = `/learning_objects/${id}` - getRequest(url, (data) => {setRecurso(data)}, (error) => {console.log(error)}) +export default function LearningObjectPage(props) { + const { state } = useContext(Store); + const id = props.match.params.recursoId; + const [carregando, toggle] = useState(true); + const [recurso, setRecurso] = useState({}); + + function handleSuccessfulGet(data) { + setRecurso(data); + toggle(false); + } + useEffect(() => { + const url = `/learning_objects/${id}`; + + getRequest( + url, + handleSuccessfulGet, + (error) => { + toggle(false); + handleSnackbar(7) + } + ); + }, []); + + const [snackbarOpen, toggleSnackbar] = useState(false); + const handleSnackbar = (index) => { + setIndex(index); + toggleSnackbar(true); + }; + const snackbarText = [ + "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!", + "Seu comentário foi publicado com sucesso!", + "Comentário editado com sucesso.", + "Comentário deletado com sucesso.", + "O Recurso foi guardado na coleção!", + "O recurso foi aprovado com sucesso!", + "Erro ao aprovar o recurso!", + "Erro ao carregar a página" + ]; + const [snackbarIndex, setIndex] = useState(0); + const classes = useStyles(); + const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false); + const handleModalCuradoria = (value) => { + toggleModalCuradoria(value); + }; + + const checkAccessLevel = (levelToCheck) => { + if (state.currentUser.id !== "") { + return checkUserRole(levelToCheck); + } else { + return false; } + }; + const checkUserRole = (userRole) => { return ( - <React.Fragment> - <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={toggleSnackbar} - anchorOrigin = {{ vertical:'top', horizontal:'right' }} - > - <Alert severity="info" style={{backgroundColor:"#00acc1"}}> - {snackbarText[snackbarIndex]} - </Alert> - </Snackbar> - - <ModalAvaliarRecurso open={modalCuradoriaOpen} handleClose={() => {handleModalCuradoria(false)}} - title={recurso.name} confirm={handleConfirm} setCriteria={setReportCriteria} - /> - <ModalConfirmarCuradoria aceito={submissionAccepted} reportCriteria={reportCriteria} justificativa={justificativa} open={modalConfirmarCuradoriaOpen} handleClose={() => {handleModalConfirmarCuradoria(false)}} cancel={() => {handleModalCuradoria(true)}} recursoId={id} - finalizeCuratorshipFlow={finalizeCuratorshipFlow} - /> - <Background> - { - carregando ? - ( - <LoadingSpinner text={"Carregando Recurso"}/> - ) - : - ( - <> - <Grid container spacing={2}> - { - recurso.object_type === "Vídeo" && - !recurso.link ? - ( - <Grid item xs={12}><Card> - <VideoPlayer - link={recurso.link} - urlVerified={false} - videoUrl = {recurso.default_attachment_location} - /> - </Card></Grid> - - ) - : - ( - urlVerify(recurso.link) && - <Grid item xs={12}><Card> - <VideoPlayer - link={recurso.link} - urlVerified={true} - /> - </Card></Grid> - ) - } - - - <Grid item xs={12}> - <Card> - <div> - {recurso.thumbnail && - <img alt="" src={apiDomain + recurso.thumbnail}/> - } - - - - - <TextoObjeto - name={recurso.name} - rating={recurso.review_average} - recursoId={id} - likesCount={recurso.likes_count} - likedBool={recurso.liked} - objType={recurso.object_type} - subjects={recurso.subjects} - educationalStages={recurso.educational_stages} - viewCount={recurso.views_count} - downloadCount={recurso.downloads_count} - id={recurso.publisher ? recurso.publisher.id : undefined} - stateRecurso={recurso.state} - attachments={recurso.attachments} - audioUrl={recurso.default_attachment_location} - /> - </div> - - - <Footer - recursoId={id} - downloadableLink = {recurso.default_attachment_location} - handleSnackbar={handleSnackbar} - link={recurso.link} - title={recurso.name} - thumb={recurso.thumbnail} - currPageLink={window.location.href} - complained={recurso.complained} - /> - </Card> - </Grid> - - <Grid item xs={12}> - <Card> - {/*todo: change render method on additional item info*/} - <Sobre - avatar={recurso.publisher ? (recurso.publisher.avatar ? (apiDomain + recurso.publisher.avatar) : noAvatar) : noAvatar} - publisher={recurso.publisher ? recurso.publisher.name : undefined} - id={recurso.publisher ? recurso.publisher.id : undefined} - description={recurso.description} - author={recurso.author} - tags={recurso.tags} - attachments={recurso.attachments} - language={recurso.language} - mimeType={recurso.default_mime_type} - createdAt={recurso.created_at} - updatedAt={recurso.updated_at} - license={recurso.license} - followed={recurso.publisher.followed} - /> - </Card> - </Grid> - - { - recurso.state !== "submitted" && - <Grid item xs={12}> - <Card> - {/*adicionar funcionalidade ao botao de entrar*/} - <CommentsArea - recursoId = {id} - handleSnackbar={handleSnackbar} - objType={recurso.object_type} - recurso={true} - /> - </Card> - </Grid> - } - </Grid> - - { - recurso.state === 'submitted' && checkAccessLevel('curator') && - <AppBar position="fixed" color="primary" className={classes.appBar}> - <StyledAppBarContainer> - <div className="container"> - <div className="botoes"> - <ButtonAvaliarRecurso callback={() => {handleModalCuradoria(true)}}/> - </div> - </div> - </StyledAppBarContainer> - </AppBar> - } - </> - ) - } - - </Background> - </React.Fragment> - ) + state.currentUser.roles.filter((role) => role.name === userRole).length > + 0 + ); + }; + + const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState( + false + ); + const handleModalConfirmarCuradoria = (value) => { + toggleModalConfirmarCuradoria(value); + }; + const [reportCriteria, setReportCriteria] = useState([]); + const [justificativa, setJustificativa] = useState(""); + const [submissionAccepted, setSubmissionAccepted] = useState(""); + + const handleConfirm = (criteria, justification, accepted) => { + setReportCriteria(criteria); + setJustificativa(justification); + setSubmissionAccepted(accepted); + handleModalCuradoria(false); + handleModalConfirmarCuradoria(true); + }; + + const finalizeCuratorshipFlow = () => { + handleSnackbar(5); + handleModalConfirmarCuradoria(false); + const url = `/learning_objects/${id}`; + getRequest( + url, + (data) => { + setRecurso(data); + }, + (error) => { + handleSnackbar(7) + } + ); + }; + + return ( + <React.Fragment> + <Snackbar + open={snackbarOpen} + autoHideDuration={6000} + onClose={toggleSnackbar} + anchorOrigin={{ vertical: "top", horizontal: "right" }} + > + <Alert severity="info" + style={{ backgroundColor: "#00acc1" }}> + {snackbarText[snackbarIndex]} + </Alert> + </Snackbar> + + <ModalAvaliarRecurso + open={modalCuradoriaOpen} + handleClose={() => { + handleModalCuradoria(false); + }} + title={recurso.name} + confirm={handleConfirm} + setCriteria={setReportCriteria} + /> + <ModalConfirmarCuradoria + aceito={submissionAccepted} + reportCriteria={reportCriteria} + justificativa={justificativa} + open={modalConfirmarCuradoriaOpen} + handleClose={() => { + handleModalConfirmarCuradoria(false); + }} + cancel={() => { + handleModalCuradoria(true); + }} + recursoId={recurso.submission_id} + finalizeCuratorshipFlow={finalizeCuratorshipFlow} + handleErrorAprove={() => { + handleSnackbar(6) + }} + /> + <Background> + {carregando ? ( + <LoadingSpinner text={"Carregando Recurso"} /> + ) : ( + <> + <Grid container spacing={2}> + {recurso.object_type === "Vídeo" && !recurso.link ? ( + <Grid item xs={12}> + <Card> + <VideoPlayer + link={recurso.link} + urlVerified={false} + videoUrl={recurso.default_attachment_location} + /> + </Card> + </Grid> + ) : ( + urlVerify(recurso.link) && ( + <Grid item xs={12}> + <Card> + <VideoPlayer link={recurso.link} urlVerified={true} /> + </Card> + </Grid> + ) + )} + + <Grid item xs={12}> + <Card> + <div> + {recurso.thumbnail && ( + <img alt="" src={apiDomain + recurso.thumbnail} /> + )} + + <TextoObjeto + name={recurso.name} + rating={recurso.review_average} + recursoId={id} + likesCount={recurso.likes_count} + likedBool={recurso.liked} + objType={recurso.object_type} + subjects={recurso.subjects} + educationalStages={recurso.educational_stages} + viewCount={recurso.views_count} + downloadCount={recurso.downloads_count} + id={recurso.publisher ? recurso.publisher.id : undefined} + stateRecurso={recurso.state} + attachments={recurso.attachments} + audioUrl={recurso.default_attachment_location} + /> + </div> + + <Footer + recursoId={id} + downloadableLink={recurso.default_attachment_location} + handleSnackbar={handleSnackbar} + link={recurso.link} + title={recurso.name} + thumb={recurso.thumbnail} + currPageLink={window.location.href} + complained={recurso.complained} + /> + </Card> + </Grid> + + <Grid item xs={12}> + <Card> + {/*todo: change render method on additional item info*/} + <Sobre + avatar={ + recurso.publisher + ? recurso.publisher.avatar + ? apiDomain + recurso.publisher.avatar + : noAvatar + : noAvatar + } + publisher={ + recurso.publisher ? recurso.publisher.name : undefined + } + id={recurso.publisher ? recurso.publisher.id : undefined} + description={recurso.description} + author={recurso.author} + tags={recurso.tags} + attachments={recurso.attachments} + language={recurso.language} + mimeType={recurso.default_mime_type} + createdAt={recurso.created_at} + updatedAt={recurso.updated_at} + license={recurso.license} + followed={recurso.publisher.followed} + /> + </Card> + </Grid> + + {recurso.state !== "submitted" && ( + <Grid item xs={12}> + <Card> + {/*adicionar funcionalidade ao botao de entrar*/} + <CommentsArea + recursoId={id} + handleSnackbar={handleSnackbar} + objType={recurso.object_type} + recurso={true} + /> + </Card> + </Grid> + )} + </Grid> + + {recurso.state === "submitted" && checkAccessLevel("curator") && ( + <AppBar + position="fixed" + color="primary" + className={classes.appBar} + > + <StyledAppBarContainer> + <div className="container"> + <div className="botoes"> + <ButtonAvaliarRecurso + callback={() => { + handleModalCuradoria(true); + }} + /> + </div> + </div> + </StyledAppBarContainer> + </AppBar> + )} + </> + )} + </Background> + </React.Fragment> + ); } const useStyles = makeStyles((theme) => ({ appBar: { - top: 'auto', + top: "auto", bottom: 0, - height : '100px', - backgroundColor : '#fff', - boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)' + height: "100px", + backgroundColor: "#fff", + boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)", }, })); @@ -293,43 +343,43 @@ const StyledAppBarContainer = styled.div` align-items : center; } } -` +`; const Background = styled.div` - background-color : #f4f4f4; - color : #666; - font-family : 'Roboto', sans serif; - padding-top : 30px; -` + background-color: #f4f4f4; + color: #666; + font-family: "Roboto", sans serif; + padding-top: 30px; +`; const Card = styled.div` - background-color : #fff; - box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); - margin-bottom : 30px; - margin-right : auto; - margin-left : auto; - display : flex; - flex-direction : column; - @media screen and (min-width: 1200px) { - width : 1170px; - } - @media screen and (min-width: 992px) and (max-width : 1199px){ - width : 970px; - } - @media screen and (min-width: 768px) and (max-width : 991px) { - width : 750px; - } - - img { - background-color : #e5e5e5; - height : 270px; - width : 400px; - float : left; - padding : 0; - object-fit : cover; - @media screen and (max-width: 768px) { - height : auto; - width : 100%; - } + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + margin-bottom: 30px; + margin-right: auto; + margin-left: auto; + display: flex; + flex-direction: column; + @media screen and (min-width: 1200px) { + width: 1170px; + } + @media screen and (min-width: 992px) and (max-width: 1199px) { + width: 970px; + } + @media screen and (min-width: 768px) and (max-width: 991px) { + width: 750px; + } + + img { + background-color: #e5e5e5; + height: 270px; + width: 400px; + float: left; + padding: 0; + object-fit: cover; + @media screen and (max-width: 768px) { + height: auto; + width: 100%; } -` + } +`; diff --git a/src/Pages/Search.js b/src/Pages/Search.js index 59c24ee39f9e043c024923372cf32ac141889bf3..4180c2328f6cbab7a0c073f360094b85ab3185ae 100644 --- a/src/Pages/Search.js +++ b/src/Pages/Search.js @@ -98,11 +98,16 @@ export default function Search(props) { } const collectStuff = (tipoBusca, filtro) => { + + const urlParams = new URLSearchParams(window.location.search); + const query = urlParams.get("query"); + const searchClass = urlParams.get("search_class"); + if (!loadingMoreData) // this line prevents resetting filter when loading more data currFilter = filtro; if (filtro) setIsFiltering(true); - const url = `/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${state.search.query}${currFilter ? currFilter : ""}&search_class=${tipoBusca}` + const url = `/search?page=${page}&results_per_page=${resultsPerPage}&order=${order}&query=${query}${currFilter ? currFilter : ""}&search_class=${searchClass}` getRequest(url, handleSuccessfulGet, (error) => { console.log(error) }) }; @@ -113,9 +118,6 @@ export default function Search(props) { const query = urlParams.get("query"); const searchClass = urlParams.get("search_class"); - console.log(query) - console.log(searchClass) - if (state.search.query !== query || state.search.class !== searchClass) { dispatch({ type: "SAVE_SEARCH",