|
|
@@ -1,4 +1,4 @@
|
|
1
|
|
-import React, { useState } from 'react'
|
|
|
1
|
+import React, { useEffect, useState } from 'react'
|
|
2
|
2
|
import {
|
|
3
|
3
|
Box,
|
|
4
|
4
|
Button,
|
|
|
@@ -8,7 +8,8 @@ import {
|
|
8
|
8
|
Typography,
|
|
9
|
9
|
CardHeader,
|
|
10
|
10
|
CardActions,
|
|
11
|
|
- CardContent
|
|
|
11
|
+ CardContent,
|
|
|
12
|
+ TextField
|
|
12
|
13
|
} from '@material-ui/core'
|
|
13
|
14
|
import { useHistory } from 'react-router-dom'
|
|
14
|
15
|
|
|
|
@@ -37,25 +38,38 @@ const useStyles = makeStyles(theme => ({
|
|
37
|
38
|
export default function Confirmacion() {
|
|
38
|
39
|
const classes = useStyles()
|
|
39
|
40
|
const [ intervalId, setIntervalId ] = useState(-1)
|
|
40
|
|
- const [ min, seg, setRestante ] = useState({min: 0, seg:0})
|
|
41
|
|
- const enviado = localStorage.getItem('enviado') || new Date()
|
|
|
41
|
+ const [ codigo, setCodigo ] = useState('')
|
|
|
42
|
+ const [ { min, seg }, setRestante ] = useState({ min: 0, seg: 0 })
|
|
42
|
43
|
|
|
43
|
44
|
const history = useHistory()
|
|
44
|
45
|
|
|
45
|
|
- const calcularRestante = () => {
|
|
46
|
|
- const res = enviado.getTime() - new Date().getTime()
|
|
47
|
|
- setRestante({min: 0, seg: Math.round(res / (1000 * 60 * 60))})
|
|
|
46
|
+ const calcularRestante = limite => {
|
|
|
47
|
+ const res = limite.getTime() - new Date().getTime()
|
|
|
48
|
+ setRestante({ min: Math.floor(res / 1000 / 60), seg: Math.round((res / 1000) % 60) })
|
|
48
|
49
|
}
|
|
49
|
50
|
|
|
|
51
|
+ useEffect(
|
|
|
52
|
+ () => {
|
|
|
53
|
+ reenviar()
|
|
|
54
|
+ },
|
|
|
55
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
56
|
+ []
|
|
|
57
|
+ )
|
|
|
58
|
+
|
|
|
59
|
+ if (seg <= 0 && min <= 0) clearInterval(intervalId)
|
|
|
60
|
+
|
|
50
|
61
|
const validar = () => {
|
|
51
|
|
- history.push('/finalizado')
|
|
|
62
|
+ if (codigo) history.push('/finalizado')
|
|
52
|
63
|
}
|
|
53
|
64
|
|
|
54
|
65
|
const reenviar = () => {
|
|
55
|
|
- setIntervalId(setInterval(calcularRestante, 1000))
|
|
56
|
|
- }
|
|
57
|
|
-
|
|
58
|
|
- if (seg < 0 && min <0) clearInterval(intervalId)
|
|
|
66
|
+ clearInterval(intervalId)
|
|
|
67
|
+ const ahora = new Date()
|
|
|
68
|
+ ahora.setMinutes(new Date().getMinutes() + 5)
|
|
|
69
|
+ console.log(ahora)
|
|
|
70
|
+ calcularRestante(ahora)
|
|
|
71
|
+ setIntervalId(setInterval(() => calcularRestante(ahora), 1000))
|
|
|
72
|
+ }
|
|
59
|
73
|
|
|
60
|
74
|
return (
|
|
61
|
75
|
<Box className={classes.root}>
|
|
|
@@ -73,13 +87,26 @@ export default function Confirmacion() {
|
|
73
|
87
|
<Typography paragraph variant='h6'>
|
|
74
|
88
|
Para finalizar con el registro, ingrese el codigo que recibió en su casilla de correo
|
|
75
|
89
|
</Typography>
|
|
|
90
|
+ <TextField
|
|
|
91
|
+ name='codigo'
|
|
|
92
|
+ value={codigo}
|
|
|
93
|
+ onChange={({ target: { value } }) => setCodigo(value)}
|
|
|
94
|
+ variant='outlined'
|
|
|
95
|
+ fullWidth
|
|
|
96
|
+ label='Codigo de confirmacion'
|
|
|
97
|
+ margin='normal'
|
|
|
98
|
+ />
|
|
76
|
99
|
</CardContent>
|
|
77
|
100
|
<Divider />
|
|
78
|
101
|
<CardActions className={classes.actions}>
|
|
79
|
|
- <Button variant='contained' color='primary' onClick={reenviar} disabled={true}>
|
|
80
|
|
- Reenviar ({min}:{seg})
|
|
|
102
|
+ <Button variant='contained' color='primary' onClick={reenviar} disabled={seg > 0 || min > 0}>
|
|
|
103
|
+ {seg > 0 || min > 0 ? (
|
|
|
104
|
+ `Reenviar (${min < 10 ? '0' : ''}${min}:${seg < 10 ? '0' : ''}${seg})`
|
|
|
105
|
+ ) : (
|
|
|
106
|
+ 'Reenviar'
|
|
|
107
|
+ )}
|
|
81
|
108
|
</Button>
|
|
82
|
|
- <Button variant='contained' color='primary' onClick={validar}>
|
|
|
109
|
+ <Button variant='contained' color='primary' onClick={validar} disabled={!codigo}>
|
|
83
|
110
|
Validar
|
|
84
|
111
|
</Button>
|
|
85
|
112
|
</CardActions>
|
