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] 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);