segundo commit

src/App.js

@@ -1,45 +1,59 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import './App.css'
-import { Switch, Route, Redirect } from 'react-router-dom'
-import { useSelector } from 'react-redux'
-import { ThemeProvider, createMuiTheme, useMediaQuery } from '@material-ui/core'
-import { purple, teal } from '@material-ui/core/colors'
+import { Switch, Route, useHistory } from 'react-router-dom'
+import { ThemeProvider, createMuiTheme } from '@material-ui/core'
+import { red, teal } from '@material-ui/core/colors'
 
-import Login from './Components/Login'
-import Dashboard from './Components/Dashboard'
+import Inicio from './Screens/Inicio'
+import Formulario from './Screens/Formulario'
 
 function App() {
-	const logged = useSelector(state => state.login.logged)
+	const history = useHistory()
 
-	const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+	const estado = localStorage.getItem('estado')
+	useEffect(
+		() => {
+			if (estado === 'pendiente') history.push('/pendiente')
+			if (estado === 'finalizado') history.push('/finalizado')
+		},
+		[ estado, history ]
+	)
 
+	const primaryColor = teal[300]
+	const secondaryColor = red[300]
 
 	const theme = createMuiTheme({
 		palette: {
-			type: prefersDarkMode? 'dark' : 'light',
-			primary: { main: prefersDarkMode? teal[300] : '#009688' },
-			secondary: { main: prefersDarkMode? purple[300] : purple[700] },
-			background: { 
-				default: prefersDarkMode? '#121212' : '#fafafa',
-				level1: prefersDarkMode? '#212121' : '#fff',
-				level2: prefersDarkMode? '#212121' : '#f5f5f5',
-				paper: prefersDarkMode? '#424242' : '#fff'
+			type: 'dark',
+			primary: { main: primaryColor },
+			secondary: { main: secondaryColor },
+			background: {
+				default: '#121212',
+				level1: '#212121',
+				level2: '#212121',
+				paper: '#424242'
 			}
-		}
+        },
+        props: {
+            MuiPaper: {
+                variant: 'outlined'
+            },
+            MuiButton: {
+                variant: 'contained',
+                disableElevation: true,
+                style: {textTransform: 'none'}
+            }
+        }
 	})
 	return (
 		<ThemeProvider theme={theme}>
 			<Switch>
-				<Route exact path='/'>
-					<Login />
+                <Route path='/formulario'>
+                    <Formulario/>
+                </Route>
+				<Route path='/'>
+					<Inicio />
 				</Route>
-				{logged ? (
-					<Route path='/dashboard'>
-						<Dashboard />
-					</Route>
-				) : (
-					<Redirect to='/' />
-				)}
 			</Switch>
 		</ThemeProvider>
 	)

src/Components/Dashboard/index.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import { Box, makeStyles } from '@material-ui/core'
-
-const useStyles = makeStyles(theme => ({
-    root: {
-
-    }
-}))
-
-export default function Dashboard(){
-    const classes = useStyles()
-
-    return <Box className={classes.root}>
-        dashboard
-    </Box>
-}

src/Components/Login/index.js

@@ -1,16 +0,0 @@
-import React from 'react'
-import { Box, makeStyles } from '@material-ui/core'
-
-const useStyles = makeStyles(theme => ({
-    root: {
-
-    }
-}))
-
-export default function Login(){
-    const classes = useStyles()
-
-    return <Box className={classes.root}>
-        login
-    </Box>
-}

src/Screens/Confirmacion.js

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import {
+	Box,
+	Button,
+	Divider,
+	makeStyles,
+	Card,
+	Typography,
+	CardHeader,
+	CardActions,
+	CardContent
+} from '@material-ui/core'
+import { useHistory } from 'react-router-dom'
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: 'flex',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'center',
+		height: '100vh',
+		backgroundColor: theme.palette.background.default
+	},
+	card: {
+		display: 'flex',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'center',
+		padding: '0px 30px',
+		minHeight: '20vh'
+	},
+	actions: {
+		justifyContent: 'center'
+	}
+}))
+
+export default function Confirmacion() {
+	const classes = useStyles()
+	const [ intervalId, setIntervalId ] = useState(-1)
+	const [ min, seg, setRestante ] = useState({min: 0, seg:0})
+	const enviado = localStorage.getItem('enviado') || new Date()
+
+	const history = useHistory()
+
+	const calcularRestante = () => {
+		const res = enviado.getTime() - new Date().getTime()
+		setRestante({min: 0, seg: Math.round(res / (1000 * 60 * 60))})
+	}
+
+	const validar = () => {
+		history.push('/finalizado')
+	}
+
+	const reenviar = () => {
+        setIntervalId(setInterval(calcularRestante, 1000))
+    }
+
+    if (seg < 0 && min <0) clearInterval(intervalId)
+
+	return (
+		<Box className={classes.root}>
+			<Card>
+				<CardHeader
+					disableTypography
+					title={
+						<Typography variant='h5' align='center'>
+							Validar correo
+						</Typography>
+					}
+				/>
+				<Divider />
+				<CardContent>
+					<Typography paragraph variant='h6'>
+						Para finalizar con el registro, ingrese el codigo que recibió en su casilla de correo
+					</Typography>
+				</CardContent>
+				<Divider />
+				<CardActions className={classes.actions}>
+					<Button variant='contained' color='primary' onClick={reenviar} disabled={true}>
+						Reenviar ({min}:{seg})
+					</Button>
+					<Button variant='contained' color='primary' onClick={validar}>
+						Validar
+					</Button>
+				</CardActions>
+			</Card>
+		</Box>
+	)
+}

