diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index feae566cc84594292aa6cbc4ae3c40f991846af7..935404a88339b520e132c2bfde8803612f7e957b 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -30,6 +30,14 @@ const StyledTextField = styled(TextField)`
width : 100% !important;
.MuiOutlinedInput-root {
+ &.Mui-focused.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ &.Mui-error fieldset{
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
&.Mui-focused fieldset {
border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
@@ -47,12 +55,11 @@ const StyledTextField = styled(TextField)`
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiFormHelperText-root {
- text-align : left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
@@ -98,7 +105,7 @@ export default function FormInput(props) {
rowsMax={props.rowsMax}
InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required={props.required}
- helperText={props.help}
+ helperText={<span style={props.contrast === "" ? { color: "red" } : { color: "#e75480" }}>{props.help}</span>}
style={{ width: "100%" }}
mask={props.mask}
multiline={props.multi}
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 8769e8093855fe957e3d4594dd9ad76df1838e11..6fc620e923d4d52f59d3113d957158bc172137f0 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -149,7 +149,7 @@ export default function LoginContainer(props) {
handleChange={e => handleChange(e, 'email')}
required={true}
error={formEmail.key}
- help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
+ help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : "Insira um endereço de e-mail válido") : ""}
/>
<br />
<FormInput
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index ad8fcf9a72464421bb2a467cd1c4b32aa9244db0..e33c0719080791141275454fc12fff9edc7bb9c7 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -1,18 +1,35 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import Stepper from '../Stepper.js'
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import InputLabel from '@material-ui/core/InputLabel';
-import {Button} from '@material-ui/core'
-import {RightSideStrikedH3, LeftSideStrikedH3} from '../LoginContainerFunction.js'
-import Divider from '@material-ui/core/Divider';
-import {ButtonCancelar} from './PartTwo.js'
+import { Button } from '@material-ui/core'
+import { RightSideStrikedH3, LeftSideStrikedH3 } from '../LoginContainerFunction.js'
+import { ButtonCancelar } from './PartTwo.js'
import axios from 'axios'
import FormInput from '../FormInput.js'
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from "@material-ui/styles";
-export function sortDict (dict) {
+
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
+}));
+
+export function sortDict(dict) {
const newDict = dict.sort((a, b) => (a.name) > (b.name) ? 1 : -1)
return newDict
@@ -27,13 +44,14 @@ const extractUFInfo = (ufs, name) => {
abbreviation = obj.abbreviation
}
}
- return {id : id, abbreviation : abbreviation}
+ return { id: id, abbreviation: abbreviation }
}
-export default function PartOne (props) {
+export default function PartOne(props) {
+ const classes = useStyles();
//stores initial get response (list of states, sorted alphabetically)
const [ufList, setStates] = useState([])
- const handleSetStates = (states) => {setStates(states)}
+ const handleSetStates = (states) => { setStates(states) }
//stores list of cities sorted alphabetically
const [municipioList, setMunicipioList] = useState([])
@@ -42,33 +60,34 @@ export default function PartOne (props) {
//stores a single user selected state
const [uf, setUF] = useState(
{
- algumFoiEscolhido : false,
- name : '',
- abbreviation : ''
+ algumFoiEscolhido: false,
+ name: '',
+ abbreviation: ''
}
)
//stores a single user selected city
const [municipio, setMunicipio] = useState(
{
- algumFoiEscolhido : false,
- name : ''
+ algumFoiEscolhido: false,
+ name: ''
}
)
const [codigoINEP, setCodigoINEP] = useState(
{
- codigoInvalido : false,
- value : ''
+ codigoInvalido: false,
+ value: ''
}
)
const handleCodigoINEP = (event) => {
const code = event.target.value
- setCodigoINEP({...codigoINEP,
- codigoInvalido : false,
- value : code
+ setCodigoINEP({
+ ...codigoINEP,
+ codigoInvalido: false,
+ value: code
})
}
@@ -76,12 +95,13 @@ export default function PartOne (props) {
const code = codigoINEP.value
axios.get(('https://www.simcaq.c3sl.ufpr.br/api/v1/portal_mec_inep?filter=school_cod:' + code)
- ).then( (response) => {
+ ).then((response) => {
handleSubmit()
}, (error) => {
- setCodigoINEP({...codigoINEP,
- codigoInvalido : true,
- value : ''
+ setCodigoINEP({
+ ...codigoINEP,
+ codigoInvalido: true,
+ value: ''
})
}
)
@@ -92,128 +112,152 @@ export default function PartOne (props) {
}
//on render component, call simcaq api and update ufList
- useEffect ( () => {
+ useEffect(() => {
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/state')
- ).then( (response) => {
+ ).then((response) => {
console.log(sortDict(response.data.result))
handleSetStates(sortDict(response.data.result))
},
- (error) => console.log('erro acessando api do simcaq (estados)'))
+ (error) => console.log('erro acessando api do simcaq (estados)'))
}, [])
const handleChooseUF = (event) => {
const ufName = event.target.value
- const {id, abbreviation} = extractUFInfo(ufList, ufName)
+ const { id, abbreviation } = extractUFInfo(ufList, ufName)
console.log(id, abbreviation)
- setUF({...uf,
- algumFoiEscolhido : true,
- name : ufName,
- abbreviation : abbreviation
- }
+ setUF({
+ ...uf,
+ algumFoiEscolhido: true,
+ name: ufName,
+ abbreviation: abbreviation
+ }
)
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/city?filter=state:' + id)
- ).then( (response) => {
+ ).then((response) => {
handleSetMunicipioList(sortDict(response.data.result))
- }, (error) => console.log('erro acessando api do simcaq (cidades)')
+ }, (error) => console.log('erro acessando api do simcaq (cidades)')
)
}
const handleChooseCity = (event) => {
const cityName = event.target.value
console.log(cityName)
- setMunicipio({...municipio,
- algumFoiEscolhido : true,
- name : cityName
- }
+ setMunicipio({
+ ...municipio,
+ algumFoiEscolhido: true,
+ name: cityName
+ }
)
}
return (
<>
- {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
- <Content>
- <h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
- <form style={{textAlign:"start"}}>
- <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
- <FormControl required style={{width:"100%"}}>
- <InputLabel>Procure sua UF</InputLabel>
- <Select
- labelId="demo-simple-select-label"
- id="demo-simple-select"
- value={uf.name}
- onChange={handleChooseUF}
- >
- {
- ufList.map( (ufs)=>
- <MenuItem key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
- )
- }
- </Select>
- </FormControl>
- <FormControl required style={{width:"100%"}}>
- <InputLabel>Busque o seu município</InputLabel>
- <Select
- labelId="demo-simple-select-label"
- id="demo-simple-select"
- value={municipio.name}
- onChange={handleChooseCity}
- >
- {
- municipioList.map( (cidades)=>
- <MenuItem key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
- )
- }
- </Select>
- </FormControl>
- <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
- <ButtonConfirmar
- onClick={ ( (uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
- >
- BUSCAR</ButtonConfirmar>
- </div>
- </form>
+ {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
+ <form style={{ textAlign: "start" }}>
+ <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
+ <FormControl required style={{ width: "100%", marginTop: '1em' }}>
+ <h5> Procure sua UF </h5>
+ <StyledTextField
+ helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar sua UF</span>}
+ contrast={props.contrast}
+ select
+ fullWidth
+ value={uf.name}
+ onChange={handleChooseUF}
+ variant="outlined"
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ >
+ {
+ ufList.map((ufs) =>
+ <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
+ )
+ }
+ </StyledTextField>
+ </FormControl>
+ <FormControl required style={{ width: "100%", marginTop: '1em' }}>
+ <h5> Busque o seu município </h5>
+ <StyledTextField
+ helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar seu município</span>}
+ contrast={props.contrast}
+ select
+ fullWidth
+ value={municipio.name}
+ onChange={handleChooseCity}
+ variant="outlined"
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ >
+ {
+ municipioList.map((cidades) =>
+ <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
+ )
+ }
+ </StyledTextField>
+ </FormControl>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
+ <ButtonConfirmar
+ contrast={props.contrast}
+ onClick={((uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
+ >
+ BUSCAR</ButtonConfirmar>
+ </div>
+ </form>
</Content>
- <div style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
- <LeftSideStrikedH3/><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3/>
+ <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+ <LeftSideStrikedH3 contrast={props.contrast} /><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3 contrast={props.contrast} />
</div>
{/*/////////////////////////////SEGUNDA PARTE/////////////////////////////*/}
<Content>
<form>
<p>Localize pelo código INEP da escola:</p>
- <FormControl required style={{width:"100%"}}>
- <FormInput
- inputType={'text'}
- name={'Código INEP'}
- value={codigoINEP.value}
- handleChange = {handleCodigoINEP}
- placeholder={'Código INEP'}
- required={true}
- error={codigoINEP.codigoInvalido}
- help={codigoINEP.codigoInvalido ? <span style={{color:'red'}}>código INEP inválido</span> : ''}
- >
- </FormInput>
+ <FormControl required style={{ width: "100%" }}>
+ <FormInput
+ contrast={props.contrast}
+ inputType={'text'}
+ name={'Código INEP'}
+ value={codigoINEP.value}
+ handleChange={handleCodigoINEP}
+ placeholder={'Código INEP'}
+ required={true}
+ error={codigoINEP.codigoInvalido}
+ help={codigoINEP.codigoInvalido ? <span style={{ color: 'red' }}>código INEP inválido</span> : ''}
+ >
+ </FormInput>
</FormControl>
- <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
<ButtonConfirmar
- onClick={validateINEP}
+ contrast={props.contrast}
+ onClick={validateINEP}
>
- BUSCAR</ButtonConfirmar>
+ BUSCAR</ButtonConfirmar>
</div>
</form>
</Content>
- <Divider/>
+ <hr style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
<ButtonsArea>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
+const StyledTextField = styled(TextField)`
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+`
+
export const ButtonsArea = styled.div`
display : flex;
justify-content : center;
@@ -257,34 +301,19 @@ export const Content = styled.div`
}
`
export const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
- font-weight : bolder !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
outline : none !important;
margin : 6px 8px !important;
white-space : nowrap !important;
text-transform : uppercase !important;
font-weight : bold !important;
- font-size : 14px !important;
- font-style : inherit !important;
- font-variant : inherit !important;
- font-family : inherit !important;
- text-decoration : none !important;
- overflow : hidden !important;
- display : inline-block !important;
- position : relative !important;
cursor : pointer !important;
- min-height : 36px !important;
- min-width : 88px !important;
- line-height : 36px !important;
- vertical-align : middle !important;
- align-items : center !important;
text-align : center !important;
- border-radius : 3px !important;
- box-sizing : border-box !important;
- border : 0 !important;
`
diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js
index 4dc30604264bb51d3b51704b5be14fcd9c2d25dc..a65b424b9b304c7d0a208dc01b2010030c082e2d 100644
--- a/src/Components/PageProfessorComponents/PartThree.js
+++ b/src/Components/PageProfessorComponents/PartThree.js
@@ -1,36 +1,38 @@
-import React, {useState} from 'react'
-import {Content} from './PartOne.js'
-import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
+import React, { useState } from 'react'
+import { Content } from './PartOne.js'
+import { ButtonCancelar, ButtonGrey } from './PartTwo.js'
import FormControl from '@material-ui/core/FormControl';
import Stepper from '../Stepper.js'
import FormInput from '../FormInput.js'
import styled from 'styled-components'
-import {Button} from '@material-ui/core'
+import { Button } from '@material-ui/core'
-export default function PartThree (props) {
+export default function PartThree(props) {
const [phoneNumber, setPhoneNumber] = useState(
{
- flagInvalid : false,
- number : ''
+ flagInvalid: false,
+ number: ''
}
)
const handleChangePhoneNumber = (event) => {
- const input = event.target.value.replace(/\D/,'')
- setPhoneNumber({...phoneNumber,
- flagInvalid : (input.length < 10 ? true : false),
- number : (input.length > 10 ? phoneNumber.number : input),
+ const input = event.target.value;
+ setPhoneNumber({
+ ...phoneNumber,
+ flagInvalid: (input.length < 10 ? true : false),
+ number: (input.length > 10 ? phoneNumber.number : input),
})
}
- const [cpf, setCpf] = useState( {
- flagInvalid : false,
- number : ''
+ const [cpf, setCpf] = useState({
+ flagInvalid: false,
+ number: ''
})
const handleChangeCpf = (event) => {
- const input = event.target.value.replace(/\D/,'')
- setCpf({...cpf,
- flagInvalid : (input.length < 11 ? true : false),
- number : (input.length > 11 ? cpf.number : input),
+ const input = event.target.value;
+ setCpf({
+ ...cpf,
+ flagInvalid: (input.length < 11 ? true : false),
+ number: (input.length > 11 ? cpf.number : input),
})
}
@@ -43,65 +45,69 @@ export default function PartThree (props) {
return (
<>
- {console.log(props)}
- <Content>
- <h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
- <form style={{textAlign:"start"}}>
- <FormControl required style={{width:"100%"}}>
- <p>Inserir o telefone da escola:</p>
- <FormInput
- inputType={'text'}
- pattern="[0-9]"
- name={'DDD e Número'}
- placeholder={'Exemplo: 4112345678'}
- value={phoneNumber.number}
- handleChange={handleChangePhoneNumber}
- error={phoneNumber.flagInvalid}
- >
- </FormInput>
- </FormControl>
- <FormControl required style={{width:"100%"}}>
- <p>Inserir o seu CPF</p>
- <FormInput
- inputType={'text'}
- name={'11 dígitos'}
- placeholder={'11 dígitos'}
- value={cpf.number}
- handleChange={handleChangeCpf}
- mask={'999.999.999-99'}
- error={cpf.flagInvalid}
- >
- </FormInput>
- </FormControl>
- <div style={{display:"flex", justifyContent:"space-evenly",paddingTop:"10px", paddingBottom:"10px"}}>
- <div style={{display:"flex", justifyContent:"center"}}>
- <ButtonConfirmar onClick={( (cpf.flagInvalid || phoneNumber.flagInvalid) ? () => {console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid)} : handleSubmit)}>BUSCAR</ButtonConfirmar>
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
+ <form style={{ textAlign: "start" }}>
+ <FormControl required style={{ width: "100%" }}>
+ <p>Inserir o telefone da escola:</p>
+ <FormInput
+ contrast={props.contrast}
+ variant='outlined'
+ inputType={'text'}
+ pattern="[0-9]"
+ name={'DDD e Número'}
+ placeholder={'Exemplo: 4112345678'}
+ value={phoneNumber.number}
+ handleChange={handleChangePhoneNumber}
+ error={phoneNumber.flagInvalid}
+ >
+ </FormInput>
+ </FormControl>
+ <FormControl required style={{ width: "100%" }}>
+ <p>Inserir o seu CPF</p>
+ <FormInput
+ contrast={props.contrast}
+ variant='outlined'
+ inputType={'text'}
+ name={'11 dígitos'}
+ placeholder={'11 dígitos'}
+ value={cpf.number}
+ handleChange={handleChangeCpf}
+ mask={'999.999.999-99'}
+ error={cpf.flagInvalid}
+ >
+ </FormInput>
+ </FormControl>
+ <div style={{ display: "flex", justifyContent: "space-evenly", paddingTop: "10px", paddingBottom: "10px" }}>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <ButtonConfirmar contrast={props.contrast} onClick={((cpf.flagInvalid || phoneNumber.flagInvalid) ? () => { console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid) } : handleSubmit)}>BUSCAR</ButtonConfirmar>
+ </div>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <ButtonGrey contrast={props.contrast} onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
+ </div>
</div>
- <div style={{display:"flex", justifyContent:"center"}}>
- <ButtonGrey onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
- </div>
- </div>
- </form>
+ </form>
</Content>
</>
)
}
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
- box-shadow : none !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
+ outline : none !important;
+ margin : 6px 8px !important;
+ white-space : nowrap !important;
+ text-transform : uppercase !important;
font-weight : bold !important;
- height : 36px !important;
- border-radius : 3px !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
- vertical-align : middle !important;
+ cursor : pointer !important;
text-align : center !important;
- align-items : center !important;
-
`
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
index a4e68d4a6de2ad449ab9cfd9e999b321cd546379..c2f634ed38c73d03f3959cfca9ce2ca8bfb29d18 100644
--- a/src/Components/PageProfessorComponents/PartTwo.js
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -1,97 +1,99 @@
-import React, {useState, useEffect} from 'react'
-import {Content, ButtonsArea} from './PartOne.js'
-import Divider from '@material-ui/core/Divider';
+import React, { useState, useEffect } from 'react'
+import { Content, ButtonsArea } from './PartOne.js'
import Stepper from '../Stepper.js'
import CustomizedTables from '../Table.js'
import styled from 'styled-components'
-import {Button} from '@material-ui/core'
+import { Button } from '@material-ui/core'
import axios from 'axios'
-import {simcaqAPIurl} from '../../env'
-import {sortDict} from './PartOne.js'
+import { simcaqAPIurl } from '../../env'
+import { sortDict } from './PartOne.js'
-export default function PartTwo (props) {
+export default function PartTwo(props) {
const [schoolList, setSchoolList] = useState([])
+ const [state, setState] = useState('');
+ const [city, setCity] = useState('');
- useEffect ( () => {
+ useEffect(() => {
const code = (props.info.inep_code || '')
const uf = (props.info.school_uf.abbreviation || '')
const municipio = (props.info.school_city || '')
- //console.log(code, uf, municipio)
+
+ setState(uf);
+ setCity(municipio);
- //if user searched by inep code
if (code !== '') {
axios.get((`${simcaqAPIurl}/portal_mec_inep?filter=school_cod:` + code)
- ).then ((response) => {
- setSchoolList(sortDict(response.data.result))
- }, (error) => console.log('erro ao dar get na escola por inep code')
- )}
+ ).then((response) => {
+ console.log(response.data.result)
+ setSchoolList(sortDict(response.data.result))
+ }, (error) => console.log('erro ao dar get na escola por inep code')
+ )
+ }
else if (uf !== '' && municipio !== '') {
axios.get((`${simcaqAPIurl}/school?search=state_name:"` + uf + '",city_name:"' + municipio + '"&filter=year:2017')
- ).then((response)=> {
- //console.log(response.data.result)
- setSchoolList(sortDict(response.data.result))
- }, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
- )}
+ ).then((response) => {
+ console.log(response.data.result)
+ setSchoolList(sortDict(response.data.result))
+ }, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
+ )
+ }
}, [])
const onClickTable = (city_name, id, name, state_name) => {
+ console.log(id);
props.handleBuscar(city_name, id, name, state_name)
}
return (
<>
- {console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
</Content>
<Content>
<InputContainer>
- <p>Selecione a sua escola:</p>
+ <p>Selecione a sua escola da UF: {state} e do município: {city}:</p>
- <CustomizedTables
- columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
- rows={schoolList} onClickTable={onClickTable}
- />
+ <CustomizedTables
+ contrast={props.contrast}
+ columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
+ rows={schoolList} onClickTable={onClickTable}
+ />
</InputContainer>
</Content>
- <Divider/>
+ <hr style={props.contrast === "" ? { color: '#666' } : { color: "white" }} />
<ButtonsArea>
- <ButtonGrey onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ <ButtonGrey contrast={props.contrast} onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
export const ButtonCancelar = styled(Button)`
- color: #666 !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family: 'Roboto',sans-serif !important;
- font-size: 14px !important;
font-weight: bold !important;
- height: 36px !important;
border-radius: 3px !important;
- padding-left: 16px !important;
- padding-right: 16px !important;
`
export const ButtonGrey = styled(Button)`
- background-color : #fff !important;
- border : 1.5px #666 solid !important;
- color : #666 !important;
- box-shadow : none !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "1.5px #666 solid !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
- font-weight : bold !important;
- height : 36px !important;
- border-radius : 3px !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
- vertical-align : middle !important;
text-align : center !important;
- align-items : center !important;
-
`
const InputContainer = styled.div`
diff --git a/src/Components/PageProfessorComponents/SuccessfulRequest.js b/src/Components/PageProfessorComponents/SuccessfulRequest.js
index ffd481b450846b031f7a209df95675646eaaa022..8d243f7677a92f52a5ed1ce7c9c3543e9de63869 100644
--- a/src/Components/PageProfessorComponents/SuccessfulRequest.js
+++ b/src/Components/PageProfessorComponents/SuccessfulRequest.js
@@ -1,29 +1,29 @@
import React from 'react'
import styled from 'styled-components'
-import {ButtonConfirmar} from './PartOne.js'
+import { ButtonConfirmar } from './PartOne.js'
//Image Import
import { Comentarios } from "ImportImages.js";
-export default function SuccessfulRequest (props) {
+export default function SuccessfulRequest(props) {
const h4Text = 'Obrigado por fazer parte dessa rede!'
const pText = 'Em breve você poderá publicar os seus próprios reursos educacionais digitais. O MEC analisará as suas informações junto a escola e você será avisada(o) aqui na plataforma e em seu email: '
const redirect = () => {
props.history.push('/')
}
-
+
return (
- <div style={{maxWidth:"575px", padding : "0 36px"}}>
- <div style={{display : "flex", flexDirection : "column"}}>
+ <div style={{ maxWidth: "575px", padding: "0 36px" }}>
+ <div style={{ display: "flex", flexDirection: "column" }}>
<StyledH4>{h4Text}</StyledH4>
<TextDiv>
<p>{pText} <b>{props.email}</b>.</p>
</TextDiv>
- <div style={{display : 'flex', flexDirection : 'row', justifyContent : "center"}}>
- <ButtonConfirmar onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
+ <div style={{ display: 'flex', flexDirection: 'row', justifyContent: "center" }}>
+ <ButtonConfirmar contrast={props.contrast} onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
</div>
- <ImageDiv/>
+ <ImageDiv />
</div>
</div>
)
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
index b1315b9844bdd5726e5b7589c1adf6be80d87417..a50f700cc1ea897a999f52ff1d2ca7fe4fae0783 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -1,53 +1,107 @@
-import React from 'react'
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+import React from 'react';
import styled from 'styled-components'
+import Check from '@material-ui/icons/Check';
+import Grid from '@material-ui/core/Grid';
+
+export default function CustomizedSteppers(props) {
-export default function Stepper (props) {
+ function isInFinalSTep(step) {
+ return step === 3;
+ }
return (
- <div style={{display:"flex",justifyContent:"center", marginBottom:"50px"}}>
- <FeedbackUpload>
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
{
- props.items.map((item)=>
- <div className={"page-selector " + (item.selected ? 'selected' : '')} >
- {item.value}
- </div>
- )
+ !isInFinalSTep(props.activeStep) ?
+
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ }
+ </div>
+ </Grid>
+ )
+ })
+ :
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+ {
+ index < props.activeStep ?
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index}
+ </span>
+ }
+ </div>
+ </Grid>
+ )
+ })
}
- </FeedbackUpload>
- </div>
- )
+ </MainGrid >
+ );
}
-const FeedbackUpload = styled.div`
- width : 280px;
- display : flex;
- background :#e5e5e5;
- flex-direction : row;
- justify-content : space-between;
- height : 50px;
- align-items : center;
- padding : 7px;
- border-radius : 50px;
- margin-top : 20px;
-
- .page-selector {
- height : 36px;
- width : 36px;
- background : #fff;
- border-radius : 50%;
- color : #00bcd4;
- line-height : 32px;
- font-size : 20px;
- font-weight : 500;
- border: solid 3px #00bcd4;
- text-align: center;
- align-items : center;
- vertical-align:middle;
- }
+const MainGrid = styled(Grid)`
+ padding: 1em;
+ border-radius: 50px;
+ width: 90%;
+ margin: 0 auto;
+ border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
- .selected {
- background : #00bcd4;
- color : #fff;
- border-color : #00bcd4;
+ .currStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ border-radius: 50%;
}
+
+ .step{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
+ border-radius: 50%;
+ }
+
+ .finalStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid white;
+ border-radius: 50%;
+ color: white;
+ }
`
+
diff --git a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
index 99fb7c2d3976ed102f8c1699267823ab3b623e0d..4f82ce7edac857cb6a6246a899140ad868180ebb 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -148,7 +148,7 @@ export default function TabPanelAtividades(props) {
setLoadingMoreCurating(true);
const limit = limite;
setcurrLimitCurating(currLimitCurating + limit)
- const url = `/users/${props.id}/submissions?offset=${currLimitCurating}&limit=${limit}&state=submitted`;
+ const url = `/users/${props.id}/submissions?offset=${currLimitCurating}&limit=${limit}&status=submitted`;
getRequest(url,
(data) => {
if (data.errors) {
diff --git a/src/Components/Table.js b/src/Components/Table.js
index 773a5fffb85387a8a4571b6e80b087c85104c944..e9aca6ccc07690c0ae723878f3156970e7025017 100644
--- a/src/Components/Table.js
+++ b/src/Components/Table.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
+import React, { useEffect, useState } from 'react';
+import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
@@ -23,59 +23,97 @@ const StyledTableCell = withStyles(theme => ({
},
}))(TableCell);
-const StyledTableRow = withStyles(theme => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.background.default,
- },
+const ContrastStyledTableCell = withStyles(theme => ({
+ head: {
+ backgroundColor: 'black',
+ color: '#ffffff',
+ border: '1px solid white',
+ fontFamily: 'Roboto',
+ fontStyle: 'normal',
+ fontWeight: 500,
+ fontSize: 15,
+ letterSpacing: .01
},
-}))(TableRow);
-
+ body: {
+ fontSize: 14,
+ },
+}))(TableCell);
-const useStyles = makeStyles({
- table: {
- minWidth: 970,
+const ContrastStyledTableCellBody = withStyles(theme => ({
+ body: {
+ fontSize: 14,
+ backgroundColor: 'black',
+ color: '#ffffff',
+ border: '1px solid white',
+ fontFamily: 'Roboto',
+ fontStyle: 'normal',
+ fontWeight: 500,
+ letterSpacing: .01
},
-});
+}))(TableCell);
+
+
export default function CustomizedTables(props) {
- const classes = useStyles();
+ const [columns, setColumns] = useState([]);
const onClick = (row) => {
- const {city_name, id, name, state_name} = row
- props.onClickTable(city_name, id, name, state_name)
+ const { city_name, id, name, state_name } = row
+ props.onClickTable(city_name, id, name, state_name)
}
+ useEffect(() => {
+ const updatedColumns = [...props.columns];
+ updatedColumns.splice(2, 2);
+ setColumns(updatedColumns);
+ }, [])
+
return (
- <>
- <TableContainer component={Paper}>
- <Table className={classes.table} aria-label="customized table">
- <TableHead>
- <TableRow>
+ <>
+ <TableContainer component={Paper}>
+ <Table aria-label="customized table">
+ <TableHead>
+ <TableRow>
+ {
+ columns.map((column) =>
+ props.contrast === "" ?
+ <StyledTableCell align="left">{column}</StyledTableCell>
+ :
+ <ContrastStyledTableCell align="left">{column}</ContrastStyledTableCell>
+ )
+ }
+ </TableRow>
+ </TableHead>
+ <TableBody>
{
- props.columns.map( (column)=>
- <StyledTableCell align="left">{column}</StyledTableCell>
- )
+ props.contrast === "" ?
+ props.rows.map((row) => {
+ return <TableRow onClick={() => onClick(row)} key={row.id}>
+ <StyledTableCell component="th" scope="row">
+ {row.id}
+ </StyledTableCell>
+ <StyledTableCell align="left">{row.name}</StyledTableCell>
+ {/* <StyledTableCell align="left">{row.state_name}</StyledTableCell>
+ <StyledTableCell align="left">{row.city_name}</StyledTableCell> */}
+ </TableRow>
+ })
+ :
+ props.rows.map((row) => {
+ return <TableRow onClick={() => onClick(row)} key={row.id}>
+ <ContrastStyledTableCellBody component="th" scope="row">
+ {row.id}
+ </ContrastStyledTableCellBody>
+ <ContrastStyledTableCellBody align="left">{row.name}</ContrastStyledTableCellBody>
+ {/* <ContrastStyledTableCellBody align="left">{row.state_name}</ContrastStyledTableCellBody>
+ <ContrastStyledTableCellBody align="left">{row.city_name}</ContrastStyledTableCellBody> */}
+ </TableRow>
+ })
}
- </TableRow>
- </TableHead>
- <TableBody>
- {props.rows.map(row => (
- <>
- {console.log(row)}
- <StyledTableRow onClick={() => onClick(row)} key={row.id}>
- <StyledTableCell component="th" scope="row">
- {row.id}
- </StyledTableCell>
- <StyledTableCell align="left">{row.name}</StyledTableCell>
- <StyledTableCell align="left">{row.state_name}</StyledTableCell>
- <StyledTableCell align="left">{row.city_name}</StyledTableCell>
- </StyledTableRow>
- </>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ </TableBody>
+ </Table>
+ </TableContainer>
</>
);
}
+
+
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index 076569fe9c5ebe7d20f97a07f05eef028a89bf1d..f2e09f1c5aacbddf1261047a03963ff03b4dc7ed 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -34,6 +34,9 @@ import ModalCancelar from './ModalCancelar.js'
import { getDefaultThumbnail } from '../HelperFunctions/getDefaultThumbnail'
import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
import ReCaptcha from 'react-recaptcha'
+import Chip from '@material-ui/core/Chip'
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
export default function PartThree(props) {
var moment = require('moment')
@@ -50,7 +53,7 @@ export default function PartThree(props) {
console.log(data.tags)
console.log(data.language)
console.log(data.subjects)
- // console.log(data.tags)
+ console.log(data)
setDraft(data)
/*extract subjects*/
@@ -71,7 +74,6 @@ export default function PartThree(props) {
}
}, [state.currentUser.id])
- let windowWidth = window.innerWidth
const [modalCancelar, toggleModalCancelar] = useState(false)
const checkAccessLevel = (levelToCheck) => {
@@ -105,403 +107,281 @@ export default function PartThree(props) {
<Grid container style={props.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
<Grid item xs={12}>
<StyledSessao1 contrast={props.contrast} className="page-content-preview">
- <div className="cabecalho">
- <div className="feedback-upload">
- <Stepper contrast={props.contrast} 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 className='header'>
+ <Stepper activeStep={props.activeStep} contrast={props.contrast} />
+ <h2>Quase lá, agora só falta publicar!</h2>
+ <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
</div>
</StyledSessao1>
- <CaixaContainer contrast={props.contrast}>
- <div>
- <div className="cabecalho-objeto">
- <img alt="" className="img-objeto"
+ <MainContent contrast={props.contrast} >
+ <CaixaContainer contrast={props.contrast} container spacing={2} className='draft-info'>
+ <Grid item xs={12} md={4}>
+ <img alt="" style={{ width: "100%", height: '100%' }}
src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail} />
- <div className="texto-objeto">
- <h3>{draft.name}</h3>
- <div className="relacionado">
- Relacionado com: {subjects}
- </div>
-
- {
- draft.tags &&
- <div className="tags-objeto">
- Palavras chave: <br/>
- {draft.tags.map((tag) => {
- return (
- <div className="tag" key={tag.name}>{tag.name}</div>
- )
- })}
- </div>
- }
-
- </div>
- </div>
-
- <div className="sobre-objeto">
+ </Grid>
+ <Grid item xs={12} md={8}>
+ <Grid container justify='space-between'>
+ <Grid item xs={12}>
+ <h3>{draft.name}</h3>
+ </Grid>
+ <Grid item xs={12}>
+ <Grid container spacing={1}>
+ <Grid item xs={12}>
+ <Rating
+ readOnly
+ name="customized-empty"
+ value={draft.score}
+ precision={0.5}
+ style={props.contrast === "" ? { color: "#666" } : { color: "white" }}
+ emptyIcon={<StarBorderIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} fontSize="inherit" />}
+ />
+ </Grid>
+ <Grid item xs={12}>
+ Relacionado com: {subjects}
+ </Grid>
+ <Grid item xs={12}>
+ {
+ draft.tags &&
+ draft.tags.map((tag) => {
+ return (
+ <Chip className='tag' key={tag.name} label={tag.name} />
+ )
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </CaixaContainer>
+ </MainContent>
+ <MainContent contrast={props.contrast}>
+ <CaixaContainer contrast={props.contrast} container spacing={2}>
+ <Grid item xs={12}>
+ <h1 className='title'>
+ Sobre o recurso
+ </h1>
+ </Grid>
+ <Grid item xs={12}>
+ <hr />
+ </Grid>
+ <Grid item xs={12} sm={6}>
<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>
+ <Grid item xs={12}>
+ {
+ description !== '' &&
+ <p>
+ <b>Descrição:</b>
+ <br />
+ {description}
+ </p>
+ }
+ </Grid>
+ <Grid item xs={12}>
+ {
+ author !== '' &&
+ <p>
+ <b>Autoria:</b>
+ <br />
+ {author}
+ </p>
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={12} sm={6}>
+ <Grid container spacing={1}>
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <MoreIcon />
+ </Grid>
+ <Grid item>
+ <b>Tipo de mídia: </b>{draft.object_type}
+ </Grid>
+ </Grid>
</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>
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <SdCardIcon />
+ </Grid>
+ <Grid item>
+ <b>Tamanho: </b>{draft.attachments ? (draft.attachments[0].size / 1000000).toFixed(2) + ' Mb' : "Informação não disponível"}
+ </Grid>
+ </Grid>
+ </Grid>
- <span className="meta-objeto">
- <DateRangeIcon /> <b>Enviado: </b>
- {moment(draft.created_at).format("DD/MM/YYYY")}
- </span>
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <DateRangeIcon />
+ </Grid>
+ <Grid item>
+ <b>Enviado: </b>
+ {moment(draft.created_at).format("DD/MM/YYYY")}
+ </Grid>
+ </Grid>
+ </Grid>
- <span className="meta-objeto">
- <UpdateIcon /><b>Atualização: </b>
- {moment(draft.updated_at).format("DD/MM/YYYY")}
- </span>
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <UpdateIcon />
+ </Grid>
+ <Grid item>
+ <b>Atualização: </b>
+ {moment(draft.updated_at).format("DD/MM/YYYY")}
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={12}>
{draft.language &&
draft.language.map((language =>
- <span className="meta-objeto" key={language.id}>
- <TranslateIcon /><b>Idioma: </b>{language.name}
- </span>
+ <Grid key={language.id} container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <TranslateIcon />
+ </Grid>
+ <Grid item>
+ <b>Idioma: </b>{language.name}
+ </Grid>
+ </Grid>
))
}
+ </Grid>
+
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <AssignmentIcon />
+ </Grid>
+ <Grid item>
+ <b>Licença: </b>{draft.license ? draft.license.name : "Informação não disponível"}
- <span className="meta-objeto">
- <AssignmentIcon /><b>Licença: </b>{draft.license ? draft.license.name : ""}
- </span>
+ </Grid>
+ </Grid>
</Grid>
</Grid>
- </div>
- </div>
- </CaixaContainer>
- <Sessao3 contrast={props.contrast}>
- <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>
+ </CaixaContainer>
+ </MainContent>
+ <MainContent contrast={props.contrast}>
+ <CaixaContainer contrast={props.contrast} container spacing={2} justify='center' alignItems='center'>
+ <Grid item xs={12} className='center'>
+ <Grid container direction='row' alignItems='center' justify='space-between' >
+ <Grid item>
+ <h4>
+ Para segurança da plataforma marque que você não é um robô
+ </h4>
+ </Grid>
+ <Grid item>
+ <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} />
+ </Grid>
</Grid>
- <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px" }}>
- <div style={{ margin: "0 auto", width: "304px" }}>
+ </Grid>
+ <Grid item xs={12} className='center'>
+ <Grid container direction='row' spacing={1} alignItems='center' justify='center'>
+ <Grid item>
+ <GrayButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
+ </Grid>
+ <Grid item>
+ <GrayButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
+ </Grid>
+ <Grid item>
{
- //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
- //<ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
- <ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
- }
- </div>
- </Grid>
- <Grid item xs={12} style={{ paddingRight: "15px", paddingLeft: "15px", marginTop: "30px", textAlign: 'center' }}>
- <GrayButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
- <GrayButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
- {
- checkAccessLevel("partner") ?
- (
- unavailableButton ? (
- <GrayButton contrast={props.contrast} disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
- )
- :
+ checkAccessLevel("partner") ?
(
- <OrangeButton contrast={props.contrast} onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
- )
- )
- :
- (
- unavailableButton ? (
- <GrayButton contrast={props.contrast} disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
+ unavailableButton ? (
+ <GrayButton contrast={props.contrast} disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
+ )
+ :
+ (
+ <OrangeButton contrast={props.contrast} onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
+ )
)
:
(
- <OrangeButton contrast={props.contrast} onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
- )
- )
+ unavailableButton ? (
+ <GrayButton contrast={props.contrast} disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
+ )
+ :
+ (
+ <OrangeButton contrast={props.contrast} onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
+ )
+ )
- }
+ }
+ </Grid>
</Grid>
</Grid>
- </form>
- </Sessao3>
+ </CaixaContainer>
+ </MainContent>
</Grid>
</Grid>
</React.Fragment>
)
:
(
- <LoadingSpinner contrast={props.contrast} text="CARREGANDO" />
+ <LoadingSpinner text="CARREGANDO" contrast={props.contrast} />
)
}
- </React.Fragment>
+ </React.Fragment >
)
}
-const Sessao3 = styled.div`
- position : relative;
- top : -120px;
- padding-right :15px;
- padding-left :15px;
- margin-right : auto;
- margin-left : auto;
- @media screen and (min-width: 768px) {
- width : 750px;
- }
- @media screen and (min-width: 992px) {
- width : 970px;
- }
- @media screen and (min-width: 1200px) {
- width : 970px;
- }
+const MainContent = styled.div`
color: ${props => props.contrast === "" ? "#666" : "white"};
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
-
+ border-radius : 5px;
+ padding : 20px 10px;
+ width: 80%;
+ margin: 1.5em auto;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
`
-const CaixaContainer = styled.div`
- background: ${props => props.contrast === "" ? "rgba(238,238,238,.5)" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- border-radius : 5px;
- position : relative;
- top : -145px;
- padding : 10px;
+const CaixaContainer = styled(Grid)`
+ width: 100%;
-
- margin-right : auto;
- margin-left : auto;
- @media screen and (min-width: 768px) {
- width : 750px;
+ .draft-info{
+ padding : 10px 5px;
}
- @media screen and (min-width: 992px) {
- width : 970px;
- }
- @media screen and (min-width: 1200px) {
- width : 970px;
- }
-
-
- .cabecalho-objeto {
- background: ${props => props.contrast === "" ? "#fff" : "black"};
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 0;
- margin-top: 30px;
- margin-bottom: 30px;
- position: relative;
- min-height: 100px;
- margin-top: 0;
- margin-bottom: 10px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- overflow: auto;
-
- .img-objeto {
- background: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
- height: 270px;
- width: 400px;
- float: left;
- padding: 0;
- }
- .texto-objeto {
- padding: 20px 20px 0 20px;
- height: content;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -ms-flex-line-pack: center;
- align-content: center;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-
- h3 {
- font-size: 26px;
- font-weight: 400;
- margin: 0;
- padding-bottom: 15px;
- }
-
- .rating-objeto {
- margin : 0;
- display : inline-flex;
- padding-bottom : 10px;
- }
-
- .relacionado {
- font-weight : 500;
- font-size : 13px;
- }
-
- .tags-objeto {
- max-height: 54px;
- font-size: .8em;
- overflow: hidden;
- clear: both;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-
- .tag {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- margin-right: 3px;
- background: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- padding: 3px 7px;
- border-radius: 15px;
- line-height: 18px;
- margin-bottom: 3px;
- }
- }
- }
+ .tag{
+ color: ${props => props.contrast === "" ? "black" : "white"};
+ background: ${props => props.contrast === "" ? "#d4d4d4" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ margin: 0.2em;
}
- .sobre-objeto {
- margin-top : 0;
- margin-bottom : 0;
- min-height : 275px;
- display : flex;
- background: ${props => props.contrast === "" ? "#fff" : "black"};
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 0;
- position: relative;
- min-height: 500px;
-
- .left {
- @media screen and (min-width : 990px) {
- margin-left : 4% !important;
- margin-top : 4% !important;
- }
-
- @media screen and (max-width : 989px) {
- margin : 0;
- padding : 20px;
- padding-bottom : 0;
- }
-
- .titulo {
- margin-top: 2% !important;
- margin-bottom: 10px;
- font-family: 'Roboto Light','Roboto Regular',Roboto;
- font-weight: 300;
- font-style: normal;
- font-size: 1.857em;
- }
-
- .sobre-conteudo {
- flex : 1;
- font-size : 14px !important;
-
- .descricao {
- text-align: justify;
- margin-bottom: 20px;
- margin-top: 20px;
- }
-
- .autor {
- margin : 0 0 10px !important;
- }
- }
- }
-
- .right {
- margin-top : 4% !important;
- border-left: 1px solid #e5e5e5;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- padding: 20px;
- position : relative;
- margin-bottom : 20px;
-
- .meta-objeto {
- position: relative;
- width: 100%;
- font-size: 14px;
- margin-bottom: 20px;
- display : inline-block;
- }
+ .title{
+ text-align: center;
+ font-weight: lighter;
+ }
- .MuiSvgIcon-root {
- vertical-align : middle !important;
- margin-right : 15px !important;
- }
- }
+ .center{
+ text-align: center;
}
-}
`
const StyledSessao1 = styled.div`
color : #fff;
background: ${props => props.contrast === "" ? "#00bcd4" : "black"};
- float : none;
height : 300px;
- text-align : center;
padding-top : 48px;
padding-bottom : 48px;
- margin-bottom : 30px;
-
- .cabecalho {
- display : flex;
- flex-direction : column;
- align-items : center;
- margin-bottom : 30px;
-
- .feedback-upload {
- display : flex;
- flex-direction : column;
- justify-content : center;
- text-align : center;
- margin-top : 20px;
- width : 55%;
- }
-
- h2 {
- margin-top : 0;
- font-size : 26px;
- font-weight : lighter;
- margin-bottom : 10px;
- }
-
- .subtitle {
- font-size : 16px;
-
- }
+ flex-direction : column;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+
+ .header{
+ width: 50%;
+ margin: 0 auto;
+ text-align: center;
}
`
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index 4175e17f10d43636e90f912f49f8866e6ee1501b..a4acce469786ff8af28648a0d4a31f4751a1a83e 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -22,26 +22,47 @@ import Check from '@material-ui/icons/Check';
import Grid from '@material-ui/core/Grid';
export default function CustomizedSteppers(props) {
- console.log(props);
- return (
- <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
- {
- [0, 1, 2].map((index) => {
+ function isInFinalSTep(step) {
+ return step === 2;
+ }
+
+ return (
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
+ {
+ !isInFinalSTep(props.activeStep) ?
+
+ [0, 1, 2].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ }
+ </div>
+ </Grid>
+ )
+ })
+ :
+ [0, 1, 2].map((index) => {
return (
- <Grid item key={new Date().toISOString() + index}>
- <div className={props.activeStep === index ? "currStep" : "step"}>
- {
- index < props.activeStep ?
- <Check style={props.contrast === "" ? { color: "#666" } : { color: "white" }} /> : `${index + 1}`
- }
- </div>
- </Grid>
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+ {
+ index < props.activeStep ?
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index}
+ </span>
+ }
+ </div>
+ </Grid>
)
- })
- }
- </MainGrid >
- );
+ })
+ }
+ </MainGrid >
+ );
}
const MainGrid = styled(Grid)`
@@ -62,14 +83,25 @@ const MainGrid = styled(Grid)`
border-radius: 50%;
}
- .step{
- height: 30px;
- width: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
- border-radius: 50%;
- }
+ .step{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
+ border-radius: 50%;
+ }
+
+ .finalStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid white;
+ border-radius: 50%;
+ color: white;
+ }
`
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index b1e360262cb0a7c910a75575041e7f7e6939cf0d..9c9a2554bf9c0ea8b5a7e8901be3cd8d906c8efd 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -1,18 +1,18 @@
-import React, {useState,useContext} from 'react'
-import {Store} from '../Store.js'
+import React, { useState, useContext } from 'react'
+import { Store } from '../Store.js'
import Paper from '@material-ui/core/Paper';
import PartOne from '../Components/PageProfessorComponents/PartOne.js'
import PartTwo from '../Components/PageProfessorComponents/PartTwo.js'
import PartThree from '../Components/PageProfessorComponents/PartThree.js'
import SuccessfulRequest from '../Components/PageProfessorComponents/SuccessfulRequest.js'
import ModalConfirmarProfessor from '../Components/PageProfessorComponents/ModalConfirmarProfessor.js'
-import {postRequest} from '../Components/HelperFunctions/getAxiosConfig'
+import { postRequest } from '../Components/HelperFunctions/getAxiosConfig'
-export default function PageProfessor (props) {
- const {state} = useContext(Store)
+export default function PageProfessor(props) {
+ const { state } = useContext(Store)
const [modalOpen, toggleModal] = useState(false)
const handleModal = () => {
- toggleModal(!modalOpen) ;
+ toggleModal(!modalOpen);
}
const redirect = () => {
@@ -24,39 +24,36 @@ export default function PageProfessor (props) {
teacher_cpf: '',
school_phone: '',
school_name: '',
- school_city : '',
- school_uf : {
- abbreviation : '',
- name : ''
+ school_city: '',
+ school_uf: {
+ abbreviation: '',
+ name: ''
},
inep_code: ''
}
)
- const [stepper, handleStepper] = useState(
- [ {value : '1', selected : true}, {value : '2', selected : false}, {value : '3', selected : false}, {value : '4', selected : false}]
- )
- const toggleStepper = (selected1, selected2, selected3, selected4) => {
- handleStepper(
- [
- {value : '1', selected : selected1},
- {value : '2', selected : selected2},
- {value : '3', selected : selected3},
- {value : '4', selected : selected4}
- ]
- )
+ const [activeStep, setActiveStep] = useState(0);
+
+ const incrementStep = () => {
+ setActiveStep((previous) => previous + 1);
+ }
+
+ const decrementStep = () => {
+ setActiveStep((previous) => previous - 1);
}
const handleBuscarParteUm = (ufAbbreviation, ufName, nomeMunicipio, inep) => {
- setRegisterInformation({...registerInformation,
- school_uf : {
+ setRegisterInformation({
+ ...registerInformation,
+ school_uf: {
abbreviation: (ufAbbreviation ? ufAbbreviation : ''),
- name : (ufName ? ufName : '')
+ name: (ufName ? ufName : '')
},
- school_city : (nomeMunicipio ? nomeMunicipio : ''),
- inep_code : (inep ? inep : '')
+ school_city: (nomeMunicipio ? nomeMunicipio : ''),
+ inep_code: (inep ? inep : '')
})
- toggleStepper(false, true, false, false)
+ incrementStep()
}
const handleBuscarParteDois = (city_name, inep, school_name, state_name) => {
@@ -64,20 +61,22 @@ export default function PageProfessor (props) {
const prev_state_name = registerInformation.school_uf.name
const prev_city_name = registerInformation.school_city.name
- setRegisterInformation({...registerInformation,
- school_uf : {
- abbreviation : uf_abbreviation,
+ setRegisterInformation({
+ ...registerInformation,
+ school_uf: {
+ abbreviation: uf_abbreviation,
name: (state_name ? state_name : prev_state_name)
},
- school_city :(city_name ? city_name : prev_city_name),
+ school_city: (city_name ? city_name : prev_city_name),
school_name: (school_name ? school_name : ''),
- inep_code : (inep ? inep : '')
+ inep_code: (inep ? inep : '')
})
- toggleStepper(false, false, true, false)
+ incrementStep();
}
const handleParteTres = (phone, cpf) => {
- setRegisterInformation({...registerInformation,
+ setRegisterInformation({
+ ...registerInformation,
teacher_cpf: (cpf ? cpf : ''),
school_phone: (phone ? phone : ''),
})
@@ -88,74 +87,75 @@ export default function PageProfessor (props) {
props.history.push('/perfil/atualizacoes')
}
- function handleSuccessfulSubmit (data) {
+ function handleSuccessfulSubmit(data) {
toggleModal()
- toggleStepper(false, false, false, true)
+ incrementStep();
}
const handleFinalSubmit = () => {
const url = `/users/teacher_request`
+ console.log(registerInformation)
const payload = {
- city : registerInformation.school_city.name,
- cpf : registerInformation.teacher_cpf,
- inep_id : registerInformation.inep_code,
- phone : registerInformation.school_phone,
- school : registerInformation.school_name,
- uf : registerInformation.school_uf.name
+ city: registerInformation.school_city,
+ cpf: registerInformation.teacher_cpf.toString(),
+ inep_id: registerInformation.inep_code.toString(),
+ phone: registerInformation.school_phone.toString(),
+ school: registerInformation.school_name,
+ uf: registerInformation.school_uf.name,
}
- postRequest(url, payload, handleSuccessfulSubmit, (error) =>{console.log(error)})
+ postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) })
}
return (
<>
- {
- state.userAgreedToPublicationTerms?
- (
- <>
- <ModalConfirmarProfessor contrast={props.contrast} open={modalOpen} handleClose={handleModal}
- info={registerInformation} confirmar = {() => {handleFinalSubmit()}}
- cancelar = {() => {toggleModal()}}
- />
- <div style={{backgroundColor:"#f4f4f4", color:"#666"}}>
- <div style={{display: "flex", justifyContent:"center", paddingTop:"5vh", paddingBottom:"5vh"}}>
- <Paper elevation={3} style= {{width:"max-content"}}>
- <div style={{paddingRight:"15px", paddingLeft:"15px"}}>
- {stepper[0].selected &&
- <PartOne stepper={stepper} handleBuscar={handleBuscarParteUm}
- handleCancelar={handleCancelar}
- />
- }
- {stepper[1].selected &&
- <PartTwo stepper={stepper}
- info={registerInformation} goBack={toggleStepper}
- handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
- />
- }
- {stepper[2].selected &&
- <PartThree stepper={stepper} goBack={toggleStepper}
- handleCancelar={handleCancelar} info={registerInformation}
- handleSubmit={handleParteTres}
- />
- }
- {
- stepper[3].selected &&
- <SuccessfulRequest email={state.currentUser.email} history={props.history}/>
- }
- </div>
- </Paper>
+ {
+ state.userAgreedToPublicationTerms ?
+ (
+ <>
+ <ModalConfirmarProfessor contrast={props.contrast} open={modalOpen} handleClose={handleModal}
+ info={registerInformation} confirmar={() => { handleFinalSubmit() }}
+ cancelar={() => { toggleModal() }}
+ />
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4", color: "#666" } : { backgroundColor: "black", color: "white" }}>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "5vh", paddingBottom: "5vh" }}>
+ <Paper elevation={3} style={state.contrast === "" ? { width: "max-content" } : { width: "max-content", backgroundColor: "black", color: "white", border: '1px solid white' }}>
+ <div style={{ paddingRight: "15px", paddingLeft: "15px" }}>
+ {activeStep === 0 &&
+ <PartOne contrast={state.contrast} activeStep={activeStep} handleBuscar={handleBuscarParteUm}
+ handleCancelar={handleCancelar}
+ />
+ }
+ {activeStep === 1 &&
+ <PartTwo activeStep={activeStep} contrast={state.contrast}
+ info={registerInformation} goBack={decrementStep}
+ handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
+ />
+ }
+ {activeStep === 2 &&
+ <PartThree activeStep={activeStep} goBack={decrementStep} contrast={state.contrast}
+ handleCancelar={handleCancelar} info={registerInformation}
+ handleSubmit={handleParteTres}
+ />
+ }
+ {
+ activeStep === 3 &&
+ <SuccessfulRequest email={state.currentUser.email} history={props.history} contrast={state.contrast} />
+ }
+ </div>
+ </Paper>
+ </div>
</div>
- </div>
- </>
- )
- :
- (
- <>
- {redirect()}
- </>
- )
- }
+ </>
+ )
+ :
+ (
+ <>
+ {redirect()}
+ </>
+ )
+ }
</>
)
}