From 2c2e54bd1977c98a2095797e3a254db108b37bcb Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 02:37:06 -0600
Subject: [PATCH 01/12] add initial component

---
 .../src/components/InvitadosComunidad.js      | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 web-ui/web-react/src/components/InvitadosComunidad.js

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
new file mode 100644
index 00000000..c0cec4e2
--- /dev/null
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -0,0 +1,69 @@
+import { useCookies } from 'react-cookie';
+import { useState, useRef } from 'react';
+
+const InvitadosComunidad = () => {
+  const [cookies] = useCookies();
+  const [globalFilter, setGlobalFilter] = useState(null);
+  const [invitados, setInvitados] = useState([]);
+  const [selectedInvitados, setSelectedInvitados] = useState([]);
+  const tableRef = useRef(null);
+  const toast = useRef(null);
+  
+  const headerTemplate = (
+    <div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'>
+      <h5 className='m-0'>Invitados</h5>
+      <span className='block mt-2 md:mt-0 p-input-icon-left'>
+        <i className='pi pi-search' />
+        <InputText
+          type='search'
+          onInput={(e) => setGlobalFilter(e.target.value)}
+          placeholder='Buscar...'
+        />
+      </span>
+    </div>
+  );
+
+  return (
+    <div className='grid'>
+      <div className='col-12'>
+        <Toast ref={toastRef} />
+        <div className='card'>
+          <Toolbar
+            className='mb-4'
+            left={leftToolbarTemplate}
+            right={rightToolbarTemplate}
+          />
+          <DataTable
+            ref={tableRef}
+            value={invitados}
+            dataKey='_id'
+            paginator
+            rows={10}
+            selection={selectedInvitados}
+            onSelectionChange={(e) => setSelectedInvitados(e.value)}
+            scrollable
+            scrollHeight='500px'
+            scrollWidth='100%'
+            scrollDirection='both'
+            header={headerTemplate}
+            rowsPerPageOptions={[10, 20, 30]}
+            className='datatable-responsive mt-3'
+            paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown'
+            currentPageReportTemplate='{currentPage} de {totalPages}'
+            globalFilter={globalFilter}
+            emptyMessageTemplate='No se encontraron invitados'
+          >
+            <Column field='name' header='Nombre' sortable />
+            <Column field='last_name' header='Apellido' sortable />
+            <Column field='dni' header='DNI' sortable />
+            <Column field='number_plate' header='Placa' sortable />
+            <Column field='telefono' header='Teléfono' sortable />
+            <Column field='email' header='Email' sortable />
+            <Column field='date_entry' header='Fecha de registro' sortable />
+            <Column field='tenant_name' header='Inquilino' sortable />
+          </DataTable>
+        </div>
+      </div>
+    </div>
+  )
+}

From 84c2aff9119fae907949f3fe64bf0abd50470161 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 02:56:51 -0600
Subject: [PATCH 02/12] agregar invitados a menu

---
 web-ui/web-react/src/App.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web-ui/web-react/src/App.js b/web-ui/web-react/src/App.js
index 1551381d..08f0e13c 100644
--- a/web-ui/web-react/src/App.js
+++ b/web-ui/web-react/src/App.js
@@ -34,6 +34,7 @@ import GuardasSeguridad from './components/GuardasSeguridad';
 import Communities from './components/ComunidadViviendas';
 import Inquilinos from './components/Inquilinos';
 import RegistroComunicado from './components/RegistroComunicado';
+import InvitadosComunidad from './components/InvitadosComunidad';
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 
 import Crud from './pages/Crud';
@@ -203,6 +204,7 @@ const App = () => {
                 },
                 
                 { label: 'Comunicados', icon: PrimeIcons.COMMENTS, to: '/registroComunicado'},
+                { label: 'Invitados', icon: PrimeIcons.USERS, to: '/invitadosComunidad' },
     
             ]
         },

From 1adaa5bec71be5328d882f3aa679e42ecd99b6de Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 02:57:01 -0600
Subject: [PATCH 03/12] agregar imports

---
 web-ui/web-react/src/components/InvitadosComunidad.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index c0cec4e2..f55dfb64 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -1,3 +1,7 @@
+import { Column } from 'primereact/column'
+import { DataTable } from 'primereact/datatable'
+import { Toast } from 'primereact/toast'
+import { Toolbar } from 'primereact/toolbar'
 import { useCookies } from 'react-cookie';
 import { useState, useRef } from 'react';
 

