From 1c5721ea5e64718774239d54cd37958fd9c93738 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Thu, 26 Aug 2021 08:11:31 -0300
Subject: [PATCH] Accessibility
---
src/App.css | 4 +
src/Components/ActivityListItem.js | 1 -
src/Components/Carousel.js | 4 +-
src/Components/ColCardOwnerOptions.js | 3 +
src/Components/ColCardPublicOptions.js | 3 +
src/Components/Comment.js | 3 +
src/Components/ContactCardOptions.js | 3 +
src/Components/ExpansionPanels.js | 2 +-
src/Components/Header.js | 226 ++---
src/Components/HomeScreenSearchBar.js | 3 +
src/Components/MenuList.js | 14 +-
src/Components/Modal.js | 118 +--
src/Components/Notifications.js | 66 +-
.../PublicationPermissionsContent.js | 54 +-
src/Components/ReportButton.js | 3 +
src/Components/ResourceCardOptions.js | 3 +
.../ResourcePageComponents/Footer.js | 3 +
.../SearchPageComponents/HeaderFilters.js | 8 +-
src/Components/SignUpContainerFunction.js | 2 +-
.../UploadPageComponents/ModalCancelar.js | 22 +-
src/Pages/PublicationPermissionsPage.js | 337 ++++---
src/Pages/Search.js | 946 +++++++++---------
src/Pages/TermsPage.js | 25 +-
23 files changed, 922 insertions(+), 931 deletions(-)
diff --git a/src/App.css b/src/App.css
index 4f0e301f..d1221de1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -53,3 +53,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
.Border {
border: 1px solid #666 !important;
}
+
+.MuiListNoPadding {
+ padding: 0 !important;
+}
diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index 53baaab6..fe0a4086 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -225,5 +225,4 @@ const StyledListItem = styled(ListItem)`
border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
}
-
`
diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js
index ccad2bc6..1275ad32 100644
--- a/src/Components/Carousel.js
+++ b/src/Components/Carousel.js
@@ -44,7 +44,7 @@ import { OrthogonalLineUp } from "ImportImages.js";
import { OrthogonalLineDown } from "ImportImages.js";
const Slide = styled.div`
-
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
position: absolute;
height: 500px;
width: 1366px;
@@ -409,8 +409,6 @@ const CarouselStyled = styled(Carousel)`
.carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
margin: 0 5px;
display: inline-block;
- border-top: 8px solid transparent;
- border-bottom: 8px solid transparent;
content: ' ';
}
.carousel .control-arrow {
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index bc77db89..0d1f9e4b 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -66,6 +66,9 @@ export default function ColCardOwnerOptions (props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}>
<Link to={"/colecao-do-usuario/" + props.id}>
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 88cebaf2..63b4d864 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -71,6 +71,9 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast}>
<Link to={"/colecao-do-usuario/" + id}>
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index 1a5c5196..f6ca3f2c 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -290,6 +290,9 @@ export default function Comment(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<MenuItem
style={
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 2a57fafd..966ea18d 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -116,6 +116,9 @@ export default function SimpleMenu(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/usuario-publico/" + props.followableID}>
diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 2647eb81..4582b138 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -229,7 +229,7 @@ export default function SimpleExpansionPanel({ contrast }) {
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido contrast={contrast} href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
<p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
<p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido contrast={contrast} href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido contrast={contrast} href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
<p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 53b6100e..30313f03 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -33,129 +33,129 @@ import { getRequest, validateGoogleLoginToken } from './HelperFunctions/getAxios
// boxShadow :none;
//`
function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function Header(props) {
- const { state, dispatch } = useContext(Store)
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [modalColaborar, setModalColaborar] = useState(false)
-
- function handleSuccessValidateToken(data) {
- dispatch({
- type: "USER_LOGGED_IN",
- userLoggedIn: !state.userIsLoggedIn,
- login: data.data
+ const { state, dispatch } = useContext(Store)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+ const [modalColaborar, setModalColaborar] = useState(false)
+
+ function handleSuccessValidateToken(data) {
+ dispatch({
+ type: "USER_LOGGED_IN",
+ userLoggedIn: !state.userIsLoggedIn,
+ login: data.data
+ })
}
- )
- }
- useEffect(() => {
- if (localStorage.getItem('@portalmec/auth_headers')) {
- const url = `/auth/validate_token/`
- getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
- }
- const newContrast = localStorage.getItem("@portalmec/contrast");
-
- return dispatch({
- type: 'SET_CONTRAST',
- payload: newContrast
- })
- }, [])
-
- let loc = useLocation()
- let history = useHistory()
- useEffect(() => {
- const url = `/auth/validate_token/`
-
- let query = new URLSearchParams(loc.search)
-
- if (query.get("auth_token")) {
- let config = {
- headers: {
- "access-token": query.get("auth_token"),
- "client": query.get("client_id"),
- "uid": query.get("uid"),
- "expiry": query.get("expiry"),
- "token-type": 'Bearer'
+ useEffect(() => {
+ if (localStorage.getItem('@portalmec/auth_headers')) {
+ const url = `/auth/validate_token/`
+ getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
+ }
+ const newContrast = localStorage.getItem("@portalmec/contrast");
+
+ return dispatch({
+ type: 'SET_CONTRAST',
+ payload: newContrast
+ })
+ }, [])
+
+ let loc = useLocation()
+ let history = useHistory()
+ useEffect(() => {
+ const url = `/auth/validate_token/`
+
+ let query = new URLSearchParams(loc.search)
+
+ if (query.get("auth_token")) {
+ let config = {
+ headers: {
+ "access-token": query.get("auth_token"),
+ "client": query.get("client_id"),
+ "uid": query.get("uid"),
+ "expiry": query.get("expiry"),
+ "token-type": 'Bearer'
+ }
+ }
+ validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
+ history.push("/")
+ }
+ }, [loc])
+
+ useEffect(() => {
+ if (state.currentUser.askTeacherQuestion === true) {
+ dispatch({
+ type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
+ modalColaborarPlataformaOpen: true
+ });
+ }
+ }, [state.currentUser.askTeacherQuestion])
+
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
}
- }
- validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
- history.push("/")
+
+ handleSuccessfulLogin(false);
}
- }, [loc])
-
- useEffect(() => {
- if (state.currentUser.askTeacherQuestion === true) {
- dispatch({
- type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
- modalColaborarPlataformaOpen: true
- });
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
}
- }, [state.currentUser.askTeacherQuestion])
- const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
+ const handleLogin = () => {
+ setLogin(!loginOpen)
}
- handleSuccessfulLogin(false);
- }
-
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
-
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
-
- const handleClickSearch = (open) => {
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: !state.searchOpen
- })
- }
-
- let windowWidth = window.innerWidth
-
- return (
- <React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
- {
- windowWidth > 990 ?
- (
- <React.Fragment>
- <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
-
- )
- :
- (
- <React.Fragment>
- <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
- )
- }
- <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }} />
- <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
- </React.Fragment>
- )
+ const handleClickSearch = (open) => {
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: !state.searchOpen
+ })
+ }
+
+ let windowWidth = window.innerWidth
+
+ return (
+ <React.Fragment>
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ {
+ windowWidth > 990 ?
+ (
+ <React.Fragment>
+ <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+
+ )
+ :
+ (
+ <React.Fragment>
+ <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+ )
+ }
+ <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
+ </React.Fragment>
+ )
}
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
index 06f54a43..6b517193 100644
--- a/src/Components/HomeScreenSearchBar.js
+++ b/src/Components/HomeScreenSearchBar.js
@@ -149,6 +149,9 @@ export default function HomeScreenSearchBar() {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<div className={`${state.contrast}BackColor`}>
{options.map((option, index) => (
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index 29812aeb..ee79f724 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.js
@@ -91,7 +91,11 @@ export default function MenuList(props) {
transformOrigin={{
vertical: 'top',
horizontal: 'center',
- }}>
+ }}
+ MenuListProps={{
+ disablePadding: true
+ }}
+ >
<div className={`${state.contrast}BackColor`}>
{
props.items.map((item) =>
@@ -101,8 +105,8 @@ export default function MenuList(props) {
}} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link>
)
}
+ <StyledButtonSair contrast={state.contrast} className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
</div>
- <StyledButtonSair className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
</Menu>
</div>
);
@@ -118,9 +122,11 @@ const StyledButtonSair = styled(Button)`
display : flex !important;
justify-content: space-between !important;
font-size : 14px !important;
- color : #a5a5a5 !important;
padding : 5px 20px !important;
}
+ color : #666;
+
+ overflow-y: hidden;
`
const StyledExitToAppIcon = styled(ExitToAppIcon)`
@@ -135,6 +141,6 @@ const StyledMenuItem = styled(MenuItem)`
justify-content: space-between !important;
width : 100% !important;
font-size : 14px !important;
- color : #a5a5a5 !important;
+ color : #666;
padding : 5px 20px !important;
`
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
index 8aec80e7..0dea20d0 100644
--- a/src/Components/Modal.js
+++ b/src/Components/Modal.js
@@ -26,75 +26,59 @@ import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
-
-
-/*Importação de imagens para o componente*/
-
-
-
-
const useStyles = makeStyles(theme => ({
- modal: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center"
- },
- paper: {
- border: '2px solid #000',
- boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
- },
- carousel: {
- width: "750px",
- height: "370px",
-
- }
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center"
+ },
+ paper: {
+ border: '2px solid #000',
+ boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
+ },
+ carousel: {
+ width: "750px",
+ height: "370px",
+
+ }
}));
-
-
-
-
export default function TransitionsModal({ contrast }) {
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
-
-
- <div style={{ display: "flex", justifyContent: "center" }}>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
-
- <button style={{ background: "none", border: "none", color: "#fff", verticalAlign: "center" }} type="button" onClick={handleOpen}>
- <VisibilityOutlinedIcon style={{ verticalAlign: "middle" }} /> <spam style={{ verticalAlign: "middle", fontWeight: "600", fontSize: "14px" }}>VEJA A VERSÃO RESUMIDA</spam>
- </button>
- <Modal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- className={classes.modal}
- open={open}
- onClose={handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Fade in={open}>
-
- <div>
- <TermsCarousel />
- </div>
-
- </Fade>
- </Modal>
- </div>
- );
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
+ <button style={{ background: "none", border: "none", color: "#fff", verticalAlign: "center" }} type="button" onClick={handleOpen}>
+ <VisibilityOutlinedIcon style={{ verticalAlign: "middle" }} /> <spam style={{ verticalAlign: "middle", fontWeight: "600", fontSize: "14px" }}>VEJA A VERSÃO RESUMIDA</spam>
+ </button>
+ <Modal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ className={classes.modal}
+ open={open}
+ onClose={handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={open}>
+ <div>
+ <TermsCarousel contrast={contrast}/>
+ </div>
+ </Fade>
+ </Modal>
+ </div>
+ );
}
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index 8c2396b9..6b9f666f 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.js
@@ -59,19 +59,19 @@ const StyledMenu = withStyles({
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) {
@@ -188,9 +188,18 @@ export default function Notification(props) {
text={snack.text}
/>
<StyledNotificationButton onClick={handleClick}>
- <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
- <StyledNotificationsIcon className={`${state.contrast}IconColor`} />
- </StyledBadge>
+ {
+ notifications.some((notification) => (notification.recipient !== null) && (notification.viewed === false) && (notification.recipient_type !== "NilClass")) ?
+ (
+ <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
+ <StyledNotificationsIcon className={` ${state.contrast}LinkColor`} />
+ </StyledBadge>
+ )
+ :
+ (
+ <StyledNotificationsIcon className={` ${state.contrast}LinkColor`} />
+ )
+ }
</StyledNotificationButton>
<StyledMenu
id="simple-menu"
@@ -199,10 +208,13 @@ export default function Notification(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
contrast={state.contrast}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<ContainerDiv contrast={state.contrast}>
<div className="cabecalho">
- <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES •</span>
+ <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES</span>
<span className="cabecalho-marcar" onClick={handleClickNotification}>Marcar todas como lidas</span>
</div>
{
@@ -227,7 +239,7 @@ export default function Notification(props) {
}
<div style={{ padding: "0 15px", borderTop: "1px solid #dadada" }}>
<Link to="/perfil">
- <NoPadButton>
+ <NoPadButton contrast={state.contrast}>
MOSTRAR TODAS
</NoPadButton>
</Link>
@@ -239,34 +251,32 @@ export default function Notification(props) {
}
-const NoPadButton = styled(Button)`
+const NoPadButton = styled.div`
padding : 6px 0 !important;
+ color: ${props => props.contrast === '' ? "#71409E" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === '' ? "none" : "yellow underline"} !important;
`
const ContainerDiv = styled.div`
- margin-top : 10px;
right : 5%;
width : 360px;
max-height : 400px;
- box-shadow : 8px 8px 8px 8px
rgba(0,0,0,.1);
- overflow-y : scroll;
+ overflow-y : auto;
padding : 5px 5px 5px 5px;
min-width : 160px;
- background-color: ${props => props.contrast === '' ? "#f1f1f1" : "black"};
+ background-color: ${props => props.contrast === '' ? "white" : "black"};
.cabecalho {
border-bottom : 1px solid #dadada;
padding : 10px 15px;
- color: ${props => props.contrast === '' ? "black" : "yellow"};
+ color: ${props => props.contrast === '' ? "#666" : "yellow"};
.cabecalho-marcar {
- font-family: Lato,bold;
- font-size: 12px;
- -webkit-text-decoration-line: underline;
- text-decoration-line: underline;
+ font-size: 15px;
float: right;
cursor: pointer;
+ color: ${props => props.contrast === '' ? "#71409E" : "yellow"} !important;
}
}
`
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index a41e89a6..13894ecf 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import Typography from '@material-ui/core/Typography';
import styled from 'styled-components'
import RadioGroup from '@material-ui/core/RadioGroup';
@@ -7,7 +7,6 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
-import { getRequest } from './HelperFunctions/getAxiosConfig';
import { yellow } from "@material-ui/core/colors";
const StyledFormControl = styled(FormControl)`
@@ -37,19 +36,7 @@ const ContrastRadio = withStyles({
export default function PublicationPermissionsContent(props) {
- const [questionsArr, setQuestionsArr] = useState([])
- const handleSetQuestionsArr = (newArr) => { setQuestionsArr(newArr) }
-
- function handleSuccess(data) {
- handleSetQuestionsArr(data)
- }
-
- useEffect(() => {
- const url = `/questions/`
-
- getRequest(url, handleSuccess, (error) => { console.log(error) })
-
- }, [])
+ const [questionsArr] = useState(props.questionsArr);
return (
<div style={props.contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
@@ -82,7 +69,7 @@ export default function PublicationPermissionsContent(props) {
<p>{question.description}</p>
</Grid>
<Grid item xs={2}>
- <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
+ <RadioGroup row name={(question.id)} onChange={props.handleRadios}>
<FormControlLabel value="Sim" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Sim</span>} /> <FormControlLabel value="Não" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Não</span>} />
</RadioGroup>
</Grid>
@@ -97,38 +84,3 @@ export default function PublicationPermissionsContent(props) {
)
}
-
-// {/*
-// <Grid item xs={10}>
-// <p>
-// 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)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio1" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-
-// <Grid item xs={10}>
-// <p>
-// 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)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio2" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-// <Grid item xs={10}>
-// <p>
-// O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio3" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-// </Grid>
-// */}
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index f7798433..d9f02978 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.js
@@ -78,6 +78,9 @@ export default function ReportButton(props) {
open={Boolean(anchorEl)}
onClose={handleClose}
style={{ borderRadius: "0" }}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "white" } : { color: "white", backgroundColor: "black" }}>
<ReportIcon />
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index e0a2f0ef..acec633b 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -139,6 +139,9 @@ export default function ResourceCardOptions(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/recurso/" + props.learningObjectId}>
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index 32b73303..f1bc7465 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -254,6 +254,9 @@ export default function Footer(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
<MenuItem className={`${props.contrast}BackColor`}>
<ReportButton
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
index a1d5f834..b9ae795d 100644
--- a/src/Components/SearchPageComponents/HeaderFilters.js
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -33,7 +33,7 @@ export default function HeaderFilters({ options, contrast, orders, currOption, c
value={option.name}
name={option.value}
>
- <span style={currOption === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ <span style={currOption === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
@@ -67,7 +67,7 @@ export default function HeaderFilters({ options, contrast, orders, currOption, c
value={option.name}
name={option.value}
>
- <span style={currOrder === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ <span style={currOrder === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
@@ -107,7 +107,7 @@ export default function HeaderFilters({ options, contrast, orders, currOption, c
value={option.name}
name={option.value}
>
- <span style={currOption === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ <span style={currOption === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
{option.value}
</span>
</StyledMenuItem>
@@ -136,10 +136,12 @@ const StyledTextField = styled(TextField)`
border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
}
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow !important"};
`
const StyledMenuItem = styled(MenuItem)`
background-color: ${props => props.contrast === "" ? "" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow !important"};
`
const FiltersPaper = styled(Paper)`
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index 5af5f4f7..6b81ac5e 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -280,7 +280,7 @@ const ContainerStyled = styled.div`
flex-direction : column;
min-width : 450px;
border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
- overflow-y: scroll;
+ overflow-y: auto;
max-height : 90%;
position : relative;
diff --git a/src/Components/UploadPageComponents/ModalCancelar.js b/src/Components/UploadPageComponents/ModalCancelar.js
index fcfbc9b2..998a87a7 100644
--- a/src/Components/UploadPageComponents/ModalCancelar.js
+++ b/src/Components/UploadPageComponents/ModalCancelar.js
@@ -55,15 +55,15 @@ export default function ModalCancelar (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Content>
<h2>Tem certeza que deseja cancelar?</h2>
<p>Ao clicar no botão "OK", o seu recurso NÃO será salvo.</p>
</Content>
<ButtonsArea>
- <StyledButton onClick={props.handleClose}>VOLTAR</StyledButton>
- <Link to="/" style={{textDecoration : "none !important"}}>
- <StyledButton onClick={handleDelete}>OK</StyledButton>
+ <StyledButton contrast={props.contrast} onClick={props.handleClose}>VOLTAR</StyledButton>
+ <Link to="/">
+ <StyledButton contrast={props.contrast} onClick={handleDelete}>OK</StyledButton>
</Link>
</ButtonsArea>
</Container>
@@ -89,14 +89,12 @@ const Content = styled.div`
margin-top : 0;
font-size : 20px;
font-weight : bold;
- color : #666;
margin-bottom : 10px;
}
p {
margin : 0 0 10px;
font-size : 14px;
- color : #666;
}
`
@@ -114,8 +112,11 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
box-sizing : border-box;
- background-color : white;
max-width : none;
align : center;
display : flex;
@@ -132,14 +133,15 @@ const Container = styled.div`
}
`
const StyledButton = styled(Button)`
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : "yellow"} !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color : #00bcd4 !important;
- text-decoration : none !important;
outline : none !important;
text-align : center !important;
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index 9b25fc87..1b26c710 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.js
@@ -15,7 +15,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, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import { Button } from "@material-ui/core";
@@ -25,26 +25,47 @@ import { device } from "../Components/device.js";
import { Store } from "../Store.js";
import IllegalContentModal from "../Components/IllegalContentModal.js";
import PublicationPermissionsContent from "../Components/PublicationPermissionsContent.js";
+import { getRequest } from '../Components/HelperFunctions/getAxiosConfig';
+import LoadingSpinner from '../Components/LoadingSpinner';
const CardStyled = styled(Card)`
- box-sizing: border-box;
- background-color: white;
- max-width: 1700px;
- @media ${device.mobileM} {
- width: 100%;
- height: 100%;
- }
+ box-sizing: border-box;
+ background-color: white;
+ max-width: 1700px;
+ @media ${device.mobileM} {
+ width: 100%;
+ height: 100%;
+ }
+`;
+
+const StyledContinuar = styled(Button)`
+ font-family: "Roboto", sans serif;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 15px;
+ letter-spacing: 0.01em;
+ padding: 7px;
+ border-radius: 5px;
+ color: ${props => props.disable === true ? props.contrast === "" ? "#666" : "white" : props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration: ${props => props.disable === true ? props.contrast === "" ? "none" : "none" : props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: ${props => props.disable === true ? props.contrast === "" ? "#E9E9E9" : "black" : props.contrast === "" ? "#52BCD4" : "black"} !important;
+ border: ${props => props.disable === true ? props.contrast === "" ? "none" : "1px solid white" : props.contrast === "" ? "none" : "1px solid white"} !important;
`;
-const Styledspan = styled.span`
- font-family: "Roboto", sans serif;
- font-style: normal;
- font-weight: 500;
- line-height: 22px;
- font-size: 15px;
- letter-spacing: 0.01em;
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
+const StyledCancelar = styled(Button)`
+ font-family: "Roboto", sans serif;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 15px;
+ letter-spacing: 0.01em;
+ padding: 7px;
+ border-radius: 5px;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: none;
`;
const Background = styled.div`
@@ -71,141 +92,153 @@ const Background = styled.div`
`
export default function PermissionsContainer(props) {
- const { state, dispatch } = useContext(Store);
- const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
- const [unavailableButton, setButtonAvailability] = useState(true);
- const [radios, setRadioValues] = useState({
- radio1: "",
- radio2: "",
- radio3: ""
- });
- const [modalOpen, setModalOpen] = useState(false);
-
- const closeModal = () => {
- setModalOpen(false);
- props.history.push("/termos-publicar-recurso");
- window.scrollTo(0, 0);
- };
-
- const handleChecked = e => {
- setButtonAvailability(!unavailableButton);
- };
-
- const handleRadios = e => {
- let temp = radios;
- temp[e.target.name] = e.target.value;
-
- setRadioValues(temp);
- setCheckboxAvailability(!(radios.radio1 === "Não" && radios.radio2 === "Não" && radios.radio3 === "Não"));
- };
-
- const handleAgreement = () => {
- if (
- radios.radio1 === "Sim" ||
- radios.radio2 === "Sim" ||
- radios.radio3 === "Sim"
- ) {
- setModalOpen(true);
- } else {
- dispatch({
- type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
- userAgreement: true
- });
-
- props.history.push("/upload");
+ const { state, dispatch } = useContext(Store);
+ const [loading, setLoading] = useState(true);
+ const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
+ const [unavailableButton, setButtonAvailability] = useState(true);
+
+ const [questionsArr, setQuestionsArr] = useState([]);
+
+ const [radios, setRadioValues] = useState({});
+ const [modalOpen, setModalOpen] = useState(false);
+
+ const closeModal = () => {
+ setModalOpen(false);
+ props.history.push("/termos-publicar-recurso");
+ window.scrollTo(0, 0);
+ };
+
+ const handleChecked = e => {
+ setButtonAvailability(!unavailableButton);
+ };
+
+ const handleRadios = e => {
+ let radioTmp2 = {id: parseInt(e.target.name), value: e.target.value};
+ let temp = radios;
+ const index = temp.findIndex(x => x.id === parseInt(e.target.name));
+ console.log(index);
+
+ temp[index] = radioTmp2;
+
+ console.log(e.target.name);
+ console.log(e.target.value);
+ setRadioValues(temp);
+ console.log(radios);
+ setCheckboxAvailability(!(radios.every((radio) => radio.value === "Não")));
+ };
+
+ const handleAgreement = () => {
+ if (radios.some((radio) => radio === "Sim")) {
+ setModalOpen(true);
+ } else {
+ dispatch({
+ type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
+ userAgreement: true
+ });
+
+ props.history.push("/upload");
+ }
+ };
+
+ function handleSuccess(data) {
+ var radioTmp = [];
+
+ data.forEach(element => {
+ var radioTmp2 = {id: element.id, value: ""};
+
+ if (element.status === "active" && element.id !== 4) {
+ radioTmp.push(radioTmp2);
+ }
+ });
+
+ setQuestionsArr(data);
+ setRadioValues(radioTmp);
+
+ setLoading(false);
}
- };
-
- const redirect = () => {
- props.history.push("/termos-publicar-recurso");
- };
-
- const redirectToHome = () => {
- props.history.push("/");
- };
- return (
- <>
- {state.userAgreedToPublicationTerms ? (
- [
- <>
- <IllegalContentModal
- contrast={props.contrast}
- open={modalOpen}
- handleClose={closeModal}
- disableBackdropClick={true}
- />
- <Background contrast={state.contrast}>
- <div className="container">
- <CardStyled variant="outlined">
- <PublicationPermissionsContent handleRadios={handleRadios} contrast={state.contrast} />
- <CardActions
- style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }}
- >
- <div>
- <div style={{ fontSize: "14px" }}>
- <LabeledCheckbox
- contrast={state.contrast}
- disabled={unavailableCheckbox}
- label={
- <Styledspan contrast={state.contrast}>
- Li e permito a publicação do meu recurso na
- Plataforma Integrada de RED do MEC, assim como
- atesto que o meu recurso atende aos critérios
- especificados acima.
- </Styledspan>
- }
- handleChange={handleChecked}
- />
- <div
- style={{ justifyContent: "center", display: "flex" }}
- >
- <Button
- disabled={unavailableButton || unavailableCheckbox}
- style={
- unavailableButton || unavailableCheckbox
- ? { backgroundColor: "#e9e9e9" } :
- state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }
- }
- onClick={handleAgreement}
- >
- <Styledspan
- style={
- unavailableButton || unavailableCheckbox
- ? { color: "#666666", fontWeight: "600" } :
- state.contrast === "" ? { color: "#ffffff", fontWeight: "600" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }
- }
- >
- Continuar{" "}
- </Styledspan>
- </Button>
- <Button
- style={state.contrast === "" ? {
- marginLeft: "45px",
- backgroundColor: "#e9e9e9",
- } : {
- marginLeft: "45px",
- backgroundColor: "black",
- border: "1px solid white"
- }
- }
- >
- <Styledspan style={state.contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "600 !important" } : { color: "yellow", textDecoration: "underline", fontWeight: "600" }} onClick={() => { redirectToHome() }}>
- Cancelar
- </Styledspan>
- </Button>
+
+ useEffect(() => {
+ const url = `/questions/`
+
+ getRequest(url, handleSuccess, (error) => { console.log(error) })
+
+ }, [])
+
+ const redirect = () => {
+ props.history.push("/termos-publicar-recurso");
+ };
+
+ const redirectToHome = () => {
+ props.history.push("/");
+ };
+
+ return (
+ <>
+ {!loading ?
+ (
+ state.userAgreedToPublicationTerms ? (
+ [
+ <>
+ <IllegalContentModal
+ contrast={props.contrast}
+ open={modalOpen}
+ handleClose={closeModal}
+ disableBackdropClick={true}
+ />
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <CardStyled variant="outlined">
+ <PublicationPermissionsContent contrast={state.contrast} handleRadios={handleRadios} questionsArr={questionsArr}/>
+ <CardActions
+ style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }}
+ >
+ <div>
+ <div style={{ fontSize: "14px" }}>
+ <LabeledCheckbox
+ contrast={state.contrast}
+ disabled={unavailableCheckbox}
+ label={
+ <span className={`${state.contrast}LinkColor`} style={{ fontSize: "15px" }}>
+ Li e permito a publicação do meu recurso na
+ Plataforma Integrada de RED do MEC, assim como
+ atesto que o meu recurso atende aos critérios
+ especificados acima.
+ </span>
+ }
+ handleChange={handleChecked}
+ />
+ <div
+ style={{ justifyContent: "center", display: "flex" }}
+ >
+ <StyledContinuar
+ disabled={unavailableButton || unavailableCheckbox}
+ disable={unavailableButton || unavailableCheckbox}
+ contrast={state.contrast}
+ onClick={handleAgreement}
+ >
+ Continuar
+ </StyledContinuar>
+ <StyledCancelar onClick={redirectToHome} contrast={state.contrast}>
+ Cancelar
+ </StyledCancelar>
+ </div>
+ </div>
+ </div>
+ </CardActions>
+ </CardStyled>
</div>
- </div>
- </div>
- </CardActions>
- </CardStyled>
- </div>
- </Background>
- </>
- ]
- ) : (
- <>{redirect()}</>
- )
- }
- </>
- );
+ </Background>
+ </>
+ ]
+ ) : (
+ <>{redirect()}</>
+ )
+ )
+ :
+ (
+ <LoadingSpinner text="Carregando..." />
+ )
+ }
+ </>
+ );
}
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index f9d4168a..cedd2612 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -31,533 +31,533 @@ import { useHistory } from 'react-router-dom';
import SearchExpansionPanel from '../Components/SearchExpansionPanel/SearchExpansionPanel';
import FilterSummary from '../Components/SearchPageComponents/FilterSummary';
import {
- filtersCurriculum,
- filtersTypes,
- filtersStages,
- filtersLanguages,
+ filtersCurriculum,
+ filtersTypes,
+ filtersStages,
+ filtersLanguages,
} from '../Components/SearchPageComponents/filters';
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';
import { Store } from '../Store'
function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function Search() {
- const history = useHistory();
- const { state } = useContext(Store)
-
- const [currOption, setCurrOption] = useState('');
- const [currOrder, serCurrOrder] = useState('review_average');
- const [currQuery, setCurrQuery] = useState('');
- const [currPage, setCurrPage] = useState(0);
- const [currCurriculumValues, setCurrCurriculumValues] = useState('');
- const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
- const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
- const [currLanguagesValues, setCurrLanguagesValues] = useState('');
- const [currTag, setCurrTag] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const [error, setError] = useState(false);
- const [snackInfo, setSnackInfo] = useState({
- open: false,
- text: "",
- severity: "",
- });
-
- const [curriculumComponents, setCurriculumComponents] = useState([]);
- const [typeOfResources, setTypeOfResources] = useState([]);
- const [teachingStage, setTeachingStage] = useState([]);
- const [languages, setLanguages] = useState([]);
- const [tag, setTag] = useState('');
-
- const [resourcesArray, setResourcesArray] = useState([]);
- const [totalResources, setTotalResources] = useState(0);
-
- const [collectionsArray, setCollectionsArray] = useState([])
- const [totalCollections, setTotalCollections] = useState(0);
-
- const [usersArray, setUsersArray] = useState([])
- const [totalUsers, setTotalUsers] = useState(0);
-
- const options = [
- { value: 'Recursos', name: 'LearningObject', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- { value: 'Coleções', name: 'Collection', color: state.contrast === "" ? '#673ab7' : "yellow" },
- { value: 'Usuários', name: 'User', color: state.contrast === "" ? '#00bcd4' : "yellow" },
- ];
-
- const orders = [
- { value: 'Mais Estrelas', name: 'review_average', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Mais Relevante', name: 'score', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Mais Baixados', name: 'downloads', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Mais Favoritados', name: 'likes', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Mais Recentes', name: 'publicationdesc', color: state.contrast === "" ? '#666' : "yellow" },
- { value: 'Ordem Alfabética', name: 'title', color: state.contrast === "" ? '#666' : "yellow" },
- ];
-
- function handleSnackInfo(info) {
- setSnackInfo({ ...info })
- }
-
- function handleCloseSnack() {
- const snackInfo = {
- open: false,
- text: "",
- severity: "",
- }
- handleSnackInfo(snackInfo)
- }
-
- function onButtonClicked() {
- const curriculumValues = [];
- const typeOfResourcesValues = [];
- const teachingStageValues = [];
- const languagesValues = [];
-
- for (let index = 0; index < curriculumComponents.length; index++) {
- const element = curriculumComponents[index];
- if (element.isChecked)
- curriculumValues.push(element.value);
- }
-
- for (let index = 0; index < typeOfResources.length; index++) {
- const element = typeOfResources[index];
- if (element.isChecked)
- typeOfResourcesValues.push(element.value);
+ const history = useHistory();
+ const { state } = useContext(Store)
+
+ const [currOption, setCurrOption] = useState('');
+ const [currOrder, serCurrOrder] = useState('review_average');
+ const [currQuery, setCurrQuery] = useState('');
+ const [currPage, setCurrPage] = useState(0);
+ const [currCurriculumValues, setCurrCurriculumValues] = useState('');
+ const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
+ const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
+ const [currLanguagesValues, setCurrLanguagesValues] = useState('');
+ const [currTag, setCurrTag] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: "",
+ severity: "",
+ });
+
+ const [curriculumComponents, setCurriculumComponents] = useState([]);
+ const [typeOfResources, setTypeOfResources] = useState([]);
+ const [teachingStage, setTeachingStage] = useState([]);
+ const [languages, setLanguages] = useState([]);
+ const [tag, setTag] = useState('');
+
+ const [resourcesArray, setResourcesArray] = useState([]);
+ const [totalResources, setTotalResources] = useState(0);
+
+ const [collectionsArray, setCollectionsArray] = useState([])
+ const [totalCollections, setTotalCollections] = useState(0);
+
+ const [usersArray, setUsersArray] = useState([])
+ const [totalUsers, setTotalUsers] = useState(0);
+
+ const options = [
+ { value: 'Recursos', name: 'LearningObject', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Coleções', name: 'Collection', color: state.contrast === "" ? '#673ab7' : "yellow" },
+ { value: 'Usuários', name: 'User', color: state.contrast === "" ? '#00bcd4' : "yellow" },
+ ];
+
+ const orders = [
+ { value: 'Mais Estrelas', name: 'review_average', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Relevante', name: 'score', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Baixados', name: 'downloads', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Favoritados', name: 'likes', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Recentes', name: 'publicationdesc', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Ordem Alfabética', name: 'title', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ ];
+
+ function handleSnackInfo(info) {
+ setSnackInfo({ ...info })
}
- for (let index = 0; index < teachingStage.length; index++) {
- const element = teachingStage[index];
- if (element.isChecked)
- teachingStageValues.push(element.value);
- }
-
- for (let index = 0; index < languages.length; index++) {
- const element = languages[index];
- if (element.isChecked)
- languagesValues.push(element.value);
+ function handleCloseSnack() {
+ const snackInfo = {
+ open: false,
+ text: "",
+ severity: "",
+ }
+ handleSnackInfo(snackInfo)
}
- let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+ function onButtonClicked() {
+ const curriculumValues = [];
+ const typeOfResourcesValues = [];
+ const teachingStageValues = [];
+ const languagesValues = [];
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (curriculumValues.length >= 1) {
- url = url + `&subjects=${curriculumValues}`
+ for (let index = 0; index < curriculumComponents.length; index++) {
+ const element = curriculumComponents[index];
+ if (element.isChecked)
+ curriculumValues.push(element.value);
}
- if (typeOfResourcesValues.length >= 1) {
- url = url + `&object_types=${typeOfResourcesValues}`
+
+ for (let index = 0; index < typeOfResources.length; index++) {
+ const element = typeOfResources[index];
+ if (element.isChecked)
+ typeOfResourcesValues.push(element.value);
}
- if (teachingStageValues.length >= 1) {
- url = url + `&educational_stages=${teachingStageValues}`
+
+ for (let index = 0; index < teachingStage.length; index++) {
+ const element = teachingStage[index];
+ if (element.isChecked)
+ teachingStageValues.push(element.value);
}
- if (languagesValues.length >= 1) {
- url = url + `&languages=${languagesValues}`
+
+ for (let index = 0; index < languages.length; index++) {
+ const element = languages[index];
+ if (element.isChecked)
+ languagesValues.push(element.value);
}
- if (tag && tag.length >= 1)
- url = url + `&tags=${tag}`
- }
- }
- history.push(url);
- }
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (curriculumValues.length >= 1) {
+ url = url + `&subjects=${curriculumValues}`
+ }
+ if (typeOfResourcesValues.length >= 1) {
+ url = url + `&object_types=${typeOfResourcesValues}`
+ }
+ if (teachingStageValues.length >= 1) {
+ url = url + `&educational_stages=${teachingStageValues}`
+ }
+ if (languagesValues.length >= 1) {
+ url = url + `&languages=${languagesValues}`
+ }
+ if (tag && tag.length >= 1)
+ url = url + `&tags=${tag}`
+ }
+ }
- function resetFilters() {
- for (let index = 0; index < filtersCurriculum.length; index++) {
- if (filtersCurriculum[index].isChecked)
- filtersCurriculum[index].isChecked = false;
- }
- for (let index = 0; index < filtersLanguages.length; index++) {
- if (filtersLanguages[index].isChecked)
- filtersLanguages[index].isChecked = false;
+ history.push(url);
}
- for (let index = 0; index < filtersStages.length; index++) {
- if (filtersStages[index].isChecked)
- filtersStages[index].isChecked = false;
- }
- for (let index = 0; index < filtersTypes.length; index++) {
- if (filtersTypes[index].isChecked)
- filtersTypes[index].isChecked = false;
- }
- setTag('')
- }
-
- function handleChangeOption(e) {
- const value = e.target.value;
- let url;
-
- if (value !== 'User')
- url = `/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=${value}`
- else
- url = `/busca?page=0&results_per_page=12&query=*&search_class=${value}`
-
- resetFilters()
- history.push(url);
- }
- function handleChangeOrder(e) {
- const value = e.target.value;
- let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${value}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
+ function resetFilters() {
+ for (let index = 0; index < filtersCurriculum.length; index++) {
+ if (filtersCurriculum[index].isChecked)
+ filtersCurriculum[index].isChecked = false;
}
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
+ for (let index = 0; index < filtersLanguages.length; index++) {
+ if (filtersLanguages[index].isChecked)
+ filtersLanguages[index].isChecked = false;
}
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ for (let index = 0; index < filtersStages.length; index++) {
+ if (filtersStages[index].isChecked)
+ filtersStages[index].isChecked = false;
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+ for (let index = 0; index < filtersTypes.length; index++) {
+ if (filtersTypes[index].isChecked)
+ filtersTypes[index].isChecked = false;
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ setTag('')
}
- history.push(url);
- }
+ function handleChangeOption(e) {
+ const value = e.target.value;
+ let url;
- function handleNextPage() {
- const nextPage = currPage + 1;
- let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+ if (value !== 'User')
+ url = `/busca?page=0&results_per_page=12&order=review_average&query=${currQuery}&search_class=${value}`
+ else
+ url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${value}`
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
- }
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
- }
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ resetFilters()
+ history.push(url);
+ }
+
+ function handleChangeOrder(e) {
+ const value = e.target.value;
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${value}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+
+ history.push(url);
+ }
+
+ function handleNextPage() {
+ const nextPage = currPage + 1;
+ let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ history.push(url);
}
- history.push(url);
- }
-
- function handlePreviousPage() {
- const previousPage = currPage - 1;
- let url = `/busca?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
+
+ function handlePreviousPage() {
+ const previousPage = currPage - 1;
+ let url = `/busca?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
+ history.push(url);
+ }
+
+ function handleSuccess(data, headers, option) {
+ if (option === 'LearningObject') {
+ setResourcesArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalResources(headers.get('X-Total-Count'));
+ }
}
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ else if (option === 'Collection') {
+ setCollectionsArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalCollections(headers.get('X-Total-Count'));
+ }
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+ else {
+ setUsersArray(data);
+ if (headers.has('X-Total-Count')) {
+ setTotalUsers(headers.get('X-Total-Count'));
+ }
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ setIsLoading(false);
}
- history.push(url);
- }
-
- function handleSuccess(data, headers, option) {
- if (option === 'LearningObject') {
- setResourcesArray(data)
- if (headers.has('X-Total-Count')) {
- setTotalResources(headers.get('X-Total-Count'));
- }
- }
- else if (option === 'Collection') {
- setCollectionsArray(data)
- if (headers.has('X-Total-Count')) {
- setTotalCollections(headers.get('X-Total-Count'));
- }
- }
- else {
- setUsersArray(data);
- if (headers.has('X-Total-Count')) {
- setTotalUsers(headers.get('X-Total-Count'));
- }
- }
- setIsLoading(false);
- }
-
- function handleFail() {
- const snackInfo = {
- open: true,
- text: "Houve um erro ao carregar os dados!",
- severity: "warning",
- }
- handleSnackInfo(snackInfo)
- setError(true);
- setIsLoading(false);
- }
-
- function handleSubjects(subjectsString) {
- if (subjectsString) {
- const selectedSubjects = subjectsString.split(',');
- for (let i = 0; i < selectedSubjects.length; i++) {
- const elementOfSelectedSubs = selectedSubjects[i];
- for (let j = 0; j < filtersCurriculum.length; j++) {
- if (elementOfSelectedSubs === filtersCurriculum[j].value)
- filtersCurriculum[j].isChecked = true;
+
+ function handleFail() {
+ const snackInfo = {
+ open: true,
+ text: "Houve um erro ao carregar os dados!",
+ severity: "warning",
}
- }
+ handleSnackInfo(snackInfo)
+ setError(true);
+ setIsLoading(false);
}
- setCurriculumComponents(filtersCurriculum);
- }
-
- function handleObjectTypes(objectTypesString) {
- if (objectTypesString) {
- const selectedObjectTypes = objectTypesString.split(',');
- for (let i = 0; i < selectedObjectTypes.length; i++) {
- const elementOfSelectedObjectTypes = selectedObjectTypes[i];
- for (let j = 0; j < filtersTypes.length; j++) {
- if (elementOfSelectedObjectTypes === filtersTypes[j].value)
- filtersTypes[j].isChecked = true;
+
+ function handleSubjects(subjectsString) {
+ if (subjectsString) {
+ const selectedSubjects = subjectsString.split(',');
+ for (let i = 0; i < selectedSubjects.length; i++) {
+ const elementOfSelectedSubs = selectedSubjects[i];
+ for (let j = 0; j < filtersCurriculum.length; j++) {
+ if (elementOfSelectedSubs === filtersCurriculum[j].value)
+ filtersCurriculum[j].isChecked = true;
+ }
+ }
}
- }
+ setCurriculumComponents(filtersCurriculum);
}
- setTypeOfResources(filtersTypes);
- }
-
- function handleLanguages(languagesString) {
- if (languagesString) {
- const selectedLanguages = languagesString.split(',');
-
- for (let i = 0; i < selectedLanguages.length; i++) {
- const elementOfSelectedLanguages = selectedLanguages[i];
- for (let j = 0; j < filtersLanguages.length; j++) {
- if (elementOfSelectedLanguages === filtersLanguages[j].value)
- filtersLanguages[j].isChecked = true;
+
+ function handleObjectTypes(objectTypesString) {
+ if (objectTypesString) {
+ const selectedObjectTypes = objectTypesString.split(',');
+ for (let i = 0; i < selectedObjectTypes.length; i++) {
+ const elementOfSelectedObjectTypes = selectedObjectTypes[i];
+ for (let j = 0; j < filtersTypes.length; j++) {
+ if (elementOfSelectedObjectTypes === filtersTypes[j].value)
+ filtersTypes[j].isChecked = true;
+ }
+ }
}
- }
+ setTypeOfResources(filtersTypes);
}
- setLanguages(filtersLanguages);
- }
-
- function handleStages(stagesString) {
- if (stagesString) {
- const selectedStages = stagesString.split(',');
-
- for (let i = 0; i < selectedStages.length; i++) {
- const elementOfSelectedStages = selectedStages[i];
- for (let j = 0; j < filtersStages.length; j++) {
- if (elementOfSelectedStages === filtersStages[j].value)
- filtersStages[j].isChecked = true;
+
+ function handleLanguages(languagesString) {
+ if (languagesString) {
+ const selectedLanguages = languagesString.split(',');
+
+ for (let i = 0; i < selectedLanguages.length; i++) {
+ const elementOfSelectedLanguages = selectedLanguages[i];
+ for (let j = 0; j < filtersLanguages.length; j++) {
+ if (elementOfSelectedLanguages === filtersLanguages[j].value)
+ filtersLanguages[j].isChecked = true;
+ }
+ }
}
- }
+ setLanguages(filtersLanguages);
}
- setTeachingStage(filtersStages);
- }
-
- useEffect(() => {
- setIsLoading(true)
-
- const urlParams = new URLSearchParams(window.location.search);
- const query = urlParams.get("query");
- const searchClass = urlParams.get("search_class");
- const page = parseInt(urlParams.get("page"));
- const order = urlParams.get("order");
- const subjects = urlParams.get("subjects");
- const objectTypes = urlParams.get("object_types");
- const educationalStages = urlParams.get("educational_stages");
- const languages = urlParams.get("languages");
- const tags = urlParams.get("tags");
-
- setCurrOption(searchClass);
- setCurrQuery(query);
- setCurrPage(page);
- serCurrOrder(order);
- setCurrCurriculumValues(subjects);
- setCurrLanguagesValues(languages);
- setCurrTeachingStageValues(educationalStages);
- setCurrTypeOfResValues(objectTypes);
- setCurrTag(tags);
- setTag(tags);
-
- handleSubjects(subjects);
- handleObjectTypes(objectTypes);
- handleStages(educationalStages);
- handleLanguages(languages);
-
- let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
-
- if (searchClass !== 'User') {
- url = url + `&order=${order}`
- if (searchClass === 'LearningObject') {
- if (subjects) {
- url = url + `&subjects[]=${subjects}`
- }
- if (objectTypes) {
- url = url + `&object_types[]=${objectTypes}`
- }
- if (educationalStages) {
- url = url + `&educational_stages[]=${educationalStages}`
- }
- if (languages) {
- url = url + `&languages[]=${languages}`
+
+ function handleStages(stagesString) {
+ if (stagesString) {
+ const selectedStages = stagesString.split(',');
+
+ for (let i = 0; i < selectedStages.length; i++) {
+ const elementOfSelectedStages = selectedStages[i];
+ for (let j = 0; j < filtersStages.length; j++) {
+ if (elementOfSelectedStages === filtersStages[j].value)
+ filtersStages[j].isChecked = true;
+ }
+ }
}
- if (tags)
- url = url + `&tags[]=${tags}`
- }
+ setTeachingStage(filtersStages);
}
- getRequest(
- url,
- (data, headers) => { handleSuccess(data, headers, searchClass) },
- handleFail,
- );
-
- }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
-
- if (error)
- return (
- <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <MainPageError>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
- <Error contrast={state.contrast} />
- </MainPageError>
- </div>
- )
- else
- return (
- <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <MainPage>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
- <StyledBreadCrumbs contrast={state.contrast}>
- <Link to='/'>Página Inicial</Link>
- <span>Busca</span>
- </StyledBreadCrumbs>
- <HeaderFilters
- contrast={state.contrast}
- options={options}
- orders={orders}
- currOption={currOption}
- currOrder={currOrder}
- handleChangeOption={handleChangeOption}
- handleChangeOrder={handleChangeOrder}
- />
- {
- currOption === 'LearningObject' &&
- <Fragment>
- <SearchExpansionPanel
- contrast={state.contrast}
- setTag={(tag) => setTag(tag)}
- curriculumComponents={curriculumComponents}
- setCurriculum={(array) => { setCurriculumComponents(array) }}
- typeOfResources={typeOfResources}
- setTypeRes={(array) => { setTypeOfResources(array) }}
- teachingStage={teachingStage}
- setTeachingStage={(array) => { setTeachingStage(array) }}
- languages={languages}
- setLanguages={(array) => { setLanguages(array) }}
- />
- {
- <FilterSummary
- contrast={state.contrast}
- curriculumComponents={curriculumComponents}
- typeOfResources={typeOfResources}
- languages={languages}
- teachingStage={teachingStage}
- tag={tag}
- onButtonClicked={onButtonClicked}
- />
- }
- <ResourceTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={resourcesArray}
- totalResources={totalResources}
- />
- </Fragment>
- }
- {
- currOption === 'Collection' &&
- <CollectionTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={collectionsArray}
- totalResources={totalCollections}
- />
- }
- {
- currOption === 'User' &&
- <UserTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={usersArray}
- totalResources={totalUsers}
- />
- }
- </MainPage>
- </div>
- )
+ useEffect(() => {
+ setIsLoading(true)
+
+ const urlParams = new URLSearchParams(window.location.search);
+ const query = urlParams.get("query");
+ const searchClass = urlParams.get("search_class");
+ const page = parseInt(urlParams.get("page"));
+ const order = urlParams.get("order");
+ const subjects = urlParams.get("subjects");
+ const objectTypes = urlParams.get("object_types");
+ const educationalStages = urlParams.get("educational_stages");
+ const languages = urlParams.get("languages");
+ const tags = urlParams.get("tags");
+
+ setCurrOption(searchClass);
+ setCurrQuery(query);
+ setCurrPage(page);
+ serCurrOrder(order);
+ setCurrCurriculumValues(subjects);
+ setCurrLanguagesValues(languages);
+ setCurrTeachingStageValues(educationalStages);
+ setCurrTypeOfResValues(objectTypes);
+ setCurrTag(tags);
+ setTag(tags);
+
+ handleSubjects(subjects);
+ handleObjectTypes(objectTypes);
+ handleStages(educationalStages);
+ handleLanguages(languages);
+
+ let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
+
+ if (searchClass !== 'User') {
+ url = url + `&order=${order}`
+ if (searchClass === 'LearningObject') {
+ if (subjects) {
+ url = url + `&subjects[]=${subjects}`
+ }
+ if (objectTypes) {
+ url = url + `&object_types[]=${objectTypes}`
+ }
+ if (educationalStages) {
+ url = url + `&educational_stages[]=${educationalStages}`
+ }
+ if (languages) {
+ url = url + `&languages[]=${languages}`
+ }
+ if (tags)
+ url = url + `&tags[]=${tags}`
+ }
+ }
+
+ getRequest(
+ url,
+ (data, headers) => { handleSuccess(data, headers, searchClass) },
+ handleFail,
+ );
+
+ }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
+
+ if (error)
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPageError>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <Error contrast={state.contrast} />
+ </MainPageError>
+ </div>
+ )
+ else
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPage>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to='/'>Página Inicial</Link>
+ <span>Busca</span>
+ </StyledBreadCrumbs>
+ <HeaderFilters
+ contrast={state.contrast}
+ options={options}
+ orders={orders}
+ currOption={currOption}
+ currOrder={currOrder}
+ handleChangeOption={handleChangeOption}
+ handleChangeOrder={handleChangeOrder}
+ />
+ {
+ currOption === 'LearningObject' &&
+ <Fragment>
+ <SearchExpansionPanel
+ contrast={state.contrast}
+ setTag={(tag) => setTag(tag)}
+ curriculumComponents={curriculumComponents}
+ setCurriculum={(array) => { setCurriculumComponents(array) }}
+ typeOfResources={typeOfResources}
+ setTypeRes={(array) => { setTypeOfResources(array) }}
+ teachingStage={teachingStage}
+ setTeachingStage={(array) => { setTeachingStage(array) }}
+ languages={languages}
+ setLanguages={(array) => { setLanguages(array) }}
+ />
+ {
+ <FilterSummary
+ contrast={state.contrast}
+ curriculumComponents={curriculumComponents}
+ typeOfResources={typeOfResources}
+ languages={languages}
+ teachingStage={teachingStage}
+ tag={tag}
+ onButtonClicked={onButtonClicked}
+ />
+ }
+ <ResourceTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={resourcesArray}
+ totalResources={totalResources}
+ />
+ </Fragment>
+ }
+ {
+ currOption === 'Collection' &&
+ <CollectionTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={collectionsArray}
+ totalResources={totalCollections}
+ />
+ }
+ {
+ currOption === 'User' &&
+ <UserTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={usersArray}
+ totalResources={totalUsers}
+ />
+ }
+ </MainPage>
+ </div>
+ )
}
const MainPage = styled.div`
- padding: 1em 0;
- width: 90%;
- margin: 0 auto;
+ padding: 1em 0;
+ width: 90%;
+ margin: 0 auto;
`
const MainPageError = styled.div`
- width: 90%;
- margin: 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 1em;
+ width: 90%;
+ margin: 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
`
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display: flex;
- justify-content: flex-start;
- span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
- }
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ display: flex;
+ justify-content: flex-start;
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`;
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index 0a16d957..d2db18c4 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -119,7 +119,7 @@ export default function TermsContainer(props) {
</div>
<div className="botoes">
<Button disabled={unavailableButton}
- style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }}
+ style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {border: "1px solid white"} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }}
onClick={handleAgreement}
>
<StyledSpanContinuar style={unavailableButton ? state.contrast === "" ? { color: "#666666" } : { color: "white" } : state.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>
@@ -222,26 +222,3 @@ const StyledAppBarContainer = styled.div`
}
}
`
-
-// {/*<CardActions style={{justifyContent:"center", padding:"25px", borderTop : "2px solid #dadada"}}>
-// <div>
-// <div style={{fontSize:"14px"}}>
-// <LabeledCheckbox label={<Styledspan>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
-// <div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
-// <Button disabled = {unavailableButton}
-// style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
-// onClick={handleAgreement}
-// >
-// <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
-// Continuar
-// </StyledSpanContinuar>
-// </Button>
-// <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
-// <Styledspan style={{color:"rgb(102, 102, 102)"}}>
-// Cancelar
-// </Styledspan>
-// </Button>
-// </div>
-// </div>
-// </div>
-// </CardActions>*/}
--
GitLab