From 22e5de830a829f0efbf269b2e91f61bb3e25739e Mon Sep 17 00:00:00 2001
From: Mariela <mbonilla.guti@gmail.com>
Date: Fri, 22 Jul 2022 00:03:01 -0600
Subject: [PATCH] =?UTF-8?q?fix=20bug=20que=20no=20se=20quitaban=20la=20cla?=
 =?UTF-8?q?se=20de=20"p-invalid"=20despu=C3=A9s=20de=20registrar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ComunidadViviendas.js      | 107 +++++++++---------
 1 file changed, 54 insertions(+), 53 deletions(-)

diff --git a/web-ui/web-react/src/components/ComunidadViviendas.js b/web-ui/web-react/src/components/ComunidadViviendas.js
index 025ae00a..087302c4 100644
--- a/web-ui/web-react/src/components/ComunidadViviendas.js
+++ b/web-ui/web-react/src/components/ComunidadViviendas.js
@@ -33,7 +33,7 @@ const Communities = () => {
     const [cantonId, setCantonId] = useState(null);
     const [districtsList, setDistrictsList] = useState([]);
     const [districtId, setDistrictId] = useState(null);
-    const [codeHouses, setCodeHouses] = useState(null);
+    const [codeHouses, setCodeHouses] = useState('');
     const [submitted, setSubmitted] = useState(false);
     const toast = useRef(null);
     const dt = useRef(null);
@@ -59,7 +59,7 @@ const Communities = () => {
     }))
 
 