From 7a192d9a682640eedb802b679e2b4dbc16ce920f Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 03:18:32 -0600
Subject: [PATCH 04/12] use correct imports

---
 web-ui/web-react/src/components/InvitadosComunidad.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index f55dfb64..7bd820b8 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -1,9 +1,11 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Button } from 'primereact/button'
+import { InputText } from 'primereact/inputtext'
 import { Column } from 'primereact/column'
 import { DataTable } from 'primereact/datatable'
 import { Toast } from 'primereact/toast'
 import { Toolbar } from 'primereact/toolbar'
 import { useCookies } from 'react-cookie';
-import { useState, useRef } from 'react';
 
 const InvitadosComunidad = () => {
   const [cookies] = useCookies();
@@ -11,7 +13,8 @@ const InvitadosComunidad = () => {
   const [invitados, setInvitados] = useState([]);
   const [selectedInvitados, setSelectedInvitados] = useState([]);
   const tableRef = useRef(null);
-  const toast = useRef(null);
+  const toastRef = useRef(null);
+
   
   const headerTemplate = (
     <div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'>

From 90fae98adb5995e2fa43bc9354494fdb3b60fa85 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 03:18:49 -0600
Subject: [PATCH 05/12] add initial fetch for invitados

---
 .../src/components/InvitadosComunidad.js        | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index 7bd820b8..451fb268 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -15,7 +15,24 @@ const InvitadosComunidad = () => {
   const tableRef = useRef(null);
   const toastRef = useRef(null);
 
+  const getInvitados = async () => {
+    console.log(`${process.env.REACT_APP_API_URL}`);
+    await fetch(`${process.env.REACT_APP_API_URL}/guest/allGuests`, {
+      method: 'GET',
+    })
+      .then(response => response.json())
+      .then(data => data.message)
+      .then(data => {
+        data = data.filter(invitado =>
+          invitado.community === cookies.community_id);
+        setInvitados(data);
+      })
+  }
   
+  useEffect(() => {
+  getInvitados();
+  }, [invitados]);
+
   const headerTemplate = (
     <div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'>
       <h5 className='m-0'>Invitados</h5>

From ec452b0a7ed654706c93fd7492478d3e6b9e97a7 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 03:19:36 -0600
Subject: [PATCH 06/12] add toolbar templates

---
 .../src/components/InvitadosComunidad.js      | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index 451fb268..a27fe730 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -33,6 +33,28 @@ const InvitadosComunidad = () => {
   getInvitados();
   }, [invitados]);
 
+  const leftToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <div className='my-2'>
+          <p>Boton Eliminar aqui</p>
+        </div>
+      </React.Fragment>
+    )
+  }
+
+  const rightToolbarTemplate = () => {
+    return (
+      <React.Fragment>
+        <Button
+          label='Exportar'
+          icon='pi pi-upload'
+          className='p-button-help'
+        />
+      </React.Fragment>
+    )
+  }
+
   const headerTemplate = (
     <div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'>
       <h5 className='m-0'>Invitados</h5>

From 03e12adbc2d0b6c7692113f0f27f1f4c50f578f2 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 03:19:47 -0600
Subject: [PATCH 07/12] export component

---
 web-ui/web-react/src/components/InvitadosComunidad.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index a27fe730..d4cf5772 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -113,3 +113,5 @@ const InvitadosComunidad = () => {
     </div>
   )
 }
+
+export default React.memo(InvitadosComunidad);

From 66bd6c4f781d621c90d6471d5b1bc07bf39cb348 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 03:33:06 -0600
Subject: [PATCH 08/12] actually show component :P

---
 web-ui/web-react/src/App.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web-ui/web-react/src/App.js b/web-ui/web-react/src/App.js
index 08f0e13c..2acf186f 100644
--- a/web-ui/web-react/src/App.js
+++ b/web-ui/web-react/src/App.js
@@ -202,10 +202,10 @@ const App = () => {
                     icon: PrimeIcons.BUILDING,
                     to: '/areasComunes',
                 },
-                
-                { label: 'Comunicados', icon: PrimeIcons.COMMENTS, to: '/registroComunicado'},
+
+                { label: 'Comunicados', icon: PrimeIcons.COMMENTS, to: '/registroComunicado' },
                 { label: 'Invitados', icon: PrimeIcons.USERS, to: '/invitadosComunidad' },
-    
+
             ]
         },
     ]
