Alerta código QR

components/operador/qr.js

@@ -1,23 +1,40 @@
 import React, { useState } from 'react';
 import { QrReader } from 'react-qr-reader';
+import swal from 'sweetalert';
 
 function Qr(props){
     const [data, setData] = useState('No result');
+    const alerta = () =>{
+      swal({
+        title: "Invitado registrado",
+        button: "Aceptar",
+        timer:10000
+      }).then(() => {
+        window.location.reload(false);
+      });
+    }
+
   return (
     <>
       <QrReader
         onResult={(result, error) => {
           if (!!result) {
             setData(result?.text);
+            data;
           }
-
           if (!!error) {
             console.info(error);
           }
+            
         }}
         style={{ width: '100%' }}
       />
+      {(() => {
+            if(data!='No result'){
+              return alerta();
+            }
+        })()}
     </>
   );
-}
+};
 export default Qr;

components/profesores_registro/invitado.js

@@ -1,12 +1,47 @@
 import styles from "../../styles/invitado.module.css";
-import { Container, Row, Col,InputGroup,FormControl} from "react-bootstrap";
+import { Container, Row, Col,InputGroup,FormControl,Button} from "react-bootstrap";
+import { useInvitado } from "./useInvitado";
+
+const initialForm= {
+    nombre:"",
+    apellidos:"",
+    edad:18
+}
+const validationsForm=(form) =>{
+    let errors={};
+
+    if(!form.nombre.trim()){
+        errors.nombre="El campo 'Nombre' es requerido"
+    }
+    if(!form.apellidos.trim()){
+        errors.apellidos="El campo 'Apellidos' es requerido"
+    }
+
+    return errors
+}
+
+
 function Invitado(props){
+
+    const {
+        form,
+        errors,
+        loading,
+        response,
+        handleChange,
+        handleBlur,
+        handleSubmit} 
+        = useInvitado (initialForm,validationsForm);
+
+
     return(
         <Container>
+            <form onSubmit={handleSubmit} >
             <div className={`${styles.container}`}>
-                <Row>
-                <p class="text-center">INVITADO {props.numero}</p>
-                </Row>
+                <Row className="justify-content-md-center">
+                    <Col xs={3}>
+                <p className="text-center">INVITADO {props.numero}</p>
+                </Col></Row>
                 <Row>
                     <Col xs={5}>
                         <p className="text-end">Nombre(s):</p>
@@ -14,12 +49,16 @@ function Invitado(props){
                         <p className="text-end">Edad:</p>
                     </Col>
                     <Col xs={4}>
-                        <form>
                         <InputGroup className="mb-3">
                             <FormControl
                                 placeholder="Nombre"
                                 aria-label="nombre"
                                 aria-describedby="basic-addon2"
+                                name="nombre"
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                value={form.nombre}
+                                required
                             />
                         </InputGroup>
                         <InputGroup className="mb-3">
@@ -27,16 +66,26 @@ function Invitado(props){
                                 placeholder="Apellidos"
                                 aria-label="apellidos"
                                 aria-describedby="basic-addon2"
+                                name="apellidos"
+                                onChange={handleChange}
+                                onBlur={handleBlur}
+                                value={form.apellidos}
+                                required
                             />
                         </InputGroup>
                         <InputGroup className="mb-3">
-                            <Container>
+                            <Container 
+                            name="edad"
+                            onChange={handleChange}
+                            onBlur={handleBlur}
+                            value={form.edad}
+                            required
+                            >
                                 <div className="row justify-content-start">
                                     <div className="col-4">
                                         <div className="input-group mb-3 ">
                                             <select class="form-select" id="inputGroupSelect02">
-                                                <option selected>...</option>
-                                                <option value="18">18</option>
+                                                <option selected value="18">18</option>
                                                 <option value="19">19</option>
                                                 <option value="20">20</option>
                                                 <option value="21">21</option>
@@ -125,11 +174,25 @@ function Invitado(props){
                                 </div>        
                             </Container>
                         </InputGroup>
-                        </form>
+                        
+                {errors.nombre && <p style={styles}>{errors.nombre}</p>}
+                {errors.apellidos && <p style={styles}>{errors.apellidos}</p>}       
                     </Col>
                 </Row>
+                
             </div>
+            </form>
         </Container>
     )
 }
-export default Invitado;
+export default Invitado;
+
+/*
+<Row className="justify-content-md-center">
+                <Col xs={1}>
+                    <Button variant="primary" type="submit" className={`${styles.boton}`}>
+                        Registrar
+                    </Button>
+                </Col>
+                </Row>*/
+

components/profesores_registro/profesores.js

@@ -6,7 +6,9 @@ function Registro(){
     const[select,setSelect]=useState("0");
     return(
         <Container>
+            <Row className="justify-content-md-center"><Col>
             <div className={`${styles.titulo}`}>REGISTRO DE PROFESORES PARA LA OBTENCIÓN DE MEDALLAS</div>
+            </Col></Row>
         <Container className={`${styles.container}`}>
             <Row>
                 <Col className={`${styles.texto1}`}>
@@ -39,9 +41,10 @@ function Registro(){
             </Row>
 
         </Container>
+        <form>
         {(() => {
             switch(select){
-                case "1": return <Invitado numero="1" ></Invitado>;
+                case "1": return (<><Invitado numero="1" ></Invitado></>);
                 case "2": return (<><Invitado numero="1"></Invitado><Invitado numero="2"></Invitado></>
                 );
                 case "3": return (<><Invitado numero="1"></Invitado><Invitado numero="2"></Invitado><Invitado numero="3"></Invitado></>
@@ -52,11 +55,14 @@ function Registro(){
         <Row className="justify-content-md-center">
             <Col xs={1}>
                 <a href="./registro-exitoso">
-                <Button className={`${styles.boton1}`} size="lg">Registrar</Button>
+                <Button className={`${styles.boton1}`}>Siguiente</Button>
                 </a>
             </Col>
         </Row>
+        
+        </form>
     </Container>        
     );
 }
-export default Registro;
+export default Registro;
+//tiene que ser un boton de tipo submit?

components/profesores_registro/useInvitado.js

@@ -0,0 +1,29 @@
+import {useState} from 'react';
+
+
+export const useInvitado = (initialForm,validateForm) => {
+    const [form, setForm] = useState(initialForm);
+    const [errors, setErrors] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [response, setResponse] = useState(null);
+
+    const handleChange = (e) =>{
+        const {name,value}=e.target;
+        setForm({
+           ...form,
+           [name]:value 
+        });
+    }
+     const handleBlur = (e) =>{
+        handleChange(e);
+        setErrors(validateForm(form));
+    }
+    const handleSubmit = (e) =>{
+        e.preventDefault();
+        setErrors(validateForm(form));
+    }
+
+    return{
+        form,errors,loading,response,handleChange,handleBlur,handleSubmit
+    }
+};