-  
+
 
 
     useEffect(() => {
@@ -138,11 +138,11 @@ const Communities = () => {
         let pList = await getProvinces();
         let cList = await getCantons();
         let dList = await getDistricts();
-         await resJson.message.map((item) => {
+        await resJson.message.map((item) => {
             item.province = pList.find(p => p.code === item.province).name
             item.canton = cList.find(p => p.code === item.canton).name
             item.district = dList.find(p => p.code === item.district).name
-            if(!item.id_admin){
+            if (!item.id_admin) {
                 item.name_admin = "Sin Administrador"
             }
         })
@@ -151,15 +151,12 @@ const Communities = () => {
 
     useEffect(() => {
         getCommunites();
-
     }, [])
 
 
     const saveCommunity = () => {
-        setSubmitted(true);
 
-        
-        if (community.name.trim()) {
+        if (community.name.trim() ) {
             let _communities = [...communitiesList];
             let _community = { ...community };
             _community.province = provinciaId;
@@ -168,12 +165,12 @@ const Communities = () => {
 
 
 
-            for (let i = 0; i < _community.num_houses; i++){
+            for (let i = 0; i < _community.num_houses; i++) {
                 _community.houses.push({
-                    number_house: codeHouses + (i+1),
+                    number_house: codeHouses + (i + 1),
                 })
             }
-           // console.log(houses)
+            // console.log(houses)
             fetch('http://localhost:4000/community/createCommunity', {
                 cache: 'no-cache',
                 method: 'POST',
@@ -182,40 +179,44 @@ const Communities = () => {
                     '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(() => {
-                
-                _community.province = provincesList.find(p => p.code === _community.province).name
-                _community.canton = cantonsList.find(p => p.code === _community.canton).name
-                _community.district = districtsList.find(p => p.code === _community.district).name
+                .then(
+                    function (response) {
+                        if (response.status != 201)
+                            console.log('Ocurrió un error con el servicio: ' + response.status);
+                        else
+                            return response.json();
+                    }
+                )
+                .then(() => {
 
-                _communities.push(_community);
-                toast.current.show({ severity: 'success', summary: 'Registro exitoso', detail: 'Comunidad de vivienda Creada', life: 3000 });
+                    _community.province = provincesList.find(p => p.code === _community.province).name
+                    _community.canton = cantonsList.find(p => p.code === _community.canton).name
+                    _community.district = districtsList.find(p => p.code === _community.district).name
 
-                setCommunitiesList(_communities);
+                    _communities.push(_community);
+                    toast.current.show({ severity: 'success', summary: 'Registro exitoso', detail: 'Comunidad de vivienda Creada', life: 3000 });
+
+                    setCommunitiesList(_communities);
 
 
-                setProvinciaId('');
-                setCantonId('');
-                setDistrictId('');
-                setCodeHouses('');
+                    setProvinciaId('');
+                    setCantonId('');
+                    setDistrictId('');
+                    setCodeHouses('');
 
-                setCommunity(emptyCommunity);
-            })
-            .catch(
-                err => console.log('Ocurrió un error con el fetch', err)
-            );
+                    setCommunity(emptyCommunity);
+
+                })
+                .catch(
+                    err => console.log('Ocurrió un error con el fetch', err)
+                );
+
+
+        } else {
+            setSubmitted(true);
 
-            
         }
-        
+
     }
 
     const onInputChange = (e, name) => {
@@ -245,20 +246,20 @@ const Communities = () => {
             </div>
             <div className="col-12">
                 <div className="card">
-                <Toast ref={toast} />
+                    <Toast ref={toast} />
 
                     <h5>Registro de comunidad de viviendas</h5>
                     <div className="p-fluid formgrid grid">
                         <div className="field col-12 md:col-12">
-                        <label htmlFor="name">Nombre</label>
+                            <label htmlFor="name">Nombre</label>
                             <div className="p-0 col-12 md:col-12">
                                 <div className="p-inputgroup">
                                     <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                         <i className="pi pi-home"></i>
                                     </span>
-                                    <InputText id="name"  value={community.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames( submitted && community.name==='' ? 'p-invalid' : ''   )} />
+                                    <InputText id="name" value={community.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={submitted && community.name === '' ? 'p-invalid' : ''} />
                                 </div>
-                                {submitted  && community.name==='' && <small className="p-invalid">Nombre es requirido.</small>}
+                                {submitted && community.name === '' && <small className="p-invalid">Nombre es requirido.</small>}
                             </div>
                         </div>
                         <div className="field col-12 md:col-6">
@@ -268,7 +269,7 @@ const Communities = () => {
                                     <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                         <i className="pi pi-map-marker"></i>
                                     </span>
-                                    <Dropdown placeholder="--Seleccione Provincia--" value={provinciaId} options={p} onChange={handleProvinces} required autoFocus className={classNames({ 'p-invalid': submitted && !provinciaId } )} />
+                                    <Dropdown placeholder="--Seleccione Provincia--" value={provinciaId} options={p} onChange={handleProvinces} required autoFocus className={classNames({ 'p-invalid': submitted && !provinciaId })} />
                                 </div>
                                 {submitted && !provinciaId && <small className="p-invalid">Provincia es requirido.</small>}
                             </div>
@@ -280,9 +281,9 @@ const Communities = () => {
                                     <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                         <i className="pi pi-map-marker"></i>
                                     </span>
-                                    <Dropdown placeholder="--Seleccione Cantón--" value={cantonId} options={c} onChange={handleCanton} required  autoFocus className={classNames({ 'p-invalid': submitted && !cantonId } )}/>
+                                    <Dropdown placeholder="--Seleccione Cantón--" value={cantonId} options={c} onChange={handleCanton} required autoFocus className={classNames({ 'p-invalid': submitted && !cantonId })} />
                                 </div>
-                                {submitted  && !cantonId && <small className="p-invalid">Cantón es requirido.</small>}
+                                {submitted && !cantonId && <small className="p-invalid">Cantón es requirido.</small>}
                             </div>
                         </div>
                         <div className="field col-12 md:col-6">
@@ -292,9 +293,9 @@ const Communities = () => {
                                     <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                         <i className="pi pi-map-marker"></i>
                                     </span>
-                                    <Dropdown placeholder="--Seleccione Distrito--" value={districtId} options={d} onChange={handleDistrict} required  autoFocus className={classNames({ 'p-invalid': submitted && !districtId } )}/>
+                                    <Dropdown placeholder="--Seleccione Distrito--" value={districtId} options={d} onChange={handleDistrict} required autoFocus className={classNames({ 'p-invalid': submitted && !districtId })} />
                                 </div>
-                                {submitted  && !districtId && <small className="p-invalid">Distrito es requirido.</small>}
+                                {submitted && !districtId && <small className="p-invalid">Distrito es requirido.</small>}
                             </div>
                         </div>
                         <div className="field col-12 md:col-6">
@@ -304,9 +305,9 @@ const Communities = () => {
                                     <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                         <i className="pi pi-phone"></i>
                                     </span>
-                                    <InputText id="phone"  value={community.phone} onChange={(e) => onInputChange(e, 'phone')} required autoFocus className={classNames({ 'p-invalid': submitted && community.phone==='' } )} />
+                                    <InputText id="phone" value={community.phone} onChange={(e) => onInputChange(e, 'phone')} required autoFocus className={classNames({ 'p-invalid': submitted && community.phone === '' })} />
                                 </div>
-                                {submitted  && community.phone==='' && <small className="p-invalid">Número de teléfono es requirido.</small>}
+                                {submitted && community.phone === '' && <small className="p-invalid">Número de teléfono es requirido.</small>}
                             </div>
                         </div>
                         <div className="field col-12 md:col-6">
@@ -316,9 +317,9 @@ const Communities = () => {
                                     <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                         <i className="pi pi-hashtag"></i>
                                     </span>
-                                    <InputText id="num_houses"  value={community.num_houses} onChange={(e) => onInputChange(e, 'num_houses')} required autoFocus className={classNames({ 'p-invalid': submitted && community.num_houses < 1 } )} />
+                                    <InputText id="num_houses" value={community.num_houses} onChange={(e) => onInputChange(e, 'num_houses')} required autoFocus className={classNames({ 'p-invalid': submitted && community.num_houses < 1 })} />
                                 </div>
-                                {submitted  && community.num_houses < 1 && <small className="p-invalid">Número de viviendas es requirido y debe ser mayor que 0.</small>}
+                                {submitted && community.num_houses < 1 && <small className="p-invalid">Número de viviendas es requirido y debe ser mayor que 0.</small>}
                             </div>
                         </div>
                         <div className="field col-12 md:col-6">
@@ -328,9 +329,9 @@ const Communities = () => {
                                     <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                         <i className="pi pi-hashtag"></i>
                                     </span>
-                                    <InputText id="code_houses"  value={codeHouses} onChange={handleCodeHouses} required autoFocus className={classNames({ 'p-invalid': submitted && !codeHouses } )} />
+                                    <InputText id="code_houses" value={codeHouses} onChange={handleCodeHouses} required autoFocus className={classNames({ 'p-invalid': submitted && codeHouses === '' })} />
                                 </div>
-                                {submitted  && !codeHouses && <small className="p-invalid">El código para las viviendas es requirido.</small>}
+                                {submitted && codeHouses === '' && <small className="p-invalid">El código para las viviendas es requirido.</small>}
                             </div>
                         </div>
                         <div className="col-12 md:col-12 py-2">