@@ -470,6 +470,7 @@ const App = () => {
                                                 <Route path="/inquilinos" component={Inquilinos} />
                                                 <Route path="/areasComunes" component={AreasComunes} />
                                                 <Route path="/registroComunicado" component={RegistroComunicado} />
+                                                <Route path="/invitadosComunidad" component={InvitadosComunidad} />
                                             </>
                                         )
                                     } else {

From 5db4e8ece3494c6eb6136d3b504b3347dc759047 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 03:33:40 -0600
Subject: [PATCH 09/12] add column headers

---
 .../src/components/InvitadosComunidad.js      | 89 +++++++++++++++----
 1 file changed, 71 insertions(+), 18 deletions(-)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index d4cf5772..81a74005 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -1,11 +1,19 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Button } from 'primereact/button'
-import { InputText } from 'primereact/inputtext'
-import { Column } from 'primereact/column'
-import { DataTable } from 'primereact/datatable'
-import { Toast } from 'primereact/toast'
-import { Toolbar } from 'primereact/toolbar'
-import { useCookies } from 'react-cookie';
+import React, { useEffect, useState, useRef } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Dialog } from 'primereact/dialog';
+import { Toolbar } from 'primereact/toolbar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUserAlt } from '@fortawesome/free-solid-svg-icons';
+import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
+import { faAt } from '@fortawesome/free-solid-svg-icons';
+import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
+import { useCookies } from "react-cookie";
+import classNames from 'classnames';
 
 const InvitadosComunidad = () => {
   const [cookies] = useCookies();
@@ -28,9 +36,9 @@ const InvitadosComunidad = () => {
         setInvitados(data);
       })
   }
-  
+
   useEffect(() => {
-  getInvitados();
+    getInvitados();
   }, [invitados]);
 
   const leftToolbarTemplate = () => {
@@ -55,6 +63,51 @@ const InvitadosComunidad = () => {
     )
   }
 
+  const headerName = (
+    <>
+      <p>{' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
+        Nombre
+      </p>
+    </>
+  )
+
+  const headerLastName = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
+        Apellido(s)
+      </p>
+    </>
+  )
+
+  const headerDNI = (
+    <p> {' '}
+      <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
+      Identificación
+    </p>
+  )
+
+  const headerEmail = (
+    <>
+      <p> {' '}
+        <FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />{' '}
+        Correo Electrónico
+      </p>
+    </>
+  )
+
+  const headerPhone = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#C08135' }} />{' '}
+        Teléfono
+      </p>
+    </>
+  )
+
   const headerTemplate = (
     <div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'>
       <h5 className='m-0'>Invitados</h5>
@@ -99,14 +152,14 @@ const InvitadosComunidad = () => {
             globalFilter={globalFilter}
             emptyMessageTemplate='No se encontraron invitados'
           >
-            <Column field='name' header='Nombre' sortable />
-            <Column field='last_name' header='Apellido' sortable />
-            <Column field='dni' header='DNI' sortable />
-            <Column field='number_plate' header='Placa' sortable />
-            <Column field='telefono' header='Teléfono' sortable />
-            <Column field='email' header='Email' sortable />
-            <Column field='date_entry' header='Fecha de registro' sortable />
-            <Column field='tenant_name' header='Inquilino' sortable />
+            <Column field='name' header='Nombre' sortable header={headerName} />
+            <Column field='last_name' header='Apellido' sortable header={headerLastName} />
+            <Column field='dni' header='DNI' sortable header={headerDNI} />
+            <Column field='number_plate' header='Placa' sortable header={headerDNI} />
+            <Column field='telefono' header='Teléfono' sortable header={headerPhone} />
+            <Column field='email' header='Email' sortable header={headerEmail} />
+            <Column field='date_entry' header='Fecha de registro' sortable header={headerName} />
+            <Column field='tenant_name' header='Inquilino' sortable header={headerName} />
           </DataTable>
         </div>
       </div>

From 64f9216b5f0c3cf66e44187e09ba2febbb5b4c54 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 03:40:54 -0600
Subject: [PATCH 10/12] format

---
 .../src/components/InvitadosComunidad.js      | 151 +++++++++++-------
 1 file changed, 92 insertions(+), 59 deletions(-)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index 81a74005..9e24b3b6 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -6,13 +6,13 @@ import { Column } from 'primereact/column';
 import { Toast } from 'primereact/toast';
 import { Dialog } from 'primereact/dialog';
 import { Toolbar } from 'primereact/toolbar';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserAlt } from '@fortawesome/free-solid-svg-icons';
 import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
 import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
-import { useCookies } from "react-cookie";
+import { useCookies } from 'react-cookie';
 import classNames from 'classnames';
 
 const InvitadosComunidad = () => {
@@ -28,14 +28,15 @@ const InvitadosComunidad = () => {
     await fetch(`${process.env.REACT_APP_API_URL}/guest/allGuests`, {
       method: 'GET',
     })
-      .then(response => response.json())
-      .then(data => data.message)
-      .then(data => {
-        data = data.filter(invitado =>
-          invitado.community === cookies.community_id);
+      .then((response) => response.json())
+      .then((data) => data.message)
+      .then((data) => {
+        data = data.filter(
+          (invitado) => invitado.community === cookies.community_id,
+        );
         setInvitados(data);
-      })
-  }
+      });
+  };
 
   useEffect(() => {
     getInvitados();
@@ -44,59 +45,61 @@ const InvitadosComunidad = () => {
   const leftToolbarTemplate = () => {
     return (
       <React.Fragment>
-        <div className='my-2'>
+        <div className="my-2">
           <p>Boton Eliminar aqui</p>
         </div>
       </React.Fragment>
-    )
-  }
+    );
+  };
 
   const rightToolbarTemplate = () => {
     return (
       <React.Fragment>
         <Button
-          label='Exportar'
-          icon='pi pi-upload'
-          className='p-button-help'
+          label="Exportar"
+          icon="pi pi-upload"
+          className="p-button-help"
         />
       </React.Fragment>
-    )
-  }
+    );
+  };
 
   const headerName = (
     <>
-      <p>{' '}
-        <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
-        Nombre
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Nombre
       </p>
     </>
-  )
+  );
 
   const headerLastName = (
     <>
       <p>
         {' '}
-        <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#D7A86E' }} />{' '}
         Apellido(s)
       </p>
     </>
-  )
+  );
 
   const headerDNI = (
-    <p> {' '}
-      <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
+    <p>
+      {' '}
+      <FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
       Identificación
     </p>
-  )
+  );
 
   const headerEmail = (
     <>
-      <p> {' '}
-        <FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />{' '}
-        Correo Electrónico
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faAt} style={{ color: '#D7A86E' }} /> Correo
+        Electrónico
       </p>
     </>