src/Screens/Formulario.js

@@ -0,0 +1,135 @@
+import React, { useState } from 'react'
+import {
+	Box,
+	Button,
+	Divider,
+	makeStyles,
+	Card,
+	Typography,
+	CardHeader,
+	CardActions,
+	CardContent,
+	TextField
+} from '@material-ui/core'
+import { useHistory } from 'react-router-dom'
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: 'flex',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'center',
+		height: '100vh',
+		backgroundColor: theme.palette.background.default
+	},
+	card: {
+		display: 'flex',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'center',
+		padding: '0px 30px',
+		minHeight: '20vh',
+		minWidth: '20vw'
+	},
+	actions: {
+		justifyContent: 'center'
+	}
+}))
+
+export default function Formulario() {
+	const classes = useStyles()
+	const [ { nombre, apellido, mail, confirmar, error, codigoInvalido, codigo }, setState ] = useState({
+		confirmar: false,
+		codigo: '',
+		nombre: '',
+		apellido: '',
+		mail: '',
+		error: false,
+		codigoInvalido: false
+	})
+
+	const history = useHistory()
+
+	const mailValido = () => mail.indexOf('@') !== -1 && mail.indexOf('.') !== -1
+
+	const siguiente = () => {
+		if (nombre && apellido && mailValido() && codigo) {
+			//put con los datos y ver si el colegio es valido, si no lo es, volver al formulario e indicar el error
+			//poner en el storage el estado de pendiente
+			setState(ps => ({ ...ps, confirmar: true }))
+		} else setState(ps => ({ ...ps, error: true }))
+	}
+
+	const enviar = () => {
+		history.push('/pendiente')
+	}
+
+	const fields = [
+		{
+			name: 'nombre',
+			value: nombre,
+			label: 'Nombre'
+		},
+		{
+			name: 'apellido',
+			value: apellido,
+			label: 'Apellido'
+		},
+		{
+			name: 'mail',
+			value: mail,
+			label: 'Correo',
+			error: error && !mailValido()
+		},
+		{
+			name: 'codigo',
+			value: codigo,
+			label: 'Codigo de colegio',
+			error: (error && !codigo) || codigoInvalido
+		}
+	]
+
+	return (
+		<Box className={classes.root}>
+			<Card>
+				<CardHeader
+					disableTypography
+					title={
+						<Typography variant='h5' align='center'>
+							{confirmar ? 'Confirmar datos' : 'Formulario'}
+						</Typography>
+					}
+				/>
+				<Divider />
+				<CardContent className={classes.card}>
+					{confirmar ? (
+						fields.map((field, i) => (
+							<Typography key={'ty-' + i} paragraph>
+								{field.label}: {field.value}
+							</Typography>
+						))
+					) : (
+						fields.map((field, i) => (
+							<TextField
+								key={'tf' + i}
+								error={error && !field.value}
+								{...field}
+								margin='normal'
+								fullWidth
+								required
+								variant='outlined'
+								onChange={({ target: { name, value } }) => setState(ps => ({ ...ps, [name]: value }))}
+							/>
+						))
+					)}
+				</CardContent>
+				<Divider />
+				<CardActions className={classes.actions}>
+					<Button variant='contained' color='primary' onClick={confirmar ? enviar : siguiente}>
+						{confirmar ? 'Enviar' : 'Siguiente'}
+					</Button>
+				</CardActions>
+			</Card>
+		</Box>
+	)
+}

src/Screens/Inicio.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import {
+	Box,
+	Button,
+	Divider,
+	makeStyles,
+	Card,
+	Typography,
+	CardHeader,
+	CardActions,
+    CardContent
+} from '@material-ui/core'
+import { useHistory } from 'react-router-dom'
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: 'flex',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'center',
+		height: '100vh',
+		backgroundColor: theme.palette.background.default
+	},
+	card: {
+		display: 'flex',
+		flexDirection: 'column',
+		alignItems: 'center',
+		justifyContent: 'center',
+        padding: '0px 30px',
+        minHeight: '20vh'
+    },
+    actions: {
+        justifyContent: 'center'
+    }
+}))
+
+export default function Inicio() {
+	const classes = useStyles()
+
+	const history = useHistory()
+
+	const comenzar = () => history.push('/formulario')
+
+	return (
+		<Box className={classes.root}>
+			<Card>
+				<CardHeader
+					disableTypography
+					title={
+						<Typography variant='h5' align='center'>
+							Bienvenido
+						</Typography>
+					}
+				/>
+				<Divider />
+				<CardContent>
+					<Typography variant='h6'>Para comenzar con el registro presione el boton de abajo</Typography>
+				</CardContent>
+				<Divider />
+				<CardActions className={classes.actions}>
+					<Button variant='contained' color='primary' onClick={comenzar}>
+						Comenzar
+					</Button>
+				</CardActions>
+			</Card>
+		</Box>
+	)
+}