katoikia-app/web-ui/web-react/src/components/GuardasSeguridad.js

import React, { useEffect, useState } from 'react';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

const GuardasSeguridad = () => {

    const [pokemones,setPokemones]=useState([]);
    const [urlFetch,setUrlFetch]=useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134');
    async function fetchP(){
    let nombres=await fetch(urlFetch, {method:'GET'});
    let pokemonesRes= await nombres.json();
    setPokemones(pokemonesRes.message);
    console.log(pokemones);
   }
    useEffect(()=>{
      fetchP();
    },[])

    function registrarGuarda() {
        var data = {
            dni: document.getElementById('identificacion').value,
            name: document.getElementById('nombre').value,
            last_name: document.getElementById('apellidos').value,
            email: document.getElementById('correo_electronico').value,
            phone: document.getElementById('telefono').value,
            password: document.getElementById('correo_electronico').value,
            user_type: "4", //4 es guarda
            status: "1",
            community_id:"62be68215692582bbfd77134"
        };
        var data2={
            dni: "98765",
            name: "Danielito",
            last_name: "Rodriguez",
            email: "danirodriguez@gmail.com",
            phone: 84664515,
            password: "1203",
            user_type: "2",
            status: "4",
            community_id:"62be68215692582bbfd77134"
        }
        console.log(data2);

         fetch('http://localhost:4000/user/createGuard', {
            cache: 'no-cache',
            method: 'POST',
            mode:'cors',
            body: JSON.stringify(data2),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(
            function (response) {
                if (response.status != 201)
                    console.log('Ocurrió un error con el servicio: ' + response.status);
                else
                    return response.json();
            }
        )
        .then(
            function (response) {
                fetchP();
            }
        )
        .catch(
            err => console.log('Ocurrió un error con el fetch', err)
        );
    }

    return (
        <div className="grid">
            <div className="col-12">
                <div className="card">
                    <h5>Guardas de seguridad</h5>
                    <DataTable value={pokemones}  scrollable scrollHeight="400px" scrollDirection="both" className="mt-3">
                        <Column field="name" header="Nombre" style={{ flexGrow: 1, flexBasis: '160px' }}></Column>
                        <Column field="last_name" header="Apellidos" style={{ flexGrow: 1, flexBasis: '160px' }} alignFrozen="left"></Column>
                        <Column field="dni" header="Identificación" style={{ flexGrow: 1, flexBasis: '160px' }}></Column>
                        <Column field="email" header="Correo electrónico" style={{ flexGrow: 1, flexBasis: '160px' }}></Column>
                        <Column field="phone" header="Telefóno" style={{ flexGrow: 1, flexBasis: '160px' }}></Column>
                    </DataTable>
                </div>
            </div>
            <div className="col-12">
                <div className="card">
                    <h5>Registro de un guarda de seguridad</h5>
                    <div className="p-fluid formgrid grid">
                        <div className="field col-12 md:col-6">
                            <label htmlFor="nombre">Nombre</label>
                            <InputText id="nombre" type="text" />
                        </div>
                        <div className="field col-12 md:col-6">
                            <label htmlFor="apellidos">Apellidos</label>
                            <InputText id="apellidos" type="text" />
                        </div>
                        <div className="field col-12 md:col-6">
                            <label htmlFor="correo_electronico">Correo electrónico</label>
                            <InputText id="correo_electronico" type="text" />
                        </div>
                        <div className="field col-12 md:col-6">
                            <label htmlFor="identificacion">Identificación</label>
                            <InputText id="identificacion" type="text" />
                        </div>
                        <div className="field col-12">
                            <label htmlFor="telefono">Teléfono</label>
                            <InputText id="telefono" type="number" rows="4" />
                        </div>
                        <Button label="Registrar" onClick={registrarGuarda}></Button>
                    </div>
                </div>
            </div>
        </div>

        
    )
}

export default React.memo(GuardasSeguridad);