-  )
+  );
 
   const headerPhone = (
     <>
@@ -106,65 +109,95 @@ const InvitadosComunidad = () => {
         Teléfono
       </p>
     </>
-  )
+  );
 
   const headerTemplate = (
-    <div className='flex flex-column md:flex-row md:justify-content-between md:align-items-center'>
-      <h5 className='m-0'>Invitados</h5>
-      <span className='block mt-2 md:mt-0 p-input-icon-left'>
-        <i className='pi pi-search' />
+    <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+      <h5 className="m-0">Invitados</h5>
+      <span className="block mt-2 md:mt-0 p-input-icon-left">
+        <i className="pi pi-search" />
         <InputText
-          type='search'
+          type="search"
           onInput={(e) => setGlobalFilter(e.target.value)}
-          placeholder='Buscar...'
+          placeholder="Buscar..."
         />
       </span>
     </div>
   );
 
   return (
-    <div className='grid'>
-      <div className='col-12'>
+    <div className="grid">
+      <div className="col-12">
         <Toast ref={toastRef} />
-        <div className='card'>
+        <div className="card">
           <Toolbar
-            className='mb-4'
+            className="mb-4"
             left={leftToolbarTemplate}
             right={rightToolbarTemplate}
           />
           <DataTable
             ref={tableRef}
             value={invitados}
-            dataKey='_id'
+            dataKey="_id"
             paginator
             rows={10}
             selection={selectedInvitados}
             onSelectionChange={(e) => setSelectedInvitados(e.value)}
             scrollable
-            scrollHeight='500px'
-            scrollWidth='100%'
-            scrollDirection='both'
+            scrollHeight="500px"
+            scrollWidth="100%"
+            scrollDirection="both"
             header={headerTemplate}
             rowsPerPageOptions={[10, 20, 30]}
-            className='datatable-responsive mt-3'
-            paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown'
-            currentPageReportTemplate='{currentPage} de {totalPages}'
+            className="datatable-responsive mt-3"
+            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+            currentPageReportTemplate="{currentPage} de {totalPages}"
             globalFilter={globalFilter}
-            emptyMessageTemplate='No se encontraron invitados'
+            emptyMessageTemplate="No se encontraron invitados"
           >
-            <Column field='name' header='Nombre' sortable header={headerName} />
-            <Column field='last_name' header='Apellido' sortable header={headerLastName} />
-            <Column field='dni' header='DNI' sortable header={headerDNI} />
-            <Column field='number_plate' header='Placa' sortable header={headerDNI} />
-            <Column field='telefono' header='Teléfono' sortable header={headerPhone} />
-            <Column field='email' header='Email' sortable header={headerEmail} />
-            <Column field='date_entry' header='Fecha de registro' sortable header={headerName} />
-            <Column field='tenant_name' header='Inquilino' sortable header={headerName} />
+            <Column field="name" header="Nombre" sortable header={headerName} />
+            <Column
+              field="last_name"
+              header="Apellido"
+              sortable
+              header={headerLastName}
+            />
+            <Column field="dni" header="DNI" sortable header={headerDNI} />
+            <Column
+              field="number_plate"
+              header="Placa"
+              sortable
+              header={headerDNI}
+            />
+            <Column
+              field="telefono"
+              header="Teléfono"
+              sortable
+              header={headerPhone}
+            />
+            <Column
+              field="email"
+              header="Email"
+              sortable
+              header={headerEmail}
+            />
+            <Column
+              field="date_entry"
+              header="Fecha de registro"
+              sortable
+              header={headerName}
+            />
+            <Column
+              field="tenant_name"
+              header="Inquilino"
+              sortable
+              header={headerName}
+            />
           </DataTable>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default React.memo(InvitadosComunidad);

From 47db7defbf959b2630adc136bc6fef42e8630720 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Tue, 23 Aug 2022 04:06:28 -0600
Subject: [PATCH 11/12] fix strings

---
 web-ui/web-react/src/components/InvitadosComunidad.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index 9e24b3b6..099f1849 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -24,8 +24,7 @@ const InvitadosComunidad = () => {
   const toastRef = useRef(null);
 
   const getInvitados = async () => {
-    console.log(`${process.env.REACT_APP_API_URL}`);
-    await fetch(`${process.env.REACT_APP_API_URL}/guest/allGuests`, {
+    await fetch(`http://localhost:4000/guest/allGuests`, {
       method: 'GET',
     })
       .then((response) => response.json())
@@ -40,7 +39,7 @@ const InvitadosComunidad = () => {
 
   useEffect(() => {
     getInvitados();
-  }, [invitados]);
+  }, [getInvitados, invitados]);
 
   const leftToolbarTemplate = () => {
     return (

From d5c26c703d15865d5a1ccd917e843177f68d9455 Mon Sep 17 00:00:00 2001
From: Eduardo Quiros <eduardo@eduardoquiros.com>
Date: Mon, 29 Aug 2022 00:06:27 -0600
Subject: [PATCH 12/12] fix table headers

---
 .../src/components/InvitadosComunidad.js      | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web-ui/web-react/src/components/InvitadosComunidad.js b/web-ui/web-react/src/components/InvitadosComunidad.js
index 099f1849..4e59b24f 100644
--- a/web-ui/web-react/src/components/InvitadosComunidad.js
+++ b/web-ui/web-react/src/components/InvitadosComunidad.js
@@ -72,6 +72,15 @@ const InvitadosComunidad = () => {
     </>
   );
 
+  const headerTenant = (
+    <>
+      <p>
+        {' '}
+        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} /> Inquilino
+      </p>
+    </>
+  );
+
   const headerLastName = (
     <>
       <p>
@@ -82,6 +91,14 @@ const InvitadosComunidad = () => {
     </>
   );
 
+  const headerPlate = (
+    <p>
+      {' '}
+      <FontAwesomeIcon icon={faIdCardAlt} style={{ color: '#C08135' }} />{' '}
+      Placa
+    </p>
+  );
+
   const headerDNI = (
     <p>
       {' '}
@@ -166,7 +183,7 @@ const InvitadosComunidad = () => {
               field="number_plate"
               header="Placa"
               sortable
-              header={headerDNI}
+              header={headerPlate}
             />
             <Column
               field="telefono"
@@ -190,7 +207,7 @@ const InvitadosComunidad = () => {
               field="tenant_name"
               header="Inquilino"
               sortable
-              header={headerName}
+              header={headerTenant}
             />
           </DataTable>
         </div>