From 48144f8cdaf797492c98a739f4b7dae6a7e598e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 30 Apr 2024 10:26:28 -0600
Subject: [PATCH 01/93] Se instalaron los paquetes de hook resolvers y yup

---
 web/package-lock.json | 49 ++++++++++++++++++++++++++++++++++++++++++-
 web/package.json      |  4 +++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index dd8e9e47..5b6f1df1 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@hookform/resolvers": "^3.3.4",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -27,7 +28,8 @@
         "react-scripts": "5.0.1",
         "react-toastify": "^10.0.5",
         "typescript": "^4.9.5",
-        "web-vitals": "^2.1.4"
+        "web-vitals": "^2.1.4",
+        "yup": "^1.4.0"
       },
       "devDependencies": {
         "tailwindcss": "^3.4.1"
@@ -2595,6 +2597,14 @@
         "react": ">=16.3"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",
+      "integrity": "sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -14806,6 +14816,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -17033,6 +17048,11 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -17065,6 +17085,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
@@ -18517,6 +18542,28 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/yup": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz",
+      "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     }
   }
 }
diff --git a/web/package.json b/web/package.json
index 3ac96a94..e0ae714e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hookform/resolvers": "^3.3.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -22,7 +23,8 @@
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.5",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
-- 
GitLab


From 79efcdd6150dca7dbdd4c24ea94095c18069439d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 30 Apr 2024 11:07:35 -0600
Subject: [PATCH 02/93] Se valida que haya un archivo

---
 web/src/components/image_dropzone/image_dropzone.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/image_dropzone/image_dropzone.tsx b/web/src/components/image_dropzone/image_dropzone.tsx
index add3c59c..0efa3855 100644
--- a/web/src/components/image_dropzone/image_dropzone.tsx
+++ b/web/src/components/image_dropzone/image_dropzone.tsx
@@ -37,7 +37,7 @@ export const ImageDropzone = ({setValue}: props) => {
             })));
         
         acceptedFiles.map((file)=>{
-          {setValue('imageURL',file)}
+          {setValue('imageURL',file,{shouldValidate: true})}
         });
 
         file.onload = () => {
-- 
GitLab


From 049c1eea8ac6ae30e6351afee11ca07ba6fb088b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 30 Apr 2024 11:08:40 -0600
Subject: [PATCH 03/93] =?UTF-8?q?Se=20agrega=20los=20campos=20para=20las?=
 =?UTF-8?q?=20descripciones=20en=20espa=C3=B1ol=20e=20ingl=C3=A9s,=20adem?=
 =?UTF-8?q?=C3=A1s=20se=20muestran=20mensajes=20de=20error=20si=20hay=20ca?=
 =?UTF-8?q?mpos=20faltantes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sa_panel_town_register.tsx                | 56 ++++++++++---------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
index 9f796dd5..0d6887d8 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
@@ -4,6 +4,7 @@ import './css/styles.css'
 import { ImageDropzone } from "../../image_dropzone/image_dropzone";
 import { Dispatch, SetStateAction, useState } from "react";
 import { useTownRegister } from "../../../hooks/useTownRegister";
+import { ToastContainer } from "react-toastify";
 
 interface props {
   setWindowActive: Dispatch<SetStateAction<boolean>>,
@@ -14,10 +15,10 @@ export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPan
   const {
     statesList,
     register, 
-    setValue,
+    setValue, 
+    errors,
     handleSubmit, 
-    errors, 
-    onSubmit
+    onSubmit, 
   } = useTownRegister();
   const [isEnglish, setIsEnglish] = useState(false);
   const [spanishDescription, setSpanishDescription] = useState("");
@@ -33,36 +34,21 @@ export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPan
       <div className="town_register_content">
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="town_name_state_input">
-            <div className="language_change_cnt">
-              <label>
-                {isEnglish ?
-                  "Inglés"
-                :
-                  "Español"
-                }
-              </label>
-              <FontAwesomeIcon icon={faLanguage}
-                className="change_lang_btn" 
-                onClick={ () =>
-                  setIsEnglish(!isEnglish)
-                }
-              />
-            </div>
             <div className="town_name_input">
               <label className="form_label">Nombre del pueblo mágico</label>
               <input className="form_input" 
                 type="text"
                 {...register('name')}
-                required/>
+              />
+              <p className="error">{errors.name?.message}</p>
             </div>
             <div className="state_select">
               <label>Estado al que pertenece el pueblo</label>
-              {statesList == null ? 
+              {statesList == null || statesList.length==0 ? 
                 <label>No hay estados</label>
               : 
                 <select
-                  {...register('state')}
-                  required>
+                  {...register('state')}>
                   {statesList.map((state) => {
                     return (
                       <option key={state.stateId} value={state.stateId}>{state.name}</option>
@@ -70,11 +56,29 @@ export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPan
                   })}
                 </select>
               }
+              <p className="error">{errors.state?.message}</p>
             </div>
           </div>
           <div className="town_description_image_cont">
             <div className="town_desc">
-              <div>Descripción del pueblo mágico</div>
+              <div className="town_desc_header">
+                <div>Descripción del pueblo mágico</div>
+                <div className="language_change_cnt">
+                  <label>
+                    {isEnglish ?
+                      "Inglés"
+                    :
+                      "Español"
+                    }
+                  </label>
+                  <FontAwesomeIcon icon={faLanguage}
+                    className="change_lang_btn" 
+                    onClick={ () =>
+                      setIsEnglish(!isEnglish)
+                    }
+                  />
+                </div>
+              </div>
               <div className="towm_desc_input_cnt">
                 {
                   isEnglish ?
@@ -85,7 +89,7 @@ export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPan
                         setEnglishDescription(event.target.value);
                       },
                     })}
-                    required/>
+                  />
                   :
                   <textarea id="1" className="town_desc_textarea"
                   value={spanishDescription}
@@ -94,13 +98,15 @@ export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPan
                       setSpanishDescription(event.target.value);
                     },
                   })}
-                  required/>
+                />
                 }
+                <p className="error">{errors.descriptionES?.message || errors.descriptionEN?.message}</p>
               </div>
             </div>
             <div className="image_container">
               <div>Fotografía representativa del pueblo</div>
               <ImageDropzone setValue={setValue}/>
+              <p className="error">{errors.imageURL?.message}</p>
               <input type="submit"/>
             </div>
           </div>
-- 
GitLab


From 813dd375a53e98823df05e4c3f5d6824051adef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 30 Apr 2024 11:09:14 -0600
Subject: [PATCH 04/93] Se le da estilo a los errores

---
 .../sa_panel_town_register/css/styles.css     | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_register/css/styles.css b/web/src/components/sa_panel_town/sa_panel_town_register/css/styles.css
index 2445be2f..67c03469 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_register/css/styles.css
+++ b/web/src/components/sa_panel_town/sa_panel_town_register/css/styles.css
@@ -58,7 +58,7 @@
   width: 55%;
   display: flex;
   flex-direction: column;
-  padding: 20px;
+  padding: 10px;
 }
 
 .image_container {
@@ -99,7 +99,7 @@
 .state_select{
   display: flex;
   flex-direction: column;
-  width: 40%;
+  width: 50%;
   justify-content: center;
   align-items: center;
 }
@@ -123,7 +123,7 @@
 }
 
 .town_name_input{
-  width: 40%;
+  width: 50%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -152,4 +152,20 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
+}
+
+.language_change_cnt label{
+  font-size: 10px;
+}
+
+.towm_desc_input_cnt{
+  display: flex;
+  flex-direction: column;
+}
+
+.error{
+  color: red;
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
 }
\ No newline at end of file
-- 
GitLab


From 2e204224ac7d3a0efdae8bb1ddce56cd1340c1ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 30 Apr 2024 11:10:00 -0600
Subject: [PATCH 05/93] Se elimina el log en la consola

---
 web/src/data/datasources/prod/town_datasource.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/data/datasources/prod/town_datasource.ts b/web/src/data/datasources/prod/town_datasource.ts
index f398dcff..7fedfb43 100644
--- a/web/src/data/datasources/prod/town_datasource.ts
+++ b/web/src/data/datasources/prod/town_datasource.ts
@@ -36,8 +36,6 @@ export class TownDatasourceProd implements TownDatasourceInf{
     const {status, data} = await axios.post(APIUrl + '/town', formToSend,{headers});
     if (status === 401) {
       throw new UnauthorizedError({code: 401, message: 'Unauthorized'});
-    }else {
-      console.log(data);
     }
   }
 }
\ No newline at end of file
-- 
GitLab


From 99ed4543e846bab1403bfefdd7733d0d53153fcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 30 Apr 2024 11:10:48 -0600
Subject: [PATCH 06/93] =?UTF-8?q?Se=20agrega=20un=20mensaje=20cuando=20se?=
 =?UTF-8?q?=20est=C3=A1n=20subiendo=20los=20datos=20y=20se=20agrega=20el?=
 =?UTF-8?q?=20validador=20de=20los=20datos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/hooks/useTownRegister.tsx | 78 +++++++++++++++++++++++++++----
 1 file changed, 69 insertions(+), 9 deletions(-)

diff --git a/web/src/hooks/useTownRegister.tsx b/web/src/hooks/useTownRegister.tsx
index 1c5bf209..f9a91cc7 100644
--- a/web/src/hooks/useTownRegister.tsx
+++ b/web/src/hooks/useTownRegister.tsx
@@ -2,30 +2,84 @@ import { useEffect, useState } from "react";
 import { TownDatasourceProd } from "../data/datasources/prod/town_datasource"
 import { TownRepositoryProd } from "../data/repositories/prod/town_repository";
 import { State } from "../infraestructure/entities/state";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { TownFormValues } from "../infraestructure/entities/town_form_values";
+import axios from "axios";
+import { toast } from "react-toastify";
 
 const townDatasource = new TownDatasourceProd();
 const townRepository = new TownRepositoryProd(townDatasource);
 
+const resolver: Resolver<TownFormValues> = async (data) => {
+  const errors: FieldErrors<TownFormValues> = {};
+
+  if (!data.name) {
+    errors.name = {
+      type: "required",
+      message: "El nombre del pueblo es requerido"
+    };
+  }
+
+  if (!data.state) {
+    errors.state = {
+      type: "required",
+      message: "Debe seleccionar el estado al que pertenece el pueblo"
+    };
+  }
+
+  if (!data.descriptionES) {
+    errors.descriptionES = {
+      type: "required",
+      message: "La descripción del pueblo en español es requerida"
+    };
+  }
+
+  if (!data.descriptionEN) {
+    errors.descriptionEN = {
+      type: "required",
+      message: "La descripción del pueblo en inglés es requerida"
+    };
+  }
+
+  if (!data.imageURL) {
+    errors.imageURL = {
+      type: "required",
+      message: "Debe seleccionar la imagen representativa del pueblo"
+    };
+  }
+
+  return {
+    values: Object.keys(errors).length > 0 ? {} : data,
+    errors: errors,
+  };
+};
+
 export const useTownRegister = () => {
   const [statesList, setStatesList] = useState<State[] | null>(null);
   const {
     register,
     handleSubmit,
-    setError,
     formState: {errors},
-    setValue
-  } = useForm<TownFormValues>();
-
+    setValue,
+    watch
+  } = useForm<TownFormValues>({resolver});
+  const [uploadPercentage, setUploadPercentage] = useState(0);
+  
   useEffect(() => {
     const getStates = async () => {
-      const states = await townRepository.getStates();
-      setStatesList(states);
+      try{
+        const states = await townRepository.getStates();
+        setStatesList(states);
+      }catch(error: any){
+        if(axios.isAxiosError(error)){
+          //console.log(error)
+        }
+      }
     }
     getStates(); 
   }, []);
 
+
   const onSubmit: SubmitHandler<TownFormValues> = (data: TownFormValues) => {
     const fetch = async () => {
       try{
@@ -34,8 +88,14 @@ export const useTownRegister = () => {
 
       }
     }
-    fetch();
+    toast.promise(
+      fetch(),{
+        pending: "Subiendo datos...",
+        success: "Los datos se han subido correctamente",
+        error: "Sucedio un error"
+      }
+    )
   }
 
-  return {statesList, register, handleSubmit, errors, onSubmit, setValue};
+  return {statesList, register, handleSubmit, errors, onSubmit, setValue, watch};
 }
\ No newline at end of file
-- 
GitLab


From 444edd89c1859022a900bda1256c958787a37a72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 14:57:46 -0600
Subject: [PATCH 07/93] Se agrega que la funcion registerT

---
 web/src/infraestructure/repositories/town_repository.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/infraestructure/repositories/town_repository.ts b/web/src/infraestructure/repositories/town_repository.ts
index 6a919e9f..827aba54 100644
--- a/web/src/infraestructure/repositories/town_repository.ts
+++ b/web/src/infraestructure/repositories/town_repository.ts
@@ -3,5 +3,5 @@ import { TownFormValues } from "../entities/town_form_values";
 
 export interface TownRepositoryInf{
     getStates(): Promise<State[]>;
-    registerTown(form: TownFormValues): void;
+    registerTown(form: TownFormValues): Promise<void>;
 }
\ No newline at end of file
-- 
GitLab


From b07263ff998419896254f044f23c4e0ff601681c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:06:46 -0600
Subject: [PATCH 08/93] Se renombra a useTown

---
 web/src/hooks/useTownRegister.tsx | 101 ------------------------------
 1 file changed, 101 deletions(-)
 delete mode 100644 web/src/hooks/useTownRegister.tsx

diff --git a/web/src/hooks/useTownRegister.tsx b/web/src/hooks/useTownRegister.tsx
deleted file mode 100644
index f9a91cc7..00000000
--- a/web/src/hooks/useTownRegister.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useEffect, useState } from "react";
-import { TownDatasourceProd } from "../data/datasources/prod/town_datasource"
-import { TownRepositoryProd } from "../data/repositories/prod/town_repository";
-import { State } from "../infraestructure/entities/state";
-import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
-import { TownFormValues } from "../infraestructure/entities/town_form_values";
-import axios from "axios";
-import { toast } from "react-toastify";
-
-const townDatasource = new TownDatasourceProd();
-const townRepository = new TownRepositoryProd(townDatasource);
-
-const resolver: Resolver<TownFormValues> = async (data) => {
-  const errors: FieldErrors<TownFormValues> = {};
-
-  if (!data.name) {
-    errors.name = {
-      type: "required",
-      message: "El nombre del pueblo es requerido"
-    };
-  }
-
-  if (!data.state) {
-    errors.state = {
-      type: "required",
-      message: "Debe seleccionar el estado al que pertenece el pueblo"
-    };
-  }
-
-  if (!data.descriptionES) {
-    errors.descriptionES = {
-      type: "required",
-      message: "La descripción del pueblo en español es requerida"
-    };
-  }
-
-  if (!data.descriptionEN) {
-    errors.descriptionEN = {
-      type: "required",
-      message: "La descripción del pueblo en inglés es requerida"
-    };
-  }
-
-  if (!data.imageURL) {
-    errors.imageURL = {
-      type: "required",
-      message: "Debe seleccionar la imagen representativa del pueblo"
-    };
-  }
-
-  return {
-    values: Object.keys(errors).length > 0 ? {} : data,
-    errors: errors,
-  };
-};
-
-export const useTownRegister = () => {
-  const [statesList, setStatesList] = useState<State[] | null>(null);
-  const {
-    register,
-    handleSubmit,
-    formState: {errors},
-    setValue,
-    watch
-  } = useForm<TownFormValues>({resolver});
-  const [uploadPercentage, setUploadPercentage] = useState(0);
-  
-  useEffect(() => {
-    const getStates = async () => {
-      try{
-        const states = await townRepository.getStates();
-        setStatesList(states);
-      }catch(error: any){
-        if(axios.isAxiosError(error)){
-          //console.log(error)
-        }
-      }
-    }
-    getStates(); 
-  }, []);
-
-
-  const onSubmit: SubmitHandler<TownFormValues> = (data: TownFormValues) => {
-    const fetch = async () => {
-      try{
-        await townRepository.registerTown(data);
-      }catch(error: any){
-
-      }
-    }
-    toast.promise(
-      fetch(),{
-        pending: "Subiendo datos...",
-        success: "Los datos se han subido correctamente",
-        error: "Sucedio un error"
-      }
-    )
-  }
-
-  return {statesList, register, handleSubmit, errors, onSubmit, setValue, watch};
-}
\ No newline at end of file
-- 
GitLab


From 8bf6cb05b43cd33cad0232da37969269aaa5b8eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:07:02 -0600
Subject: [PATCH 09/93] Se renombra a useTown

---
 web/src/hooks/useTown.tsx | 83 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 web/src/hooks/useTown.tsx

diff --git a/web/src/hooks/useTown.tsx b/web/src/hooks/useTown.tsx
new file mode 100644
index 00000000..980c4386
--- /dev/null
+++ b/web/src/hooks/useTown.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { TownDatasourceProd } from "../data/datasources/prod/town_datasource"
+import { TownRepositoryProd } from "../data/repositories/prod/town_repository";
+import { State } from "../infraestructure/entities/state";
+import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
+import { TownFormValues } from "../infraestructure/entities/town_form_values";
+import axios from "axios";
+import { toast } from "react-toastify";
+
+const townDatasource = new TownDatasourceProd();
+const townRepository = new TownRepositoryProd(townDatasource);
+
+const resolver: Resolver<TownFormValues> = async (data) => {
+  const errors: FieldErrors<TownFormValues> = {};
+
+  if (!data.name) {
+    errors.name = {
+      type: "required",
+      message: "El nombre del pueblo es requerido"
+    };
+  }
+
+  if (!data.state) {
+    errors.state = {
+      type: "required",
+      message: "Debe seleccionar el estado al que pertenece el pueblo"
+    };
+  }
+
+  if (!data.descriptionES) {
+    errors.descriptionES = {
+      type: "required",
+      message: "La descripción del pueblo en español es requerida"
+    };
+  }
+
+  if (!data.descriptionEN) {
+    errors.descriptionEN = {
+      type: "required",
+      message: "La descripción del pueblo en inglés es requerida"
+    };
+  }
+
+  if (!data.imageURL) {
+    errors.imageURL = {
+      type: "required",
+      message: "Debe seleccionar la imagen representativa del pueblo"
+    };
+  }
+
+  return {
+    values: Object.keys(errors).length > 0 ? {} : data,
+    errors: errors,
+  };
+};
+
+export const useTownRegister = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: {errors},
+    setValue
+  } = useForm<TownFormValues>({resolver});
+  
+  const onSubmit: SubmitHandler<TownFormValues> = (data: TownFormValues) => {
+    const fetch = async () => {
+      try{
+        await townRepository.registerTown(data);
+      }catch(error: any){
+
+      }
+    }
+    toast.promise(
+      fetch(),{
+        pending: "Subiendo datos...",
+        success: "Los datos se han subido correctamente",
+        error: "Sucedio un error"
+      }
+    )
+  }
+
+  return {register, handleSubmit, errors, onSubmit, setValue};
+}
\ No newline at end of file
-- 
GitLab


From 74aa6984b009a67576a4ac3298cffab9654ff981 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:07:24 -0600
Subject: [PATCH 10/93] Se crea un custom hook para obtener la lista de estados

---
 web/src/hooks/useGetStatesList.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 web/src/hooks/useGetStatesList.tsx

diff --git a/web/src/hooks/useGetStatesList.tsx b/web/src/hooks/useGetStatesList.tsx
new file mode 100644
index 00000000..0cad10c3
--- /dev/null
+++ b/web/src/hooks/useGetStatesList.tsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { State } from "../infraestructure/entities/state";
+import axios from "axios";
+import { TownDatasourceProd } from "../data/datasources/prod/town_datasource";
+import { TownRepositoryProd } from "../data/repositories/prod/town_repository";
+const townDatasource = new TownDatasourceProd();
+const townRepository = new TownRepositoryProd(townDatasource);
+
+export const useGetStatesList = () => {
+  const [statesList, setStatesList] = useState<State[] | null>(null);
+
+  const getStates = async () => {
+    try{
+      const states = await townRepository.getStates();
+      setStatesList(states);
+    }catch(error: any){
+      if(axios.isAxiosError(error)){
+        //console.log(error)
+      }
+    }
+  }
+  return {getStates, statesList};
+}
\ No newline at end of file
-- 
GitLab


From 4cf3b4f33f8f18bd9676f449853954685cfcf65f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:09:02 -0600
Subject: [PATCH 11/93] Se modifica para que pase la lista de estados al panel
 de registro por medio de las props

---
 .../sa_panel_town_screen/sa_panel_town_screen.tsx          | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen.tsx b/web/src/components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen.tsx
index 5d70ed4b..79978367 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen.tsx
@@ -1,13 +1,15 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 import { SuperadminPanelTownRegister } from '../sa_panel_town_register/sa_panel_town_register';
 import './css/styles.css'
+import { State } from '../../../infraestructure/entities/state';
 
 interface props {
   windowActive: boolean;
   setWindowActive: Dispatch<SetStateAction<boolean>>;
+  statesList: State[] | null;
 }
 
-export const SuperadminPanelTownScreen = ({windowActive,setWindowActive}:props) => {
+export const SuperadminPanelTownScreen = ({windowActive,setWindowActive, statesList}:props) => {
   const [showRegisterPanel, setShowRegisterPanel] = useState(false);
 
   return (
@@ -26,7 +28,8 @@ export const SuperadminPanelTownScreen = ({windowActive,setWindowActive}:props)
           && 
           <SuperadminPanelTownRegister 
             setWindowActive={setWindowActive}
-            setShowRegisterPanel={setShowRegisterPanel}/>}
+            setShowRegisterPanel={setShowRegisterPanel}
+            statesList={statesList}/>}
       </div>
     </div>  
   );
-- 
GitLab


From cfbf0b0a72df19763a08a46ed37727210cc226d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:10:01 -0600
Subject: [PATCH 12/93] Se obtiene la lista de estados cuando se renderiza el
 componente

---
 .../super_admin_home_page.tsx                 | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/home/super_admin_page/super_admin_home_page.tsx b/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
index 8fc5769f..c1a0125c 100644
--- a/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
+++ b/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
@@ -2,16 +2,33 @@ import { Menu, MenuItem, Sidebar } from "react-pro-sidebar"
 import './assets/styles/style.css';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMonument, faSignOut, faUser, faUserTie } from "@fortawesome/free-solid-svg-icons";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { AdminPanelNavBar } from "../../../components/admin_panel_navbar/admin_navbar";
 import { SidebarHeader } from "../../../components/sidebar_header/sidebar_header";
 import { SuperadminPanelTownScreen } from "../../../components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen";
 import { SuperadminPanelAdminScreen } from "../../../components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen";
+import { useGetStatesList } from "../../../hooks/useGetStatesList";
+import { State } from "../../../infraestructure/entities/state";
+import axios from "axios";
 
 export const SuperAdminHomePage = () => {
   const [collapsed, setCollapsed] = useState(true);
   const [windowActive, setWindowActive] = useState(false);
   const [townPanel, setTownPanel] = useState(true);
+  const {getStates, statesList} = useGetStatesList();
+
+  useEffect(() => {
+    const getStatesList = async () => {
+      try{
+        getStates();
+      }catch(error: any){
+        if(axios.isAxiosError(error)){
+          //console.log(error)
+        }
+      }
+    }
+    getStatesList(); 
+  }, []);
 
   return (
     <div className="superdmin-panel-root">
@@ -48,9 +65,12 @@ export const SuperAdminHomePage = () => {
               <SuperadminPanelTownScreen 
                 windowActive={windowActive} 
                 setWindowActive={setWindowActive}
+                statesList={statesList}
               /> 
             : 
-              <SuperadminPanelAdminScreen />}
+              <SuperadminPanelAdminScreen 
+              windowActive={windowActive} 
+              setWindowActive={setWindowActive}/>}
         </div>
       </div>
     </div>
-- 
GitLab


From 3c4dad5a2168b5192d58c4b07a9e94da9856fcfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:11:32 -0600
Subject: [PATCH 13/93] Se agrega la lista de estados a las props

---
 .../sa_panel_town_register/sa_panel_town_register.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
index 0d6887d8..88ca62fb 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
@@ -3,17 +3,17 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import './css/styles.css'
 import { ImageDropzone } from "../../image_dropzone/image_dropzone";
 import { Dispatch, SetStateAction, useState } from "react";
-import { useTownRegister } from "../../../hooks/useTownRegister";
-import { ToastContainer } from "react-toastify";
+import { useTownRegister } from "../../../hooks/useTown";
+import { State } from "../../../infraestructure/entities/state";
 
 interface props {
   setWindowActive: Dispatch<SetStateAction<boolean>>,
   setShowRegisterPanel: Dispatch<SetStateAction<boolean>>
+  statesList: State[] | null;
 }
 
-export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPanel}:props) => {
+export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPanel, statesList}:props) => {
   const {
-    statesList,
     register, 
     setValue, 
     errors,
-- 
GitLab


From 617c4c8769e465188c80ef62b95b5c12d31ab77c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:12:15 -0600
Subject: [PATCH 14/93] Se crea la interfaz que guarda los valores de cuando se
 registra un admin

---
 web/src/infraestructure/entities/admin_form_values.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 web/src/infraestructure/entities/admin_form_values.ts

diff --git a/web/src/infraestructure/entities/admin_form_values.ts b/web/src/infraestructure/entities/admin_form_values.ts
new file mode 100644
index 00000000..09d39e2b
--- /dev/null
+++ b/web/src/infraestructure/entities/admin_form_values.ts
@@ -0,0 +1,7 @@
+export interface AdminFormValues {
+  email: string;
+  name: string;
+  password: string;
+  confirmPassword: string;
+  townAdmin: number;
+}
\ No newline at end of file
-- 
GitLab


From e9c231c25361ccdfe87f4a006f35755ef8758b6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:14:41 -0600
Subject: [PATCH 15/93] =?UTF-8?q?Se=20crea=20las=20interfaces=20que=20guar?=
 =?UTF-8?q?dan=20los=20m=C3=A9todos=20utilizados=20para=20guardar=20un=20a?=
 =?UTF-8?q?dmin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/infraestructure/datasources/admin_datasource.ts  | 5 +++++
 web/src/infraestructure/repositories/admin_repository.ts | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 web/src/infraestructure/datasources/admin_datasource.ts
 create mode 100644 web/src/infraestructure/repositories/admin_repository.ts

diff --git a/web/src/infraestructure/datasources/admin_datasource.ts b/web/src/infraestructure/datasources/admin_datasource.ts
new file mode 100644
index 00000000..1b6ca143
--- /dev/null
+++ b/web/src/infraestructure/datasources/admin_datasource.ts
@@ -0,0 +1,5 @@
+import { AdminFormValues } from "../entities/admin_form_values";
+
+export interface AdminDatasourceInf{
+    registerAdmin(form: AdminFormValues): Promise<void>;
+}
\ No newline at end of file
diff --git a/web/src/infraestructure/repositories/admin_repository.ts b/web/src/infraestructure/repositories/admin_repository.ts
new file mode 100644
index 00000000..c4af71ab
--- /dev/null
+++ b/web/src/infraestructure/repositories/admin_repository.ts
@@ -0,0 +1,5 @@
+import { AdminFormValues } from "../entities/admin_form_values";
+
+export interface AdminRepositoryInf{
+    registerAdmin(form: AdminFormValues): void;
+}
\ No newline at end of file
-- 
GitLab


From c3c4ae758f888f544e421eb5bb827348961dec42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:16:13 -0600
Subject: [PATCH 16/93] Se crea el custom hook que se utiliza para registrar un
 admin

---
 web/src/hooks/useAdminRegister.tsx | 94 ++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 web/src/hooks/useAdminRegister.tsx

diff --git a/web/src/hooks/useAdminRegister.tsx b/web/src/hooks/useAdminRegister.tsx
new file mode 100644
index 00000000..02b38e9b
--- /dev/null
+++ b/web/src/hooks/useAdminRegister.tsx
@@ -0,0 +1,94 @@
+import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
+import { AdminDatasourceProd } from "../data/datasources/prod/admin_datasource";
+import { AdminRepositoryProd } from "../data/repositories/prod/admin_repository";
+import { AdminFormValues } from "../infraestructure/entities/admin_form_values";
+import { toast } from "react-toastify";
+
+const adminDatasource = new AdminDatasourceProd();
+const adminRepository = new AdminRepositoryProd(adminDatasource);
+
+const resolver: Resolver<AdminFormValues> = async (data) => {
+  const errors: FieldErrors<AdminFormValues> = {};
+
+  if (!data.name) {
+    errors.name = {
+      type: "required",
+      message: "El nombre del administrador es requerido"
+    };
+  }
+
+  if (!data.email) {
+    errors.email = {
+      type: "required",
+      message: "El correo electronico es requerido"
+    };
+  }else{
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (!emailPattern.test(data.email)) {
+      errors.email = {
+        type: "validate",
+        message: "El correo electronico no es válido"
+      };
+    }
+  }
+
+  if (!data.password) {
+    errors.password = {
+      type: "required",
+      message: "La contraseña es requerida"
+    };
+  }else if(data.confirmPassword!=data.password){
+    errors.confirmPassword = {
+      type: "validate",
+      message: "Las contraseñas deben coincidir"
+    }; 
+  }
+
+  if (!data.confirmPassword) {
+    errors.confirmPassword = {
+      type: "required",
+      message: "La contraseña es requerida"
+    };
+  }
+
+  if (!data.townAdmin) {
+    errors.townAdmin = {
+      type: "required",
+      message: "Elija el pueblo al que va a representar"
+    };
+  }
+
+  return {
+    values: Object.keys(errors).length > 0 ? {} : data,
+    errors: errors,
+  };
+};
+
+export const useAdminRegister = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: {errors},
+    setValue
+  } = useForm<AdminFormValues>({resolver});
+
+  const onSubmit: SubmitHandler<AdminFormValues> = (data: AdminFormValues) => {
+    const fetch = async () => {
+      try{
+        //await adminRepository.registerAdmin(data);
+        console.log(data);
+      }catch(error: any){
+
+      }
+    }
+    toast.promise(
+      fetch(),{
+        pending: "Subiendo datos...",
+        success: "Los datos se han subido correctamente",
+        error: "Sucedio un error"
+      }
+    )
+  }
+
+  return {register, handleSubmit, errors, onSubmit};
+}
\ No newline at end of file
-- 
GitLab


From f46d6cac2479353562c1d61d3b8be68fcf1abaeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:17:10 -0600
Subject: [PATCH 17/93] =?UTF-8?q?Se=20crea=20la=20clase=20que=20implementa?=
 =?UTF-8?q?=20los=20m=C3=A9todos=20de=20la=20interface=20del=20repositorio?=
 =?UTF-8?q?=20de=20admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/data/repositories/prod/admin_repository.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 web/src/data/repositories/prod/admin_repository.ts

diff --git a/web/src/data/repositories/prod/admin_repository.ts b/web/src/data/repositories/prod/admin_repository.ts
new file mode 100644
index 00000000..81724b76
--- /dev/null
+++ b/web/src/data/repositories/prod/admin_repository.ts
@@ -0,0 +1,13 @@
+import { AdminDatasourceInf } from "../../../infraestructure/datasources/admin_datasource";
+import { AdminFormValues } from "../../../infraestructure/entities/admin_form_values";
+import { AdminRepositoryInf } from "../../../infraestructure/repositories/admin_repository";
+
+export class AdminRepositoryProd implements AdminRepositoryInf{
+  constructor(
+    private datasource: AdminDatasourceInf
+  ){}
+
+  async registerAdmin(form: AdminFormValues): Promise<void> {
+      return this.datasource.registerAdmin(form);
+  }
+}
\ No newline at end of file
-- 
GitLab


From 25430b09bdcd0d62c1b2a43314a80d85ed8406c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:17:42 -0600
Subject: [PATCH 18/93] =?UTF-8?q?Se=20crea=20la=20clase=20que=20guarda=20l?=
 =?UTF-8?q?a=20l=C3=B3gica=20de=20los=20m=C3=A9todos=20para=20el=20datasou?=
 =?UTF-8?q?rce=20de=20admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/data/datasources/prod/admin_datasource.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 web/src/data/datasources/prod/admin_datasource.ts

diff --git a/web/src/data/datasources/prod/admin_datasource.ts b/web/src/data/datasources/prod/admin_datasource.ts
new file mode 100644
index 00000000..fe19d185
--- /dev/null
+++ b/web/src/data/datasources/prod/admin_datasource.ts
@@ -0,0 +1,8 @@
+import { AdminDatasourceInf } from "../../../infraestructure/datasources/admin_datasource";
+import { AdminFormValues } from "../../../infraestructure/entities/admin_form_values";
+
+export class AdminDatasourceProd implements AdminDatasourceInf{
+  async registerAdmin(form: AdminFormValues): Promise<void> {
+      
+  }
+}
\ No newline at end of file
-- 
GitLab


From 34811189f9fb46b03de146d5ef9e351945f36e7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:18:26 -0600
Subject: [PATCH 19/93] Se agrega el encabezado del panel de administradores y
 la pantalla de registro

---
 .../sa_panel_admin_screen.tsx                 | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen.tsx b/web/src/components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen.tsx
index b91f5961..1885d168 100644
--- a/web/src/components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen.tsx
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen.tsx
@@ -1,8 +1,33 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import './assets/css/styles.css';
+import { SuperadminPanelAdminRegister } from '../sa_panel_admin_register/sa_panel_admin_register';
+
+interface props {
+  windowActive: boolean;
+  setWindowActive: Dispatch<SetStateAction<boolean>>;
+}
+
+export const SuperadminPanelAdminScreen = ({windowActive,setWindowActive}:props) => {
+  const [showRegisterPanel, setShowRegisterPanel] = useState(false);
 
-export const SuperadminPanelAdminScreen = () => {
   return (
     <div className="sa_panel_admin_content">
-
+      <div className='admin_panel_header'>
+        Administrar administradores
+        <button className='admin_add_btn' 
+          onClick={() => {setShowRegisterPanel(true); setWindowActive(true)}}
+          disabled = {windowActive}
+        >
+          Registrar Nuevo Admin
+        </button>
+      </div>
+      <div className='sa_panel_admin_body'>
+        {showRegisterPanel 
+          && 
+          <SuperadminPanelAdminRegister 
+            setWindowActive={setWindowActive}
+            setShowRegisterPanel={setShowRegisterPanel}/>}
+      </div>
     </div>  
   );
 }
\ No newline at end of file
-- 
GitLab


From c13d0a6434d37f4835627cf44310e22ae62fb6ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:18:53 -0600
Subject: [PATCH 20/93] =?UTF-8?q?Se=20agregan=20los=20estilos=20para=20la?=
 =?UTF-8?q?=20pantalla=20de=20administraci=C3=B3n=20de=20administradores?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/styles.css                     | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 web/src/components/sa_panel_admin/sa_panel_admin_screen/assets/css/styles.css

diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_screen/assets/css/styles.css b/web/src/components/sa_panel_admin/sa_panel_admin_screen/assets/css/styles.css
new file mode 100644
index 00000000..c8496767
--- /dev/null
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_screen/assets/css/styles.css
@@ -0,0 +1,22 @@
+.sa_panel_admin_content{
+    background: gray;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .admin_panel_header{
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+  }
+  
+  .admin_panel_header .admin_add_btn{
+    display: inline-block;
+    cursor: pointer;
+    position: absolute;
+    right: 5px;
+  }
\ No newline at end of file
-- 
GitLab


From 5cd3fb57dda0290619b1a92e4bc93fd8491fd1e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:20:09 -0600
Subject: [PATCH 21/93] Se crea el componente y los estilos del panel de
 registro de administradores

---
 .../assets/css/styles.css                     |  92 +++++++++++++++
 .../sa_panel_admin_register.tsx               | 107 ++++++++++++++++++
 2 files changed, 199 insertions(+)
 create mode 100644 web/src/components/sa_panel_admin/sa_panel_admin_register/assets/css/styles.css
 create mode 100644 web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx

diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_register/assets/css/styles.css b/web/src/components/sa_panel_admin/sa_panel_admin_register/assets/css/styles.css
new file mode 100644
index 00000000..5eca8d6e
--- /dev/null
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_register/assets/css/styles.css
@@ -0,0 +1,92 @@
+*{
+  user-select: none;
+}
+
+.admin_register_wrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 30vw;
+  height: 60vh;
+  background: green;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin_register_header  {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.admin_register_close_btn{
+  display: inline-block;
+  cursor: pointer;
+  position: absolute;
+  right: 5px;
+}
+
+.admin_register_content {
+  background: white;
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin_register_content form{
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.admin_input_cnt{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 5px 0;
+}
+
+.admin_input_cnt input{
+  width: 80%;
+  padding: 5px 20px;
+  border: 1px solid  lightgray;
+  border-radius: 5px;
+}
+
+.error{
+  color: red;
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
+}
+
+.admin_input_cnt .submit_btn{
+  width: 30%;
+}
+
+.password_input_visibility_cnt{
+  position: relative;
+  width: 80%;
+}
+
+.password_input_visibility_cnt input{
+  width: 100%;
+  padding-left: 20px;
+  padding-right: 30px;
+}
+
+.pass-visibility-button{
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  transform: translateY(-50%);
+  transform: all 0.3s ease;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx b/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx
new file mode 100644
index 00000000..e83cf999
--- /dev/null
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx
@@ -0,0 +1,107 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import './assets/css/styles.css'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faWindowClose, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { useAdminRegister } from "../../../hooks/useAdminRegister";
+import { usePasswoordVisibility } from "../../../hooks/usePasswordVisibility";
+
+interface props {
+  setWindowActive: Dispatch<SetStateAction<boolean>>,
+  setShowRegisterPanel: Dispatch<SetStateAction<boolean>>
+}
+
+export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPanel}:props) => {
+  const {
+    register,
+    errors,
+    handleSubmit, 
+    onSubmit, 
+  } = useAdminRegister();
+
+  const {
+    values,
+    handleClickShowPassword,
+    handleMouseDownPassword
+  } = usePasswoordVisibility();
+
+  return (
+    <div className="admin_register_wrap">
+      <div className="admin_register_header">
+        Registra el administrador
+        <FontAwesomeIcon icon={faWindowClose} className="admin_register_close_btn"
+          onClick={() => {setShowRegisterPanel(false); setWindowActive(false)}}/>
+      </div>
+      <div className="admin_register_content">
+        <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
+          <div className="admin_input_cnt">
+            <label>Correo electronico</label>
+            <input
+              type="text"
+              {...register('email')}
+              autoComplete="off"
+            />
+            <p className="error">{errors.email?.message}</p>
+          </div>
+
+          <div className="admin_input_cnt">
+            <label>Nombre</label>
+            <input
+              type="text"
+              {...register('name')}
+              autoComplete="off"
+            />
+            <p className="error">{errors.name?.message}</p>
+          </div>
+
+          <div className="admin_input_cnt">
+            <label>Contraseña</label>
+            <input
+              type={
+                values.showPassword
+                ? "text"
+                : "password"
+              }
+              {...register('password')}
+              autoComplete="off"
+            />
+            <p className="error">{errors.password?.message}</p>
+          </div>
+
+          <div className="admin_input_cnt">
+            <label>Confirmar contraseña</label>
+            <div className="password_input_visibility_cnt">
+              <input
+                type={
+                  values.showPassword
+                  ? "text"
+                  : "password"
+                }
+                {...register('confirmPassword')}
+                autoComplete="off"
+              />
+              <FontAwesomeIcon className="pass-visibility-button"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+                icon={values.showPassword ? faEye : faEyeSlash}
+              />
+            </div>
+            <p className="error">{errors.confirmPassword?.message}</p>
+          </div>
+
+          <div className="admin_input_cnt">
+              <label>Pueblo mágico al que representa</label>
+              <select
+                  {...register('townAdmin')}>
+                  <option key='1' value={1}>Zacatecas</option>
+                </select>
+              <p className="error">{errors.townAdmin?.message}</p>
+            </div>
+            
+            <div className="admin_input_cnt">
+              <input className="submit_btn" type="submit" content="Registrar"/>
+            </div>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
-- 
GitLab


From 88e37b961877a5591041d3092c84628205506546 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:29:10 -0600
Subject: [PATCH 22/93] Se renombra el archivo town_form_values.ts a town.ts

---
 web/src/components/image_dropzone/image_dropzone.tsx            | 2 +-
 web/src/data/datasources/prod/town_datasource.ts                | 2 +-
 web/src/data/repositories/prod/town_repository.ts               | 2 +-
 web/src/hooks/useTown.tsx                                       | 2 +-
 web/src/infraestructure/datasources/town_datasource.ts          | 2 +-
 .../infraestructure/entities/{town_form_values.ts => town.ts}   | 0
 web/src/infraestructure/repositories/town_repository.ts         | 2 +-
 7 files changed, 6 insertions(+), 6 deletions(-)
 rename web/src/infraestructure/entities/{town_form_values.ts => town.ts} (100%)

diff --git a/web/src/components/image_dropzone/image_dropzone.tsx b/web/src/components/image_dropzone/image_dropzone.tsx
index 0efa3855..bd2101c7 100644
--- a/web/src/components/image_dropzone/image_dropzone.tsx
+++ b/web/src/components/image_dropzone/image_dropzone.tsx
@@ -4,7 +4,7 @@ import { useDropzone } from "react-dropzone";
 import { useState } from 'react';
 import "react-toastify/dist/ReactToastify.css";
 import { UseFormSetValue } from 'react-hook-form';
-import { TownFormValues } from '../../infraestructure/entities/town_form_values';
+import { TownFormValues } from '../../infraestructure/entities/town';
 
 interface props {
   setValue : UseFormSetValue<TownFormValues>
diff --git a/web/src/data/datasources/prod/town_datasource.ts b/web/src/data/datasources/prod/town_datasource.ts
index 7fedfb43..215f4ee0 100644
--- a/web/src/data/datasources/prod/town_datasource.ts
+++ b/web/src/data/datasources/prod/town_datasource.ts
@@ -3,7 +3,7 @@ import { APIUrl } from "../../../constants/api_url";
 import { TownDatasourceInf } from "../../../infraestructure/datasources/town_datasource";
 import { StateModel } from "../../models/prod/StateModel";
 import { State } from "../../../infraestructure/entities/state";
-import { TownFormValues } from "../../../infraestructure/entities/town_form_values";
+import { TownFormValues } from "../../../infraestructure/entities/town";
 import UnauthorizedError from "../../../errors/UnautherizedError";
 
 export class TownDatasourceProd implements TownDatasourceInf{
diff --git a/web/src/data/repositories/prod/town_repository.ts b/web/src/data/repositories/prod/town_repository.ts
index 2ca49d14..83c2c3e3 100644
--- a/web/src/data/repositories/prod/town_repository.ts
+++ b/web/src/data/repositories/prod/town_repository.ts
@@ -1,6 +1,6 @@
 import { TownDatasourceInf } from "../../../infraestructure/datasources/town_datasource";
 import { State } from "../../../infraestructure/entities/state";
-import { TownFormValues } from "../../../infraestructure/entities/town_form_values";
+import { TownFormValues } from "../../../infraestructure/entities/town";
 import { TownRepositoryInf } from "../../../infraestructure/repositories/town_repository";
 
 export class TownRepositoryProd implements TownRepositoryInf{
diff --git a/web/src/hooks/useTown.tsx b/web/src/hooks/useTown.tsx
index 980c4386..d3da98e8 100644
--- a/web/src/hooks/useTown.tsx
+++ b/web/src/hooks/useTown.tsx
@@ -3,7 +3,7 @@ import { TownDatasourceProd } from "../data/datasources/prod/town_datasource"
 import { TownRepositoryProd } from "../data/repositories/prod/town_repository";
 import { State } from "../infraestructure/entities/state";
 import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
-import { TownFormValues } from "../infraestructure/entities/town_form_values";
+import { TownFormValues } from "../infraestructure/entities/town";
 import axios from "axios";
 import { toast } from "react-toastify";
 
diff --git a/web/src/infraestructure/datasources/town_datasource.ts b/web/src/infraestructure/datasources/town_datasource.ts
index 229d5124..2e99a02c 100644
--- a/web/src/infraestructure/datasources/town_datasource.ts
+++ b/web/src/infraestructure/datasources/town_datasource.ts
@@ -1,5 +1,5 @@
 import { State } from "../entities/state";
-import { TownFormValues } from "../entities/town_form_values";
+import { TownFormValues } from "../entities/town";
 
 export interface TownDatasourceInf{
     getStates(): Promise<State[]>;
diff --git a/web/src/infraestructure/entities/town_form_values.ts b/web/src/infraestructure/entities/town.ts
similarity index 100%
rename from web/src/infraestructure/entities/town_form_values.ts
rename to web/src/infraestructure/entities/town.ts
diff --git a/web/src/infraestructure/repositories/town_repository.ts b/web/src/infraestructure/repositories/town_repository.ts
index 827aba54..a45f8bf5 100644
--- a/web/src/infraestructure/repositories/town_repository.ts
+++ b/web/src/infraestructure/repositories/town_repository.ts
@@ -1,5 +1,5 @@
 import { State } from "../entities/state";
-import { TownFormValues } from "../entities/town_form_values";
+import { TownFormValues } from "../entities/town";
 
 export interface TownRepositoryInf{
     getStates(): Promise<State[]>;
-- 
GitLab


From 01469602ae27d291a33f8cd903fdd22f84c73878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:33:21 -0600
Subject: [PATCH 23/93] Se renombra el hook a useTown

---
 .../sa_panel_town_register/sa_panel_town_register.tsx        | 4 ++--
 web/src/hooks/useTown.tsx                                    | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
index 88ca62fb..162edfde 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import './css/styles.css'
 import { ImageDropzone } from "../../image_dropzone/image_dropzone";
 import { Dispatch, SetStateAction, useState } from "react";
-import { useTownRegister } from "../../../hooks/useTown";
+import { useTown } from "../../../hooks/useTown";
 import { State } from "../../../infraestructure/entities/state";
 
 interface props {
@@ -19,7 +19,7 @@ export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPan
     errors,
     handleSubmit, 
     onSubmit, 
-  } = useTownRegister();
+  } = useTown();
   const [isEnglish, setIsEnglish] = useState(false);
   const [spanishDescription, setSpanishDescription] = useState("");
   const [englishDescription, setEnglishDescription] = useState("");
diff --git a/web/src/hooks/useTown.tsx b/web/src/hooks/useTown.tsx
index d3da98e8..56b221cc 100644
--- a/web/src/hooks/useTown.tsx
+++ b/web/src/hooks/useTown.tsx
@@ -3,7 +3,7 @@ import { TownDatasourceProd } from "../data/datasources/prod/town_datasource"
 import { TownRepositoryProd } from "../data/repositories/prod/town_repository";
 import { State } from "../infraestructure/entities/state";
 import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
-import { TownFormValues } from "../infraestructure/entities/town";
+import { Town, TownFormValues } from "../infraestructure/entities/town";
 import axios from "axios";
 import { toast } from "react-toastify";
 
@@ -12,6 +12,7 @@ const townRepository = new TownRepositoryProd(townDatasource);
 
 const resolver: Resolver<TownFormValues> = async (data) => {
   const errors: FieldErrors<TownFormValues> = {};
+  const [townsList, setTownsList] = useState<Town[] | null>(null);
 
   if (!data.name) {
     errors.name = {
@@ -54,7 +55,7 @@ const resolver: Resolver<TownFormValues> = async (data) => {
   };
 };
 
-export const useTownRegister = () => {
+export const useTown = () => {
   const {
     register,
     handleSubmit,
-- 
GitLab


From 573b7fc35023d70d67c79ee288b93fda38237ac2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 2 May 2024 15:43:47 -0600
Subject: [PATCH 24/93] =?UTF-8?q?Se=20agrega=20el=20m=C3=A9todo=20de=20par?=
 =?UTF-8?q?a=20obtener=20pueblos=20de=20un=20determinado=20estado?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/data/repositories/prod/town_repository.ts       | 5 ++++-
 web/src/infraestructure/datasources/town_datasource.ts  | 3 ++-
 web/src/infraestructure/repositories/town_repository.ts | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/data/repositories/prod/town_repository.ts b/web/src/data/repositories/prod/town_repository.ts
index 83c2c3e3..dd9d41df 100644
--- a/web/src/data/repositories/prod/town_repository.ts
+++ b/web/src/data/repositories/prod/town_repository.ts
@@ -1,6 +1,6 @@
 import { TownDatasourceInf } from "../../../infraestructure/datasources/town_datasource";
 import { State } from "../../../infraestructure/entities/state";
-import { TownFormValues } from "../../../infraestructure/entities/town";
+import { Town, TownFormValues } from "../../../infraestructure/entities/town";
 import { TownRepositoryInf } from "../../../infraestructure/repositories/town_repository";
 
 export class TownRepositoryProd implements TownRepositoryInf{
@@ -13,4 +13,7 @@ export class TownRepositoryProd implements TownRepositoryInf{
   async registerTown(form: TownFormValues): Promise<void> {
     return this.datasource.registerTown(form);
   }
+  async getTownsByState(idState: number) : Promise<Town[]> {
+    return this.datasource.getTownsByState(idState);
+  }
 }
\ No newline at end of file
diff --git a/web/src/infraestructure/datasources/town_datasource.ts b/web/src/infraestructure/datasources/town_datasource.ts
index 2e99a02c..12648a94 100644
--- a/web/src/infraestructure/datasources/town_datasource.ts
+++ b/web/src/infraestructure/datasources/town_datasource.ts
@@ -1,7 +1,8 @@
 import { State } from "../entities/state";
-import { TownFormValues } from "../entities/town";
+import { Town, TownFormValues } from "../entities/town";
 
 export interface TownDatasourceInf{
     getStates(): Promise<State[]>;
     registerTown(form: TownFormValues): void;
+    getTownsByState(idState: number) : Promise<Town[]>;
 }
\ No newline at end of file
diff --git a/web/src/infraestructure/repositories/town_repository.ts b/web/src/infraestructure/repositories/town_repository.ts
index a45f8bf5..3f6c0f20 100644
--- a/web/src/infraestructure/repositories/town_repository.ts
+++ b/web/src/infraestructure/repositories/town_repository.ts
@@ -1,7 +1,8 @@
 import { State } from "../entities/state";
-import { TownFormValues } from "../entities/town";
+import { Town, TownFormValues } from "../entities/town";
 
 export interface TownRepositoryInf{
     getStates(): Promise<State[]>;
     registerTown(form: TownFormValues): Promise<void>;
+    getTownsByState(idState: number) : Promise<Town[]>;
 }
\ No newline at end of file
-- 
GitLab


From e1a071fb12e5495add2b665f5e1e2dbfd16220fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:23:54 -0600
Subject: [PATCH 25/93] Se instala la dependencia de react-data-table-component

---
 web/package-lock.json | 142 ++++++++++++++++++++++++++++++++++++++++++
 web/package.json      |   1 +
 2 files changed, 143 insertions(+)

diff --git a/web/package-lock.json b/web/package-lock.json
index 5b6f1df1..a18ce42a 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -20,6 +20,7 @@
         "@types/react-dom": "^18.2.21",
         "axios": "^1.6.8",
         "react": "^18.2.0",
+        "react-data-table-component": "^7.6.2",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.51.2",
@@ -4531,6 +4532,12 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==",
+      "peer": true
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -6070,6 +6077,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6515,6 +6531,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -6705,6 +6730,17 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "peer": true,
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -14995,6 +15031,23 @@
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
+    "node_modules/react-data-table-component": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-7.6.2.tgz",
+      "integrity": "sha512-nHe7040fmtrJyQr/ieGrTfV0jBflYGK4sLokC6/AFOv3ThjmA9WzKz8Z8/2wMxzRqLU+Rn0CVFg+8+frKLepWQ==",
+      "dependencies": {
+        "deepmerge": "^4.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.3",
+        "styled-components": ">= 5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "styled-components": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -16085,6 +16138,12 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "peer": true
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -16616,6 +16675,89 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.9.tgz",
+      "integrity": "sha512-aBOqs0uMsYufFXSE4q6cA6Ty1fwZuMk4BJRHfiGSna59F1otnxiDelwhN4fEwmBtIymmF0ZqXHnpSigr2ps9Cg==",
+      "peer": true,
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.0",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.2",
+        "postcss": "8.4.31",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.1",
+        "tslib": "2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "peer": true,
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/styled-components/node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "peer": true
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==",
+      "peer": true
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
+      "peer": true
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
diff --git a/web/package.json b/web/package.json
index e0ae714e..380d9b4b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,6 +15,7 @@
     "@types/react-dom": "^18.2.21",
     "axios": "^1.6.8",
     "react": "^18.2.0",
+    "react-data-table-component": "^7.6.2",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.2",
-- 
GitLab


From e0a170ace2e5027ec6e9b3fd7325b5f86121100b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:24:21 -0600
Subject: [PATCH 26/93] Se crea el componente y sus estilos para un loader

---
 .../loading_screen/assets/css/styles.css      | 24 +++++++++++++++++++
 .../loading_screen/loading_screen.tsx         |  9 +++++++
 2 files changed, 33 insertions(+)
 create mode 100644 web/src/components/loading_screen/assets/css/styles.css
 create mode 100644 web/src/components/loading_screen/loading_screen.tsx

diff --git a/web/src/components/loading_screen/assets/css/styles.css b/web/src/components/loading_screen/assets/css/styles.css
new file mode 100644
index 00000000..210b3b41
--- /dev/null
+++ b/web/src/components/loading_screen/assets/css/styles.css
@@ -0,0 +1,24 @@
+.loading_screen{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading_spinner{
+  width: 150px;
+  padding: 20px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #25b09b;
+  --_m: 
+    conic-gradient(#0000 10%,#000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+          mask: var(--_m);
+  -webkit-mask-composite: source-out;
+          mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {to{transform: rotate(1turn)}}
\ No newline at end of file
diff --git a/web/src/components/loading_screen/loading_screen.tsx b/web/src/components/loading_screen/loading_screen.tsx
new file mode 100644
index 00000000..42c89426
--- /dev/null
+++ b/web/src/components/loading_screen/loading_screen.tsx
@@ -0,0 +1,9 @@
+import './assets/css/styles.css';
+
+export const LoadingScreen = () => {
+  return (
+    <div className="loading_screen">
+      <div className="loading_spinner"/>
+    </div>
+  );
+}
\ No newline at end of file
-- 
GitLab


From 130edd6b596e6f033ad934ee9151c84603b713c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:26:24 -0600
Subject: [PATCH 27/93] Se agrega una interface para guardar un pueblo

---
 web/src/infraestructure/entities/town.ts | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/web/src/infraestructure/entities/town.ts b/web/src/infraestructure/entities/town.ts
index ffd11e36..e591aed3 100644
--- a/web/src/infraestructure/entities/town.ts
+++ b/web/src/infraestructure/entities/town.ts
@@ -1,7 +1,17 @@
 export interface TownFormValues {
-  name : string
-  descriptionES : string
-  descriptionEN : string
-  state : string
-  imageURL : File
+  name : string;
+  descriptionES : string;
+  descriptionEN : string;
+  state : string;
+  imageURL : File;
+}
+
+export interface Town {
+  idTown: number;
+  name : string;
+  descriptionES? : string;
+  descriptionEN? : string;
+  idState : number;
+  state: string;
+  imageURL? : string;
 }
\ No newline at end of file
-- 
GitLab


From 4c8489eb85c672e4615faffa2ca7d3ff327064de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:26:50 -0600
Subject: [PATCH 28/93] Se modifican los atributos para que no acepten valores
 nulos

---
 web/src/infraestructure/entities/state.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/infraestructure/entities/state.ts b/web/src/infraestructure/entities/state.ts
index 7079ff29..fd1cf8c8 100644
--- a/web/src/infraestructure/entities/state.ts
+++ b/web/src/infraestructure/entities/state.ts
@@ -1,5 +1,5 @@
 export interface State {
-    stateId?: number,
-    name?: string,
-    imageURL?: string
+    stateId: number,
+    name: string,
+    imageURL: string
 }
\ No newline at end of file
-- 
GitLab


From 09742d590998c09731903a73395496d96aeb565b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:27:45 -0600
Subject: [PATCH 29/93] =?UTF-8?q?Se=20modifica=20el=20m=C3=A9todo=20getTow?=
 =?UTF-8?q?nsByState=20para=20que=20acepte=20el=20nombre=20del=20estado=20?=
 =?UTF-8?q?como=20segundo=20param=C3=A9tro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data/datasources/prod/town_datasource.ts  | 26 ++++++++++++++++---
 .../data/repositories/prod/town_repository.ts |  4 +--
 .../datasources/town_datasource.ts            |  2 +-
 .../repositories/town_repository.ts           |  2 +-
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/web/src/data/datasources/prod/town_datasource.ts b/web/src/data/datasources/prod/town_datasource.ts
index 215f4ee0..1799f49b 100644
--- a/web/src/data/datasources/prod/town_datasource.ts
+++ b/web/src/data/datasources/prod/town_datasource.ts
@@ -3,8 +3,9 @@ import { APIUrl } from "../../../constants/api_url";
 import { TownDatasourceInf } from "../../../infraestructure/datasources/town_datasource";
 import { StateModel } from "../../models/prod/StateModel";
 import { State } from "../../../infraestructure/entities/state";
-import { TownFormValues } from "../../../infraestructure/entities/town";
+import { Town, TownFormValues } from "../../../infraestructure/entities/town";
 import UnauthorizedError from "../../../errors/UnautherizedError";
+import { TownModel } from "../../models/prod/TownModel";
 
 export class TownDatasourceProd implements TownDatasourceInf{
   async getStates(): Promise<State[]> {
@@ -22,7 +23,7 @@ export class TownDatasourceProd implements TownDatasourceInf{
   }
 
   async registerTown(form: TownFormValues): Promise<void> {
-    const formToSend = new FormData;
+    const formToSend = new FormData();
     formToSend.append('name',form.name);
     formToSend.append('descriptionES',form.descriptionES);
     formToSend.append('descriptionEN',form.descriptionEN);
@@ -33,9 +34,28 @@ export class TownDatasourceProd implements TownDatasourceInf{
       'Content-Type': 'multipart/form-data'
     };
 
-    const {status, data} = await axios.post(APIUrl + '/town', formToSend,{headers});
+    const {status} = await axios.post(APIUrl + '/town', formToSend,{headers});
     if (status === 401) {
       throw new UnauthorizedError({code: 401, message: 'Unauthorized'});
     }
   }
+
+  async getTownsByState(idState: number, stateName:string): Promise<Town[]> {
+    const {data} = await axios.get<TownModel[]>(APIUrl+`/state/${idState}/town`, {
+      params: {
+        lang: 'ES'
+      }
+    });
+    const towns = data.map((value) => {
+      const town: Town = {
+        idTown : value.townId,
+        name: value.name,
+        idState: value.stateId,
+        state: stateName
+      }
+      return town;
+    })
+    
+    return towns;
+  }
 }
\ No newline at end of file
diff --git a/web/src/data/repositories/prod/town_repository.ts b/web/src/data/repositories/prod/town_repository.ts
index dd9d41df..31c8edd0 100644
--- a/web/src/data/repositories/prod/town_repository.ts
+++ b/web/src/data/repositories/prod/town_repository.ts
@@ -13,7 +13,7 @@ export class TownRepositoryProd implements TownRepositoryInf{
   async registerTown(form: TownFormValues): Promise<void> {
     return this.datasource.registerTown(form);
   }
-  async getTownsByState(idState: number) : Promise<Town[]> {
-    return this.datasource.getTownsByState(idState);
+  async getTownsByState(idState: number, stateName:string) : Promise<Town[]> {
+    return this.datasource.getTownsByState(idState, stateName);
   }
 }
\ No newline at end of file
diff --git a/web/src/infraestructure/datasources/town_datasource.ts b/web/src/infraestructure/datasources/town_datasource.ts
index 12648a94..7dfed2eb 100644
--- a/web/src/infraestructure/datasources/town_datasource.ts
+++ b/web/src/infraestructure/datasources/town_datasource.ts
@@ -4,5 +4,5 @@ import { Town, TownFormValues } from "../entities/town";
 export interface TownDatasourceInf{
     getStates(): Promise<State[]>;
     registerTown(form: TownFormValues): void;
-    getTownsByState(idState: number) : Promise<Town[]>;
+    getTownsByState(idState: number, stateName:string) : Promise<Town[]>;
 }
\ No newline at end of file
diff --git a/web/src/infraestructure/repositories/town_repository.ts b/web/src/infraestructure/repositories/town_repository.ts
index 3f6c0f20..1c7388c2 100644
--- a/web/src/infraestructure/repositories/town_repository.ts
+++ b/web/src/infraestructure/repositories/town_repository.ts
@@ -4,5 +4,5 @@ import { Town, TownFormValues } from "../entities/town";
 export interface TownRepositoryInf{
     getStates(): Promise<State[]>;
     registerTown(form: TownFormValues): Promise<void>;
-    getTownsByState(idState: number) : Promise<Town[]>;
+    getTownsByState(idState: number, stateName:string) : Promise<Town[]>;
 }
\ No newline at end of file
-- 
GitLab


From da392c91ed2e33d697ed1db044de861c4d41ca09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:29:01 -0600
Subject: [PATCH 30/93] Se agrega un cargador que se muestra mientras no haya
 estados

---
 .../super_admin_page/super_admin_home_page.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/home/super_admin_page/super_admin_home_page.tsx b/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
index c1a0125c..51fabb25 100644
--- a/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
+++ b/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
@@ -1,26 +1,28 @@
 import { Menu, MenuItem, Sidebar } from "react-pro-sidebar"
 import './assets/styles/style.css';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMonument, faSignOut, faUser, faUserTie } from "@fortawesome/free-solid-svg-icons";
+import { faMonument, faUserTie } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
 import { AdminPanelNavBar } from "../../../components/admin_panel_navbar/admin_navbar";
 import { SidebarHeader } from "../../../components/sidebar_header/sidebar_header";
 import { SuperadminPanelTownScreen } from "../../../components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen";
 import { SuperadminPanelAdminScreen } from "../../../components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen";
 import { useGetStatesList } from "../../../hooks/useGetStatesList";
-import { State } from "../../../infraestructure/entities/state";
 import axios from "axios";
+import { LoadingScreen } from "../../../components/loading_screen/loading_screen";
 
 export const SuperAdminHomePage = () => {
   const [collapsed, setCollapsed] = useState(true);
   const [windowActive, setWindowActive] = useState(false);
   const [townPanel, setTownPanel] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
   const {getStates, statesList} = useGetStatesList();
 
   useEffect(() => {
     const getStatesList = async () => {
       try{
         getStates();
+        setIsLoading(false);
       }catch(error: any){
         if(axios.isAxiosError(error)){
           //console.log(error)
@@ -62,11 +64,15 @@ export const SuperAdminHomePage = () => {
         <div className="superadmin-panel-content">
           {townPanel 
             ? 
+              isLoading || statesList.length===0
+              ?
+                <LoadingScreen/>
+              :
               <SuperadminPanelTownScreen 
-                windowActive={windowActive} 
-                setWindowActive={setWindowActive}
-                statesList={statesList}
-              /> 
+              windowActive={windowActive} 
+              setWindowActive={setWindowActive}
+              statesList={statesList}
+            />  
             : 
               <SuperadminPanelAdminScreen 
               windowActive={windowActive} 
-- 
GitLab


From 6118018b0bcecc0baf3e24ba711953c9d07462e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:29:18 -0600
Subject: [PATCH 31/93] Se crea un modelo para guardar los valores de un pueblo

---
 web/src/data/models/prod/TownModel.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 web/src/data/models/prod/TownModel.ts

diff --git a/web/src/data/models/prod/TownModel.ts b/web/src/data/models/prod/TownModel.ts
new file mode 100644
index 00000000..9505c9dc
--- /dev/null
+++ b/web/src/data/models/prod/TownModel.ts
@@ -0,0 +1,7 @@
+export interface TownModel {
+  townId: number;
+  name : string;
+  imageName : string;
+  description : string;
+  stateId : number;
+}
\ No newline at end of file
-- 
GitLab


From 12a2e34a14f38875ad596ea3544865049f3975ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:29:49 -0600
Subject: [PATCH 32/93] =?UTF-8?q?Se=20agrega=20el=20m=C3=A9todo=20de=20get?=
 =?UTF-8?q?TownsByState?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/hooks/useTown.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/web/src/hooks/useTown.tsx b/web/src/hooks/useTown.tsx
index 56b221cc..2bd07b03 100644
--- a/web/src/hooks/useTown.tsx
+++ b/web/src/hooks/useTown.tsx
@@ -1,10 +1,8 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { TownDatasourceProd } from "../data/datasources/prod/town_datasource"
 import { TownRepositoryProd } from "../data/repositories/prod/town_repository";
-import { State } from "../infraestructure/entities/state";
 import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { Town, TownFormValues } from "../infraestructure/entities/town";
-import axios from "axios";
 import { toast } from "react-toastify";
 
 const townDatasource = new TownDatasourceProd();
@@ -12,7 +10,6 @@ const townRepository = new TownRepositoryProd(townDatasource);
 
 const resolver: Resolver<TownFormValues> = async (data) => {
   const errors: FieldErrors<TownFormValues> = {};
-  const [townsList, setTownsList] = useState<Town[] | null>(null);
 
   if (!data.name) {
     errors.name = {
@@ -55,18 +52,22 @@ const resolver: Resolver<TownFormValues> = async (data) => {
   };
 };
 
-export const useTown = () => {
+export const useTown = (forceRenderList?: () => void) => {
   const {
     register,
     handleSubmit,
     formState: {errors},
     setValue
   } = useForm<TownFormValues>({resolver});
+  const [townsList, setTownsList] = useState<Town[] | null>(null);
   
   const onSubmit: SubmitHandler<TownFormValues> = (data: TownFormValues) => {
     const fetch = async () => {
       try{
         await townRepository.registerTown(data);
+        if(forceRenderList){
+          forceRenderList();
+        }
       }catch(error: any){
 
       }
@@ -79,6 +80,15 @@ export const useTown = () => {
       }
     )
   }
+  
+  const getTownsByState = async (stateId: number, stateName:string) => {
+    try{
+      const towns = await townRepository.getTownsByState(stateId, stateName);
+      setTownsList(towns);
+    }catch(error: any){
+
+    }
+  }
 
-  return {register, handleSubmit, errors, onSubmit, setValue};
+  return {register, handleSubmit, errors, onSubmit, setValue, townsList, getTownsByState, setTownsList};
 }
\ No newline at end of file
-- 
GitLab


From e679f5830a39ed9ca99017867029db16a80777d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:30:17 -0600
Subject: [PATCH 33/93] Se modifica para que statesList no sea nulo

---
 web/src/hooks/useGetStatesList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/hooks/useGetStatesList.tsx b/web/src/hooks/useGetStatesList.tsx
index 0cad10c3..b862ff74 100644
--- a/web/src/hooks/useGetStatesList.tsx
+++ b/web/src/hooks/useGetStatesList.tsx
@@ -7,7 +7,7 @@ const townDatasource = new TownDatasourceProd();
 const townRepository = new TownRepositoryProd(townDatasource);
 
 export const useGetStatesList = () => {
-  const [statesList, setStatesList] = useState<State[] | null>(null);
+  const [statesList, setStatesList] = useState<State[]>([]);
 
   const getStates = async () => {
     try{
-- 
GitLab


From 1f65835da56f058c72f89b40228e64f79bb70f01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:31:27 -0600
Subject: [PATCH 34/93] =?UTF-8?q?Se=20modifica=20para=20que=20se=20vuelva?=
 =?UTF-8?q?=20a=20renderizar=20cuando=20se=20llame=20a=20la=20funci=C3=B3n?=
 =?UTF-8?q?=20forceRenderList?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sa_panel_town_screen/sa_panel_town_screen.tsx  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen.tsx b/web/src/components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen.tsx
index 79978367..9938e108 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_screen/sa_panel_town_screen.tsx
@@ -2,15 +2,21 @@ import { Dispatch, SetStateAction, useState } from 'react';
 import { SuperadminPanelTownRegister } from '../sa_panel_town_register/sa_panel_town_register';
 import './css/styles.css'
 import { State } from '../../../infraestructure/entities/state';
+import { SuperadminPanelTownList } from '../sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list';
 
 interface props {
   windowActive: boolean;
   setWindowActive: Dispatch<SetStateAction<boolean>>;
-  statesList: State[] | null;
+  statesList: State[];
 }
 
 export const SuperadminPanelTownScreen = ({windowActive,setWindowActive, statesList}:props) => {
   const [showRegisterPanel, setShowRegisterPanel] = useState(false);
+  const [renderCount, setRenderCount] = useState(0);
+
+  const forceRenderList = () =>{
+    setRenderCount(prevCount => prevCount + 1);
+  }
 
   return (
     <div className="sa_panel_town_content">
@@ -24,12 +30,16 @@ export const SuperadminPanelTownScreen = ({windowActive,setWindowActive, statesL
         </button>
       </div>
       <div className='sa_panel_town_body'>
+        <SuperadminPanelTownList statesList={statesList} key={renderCount}/>
+
         {showRegisterPanel 
           && 
           <SuperadminPanelTownRegister 
             setWindowActive={setWindowActive}
             setShowRegisterPanel={setShowRegisterPanel}
-            statesList={statesList}/>}
+            statesList={statesList}
+            forceRenderList={forceRenderList}
+          />}
       </div>
     </div>  
   );
-- 
GitLab


From e395485cad35c75120ab67265e7921ce56650c1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:32:25 -0600
Subject: [PATCH 35/93] =?UTF-8?q?Se=20agrega=20una=20prop=20para=20llamar?=
 =?UTF-8?q?=20al=20m=C3=A9todo=20forceRenderList=20que=20se=20encuentra=20?=
 =?UTF-8?q?en=20el=20componente=20padre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sa_panel_town_register/sa_panel_town_register.tsx      | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
index 162edfde..e1a09af7 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_register/sa_panel_town_register.tsx
@@ -10,16 +10,17 @@ interface props {
   setWindowActive: Dispatch<SetStateAction<boolean>>,
   setShowRegisterPanel: Dispatch<SetStateAction<boolean>>
   statesList: State[] | null;
+  forceRenderList: () => void;
 }
 
-export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPanel, statesList}:props) => {
+export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPanel, statesList, forceRenderList}:props) => {
   const {
     register, 
     setValue, 
     errors,
     handleSubmit, 
     onSubmit, 
-  } = useTown();
+  } = useTown(forceRenderList);
   const [isEnglish, setIsEnglish] = useState(false);
   const [spanishDescription, setSpanishDescription] = useState("");
   const [englishDescription, setEnglishDescription] = useState("");
@@ -44,7 +45,7 @@ export const SuperadminPanelTownRegister = ({setWindowActive, setShowRegisterPan
             </div>
             <div className="state_select">
               <label>Estado al que pertenece el pueblo</label>
-              {statesList == null || statesList.length==0 ? 
+              {statesList === null || statesList.length===0 ? 
                 <label>No hay estados</label>
               : 
                 <select
-- 
GitLab


From bc1f96d5f0a5f2510f61caca6476e1763d959059 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:33:53 -0600
Subject: [PATCH 36/93] Se crea el componente y los estilos para el loader en
 espera y la tabla que guarda a los pueblos

---
 .../assets/css/styles.css                     |  5 ++
 .../sa_panel_town_list.tsx                    | 57 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/assets/css/styles.css
 create mode 100644 web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list.tsx

diff --git a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/assets/css/styles.css b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/assets/css/styles.css
new file mode 100644
index 00000000..5834a88a
--- /dev/null
+++ b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/assets/css/styles.css
@@ -0,0 +1,5 @@
+.town_list_content{
+  background: white;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list.tsx b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list.tsx
new file mode 100644
index 00000000..fd739bdd
--- /dev/null
+++ b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { useTown } from "../../../../hooks/useTown";
+import { State } from "../../../../infraestructure/entities/state";
+import axios from "axios";
+import "./assets/css/styles.css";
+import { TownListTable } from "../sa_panel_town_list_element/sa_panel_town_table";
+import { Town } from "../../../../infraestructure/entities/town";
+import { LoadingScreen } from "../../../loading_screen/loading_screen";
+
+interface props {
+  statesList: State[];
+}
+
+export const SuperadminPanelTownList = ({statesList}: props) => {
+  const {townsList, getTownsByState, setTownsList} = useTown();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    refreshList();
+  }, []);
+
+  const refreshList = () => {
+    setIsLoading(true);
+    const getTownsList = async () => {
+      try {
+        if (statesList) {
+          const townsListBackup: Town[] = [];
+          statesList.forEach((state) => {
+            getTownsByState(state.stateId, state.name);
+            if (townsList) {
+              townsListBackup.push(...townsList);
+            }
+          });
+          setTownsList(townsListBackup);
+        }
+      } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+          //console.log(error)
+        }
+      }
+    }
+    getTownsList();
+  };
+
+  return (
+    <div className="town_list_content">
+      {
+        isLoading && 
+        <LoadingScreen/>
+      }
+      {
+        townsList &&  townsList.length>0 && 
+          <TownListTable towns={townsList} setIsLoading={setIsLoading}/>
+      }
+    </div>
+  );
+}
\ No newline at end of file
-- 
GitLab


From 2c927051ba590e31f440b7bf725053b730dc8102 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:34:30 -0600
Subject: [PATCH 37/93] Se crea el componente y los estilos para la tabla que
 muestra los pueblos

---
 .../assets/css/styles.css                     | 13 +++++++
 .../sa_panel_town_table.tsx                   | 37 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/assets/css/styles.css
 create mode 100644 web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/sa_panel_town_table.tsx

diff --git a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/assets/css/styles.css b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/assets/css/styles.css
new file mode 100644
index 00000000..7e61c5a7
--- /dev/null
+++ b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/assets/css/styles.css
@@ -0,0 +1,13 @@
+.town_list_table {
+  height: 100%;
+}
+
+.bhFeAR{
+  display: flex !important;
+  height: 100%;
+} 
+
+.rdt_TableBody{
+  max-height: 100%;
+  overflow-y: auto;
+}
\ No newline at end of file
diff --git a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/sa_panel_town_table.tsx b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/sa_panel_town_table.tsx
new file mode 100644
index 00000000..1c77b4af
--- /dev/null
+++ b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/sa_panel_town_table.tsx
@@ -0,0 +1,37 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+import { Town } from "../../../../infraestructure/entities/town";
+import "./assets/css/styles.css";
+import DataTable, { TableColumn } from "react-data-table-component";
+
+interface props {
+  towns: Town[];
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
+}
+
+export const TownListTable= ({towns, setIsLoading}: props) => {
+  const columns : TableColumn<Town>[] = [
+    {
+      name: "Identificador", 
+      selector: row => row.idTown
+    },
+    {
+      name: "Nombre", 
+      selector: row => row.name,
+      sortable: true
+    }, 
+    {
+      name: "Estado", 
+      selector: row => row.state
+    }
+  ];
+
+  useEffect(() => {
+    setIsLoading(false);
+  }, []);
+
+  return (
+    <div>
+      <DataTable columns={columns} data={towns} selectableRows className="town_list_table"/>
+    </div>
+  );
+}
\ No newline at end of file
-- 
GitLab


From 4c682d8375211cf3efa110edd3808b8f1ca7808b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 9 May 2024 11:34:50 -0600
Subject: [PATCH 38/93] Se agrega los ajustes de VS code a gitignore

---
 .gitignore | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 6adb4dab..adff29d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@
 /web/node_modules
 /mobile/node_modules
 /mobile/.expo
-/mobile/metro
\ No newline at end of file
+/mobile/metro
+.vscode/settings.json
+
-- 
GitLab


From e7509ca5acae89b50024ca774a4b90abde1965d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:15:15 -0600
Subject: [PATCH 39/93] =?UTF-8?q?Se=20agrega=20un=20validador=20personaliz?=
 =?UTF-8?q?ado=20para=20los=20campos=20del=20inicio=20de=20sesi=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/hooks/useLogin.tsx | 57 ++++++++++++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 6 deletions(-)

diff --git a/web/src/hooks/useLogin.tsx b/web/src/hooks/useLogin.tsx
index 6a8ec169..44cfe6ea 100644
--- a/web/src/hooks/useLogin.tsx
+++ b/web/src/hooks/useLogin.tsx
@@ -1,14 +1,46 @@
-import { SubmitHandler, useForm } from "react-hook-form"
+import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form"
 import { LoginFormValues } from "../infraestructure/entities/login_form_values"
 import { LoginRepositoryProd } from "../data/repositories/prod/login_repository";
 import { LoginDatasourceProd } from "../data/datasources/prod/login_datasource";
-import { useEffect } from "react";
+import { Dispatch, SetStateAction, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../context/auth_context";
+import axios, { AxiosError } from "axios";
 const loginDatasource = new LoginDatasourceProd();
 const loginRepository = new LoginRepositoryProd(loginDatasource);
 
-export const useLogin = () => {
+const resolver: Resolver<LoginFormValues> = async (data) => {
+  const errors: FieldErrors<LoginFormValues> = {};
+
+  if (!data.email) {
+    errors.email = {
+      type: "required",
+      message: "El correo electronico es requerido"
+    };
+  }else{
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (!emailPattern.test(data.email)) {
+      errors.email = {
+        type: "validate",
+        message: "El correo electronico no es válido"
+      };
+    }
+  }
+
+  if (!data.password) {
+    errors.password = {
+      type: "required",
+      message: "La contraseña es requerida"
+    };
+  }
+
+  return {
+    values: Object.keys(errors).length > 0 ? {} : data,
+    errors: errors,
+  };
+};
+
+export const useLogin = (setIsLoading : Dispatch<SetStateAction<boolean>>) => {
   const {login, user} = useAuth();
   const navigate = useNavigate();
   const {
@@ -16,17 +48,30 @@ export const useLogin = () => {
     handleSubmit,
     setError,
     formState: {errors},
-  } = useForm<LoginFormValues>();
+    clearErrors,
+  } = useForm<LoginFormValues>({resolver});
 
   const onSubmit: SubmitHandler<LoginFormValues> = (data: LoginFormValues) => {
     const authenticate = async () => {
+      setIsLoading(true);
       try{
         const {user, token } = await loginRepository.getToken(data);
         await login(user, token);
         navigate("/");
       }catch(error: any){
-
+          if(axios.isAxiosError(error)){
+            error as AxiosError;
+            switch(error.code){
+              case(axios.AxiosError.ERR_BAD_REQUEST):
+                setError("root.serverError", {type: "401", message: "Correo electrónico o contraseña incorrectos"});
+                break;
+              case(axios.AxiosError.ERR_NETWORK):
+              setError("root.serverError", {type: "500", message: "Conexión con el servidor fallida"});
+              break;
+            }
+          }
       }
+      setIsLoading(false);
     }
     authenticate();
   }
@@ -37,5 +82,5 @@ export const useLogin = () => {
     }
   }, []);
 
-  return { register, handleSubmit, onSubmit, errors };
+  return { register, handleSubmit, onSubmit, errors , clearErrors};
 }
\ No newline at end of file
-- 
GitLab


From d5772781a7fa2e74c8d14bd1b71606a0d1c923de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:16:05 -0600
Subject: [PATCH 40/93] Se agrega los estilos para los errores y la ventana de
 error del servidor

---
 web/src/pages/login_page/styles/styles.css | 249 ++++++++++++++-------
 1 file changed, 174 insertions(+), 75 deletions(-)

diff --git a/web/src/pages/login_page/styles/styles.css b/web/src/pages/login_page/styles/styles.css
index 1d17cb07..d55bf18d 100644
--- a/web/src/pages/login_page/styles/styles.css
+++ b/web/src/pages/login_page/styles/styles.css
@@ -1,87 +1,87 @@
 @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 
 * {
-    margin: 10;
-    padding: 0;
-    font-family: 'Poppins', sans-serif;
-    box-sizing: border-box;
+  margin: 10;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+  box-sizing: border-box;
 }
 
 .login-page-root{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
 }
 
 .login-form-container{
-    border-radius: 15px;
-    background: white;
-    display: grid;
-    place-items: center;
-    box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
+  border-radius: 15px;
+  background: white;
+  display: grid;
+  place-items: center;
+  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
 }
 
 .login-form-container .title{
-    font-size: 35px;
-    font-weight: 600;
-    width: 100%;
-    color: white;
-    line-height: 50px;
-    text-align: center;
-    user-select: none;
-    border-radius: 15px 15px 0 0;
-    background: linear-gradient(-140deg,#413d3d, rgb(0, 0, 0))
+  font-size: 35px;
+  font-weight: 600;
+  width: 100%;
+  color: white;
+  line-height: 50px;
+  text-align: center;
+  user-select: none;
+  border-radius: 15px 15px 0 0;
+  background: linear-gradient(-140deg,#413d3d, rgb(0, 0, 0))
 }
 
 .login-form-container form{
-    padding: 10px 40px 50px 30px;
+  padding: 10px 40px 50px 30px;
 }
 
 .login-form-container .login-form-field{
-    position: relative;
-    height: 50px;
-    width: 100%;
-    margin-top: 20px;
+  position: relative;
+  height: 50px;
+  width: 100%;
+  margin-top: 20px;
 }
 
 .login-form-container form .login-form-field input{
-    height: 100%;
-    width: 100%;
-    outline: none;
-    font-size: 17px;
-    padding-left: 20px;
-    padding-right: 30px;
-    border: 1px solid  lightgray;
-    border-radius: 15px;
-    transition: all 0.3s ease;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  font-size: 17px;
+  padding-left: 20px;
+  padding-right: 30px;
+  border: 1px solid  lightgray;
+  border-radius: 15px;
+  transition: all 0.3s ease;
 }
 
 .login-form-container form .login-form-field input:focus,
 form .login-form-field input:valid{
-    border-color: black;
+  border-color: black;
 }
 
 .login-form-container form .login-form-field label{
-    position: absolute; 
-    top: 50%;
-    left: 20px;
-    color: #999999;
-    font-weight: 400;
-    font-size: 17px;
-    pointer-events: none;
-    transform: all 0.3s ease;
-    transform: translateY(-50%);
+  position: absolute; 
+  top: 50%;
+  left: 20px;
+  color: #999999;
+  font-weight: 400;
+  font-size: 17px;
+  pointer-events: none;
+  transform: all 0.3s ease;
+  transform: translateY(-50%);
 }
 
 .login-form-container form .login-form-field .pass-visibility-button{
-    position: absolute; 
-    top: 50%;
-    right: 5px;
-    transform: translateY(-50%);
-    transform: all 0.3s ease;
-    cursor: pointer;
+  position: absolute; 
+  top: 50%;
+  right: 5px;
+  transform: translateY(-50%);
+  transform: all 0.3s ease;
+  cursor: pointer;
 }
 
 
@@ -89,34 +89,133 @@ form .login-form-field input:focus ~ label,
 form .login-form-field input:valid ~ label,
 form .login-form-field input[type="email"]:not(:placeholder-shown) ~ label,
 form .login-form-field input[type="email"]:focus ~ label {
-    top: 0%;
-    color: black;
-    font-size: 16px;
-    background-color: white;
-    transform: translateY(-50%);
+  top: 0%;
+  color: black;
+  font-size: 16px;
+  background-color: white;
+  transform: translateY(-50%);
 }
 
 .login-form-container form .login-form-button {
-    height: 50px;
-    width: 100%;
-    margin-top: 20px;
-    position: relative;
+  height: 50px;
+  width: 100%;
+  margin-top: 20px;
+  position: relative;
 }
 
 form .login-form-button input{
-    color: white;
-    border: none;
-    padding-left: 0;
-    margin-top: -10px;
-    font-size: 20px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    background: black;
-    width: 100%;
-    border-radius: 5px;
+  color: white;
+  border: none;
+  padding-left: 0;
+  margin-top: -10px;
+  font-size: 20px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background: black;
+  width: 100%;
+  border-radius: 5px;
 }
 
 form .login-form-button input:active {
-    transform: scale(0.95);
-}
\ No newline at end of file
+  transform: scale(0.95);
+}
+
+.login_error{
+  color: red;
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
+}  
+
+.server-error-window {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 500px;
+  height: 200px;
+  z-index: 2;
+  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
+  background-color: red;
+  display: flex;
+  flex-direction: column;
+  font-size: 30px;
+  font-weight: 500;
+  line-height: 50px;
+  text-align: center;
+  user-select: none;
+}
+
+.window-error-header{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: white;
+  justify-content: center;
+  height: 20%;
+}
+
+.window-title{
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.window-title div{
+  color: white;
+}
+
+.window-close-button{
+  color: white;
+  display: inline-block;
+  cursor: pointer;
+  position: absolute;
+  right: 5px;
+}
+
+.window-error-body{
+  display: flex;
+  flex-grow: 1;
+  background: white;
+  align-items: center;
+  justify-content: center;
+  height: 80%;
+  font-size: 25px;
+  font-weight: 400;
+  line-height: 50px;
+}
+
+.circle-exclamation-icon{
+  color: red;
+  height: 50px;
+  margin: 20px;
+}
+
+.loading_spinner{
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 3;
+  width: 150px;
+  padding: 20px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #25b09b;
+  --_m: 
+    conic-gradient(#0000 10%,#000),
+    linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--_m);
+          mask: var(--_m);
+  -webkit-mask-composite: source-out;
+          mask-composite: subtract;
+  animation: l3 1s infinite linear;
+}
+@keyframes l3 {to{transform: rotate(1turn)}}
\ No newline at end of file
-- 
GitLab


From 3559b78f6ee273abd794ebc87f3bafbb6691ba6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:18:39 -0600
Subject: [PATCH 41/93] =?UTF-8?q?Se=20agregan=20errores=20debajo=20de=20lo?=
 =?UTF-8?q?s=20input=20en=20caso=20de=20que=20la=20entrada=20no=20sea=20v?=
 =?UTF-8?q?=C3=A1lida,=20una=20ventana=20que=20indica=20si=20no=20hay=20co?=
 =?UTF-8?q?nexi=C3=B3n=20con=20el=20servidor=20y=20un=20cargador=20que=20i?=
 =?UTF-8?q?ndica=20que=20se=20est=C3=A1n=20subiendo=20los=20datos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/login_page/login_page.tsx | 53 ++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/web/src/pages/login_page/login_page.tsx b/web/src/pages/login_page/login_page.tsx
index 6cbc8ce2..2d587c7a 100644
--- a/web/src/pages/login_page/login_page.tsx
+++ b/web/src/pages/login_page/login_page.tsx
@@ -1,8 +1,10 @@
 import { usePasswoordVisibility } from "../../hooks/usePasswordVisibility"
 import "./styles/styles.css"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEye , faEyeSlash} from "@fortawesome/free-solid-svg-icons";
+import { faCircleExclamation, faEye , faEyeSlash, faWindowClose} from "@fortawesome/free-solid-svg-icons";
 import { useLogin } from "../../hooks/useLogin";
+import { useState } from "react";
+import { LoadingScreen } from "../../components/loading_screen/loading_screen";
 
 export const LoginPage = () => {
   const {
@@ -11,15 +13,38 @@ export const LoginPage = () => {
     handleMouseDownPassword,
   } = usePasswoordVisibility();
 
+  const [isLoading, setIsLoading] = useState(false);
+
   const {
     register, 
     handleSubmit, 
     errors, 
-    onSubmit
-  } = useLogin();
+    onSubmit,
+    clearErrors,
+  } = useLogin(setIsLoading);
 
   return (
     <div className="login-page-root">
+      {errors.root?.serverError.type==500 && 
+        <div className="server-error-window">
+          <div className="window-error-header">
+            <div className="window-title">
+              Error
+            </div>
+            <FontAwesomeIcon
+              icon={faWindowClose} 
+              className="window-close-button"
+              onClick={() => {clearErrors("root.serverError")}}
+            />
+          </div>
+          <div className="window-error-body">
+            <FontAwesomeIcon icon={faCircleExclamation} className="circle-exclamation-icon"/>
+            {errors.root?.serverError.message}
+          </div>
+        </div>
+      }
+
+      {isLoading && <div className="loading_spinner"/>}
       <div className="login-form-container">
         <div className="title">
           Inicia sesión
@@ -27,11 +52,14 @@ export const LoginPage = () => {
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="login-form-field">
             <input
-              type="email" 
+              type="text" 
               {...register('email')}
-              required placeholder=""/>
+              placeholder=""
+              />
             <label>Email</label>
+            
           </div>
+          <p className="login_error">{errors.email?.message}</p>
           <div className="login-form-field">
             <input 
               type={
@@ -39,9 +67,8 @@ export const LoginPage = () => {
                   ? "text"
                   : "password"
               }
-              {...register('password')}
-              required 
-              
+              {...register('password')} 
+              autoComplete="off"
             />
             <label>Contraseña</label>
             <FontAwesomeIcon className="pass-visibility-button"
@@ -50,8 +77,16 @@ export const LoginPage = () => {
               icon={values.showPassword ? faEye : faEyeSlash}
             />
           </div>
+          <p className="login_error">{errors.password?.message}</p>
+          <p className="login_error">{errors.root?.serverError.type==401 && errors.root?.serverError.message}</p>
           <div className="login-form-button">
-            <input type="submit" value="Entrar"/>
+            <input type="submit" value="Entrar" 
+              disabled={
+                isLoading
+                ? true
+                :
+                  false
+              }/>
           </div>
         </form>
       </div>
-- 
GitLab


From 1d4f242ad5a5fa35a9a4a6c3c3dc7c2ad8a2a9cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:19:46 -0600
Subject: [PATCH 42/93] =?UTF-8?q?Se=20crea=20un=20nuevo=20error=20cuando?=
 =?UTF-8?q?=20se=20detecte=20una=20excepci=C3=B3n=20cuando=20se=20crea=20u?=
 =?UTF-8?q?n=20pueblo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/hooks/useTown.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/src/hooks/useTown.tsx b/web/src/hooks/useTown.tsx
index 2bd07b03..c260d6b1 100644
--- a/web/src/hooks/useTown.tsx
+++ b/web/src/hooks/useTown.tsx
@@ -4,6 +4,7 @@ import { TownRepositoryProd } from "../data/repositories/prod/town_repository";
 import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { Town, TownFormValues } from "../infraestructure/entities/town";
 import { toast } from "react-toastify";
+import axios, { AxiosError } from "axios";
 
 const townDatasource = new TownDatasourceProd();
 const townRepository = new TownRepositoryProd(townDatasource);
@@ -60,6 +61,7 @@ export const useTown = (forceRenderList?: () => void) => {
     setValue
   } = useForm<TownFormValues>({resolver});
   const [townsList, setTownsList] = useState<Town[] | null>(null);
+  const [errorMessage, setErrorMessage] = useState("");
   
   const onSubmit: SubmitHandler<TownFormValues> = (data: TownFormValues) => {
     const fetch = async () => {
@@ -69,14 +71,25 @@ export const useTown = (forceRenderList?: () => void) => {
           forceRenderList();
         }
       }catch(error: any){
-
+        if(axios.isAxiosError(error)){
+          error as AxiosError;
+          switch(error.code){
+            case(axios.AxiosError.ERR_BAD_REQUEST):
+              setErrorMessage("Acceso no autorizado");
+              break;
+            case(axios.AxiosError.ERR_NETWORK):
+              setErrorMessage("Conexión con el servidor fallida");
+              break;
+          }
+        }
+        throw new Error;
       }
     }
     toast.promise(
       fetch(),{
         pending: "Subiendo datos...",
         success: "Los datos se han subido correctamente",
-        error: "Sucedio un error"
+        error: errorMessage
       }
     )
   }
-- 
GitLab


From e25515be94330fa5c71c9d1e093ea2555ff66054 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:20:24 -0600
Subject: [PATCH 43/93] Se elimina un rol que no deberia tener el admin

---
 web/src/constants/roles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/constants/roles.ts b/web/src/constants/roles.ts
index 02cddf70..0bafa1e6 100644
--- a/web/src/constants/roles.ts
+++ b/web/src/constants/roles.ts
@@ -4,4 +4,4 @@ export enum UserRole {
 }
 
 export const SUPERADMIN_ROLES = [UserRole.SUPERADMIN];
-export const ADMIN_ROLES = [UserRole.ADMIN, UserRole.SUPERADMIN];
\ No newline at end of file
+export const ADMIN_ROLES = [UserRole.ADMIN];
\ No newline at end of file
-- 
GitLab


From f270213ef35cc1388b9c4fd548b3853d9f2688dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:21:09 -0600
Subject: [PATCH 44/93] =?UTF-8?q?Se=20elimina=20una=20excepci=C3=B3n=20que?=
 =?UTF-8?q?=20no=20es=20utilizada?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/data/datasources/prod/town_datasource.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/web/src/data/datasources/prod/town_datasource.ts b/web/src/data/datasources/prod/town_datasource.ts
index 1799f49b..b74169f5 100644
--- a/web/src/data/datasources/prod/town_datasource.ts
+++ b/web/src/data/datasources/prod/town_datasource.ts
@@ -4,7 +4,6 @@ import { TownDatasourceInf } from "../../../infraestructure/datasources/town_dat
 import { StateModel } from "../../models/prod/StateModel";
 import { State } from "../../../infraestructure/entities/state";
 import { Town, TownFormValues } from "../../../infraestructure/entities/town";
-import UnauthorizedError from "../../../errors/UnautherizedError";
 import { TownModel } from "../../models/prod/TownModel";
 
 export class TownDatasourceProd implements TownDatasourceInf{
@@ -34,10 +33,7 @@ export class TownDatasourceProd implements TownDatasourceInf{
       'Content-Type': 'multipart/form-data'
     };
 
-    const {status} = await axios.post(APIUrl + '/town', formToSend,{headers});
-    if (status === 401) {
-      throw new UnauthorizedError({code: 401, message: 'Unauthorized'});
-    }
+    await axios.post(APIUrl + '/town', formToSend,{headers});
   }
 
   async getTownsByState(idState: number, stateName:string): Promise<Town[]> {
-- 
GitLab


From 384258216d6f334d728a19edadb4ec532011f4ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:22:39 -0600
Subject: [PATCH 45/93] Se agrega un convertidor para convertir de Json a
 UserEntity y viceversa

---
 web/src/infraestructure/entities/user.ts | 174 ++++++++++++++++++++++-
 1 file changed, 172 insertions(+), 2 deletions(-)

diff --git a/web/src/infraestructure/entities/user.ts b/web/src/infraestructure/entities/user.ts
index a600d77e..91c4545c 100644
--- a/web/src/infraestructure/entities/user.ts
+++ b/web/src/infraestructure/entities/user.ts
@@ -1,7 +1,7 @@
 import { UserRole } from "../../constants/roles";
 
 export interface UserEntity {
-    name?: string;
+    name: string;
     lastName?: string;
     email: string;
     role: UserRole;
@@ -16,4 +16,174 @@ export interface UserInfo {
     name?: string;
     lastName?: string;
     email: string;
-}
\ No newline at end of file
+}
+
+export class Convert {
+    public static toUser(json: string): UserEntity {
+        return cast(JSON.parse(json), r("User"));
+    }
+
+    public static userToJson(value: UserEntity): string {
+        return JSON.stringify(uncast(value, r("User")), null, 2);
+    }
+}
+
+function invalidValue(typ: any, val: any, key: any, parent: any = ''): never {
+    const prettyTyp = prettyTypeName(typ);
+    const parentText = parent ? ` on ${parent}` : '';
+    const keyText = key ? ` for key "${key}"` : '';
+    throw Error(`Invalid value${keyText}${parentText}. Expected ${prettyTyp} but got ${JSON.stringify(val)}`);
+}
+
+function prettyTypeName(typ: any): string {
+    if (Array.isArray(typ)) {
+        if (typ.length === 2 && typ[0] === undefined) {
+            return `an optional ${prettyTypeName(typ[1])}`;
+        } else {
+            return `one of [${typ.map(a => { return prettyTypeName(a); }).join(", ")}]`;
+        }
+    } else if (typeof typ === "object" && typ.literal !== undefined) {
+        return typ.literal;
+    } else {
+        return typeof typ;
+    }
+}
+
+function jsonToJSProps(typ: any): any {
+    if (typ.jsonToJS === undefined) {
+        const map: any = {};
+        typ.props.forEach((p: any) => map[p.json] = { key: p.js, typ: p.typ });
+        typ.jsonToJS = map;
+    }
+    return typ.jsonToJS;
+}
+
+function jsToJSONProps(typ: any): any {
+    if (typ.jsToJSON === undefined) {
+        const map: any = {};
+        typ.props.forEach((p: any) => map[p.js] = { key: p.json, typ: p.typ });
+        typ.jsToJSON = map;
+    }
+    return typ.jsToJSON;
+}
+
+function transform(val: any, typ: any, getProps: any, key: any = '', parent: any = ''): any {
+    function transformPrimitive(typ: string, val: any): any {
+        if (typeof typ === typeof val) return val;
+        return invalidValue(typ, val, key, parent);
+    }
+
+    function transformUnion(typs: any[], val: any): any {
+        // val must validate against one typ in typs
+        const l = typs.length;
+        for (let i = 0; i < l; i++) {
+            const typ = typs[i];
+            try {
+                return transform(val, typ, getProps);
+            } catch (_) {}
+        }
+        return invalidValue(typs, val, key, parent);
+    }
+
+    function transformEnum(cases: string[], val: any): any {
+        if (cases.indexOf(val) !== -1) return val;
+        return invalidValue(cases.map(a => { return l(a); }), val, key, parent);
+    }
+
+    function transformArray(typ: any, val: any): any {
+        // val must be an array with no invalid elements
+        if (!Array.isArray(val)) return invalidValue(l("array"), val, key, parent);
+        return val.map(el => transform(el, typ, getProps));
+    }
+
+    function transformDate(val: any): any {
+        if (val === null) {
+            return null;
+        }
+        const d = new Date(val);
+        if (isNaN(d.valueOf())) {
+            return invalidValue(l("Date"), val, key, parent);
+        }
+        return d;
+    }
+
+    function transformObject(props: { [k: string]: any }, additional: any, val: any): any {
+        if (val === null || typeof val !== "object" || Array.isArray(val)) {
+            return invalidValue(l(ref || "object"), val, key, parent);
+        }
+        const result: any = {};
+        Object.getOwnPropertyNames(props).forEach(key => {
+            const prop = props[key];
+            const v = Object.prototype.hasOwnProperty.call(val, key) ? val[key] : undefined;
+            result[prop.key] = transform(v, prop.typ, getProps, key, ref);
+        });
+        Object.getOwnPropertyNames(val).forEach(key => {
+            if (!Object.prototype.hasOwnProperty.call(props, key)) {
+                result[key] = transform(val[key], additional, getProps, key, ref);
+            }
+        });
+        return result;
+    }
+
+    if (typ === "any") return val;
+    if (typ === null) {
+        if (val === null) return val;
+        return invalidValue(typ, val, key, parent);
+    }
+    if (typ === false) return invalidValue(typ, val, key, parent);
+    let ref: any = undefined;
+    while (typeof typ === "object" && typ.ref !== undefined) {
+        ref = typ.ref;
+        typ = typeMap[typ.ref];
+    }
+    if (Array.isArray(typ)) return transformEnum(typ, val);
+    if (typeof typ === "object") {
+        return typ.hasOwnProperty("unionMembers") ? transformUnion(typ.unionMembers, val)
+            : typ.hasOwnProperty("arrayItems")    ? transformArray(typ.arrayItems, val)
+            : typ.hasOwnProperty("props")         ? transformObject(getProps(typ), typ.additional, val)
+            : invalidValue(typ, val, key, parent);
+    }
+    // Numbers can be parsed by Date but shouldn't be.
+    if (typ === Date && typeof val !== "number") return transformDate(val);
+    return transformPrimitive(typ, val);
+}
+
+function cast<T>(val: any, typ: any): T {
+    return transform(val, typ, jsonToJSProps);
+}
+
+function uncast<T>(val: T, typ: any): any {
+    return transform(val, typ, jsToJSONProps);
+}
+
+function l(typ: any) {
+    return { literal: typ };
+}
+
+function a(typ: any) {
+    return { arrayItems: typ };
+}
+
+function u(...typs: any[]) {
+    return { unionMembers: typs };
+}
+
+function o(props: any[], additional: any) {
+    return { props, additional };
+}
+
+function m(additional: any) {
+    return { props: [], additional };
+}
+
+function r(name: string) {
+    return { ref: name };
+}
+
+const typeMap: any = {
+    "User": o([
+        { json: "email", js: "email", typ: "" },
+        { json: "name", js: "name", typ: "" },
+        { json: "role", js: "role", typ: "" },
+    ], false),
+};
-- 
GitLab


From bc13479b8e482059d3a2210fa9042c350bff2a8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:23:43 -0600
Subject: [PATCH 46/93] =?UTF-8?q?Se=20agrega=20el=20tipo=20de=20autorizaci?=
 =?UTF-8?q?=C3=B3n=20Bearer=20al=20header=20y=20se=20guarda=20el=20nombre?=
 =?UTF-8?q?=20del=20usuario=20en=20el=20localStorage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/context/auth_context.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/context/auth_context.tsx b/web/src/context/auth_context.tsx
index 2648700d..0a777141 100644
--- a/web/src/context/auth_context.tsx
+++ b/web/src/context/auth_context.tsx
@@ -25,7 +25,7 @@ export const AuthContextProvider = ({children} : AuthContextProviderProps) => {
     setUser(user);
     localStorage.setItem("token",token);
     localStorage.setItem("user",JSON.stringify(user));
-    axios.defaults.headers.common["Authorization"] = `${token}`;
+    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
   }
 
   const deleteSession = async () => {
@@ -48,7 +48,7 @@ export const AuthContextProvider = ({children} : AuthContextProviderProps) => {
     const user = localStorage.getItem("user");
     if(token && user){
       const sessionUser = JSON.parse(user);
-      await saveSession({email: sessionUser.email as string, role: sessionUser.role as UserRole}, token);
+      await saveSession({email: sessionUser.email as string, name: sessionUser.name as string, role: sessionUser.role as UserRole}, token);
     }
   }
 
-- 
GitLab


From 04b65d12529a352da58816324bdd5d394a8dc6b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:24:24 -0600
Subject: [PATCH 47/93] =?UTF-8?q?Se=20cambia=20la=20l=C3=B3gica=20a=20un?=
 =?UTF-8?q?=20custom=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin_panel_navbar/admin_navbar.tsx       | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/src/components/admin_panel_navbar/admin_navbar.tsx b/web/src/components/admin_panel_navbar/admin_navbar.tsx
index 6a65a776..19af893c 100644
--- a/web/src/components/admin_panel_navbar/admin_navbar.tsx
+++ b/web/src/components/admin_panel_navbar/admin_navbar.tsx
@@ -1,22 +1,25 @@
-import { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSignOut, faUser } from "@fortawesome/free-solid-svg-icons";
-import { useAuth } from "../../context/auth_context";
 import { Link } from "react-router-dom";
 import './assets/styles/style.css';
+import { UserRole } from "../../constants/roles";
+import { useAdminNavbar } from "../../hooks/useAdminNavbar";
 
 interface props{
   windowActive: boolean;
 }
 
 export const AdminPanelNavBar = ({windowActive}:props) => {
-  const {user, logout} = useAuth();
-  const [toggle, setToggle] = useState(false);
+  const {user, handleLogout, setToggle, toggle, userData} = useAdminNavbar();
 
-  const handleLogout = () => {
-    logout();
-  };
-    
+  if(!user ){
+    return null;
+  }else{
+    if(user.role !== UserRole.ADMIN && user.role !== UserRole.SUPERADMIN){
+      return null;
+    }
+  }
+   
   return (
     <div className="navbar">
       <div className="profile">
@@ -41,7 +44,7 @@ export const AdminPanelNavBar = ({windowActive}:props) => {
           <div className="sub-menu" >
             <div className="user-info">
               <img src={require("./assets/images/Admin-595b40b65ba036ed117d36fe.png")}/>
-              <h3>Superadmin</h3>
+              <h3>{userData?.name}</h3>
             </div>
             <hr/>
 
-- 
GitLab


From a5400202a35076393fe0ca1c230dfc118fe39f09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:26:01 -0600
Subject: [PATCH 48/93] =?UTF-8?q?Se=20guarda=20la=20l=C3=B3gica=20de=20la?=
 =?UTF-8?q?=20barra=20de=20navegaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/hooks/useAdminNavbar.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 web/src/hooks/useAdminNavbar.tsx

diff --git a/web/src/hooks/useAdminNavbar.tsx b/web/src/hooks/useAdminNavbar.tsx
new file mode 100644
index 00000000..c4792abb
--- /dev/null
+++ b/web/src/hooks/useAdminNavbar.tsx
@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { useAuth } from "../context/auth_context";
+import { Convert, UserEntity } from "../infraestructure/entities/user";
+
+export const useAdminNavbar = () => {
+  const {user, logout} = useAuth();
+  const [toggle, setToggle] = useState(false);
+
+  const userDataJson: string | null = localStorage.getItem("user");
+  let userData: UserEntity | undefined;
+
+  if(userDataJson){
+    userData = Convert.toUser(userDataJson);
+  }
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  return {user, handleLogout, setToggle, toggle, userData};
+}
\ No newline at end of file
-- 
GitLab


From 528053a7383079adcf535e5e3b38f4879ee8c298 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:29:31 -0600
Subject: [PATCH 49/93] Se agrega un useEffect que obtiene todos los pueblos y
 los muestra en una lista desplegable

---
 .../sa_panel_admin_register.tsx               | 64 +++++++++++++++----
 1 file changed, 51 insertions(+), 13 deletions(-)

diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx b/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx
index e83cf999..a540b5d3 100644
--- a/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx
@@ -1,16 +1,21 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import './assets/css/styles.css'
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWindowClose, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { useAdminRegister } from "../../../hooks/useAdminRegister";
 import { usePasswoordVisibility } from "../../../hooks/usePasswordVisibility";
+import { State } from "../../../infraestructure/entities/state";
+import { useTown } from "../../../hooks/useTown";
+import { Town } from "../../../infraestructure/entities/town";
+import axios from "axios";
 
 interface props {
   setWindowActive: Dispatch<SetStateAction<boolean>>,
-  setShowRegisterPanel: Dispatch<SetStateAction<boolean>>
+  setShowRegisterPanel: Dispatch<SetStateAction<boolean>>,
+  statesList : State[],
 }
 
-export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPanel}:props) => {
+export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPanel, statesList}:props) => {
   const {
     register,
     errors,
@@ -24,6 +29,30 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa
     handleMouseDownPassword
   } = usePasswoordVisibility();
 
+  const {townsList, getTownsByState, setTownsList} = useTown();
+
+  useEffect(() => {
+    const getTownsList = async () => {
+      try {
+        if (statesList) {
+          const townsListBackup: Town[] = [];
+          statesList.forEach((state) => {
+            getTownsByState(state.stateId, state.name);
+            if (townsList) {
+              townsListBackup.push(...townsList);
+            }
+          });
+          setTownsList(townsListBackup);
+        }
+      } catch (error: any) {
+        if (axios.isAxiosError(error)) {
+          //console.log(error)
+        }
+      }
+    }
+    getTownsList();
+  }, []);
+
   return (
     <div className="admin_register_wrap">
       <div className="admin_register_header">
@@ -89,17 +118,26 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa
           </div>
 
           <div className="admin_input_cnt">
-              <label>Pueblo mágico al que representa</label>
+            <label>Pueblo mágico al que representa</label>
+            {townsList === null || townsList.length==0
+            ?
+              <label>No hay pueblo registrados</label>
+            :
               <select
-                  {...register('townAdmin')}>
-                  <option key='1' value={1}>Zacatecas</option>
-                </select>
-              <p className="error">{errors.townAdmin?.message}</p>
-            </div>
-            
-            <div className="admin_input_cnt">
-              <input className="submit_btn" type="submit" content="Registrar"/>
-            </div>
+                {...register('townAdmin')}>
+                {townsList.map((town) => {
+                    return (
+                      <option key={town.idTown} value={town.idTown}>{town.name}</option>
+                    );
+                })}
+              </select>
+            }
+            <p className="error">{errors.townAdmin?.message}</p>
+          </div>
+          
+          <div className="admin_input_cnt">
+            <input className="submit_btn" type="submit" content="Registrar"/>
+          </div>
         </form>
       </div>
     </div>
-- 
GitLab


From b5f7283a7f9f3a93d0419352ec769ea494a87cdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:31:43 -0600
Subject: [PATCH 50/93] =?UTF-8?q?Se=20modifica=20la=20altura=20de=20la=20b?=
 =?UTF-8?q?arra=20de=20navegaci=C3=B3n=20y=20el=20ancho=20del=20submenu=20?=
 =?UTF-8?q?de=20usuario?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin_panel_navbar/assets/styles/style.css   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/admin_panel_navbar/assets/styles/style.css b/web/src/components/admin_panel_navbar/assets/styles/style.css
index 7e82ea47..6665a077 100644
--- a/web/src/components/admin_panel_navbar/assets/styles/style.css
+++ b/web/src/components/admin_panel_navbar/assets/styles/style.css
@@ -3,13 +3,12 @@
 }
 
 .navbar{
-    height: 40px;
+    height: 6vh;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     box-shadow: var(--shadow);
-
 }
 
 .profile{
@@ -28,7 +27,8 @@
     position: absolute;
     top: 100%;
     right: 10%;
-    max-width: 400px;
+    min-width: 300px;
+    max-width: 300px;
     overflow: hidden;
     z-index: 1000;
     transition: max-height 0.5s;
-- 
GitLab


From f8a83109eae94117af89e5f8ce8e1e21139e5835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:32:35 -0600
Subject: [PATCH 51/93] Se agrega la lista de estados a las props del
 componente

---
 .../sa_panel_admin_screen/sa_panel_admin_screen.tsx      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen.tsx b/web/src/components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen.tsx
index 1885d168..d12a5913 100644
--- a/web/src/components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen.tsx
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_screen/sa_panel_admin_screen.tsx
@@ -1,13 +1,15 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 import './assets/css/styles.css';
 import { SuperadminPanelAdminRegister } from '../sa_panel_admin_register/sa_panel_admin_register';
+import { State } from '../../../infraestructure/entities/state';
 
 interface props {
   windowActive: boolean;
   setWindowActive: Dispatch<SetStateAction<boolean>>;
+  statesList: State[];
 }
 
-export const SuperadminPanelAdminScreen = ({windowActive,setWindowActive}:props) => {
+export const SuperadminPanelAdminScreen = ({windowActive, setWindowActive, statesList}:props) => {
   const [showRegisterPanel, setShowRegisterPanel] = useState(false);
 
   return (
@@ -26,7 +28,10 @@ export const SuperadminPanelAdminScreen = ({windowActive,setWindowActive}:props)
           && 
           <SuperadminPanelAdminRegister 
             setWindowActive={setWindowActive}
-            setShowRegisterPanel={setShowRegisterPanel}/>}
+            setShowRegisterPanel={setShowRegisterPanel}
+            statesList={statesList}
+          />
+        }
       </div>
     </div>  
   );
-- 
GitLab


From 129df87859720f54cc0489efde29df61d8e21407 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:33:25 -0600
Subject: [PATCH 52/93] =?UTF-8?q?Se=20modifica=20la=20identaci=C3=B3n=20a?=
 =?UTF-8?q?=202=20espacios=20y=20se=20establece=20la=20altura=20del=20cuer?=
 =?UTF-8?q?po=20del=20componente=20a=2093%=20del=20ancho=20del=20padre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/styles.css                     | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_screen/assets/css/styles.css b/web/src/components/sa_panel_admin/sa_panel_admin_screen/assets/css/styles.css
index c8496767..6d1ac315 100644
--- a/web/src/components/sa_panel_admin/sa_panel_admin_screen/assets/css/styles.css
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_screen/assets/css/styles.css
@@ -1,22 +1,28 @@
 .sa_panel_admin_content{
-    background: gray;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .admin_panel_header{
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-  }
-  
-  .admin_panel_header .admin_add_btn{
-    display: inline-block;
-    cursor: pointer;
-    position: absolute;
-    right: 5px;
-  }
\ No newline at end of file
+  background: gray;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin_panel_header{
+  display: flex;
+  width: 100%;
+  height: 7%;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.admin_panel_header .admin_add_btn{
+  display: inline-block;
+  cursor: pointer;
+  position: absolute;
+  right: 5px;
+}
+
+.sa_panel_admin_body{
+  min-height: 93%;
+  max-height: 93%;
+}
\ No newline at end of file
-- 
GitLab


From 60a6e9c78513056b0f74cc29835b9a01b565d8a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:34:16 -0600
Subject: [PATCH 53/93] Se renombra el estado a isLoadingList

---
 .../sa_panel_town_list_content/sa_panel_town_list.tsx     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list.tsx b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list.tsx
index fd739bdd..a06aa589 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_content/sa_panel_town_list.tsx
@@ -13,14 +13,14 @@ interface props {
 
 export const SuperadminPanelTownList = ({statesList}: props) => {
   const {townsList, getTownsByState, setTownsList} = useTown();
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingList, setIsLoadingList] = useState(true);
 
   useEffect(() => {
     refreshList();
   }, []);
 
   const refreshList = () => {
-    setIsLoading(true);
+    setIsLoadingList(true);
     const getTownsList = async () => {
       try {
         if (statesList) {
@@ -45,12 +45,12 @@ export const SuperadminPanelTownList = ({statesList}: props) => {
   return (
     <div className="town_list_content">
       {
-        isLoading && 
+        isLoadingList && 
         <LoadingScreen/>
       }
       {
         townsList &&  townsList.length>0 && 
-          <TownListTable towns={townsList} setIsLoading={setIsLoading}/>
+          <TownListTable towns={townsList} setIsLoading={setIsLoadingList}/>
       }
     </div>
   );
-- 
GitLab


From c8b54462c065e2fdb8a58188172d9fd1f41f0489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:34:41 -0600
Subject: [PATCH 54/93] Se elimina el div contenedor de la tabla

---
 .../sa_panel_town_list_element/sa_panel_town_table.tsx        | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/sa_panel_town_table.tsx b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/sa_panel_town_table.tsx
index 1c77b4af..fceb4b04 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/sa_panel_town_table.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list_element/sa_panel_town_table.tsx
@@ -30,8 +30,6 @@ export const TownListTable= ({towns, setIsLoading}: props) => {
   }, []);
 
   return (
-    <div>
-      <DataTable columns={columns} data={towns} selectableRows className="town_list_table"/>
-    </div>
+    <DataTable columns={columns} data={towns} selectableRows className="town_list_table"/>
   );
 }
\ No newline at end of file
-- 
GitLab


From dacef05e3d3c87d0f550dc0f11746c836ad7a5e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:35:20 -0600
Subject: [PATCH 55/93] Se modifican las alturas del encabezado y el cuerpo del
 componente

---
 .../sa_panel_town/sa_panel_town_screen/css/styles.css     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/components/sa_panel_town/sa_panel_town_screen/css/styles.css b/web/src/components/sa_panel_town/sa_panel_town_screen/css/styles.css
index d7bbeb9c..a715d947 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_screen/css/styles.css
+++ b/web/src/components/sa_panel_town/sa_panel_town_screen/css/styles.css
@@ -1,7 +1,7 @@
 .sa_panel_town_content{
   background: gray;
   width: 100%;
-  height: 100%;
+  max-height: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -9,6 +9,7 @@
 .town_panel_header{
   display: flex;
   width: 100%;
+  height: 7%;
   align-items: center;
   justify-content: center;
   padding: 5px;
@@ -19,4 +20,9 @@
   cursor: pointer;
   position: absolute;
   right: 5px;
+}
+
+.sa_panel_town_body{
+  width: 100%;
+  height: 93%;
 }
\ No newline at end of file
-- 
GitLab


From 22d4ad9edea28392069c5a66ee01d5fef577c027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:35:51 -0600
Subject: [PATCH 56/93] =?UTF-8?q?Se=20agrega=20un=20footer=20a=20la=20p?=
 =?UTF-8?q?=C3=A1gina=20principal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/home/super_admin_page/super_admin_home_page.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/home/super_admin_page/super_admin_home_page.tsx b/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
index 51fabb25..59645e97 100644
--- a/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
+++ b/web/src/pages/home/super_admin_page/super_admin_home_page.tsx
@@ -76,7 +76,13 @@ export const SuperAdminHomePage = () => {
             : 
               <SuperadminPanelAdminScreen 
               windowActive={windowActive} 
-              setWindowActive={setWindowActive}/>}
+              setWindowActive={setWindowActive}
+              statesList={statesList}
+              />
+          }
+        </div>
+        <div className="footer-cnt">
+
         </div>
       </div>
     </div>
-- 
GitLab


From b1e8334d37b6cf942ac6b25be74e4b7f7f618b87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:36:33 -0600
Subject: [PATCH 57/93] =?UTF-8?q?Se=20crea=20la=20p=C3=A1gina=20principal?=
 =?UTF-8?q?=20de=20admins=20a=20partir=20de=20la=20hecha=20para=20superadm?=
 =?UTF-8?q?in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/home/admin_page/admin_home_page.tsx | 51 +++++++++++++++++++
 .../home/admin_page/assets/styles/style.css   | 32 ++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 web/src/pages/home/admin_page/admin_home_page.tsx
 create mode 100644 web/src/pages/home/admin_page/assets/styles/style.css

diff --git a/web/src/pages/home/admin_page/admin_home_page.tsx b/web/src/pages/home/admin_page/admin_home_page.tsx
new file mode 100644
index 00000000..cbfe9f44
--- /dev/null
+++ b/web/src/pages/home/admin_page/admin_home_page.tsx
@@ -0,0 +1,51 @@
+import { Menu, MenuItem, Sidebar } from "react-pro-sidebar"
+import './assets/styles/style.css';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMonument, faUserTie } from "@fortawesome/free-solid-svg-icons";
+import { useEffect, useState } from "react";
+import { AdminPanelNavBar } from "../../../components/admin_panel_navbar/admin_navbar";
+import { SidebarHeader } from "../../../components/sidebar_header/sidebar_header";
+import { useGetStatesList } from "../../../hooks/useGetStatesList";
+import axios from "axios";
+
+export const AdminHomePage = () => {
+  const [collapsed, setCollapsed] = useState(true);
+  const [windowActive, setWindowActive] = useState(false);
+ 
+  return (
+    <div className="dmin-panel-root">
+      <Sidebar className="sidebar" collapsed={collapsed} 
+        onMouseOver={() => {
+          windowActive ?
+            setCollapsed(true)
+          :
+            setCollapsed(false)
+        }}
+        onMouseOut={() => setCollapsed(true)}
+        
+        > 
+        <SidebarHeader/>
+        <Menu>
+          <MenuItem icon={<FontAwesomeIcon icon={faMonument}/>}  
+            disabled={windowActive}>
+              Pueblos
+          </MenuItem>
+
+          <MenuItem icon={<FontAwesomeIcon icon={faUserTie}/>} 
+            disabled={windowActive}>
+            Administradores
+          </MenuItem>
+        </Menu>
+      </Sidebar>
+      <div className="admin-panel-body">
+        <AdminPanelNavBar windowActive={windowActive}/>
+        <div className="admin-panel-content">
+          
+        </div>
+        <div className="footer-cnt">
+
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/web/src/pages/home/admin_page/assets/styles/style.css b/web/src/pages/home/admin_page/assets/styles/style.css
new file mode 100644
index 00000000..70256ece
--- /dev/null
+++ b/web/src/pages/home/admin_page/assets/styles/style.css
@@ -0,0 +1,32 @@
+:root {
+    --shadow: 0px 2px 8px 0px gray;
+}
+
+
+.superdmin-panel-root{
+    display: flex;
+    height: 100vh;
+    max-height: 100vh;
+    width: 100vw;
+    max-width: 100vw;
+}
+
+
+.superadmin-panel-body{
+    flex-grow: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #ECEAFF;
+}
+
+.superadmin-panel-content{
+    max-height: 84vh;
+    min-height: 84vh;
+    display: flex;
+}
+
+.footer-cnt{
+    height: 10vh;
+    background: #ECEAFF;
+}
-- 
GitLab


From 29c924140fe852e14bd5b29007efd54d48420d07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:37:18 -0600
Subject: [PATCH 58/93] Se modifican las alturas de varios contenedores para
 que utilicen toda la pantalla

---
 .../super_admin_page/assets/styles/style.css  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/home/super_admin_page/assets/styles/style.css b/web/src/pages/home/super_admin_page/assets/styles/style.css
index 3ccfed0b..70256ece 100644
--- a/web/src/pages/home/super_admin_page/assets/styles/style.css
+++ b/web/src/pages/home/super_admin_page/assets/styles/style.css
@@ -5,15 +5,28 @@
 
 .superdmin-panel-root{
     display: flex;
-    height: 100%;
-    width: 100%;
+    height: 100vh;
+    max-height: 100vh;
+    width: 100vw;
+    max-width: 100vw;
 }
 
 
 .superadmin-panel-body{
-    height: 100vh;
     flex-grow: 1;
+    height: 100%;
     display: flex;
     flex-direction: column;
     background: #ECEAFF;
 }
+
+.superadmin-panel-content{
+    max-height: 84vh;
+    min-height: 84vh;
+    display: flex;
+}
+
+.footer-cnt{
+    height: 10vh;
+    background: #ECEAFF;
+}
-- 
GitLab


From 1f2272a296017abaee4ab3533e038a00cf56362b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 10:37:41 -0600
Subject: [PATCH 59/93] =?UTF-8?q?Se=20crea=20una=20nueva=20ruta=20protegid?=
 =?UTF-8?q?a=20para=20la=20p=C3=A1gina=20de=20admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/router/router.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/src/router/router.tsx b/web/src/router/router.tsx
index 9e051b3a..31b5b679 100644
--- a/web/src/router/router.tsx
+++ b/web/src/router/router.tsx
@@ -3,10 +3,11 @@ import { SUPERADMIN_ROLES, ADMIN_ROLES } from "../constants/roles";
 import { LoginPage } from "../pages/login_page/login_page";
 import { ProtectedRoute } from "./protected_route";
 import { SuperAdminHomePage } from "../pages/home/super_admin_page/super_admin_home_page";
+import { AdminHomePage } from "../pages/home/admin_page/admin_home_page";
 
 export const router = createBrowserRouter([
   {
-    element: <ProtectedRoute allowedRoles={ADMIN_ROLES}/>,
+    element: <ProtectedRoute allowedRoles={SUPERADMIN_ROLES}/>,
     children: [
       {
         index: true,
@@ -15,6 +16,16 @@ export const router = createBrowserRouter([
       }
     ]
   },
+  {
+    element: <ProtectedRoute allowedRoles={ADMIN_ROLES}/>,
+    children: [
+      {
+        index: true,
+        path: "/",
+        element: <AdminHomePage/>
+      }
+    ]
+  },
   {
     element: <LoginPage/>,
     children: [
-- 
GitLab


From 69001f46e5d17b92f642574cfce10e4c2eda3634 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 11:19:33 -0600
Subject: [PATCH 60/93] Se renombran las constantes

---
 web/src/constants/roles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/constants/roles.ts b/web/src/constants/roles.ts
index 0bafa1e6..dd45c329 100644
--- a/web/src/constants/roles.ts
+++ b/web/src/constants/roles.ts
@@ -3,5 +3,5 @@ export enum UserRole {
     SUPERADMIN = "superadmin",
 }
 
-export const SUPERADMIN_ROLES = [UserRole.SUPERADMIN];
-export const ADMIN_ROLES = [UserRole.ADMIN];
\ No newline at end of file
+export const SUPERADMIN_ROLE = UserRole.SUPERADMIN;
+export const ADMIN_ROLE = UserRole.ADMIN;
\ No newline at end of file
-- 
GitLab


From e5d9ac26a59700ffa929e31cdce15455f5d21b5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 11:20:19 -0600
Subject: [PATCH 61/93] Se modifica para que haya solo una ruta protegida

---
 web/src/router/router.tsx | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/web/src/router/router.tsx b/web/src/router/router.tsx
index 31b5b679..ca5f6fe8 100644
--- a/web/src/router/router.tsx
+++ b/web/src/router/router.tsx
@@ -1,5 +1,5 @@
 import { createBrowserRouter } from "react-router-dom";
-import { SUPERADMIN_ROLES, ADMIN_ROLES } from "../constants/roles";
+import { SUPERADMIN_ROLE, ADMIN_ROLE } from "../constants/roles";
 import { LoginPage } from "../pages/login_page/login_page";
 import { ProtectedRoute } from "./protected_route";
 import { SuperAdminHomePage } from "../pages/home/super_admin_page/super_admin_home_page";
@@ -7,22 +7,12 @@ import { AdminHomePage } from "../pages/home/admin_page/admin_home_page";
 
 export const router = createBrowserRouter([
   {
-    element: <ProtectedRoute allowedRoles={SUPERADMIN_ROLES}/>,
+    element: <ProtectedRoute/>,
     children: [
       {
         index: true,
         path: "/",
-        element: <SuperAdminHomePage/>
-      }
-    ]
-  },
-  {
-    element: <ProtectedRoute allowedRoles={ADMIN_ROLES}/>,
-    children: [
-      {
-        index: true,
-        path: "/",
-        element: <AdminHomePage/>
+        element: <div></div>
       }
     ]
   },
-- 
GitLab


From 797223b7a2e3d749b14f0524fb5c4c841f927957 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 11:21:13 -0600
Subject: [PATCH 62/93] =?UTF-8?q?Se=20modifica=20para=20comparar=20el=20ro?=
 =?UTF-8?q?l=20del=20usuario=20y=20determinar=20a=20cu=C3=A1l=20p=C3=A1gin?=
 =?UTF-8?q?a=20mandar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/router/protected_route.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/web/src/router/protected_route.tsx b/web/src/router/protected_route.tsx
index 2a412f38..f816c8d4 100644
--- a/web/src/router/protected_route.tsx
+++ b/web/src/router/protected_route.tsx
@@ -1,15 +1,27 @@
 import { Navigate, Outlet } from "react-router-dom";
 import { useAuth } from "../context/auth_context";
+import { UserRole } from "../constants/roles";
+import { AdminHomePage } from "../pages/home/admin_page/admin_home_page";
+import { SuperAdminHomePage } from "../pages/home/super_admin_page/super_admin_home_page";
 
 interface ProtectedRouteProps {
-    allowedRoles?: string[];
+  allowedRole: UserRole;
 }
 
-export const ProtectedRoute = ({allowedRoles}: ProtectedRouteProps) => {
-    const {user} = useAuth();
-    if(!user){
-        return <Navigate to="/login" replace={true}/>;
+export const ProtectedRoute = () => {
+  const {user, logout} = useAuth();
+  if(!user){
+    return <Navigate to="/login" replace={true}/>;
+  }else{
+    if(user.role==UserRole.ADMIN){
+      return <AdminHomePage/>;
+    }else if(user.role===UserRole.SUPERADMIN){
+      return <SuperAdminHomePage/>;
+    }else{
+      logout();
+      return <Navigate to="/login" replace={true}/>;
     }
+  }
 
-    return <Outlet/>;
+  return <Outlet/>;
 }
\ No newline at end of file
-- 
GitLab


From 5c83a1102e03b8b065574a52dc03e3eb8c75db20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 12:17:33 -0600
Subject: [PATCH 63/93] Se renombran los nombres de las clases

---
 web/src/pages/home/admin_page/assets/styles/style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/home/admin_page/assets/styles/style.css b/web/src/pages/home/admin_page/assets/styles/style.css
index 70256ece..0e22ba9f 100644
--- a/web/src/pages/home/admin_page/assets/styles/style.css
+++ b/web/src/pages/home/admin_page/assets/styles/style.css
@@ -3,7 +3,7 @@
 }
 
 
-.superdmin-panel-root{
+.admin-panel-root{
     display: flex;
     height: 100vh;
     max-height: 100vh;
@@ -12,7 +12,7 @@
 }
 
 
-.superadmin-panel-body{
+.admin-panel-body{
     flex-grow: 1;
     height: 100%;
     display: flex;
@@ -20,7 +20,7 @@
     background: #ECEAFF;
 }
 
-.superadmin-panel-content{
+.admin-panel-content{
     max-height: 84vh;
     min-height: 84vh;
     display: flex;
-- 
GitLab


From 13fde9a4ddd393df174558601feb9e354657a9bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 12:18:34 -0600
Subject: [PATCH 64/93] =?UTF-8?q?Se=20cambian=20iconos=20y=20etiquetas=20d?=
 =?UTF-8?q?e=20la=20barra=20lateral,=20se=20agrega=20la=20funci=C3=B3n=20c?=
 =?UTF-8?q?orrespondiente=20a=20cada=20uno=20y=20se=20agrega=20la=20render?=
 =?UTF-8?q?izaci=C3=B3n=20condicional=20de=20los=20componentes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/home/admin_page/admin_home_page.tsx | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/home/admin_page/admin_home_page.tsx b/web/src/pages/home/admin_page/admin_home_page.tsx
index cbfe9f44..7e486c72 100644
--- a/web/src/pages/home/admin_page/admin_home_page.tsx
+++ b/web/src/pages/home/admin_page/admin_home_page.tsx
@@ -1,19 +1,20 @@
 import { Menu, MenuItem, Sidebar } from "react-pro-sidebar"
 import './assets/styles/style.css';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMonument, faUserTie } from "@fortawesome/free-solid-svg-icons";
-import { useEffect, useState } from "react";
+import { faLocation, faMonument, faPlaceOfWorship, faUserTie } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
 import { AdminPanelNavBar } from "../../../components/admin_panel_navbar/admin_navbar";
 import { SidebarHeader } from "../../../components/sidebar_header/sidebar_header";
-import { useGetStatesList } from "../../../hooks/useGetStatesList";
-import axios from "axios";
+import { AdminPanelPlaceScreen } from "../../../components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen";
+import { AdminSelectedPanel } from "../../../constants/selected_panel";
 
 export const AdminHomePage = () => {
   const [collapsed, setCollapsed] = useState(true);
   const [windowActive, setWindowActive] = useState(false);
+  const [selectedPanel, setSelectedPanel] = useState<AdminSelectedPanel>(AdminSelectedPanel.PLACES);
  
   return (
-    <div className="dmin-panel-root">
+    <div className="admin-panel-root">
       <Sidebar className="sidebar" collapsed={collapsed} 
         onMouseOver={() => {
           windowActive ?
@@ -26,21 +27,33 @@ export const AdminHomePage = () => {
         > 
         <SidebarHeader/>
         <Menu>
-          <MenuItem icon={<FontAwesomeIcon icon={faMonument}/>}  
-            disabled={windowActive}>
-              Pueblos
+          <MenuItem icon={<FontAwesomeIcon icon={faPlaceOfWorship}/>}  
+            disabled={windowActive}
+            onClick={() => {setSelectedPanel(AdminSelectedPanel.PLACES)}}
+            >
+            Lugares
           </MenuItem>
-
-          <MenuItem icon={<FontAwesomeIcon icon={faUserTie}/>} 
-            disabled={windowActive}>
-            Administradores
+          <MenuItem icon={<FontAwesomeIcon icon={faLocation}/>} 
+            disabled={windowActive}
+            onClick={() => {setSelectedPanel(AdminSelectedPanel.ACTIVITIES)}}
+            >
+            Actividades
           </MenuItem>
         </Menu>
       </Sidebar>
       <div className="admin-panel-body">
         <AdminPanelNavBar windowActive={windowActive}/>
         <div className="admin-panel-content">
-          
+        {(() => {
+          switch (selectedPanel) {
+            case AdminSelectedPanel.PLACES:
+              return <AdminPanelPlaceScreen/>;
+            case AdminSelectedPanel.ACTIVITIES:
+              return <div/>
+            default:
+              return null;
+          }
+        })()}
         </div>
         <div className="footer-cnt">
 
-- 
GitLab


From 5991241a31a66634d3e1f6b60b42b2ca9c11b427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 12:19:11 -0600
Subject: [PATCH 65/93] =?UTF-8?q?Se=20crea=20el=20enumerador=20para=20la?=
 =?UTF-8?q?=20selecci=C3=B3n=20de=20paneles=20en=20el=20panel=20de=20admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/constants/selected_panel.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 web/src/constants/selected_panel.ts

diff --git a/web/src/constants/selected_panel.ts b/web/src/constants/selected_panel.ts
new file mode 100644
index 00000000..90b3d4e6
--- /dev/null
+++ b/web/src/constants/selected_panel.ts
@@ -0,0 +1,4 @@
+export enum AdminSelectedPanel {
+  PLACES = "places",
+  ACTIVITIES = "activities"
+}
\ No newline at end of file
-- 
GitLab


From 7b37956f3648f8d5a818bc3c6be3de07d7d1236e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 12:19:36 -0600
Subject: [PATCH 66/93] Se crea el componente y los estilos para la pantalla de
 los lugares

---
 .../admin_panel_place_screen.tsx              | 22 ++++++++++++++
 .../assets/css/styles.css                     | 29 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx
 create mode 100644 web/src/components/admin_panel_places/admin_panel_place_screen/assets/css/styles.css

diff --git a/web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx b/web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx
new file mode 100644
index 00000000..f906588c
--- /dev/null
+++ b/web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx
@@ -0,0 +1,22 @@
+import { useWindowShow } from "../../../hooks/useWindowShow";
+import "./assets/css/styles.css";
+
+export const AdminPanelPlaceScreen = () => {
+  const {isWindowActive} = useWindowShow();
+
+  return (
+    <div className="admin_panel_place_content">
+      <div className="panel_place_header">
+        Administrar lugares dentro de Pueblo Mágico
+        <button className="place_add_btn"
+          disabled={isWindowActive}
+        >
+          Registrar lugar
+        </button>
+      </div>
+      <div className="panel_place_body">
+        
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/web/src/components/admin_panel_places/admin_panel_place_screen/assets/css/styles.css b/web/src/components/admin_panel_places/admin_panel_place_screen/assets/css/styles.css
new file mode 100644
index 00000000..1dc87adb
--- /dev/null
+++ b/web/src/components/admin_panel_places/admin_panel_place_screen/assets/css/styles.css
@@ -0,0 +1,29 @@
+.admin_panel_place_content{
+  width: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel_place_header{
+  height: 7%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  background: gray;
+}
+
+.panel_place_header .place_add_btn{
+  display: inline-block;
+  cursor: pointer;
+  position: absolute;
+  right: 5px;
+}
+
+.panel_place_body{
+  height: 93%;
+  width: 100%;
+  background: white;
+}
\ No newline at end of file
-- 
GitLab


From 76b4f3a2abe5a2c8c6842ad218de86372b4cdc41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 12:20:41 -0600
Subject: [PATCH 67/93] Se crea un custom hook para cambiar el estado de la
 ventana emergente

---
 web/src/hooks/useWindowShow.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 web/src/hooks/useWindowShow.tsx

diff --git a/web/src/hooks/useWindowShow.tsx b/web/src/hooks/useWindowShow.tsx
new file mode 100644
index 00000000..42883f23
--- /dev/null
+++ b/web/src/hooks/useWindowShow.tsx
@@ -0,0 +1,12 @@
+import { useState } from "react"
+
+export const useWindowShow = () => {
+  const [isWindowActive, setIsWindowActive] = useState(false);
+  const [renderCount, setRenderCount] = useState(0);
+
+  const forceRenderList = () =>{
+    setRenderCount(prevCount => prevCount + 1);
+  }
+
+  return {isWindowActive, setIsWindowActive, forceRenderList, renderCount};
+}
\ No newline at end of file
-- 
GitLab


From 779b10699e4d95f9a4578ad66f94de0f61d04f22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Tue, 21 May 2024 12:46:11 -0600
Subject: [PATCH 68/93] Se agrega la dependencia de google maps

---
 web/package-lock.json | 20 ++++++++++++++++++++
 web/package.json      |  1 +
 2 files changed, 21 insertions(+)

diff --git a/web/package-lock.json b/web/package-lock.json
index a18ce42a..6ea818f9 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@googlemaps/react-wrapper": "^1.1.35",
         "@hookform/resolvers": "^3.3.4",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -2598,6 +2599,25 @@
         "react": ">=16.3"
       }
     },
+    "node_modules/@googlemaps/js-api-loader": {
+      "version": "1.16.6",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.6.tgz",
+      "integrity": "sha512-V8p5W9DbPQx74jWUmyYJOerhiB4C+MHekaO0ZRmc6lrOYrvY7+syLhzOWpp55kqSPeNb+qbC2h8i69aLIX6krQ==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
+    "node_modules/@googlemaps/react-wrapper": {
+      "version": "1.1.35",
+      "resolved": "https://registry.npmjs.org/@googlemaps/react-wrapper/-/react-wrapper-1.1.35.tgz",
+      "integrity": "sha512-vK+BDQMHN0Oqr66cW3ZPWVK43BUmJJBu6P8T74tc6/fKpUJUlFEaZsupgIIRRRDW9ejB8uGagUmwOnA2gdcvbw==",
+      "dependencies": {
+        "@googlemaps/js-api-loader": "^1.13.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",
diff --git a/web/package.json b/web/package.json
index 380d9b4b..0f73b127 100644
--- a/web/package.json
+++ b/web/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@googlemaps/react-wrapper": "^1.1.35",
     "@hookform/resolvers": "^3.3.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
-- 
GitLab


From 149e9ed51a0a4bb90d656455d12a1e3d48c932ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Fri, 24 May 2024 09:36:40 -0600
Subject: [PATCH 69/93] Se removio la dependencia anteriormente instala y se
 instalo la correcta

---
 web/package-lock.json | 75 ++++++++++++++++++++++++++++++++++++-------
 web/package.json      |  2 +-
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 6ea818f9..efcf5001 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,8 +10,8 @@
       "dependencies": {
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@googlemaps/react-wrapper": "^1.1.35",
         "@hookform/resolvers": "^3.3.4",
+        "@react-google-maps/api": "^2.19.3",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2600,22 +2600,20 @@
       }
     },
     "node_modules/@googlemaps/js-api-loader": {
-      "version": "1.16.6",
-      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.6.tgz",
-      "integrity": "sha512-V8p5W9DbPQx74jWUmyYJOerhiB4C+MHekaO0ZRmc6lrOYrvY7+syLhzOWpp55kqSPeNb+qbC2h8i69aLIX6krQ==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz",
+      "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       }
     },
-    "node_modules/@googlemaps/react-wrapper": {
-      "version": "1.1.35",
-      "resolved": "https://registry.npmjs.org/@googlemaps/react-wrapper/-/react-wrapper-1.1.35.tgz",
-      "integrity": "sha512-vK+BDQMHN0Oqr66cW3ZPWVK43BUmJJBu6P8T74tc6/fKpUJUlFEaZsupgIIRRRDW9ejB8uGagUmwOnA2gdcvbw==",
+    "node_modules/@googlemaps/markerclusterer": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz",
+      "integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==",
       "dependencies": {
-        "@googlemaps/js-api-loader": "^1.13.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
+        "fast-deep-equal": "^3.1.3",
+        "supercluster": "^8.0.1"
       }
     },
     "node_modules/@hookform/resolvers": {
@@ -3592,6 +3590,33 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-google-maps/api": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.3.tgz",
+      "integrity": "sha512-jiLqvuOt5lOowkLeq7d077AByTyJp+s6hZVlLhlq7SBacBD37aUNpXBz2OsazfeR6Aw4a+9RRhAEjEFvrR1f5A==",
+      "dependencies": {
+        "@googlemaps/js-api-loader": "1.16.2",
+        "@googlemaps/markerclusterer": "2.5.3",
+        "@react-google-maps/infobox": "2.19.2",
+        "@react-google-maps/marker-clusterer": "2.19.2",
+        "@types/google.maps": "3.55.2",
+        "invariant": "2.2.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
+    "node_modules/@react-google-maps/infobox": {
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.19.2.tgz",
+      "integrity": "sha512-6wvBqeJsQ/eFSvoxg+9VoncQvNoVCdmxzxRpLvmjPD+nNC6mHM0vJH1xSqaKijkMrfLJT0nfkTGpovrF896jwg=="
+    },
+    "node_modules/@react-google-maps/marker-clusterer": {
+      "version": "2.19.2",
+      "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.19.2.tgz",
+      "integrity": "sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw=="
+    },
     "node_modules/@remix-run/router": {
       "version": "1.15.3",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
@@ -4357,6 +4382,11 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/google.maps": {
+      "version": "3.55.2",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.2.tgz",
+      "integrity": "sha512-JcTwzkxskR8DN/nnX96Pie3gGN3WHiPpuxzuQ9z3516o1bB243d8w8DHUJ8BohuzoT1o3HUFta2ns/mkZC8KRw=="
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -9697,6 +9727,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -12414,6 +12452,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -16870,6 +16913,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/web/package.json b/web/package.json
index 0f73b127..f9d8a871 100644
--- a/web/package.json
+++ b/web/package.json
@@ -5,8 +5,8 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@googlemaps/react-wrapper": "^1.1.35",
     "@hookform/resolvers": "^3.3.4",
+    "@react-google-maps/api": "^2.19.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-- 
GitLab


From a22772128771d11e6e14a6a3b795c6e840321b6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Fri, 24 May 2024 09:37:01 -0600
Subject: [PATCH 70/93] Se crea una constante con las llaves de las APIs

---
 web/src/constants/api_keys.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 web/src/constants/api_keys.ts

diff --git a/web/src/constants/api_keys.ts b/web/src/constants/api_keys.ts
new file mode 100644
index 00000000..cd8c9ac6
--- /dev/null
+++ b/web/src/constants/api_keys.ts
@@ -0,0 +1 @@
+export const REACT_APP_GOOGLE_API_KEY: string = "AIzaSyBpAU7mFuX3oAyRisHiMI89fRcLuRA_i3o";
\ No newline at end of file
-- 
GitLab


From b7052493a1f8a7f85162c7eee8c6d02670921863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Fri, 24 May 2024 09:39:12 -0600
Subject: [PATCH 71/93] Se crea el componente para el mapa

---
 web/src/components/map/map.tsx | 42 ++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 web/src/components/map/map.tsx

diff --git a/web/src/components/map/map.tsx b/web/src/components/map/map.tsx
new file mode 100644
index 00000000..726fc6e5
--- /dev/null
+++ b/web/src/components/map/map.tsx
@@ -0,0 +1,42 @@
+import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
+import { useState, useMemo } from "react";
+import { REACT_APP_GOOGLE_API_KEY } from "../../constants/api_keys";
+import { LoadingScreen } from "../loading_screen/loading_screen";
+
+export const MapComponent = () => {
+  const {isLoaded} = useLoadScript({
+    googleMapsApiKey: REACT_APP_GOOGLE_API_KEY
+  });
+  const [marker, setMarker] = useState(false);
+  const [latitude, setLatitude] = useState(0.0);
+  const [longitude, setLongitude] = useState(0.0);
+  const updateMarker = (event: google.maps.MapMouseEvent) => {
+    if (event.latLng) {
+      setMarker(true);
+      setLatitude(event.latLng.lat());
+      setLongitude(event.latLng.lng());
+    }
+  }
+  
+  const center  = useMemo(() => (
+    {lat: 23.687, lng: -102.74}
+  ),[])
+
+  return (
+    <div style={{width: '100%', height: '100%'}}>
+      {!isLoaded
+      ?
+        <LoadingScreen/>
+      :
+        <GoogleMap
+          center={center}
+          zoom={8}
+          mapContainerStyle={{height: '100%'}}
+          onClick={updateMarker}
+        >
+          {marker && <Marker position={{lat: latitude, lng: longitude}}/>}
+        </GoogleMap>
+      }
+    </div>
+  );
+}
\ No newline at end of file
-- 
GitLab


From 652683d3cfc0671c9bf2bbea85d68799d1cbd3f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Fri, 24 May 2024 09:40:36 -0600
Subject: [PATCH 72/93] =?UTF-8?q?Se=20agrega=20el=20componente=20de=20la?=
 =?UTF-8?q?=20ventana=20emergente=20de=20registro=20de=20un=20lugar=20y=20?=
 =?UTF-8?q?se=20le=20da=20la=20funcionalidad=20al=20bot=C3=B3n=20encargado?=
 =?UTF-8?q?=20de=20abrirla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin_panel_place_screen.tsx                | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx b/web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx
index f906588c..f082ae26 100644
--- a/web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx
+++ b/web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx
@@ -1,8 +1,14 @@
-import { useWindowShow } from "../../../hooks/useWindowShow";
+import { Dispatch, SetStateAction } from "react";
+import { AdminPanelPlaceRegister } from "../admin_panel_place_register/admin_panel_place_register";
 import "./assets/css/styles.css";
 
-export const AdminPanelPlaceScreen = () => {
-  const {isWindowActive} = useWindowShow();
+interface props {
+  isWindowActive: boolean;
+  setIsWindowActive: Dispatch<SetStateAction<boolean>>;
+}
+
+export const AdminPanelPlaceScreen = ({isWindowActive,setIsWindowActive}: props) => {
+  
 
   return (
     <div className="admin_panel_place_content">
@@ -10,12 +16,15 @@ export const AdminPanelPlaceScreen = () => {
         Administrar lugares dentro de Pueblo Mágico
         <button className="place_add_btn"
           disabled={isWindowActive}
+          onClick={() => setIsWindowActive(true)}
         >
           Registrar lugar
         </button>
       </div>
       <div className="panel_place_body">
-        
+        {
+          isWindowActive && <AdminPanelPlaceRegister setIsWindowActive={setIsWindowActive}/>
+        }
       </div>
     </div>
   );
-- 
GitLab


From f0adeca4177592b6c4bd3797c7599e851feff83a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Fri, 24 May 2024 09:41:23 -0600
Subject: [PATCH 73/93] Se crea el componente y los estilos para la ventana
 emergente para el registro de un lugar

---
 .../admin_panel_place_register.tsx            | 38 ++++++++++
 .../assets/css/styles.css                     | 69 +++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
 create mode 100644 web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css

diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
new file mode 100644
index 00000000..33a10661
--- /dev/null
+++ b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
@@ -0,0 +1,38 @@
+import { faWindowClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Dispatch, SetStateAction} from "react";
+import "./assets/css/styles.css";
+import { MapComponent } from "../../map/map";
+
+interface props {
+  setIsWindowActive: Dispatch<SetStateAction<boolean>>;
+}
+
+export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
+  
+
+  return (
+    <div className="place_register_wrap">
+      <div className="place_register_header">
+        Registra el lugar
+        <FontAwesomeIcon icon={faWindowClose} className="close_btn"
+          onClick={() => setIsWindowActive(false)}/>
+      </div>
+      <div className="place_register_body">
+        <form>
+          <div className="inputs_container">
+            
+          </div>
+          <div className="map_container">
+            <div className="map">
+              <MapComponent/>
+            </div>
+            <div className="map_error_cnt">
+              
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css b/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
new file mode 100644
index 00000000..1bfa2f29
--- /dev/null
+++ b/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
@@ -0,0 +1,69 @@
+*{
+  user-select: none;
+}
+
+.place_register_wrap{
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 70vw;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border: solid 2px black;
+}
+
+.place_register_header{
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  background: #ccc;
+  height: 7%;
+}
+
+.close_btn{
+  display: inline-block;
+  cursor: pointer;
+  height: 3%;
+  position: absolute;
+  right: 5px;
+}
+
+.place_register_body{
+  height: 93%;
+  width: 100%;
+}
+
+.place_register_body form{
+  height: 100%;
+  display: flex;
+}
+
+.inputs_container{
+  height: 100%;
+  width: 50%;
+}
+
+.map_container{
+  height: 100%;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+
+.map{
+  height: 95%;
+  width: 100%;
+  padding: 10px;
+}
+
+.map_error_cnt{
+  height: 5%;
+  width: 100%;
+}
\ No newline at end of file
-- 
GitLab


From 244e2e843a8cf20518e92aaba01b9213d0e654e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Fri, 24 May 2024 09:42:40 -0600
Subject: [PATCH 74/93] =?UTF-8?q?Se=20agrega=20la=20funcionalidad=20de=20q?=
 =?UTF-8?q?ue=20se=20desactiven=20la=20barra=20lateral=20y=20los=20botones?=
 =?UTF-8?q?=20cuando=20est=C3=A9=20abrierta=20la=20ventana=20de=20registro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/home/admin_page/admin_home_page.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/home/admin_page/admin_home_page.tsx b/web/src/pages/home/admin_page/admin_home_page.tsx
index 7e486c72..54eed225 100644
--- a/web/src/pages/home/admin_page/admin_home_page.tsx
+++ b/web/src/pages/home/admin_page/admin_home_page.tsx
@@ -7,17 +7,18 @@ import { AdminPanelNavBar } from "../../../components/admin_panel_navbar/admin_n
 import { SidebarHeader } from "../../../components/sidebar_header/sidebar_header";
 import { AdminPanelPlaceScreen } from "../../../components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen";
 import { AdminSelectedPanel } from "../../../constants/selected_panel";
+import { useWindowShow } from "../../../hooks/useWindowShow";
 
 export const AdminHomePage = () => {
   const [collapsed, setCollapsed] = useState(true);
-  const [windowActive, setWindowActive] = useState(false);
+  const {setIsWindowActive, isWindowActive} = useWindowShow();
   const [selectedPanel, setSelectedPanel] = useState<AdminSelectedPanel>(AdminSelectedPanel.PLACES);
  
   return (
     <div className="admin-panel-root">
       <Sidebar className="sidebar" collapsed={collapsed} 
         onMouseOver={() => {
-          windowActive ?
+          isWindowActive ?
             setCollapsed(true)
           :
             setCollapsed(false)
@@ -28,13 +29,13 @@ export const AdminHomePage = () => {
         <SidebarHeader/>
         <Menu>
           <MenuItem icon={<FontAwesomeIcon icon={faPlaceOfWorship}/>}  
-            disabled={windowActive}
+            disabled={isWindowActive}
             onClick={() => {setSelectedPanel(AdminSelectedPanel.PLACES)}}
             >
             Lugares
           </MenuItem>
           <MenuItem icon={<FontAwesomeIcon icon={faLocation}/>} 
-            disabled={windowActive}
+            disabled={isWindowActive}
             onClick={() => {setSelectedPanel(AdminSelectedPanel.ACTIVITIES)}}
             >
             Actividades
@@ -42,12 +43,12 @@ export const AdminHomePage = () => {
         </Menu>
       </Sidebar>
       <div className="admin-panel-body">
-        <AdminPanelNavBar windowActive={windowActive}/>
+        <AdminPanelNavBar windowActive={isWindowActive}/>
         <div className="admin-panel-content">
         {(() => {
           switch (selectedPanel) {
             case AdminSelectedPanel.PLACES:
-              return <AdminPanelPlaceScreen/>;
+              return <AdminPanelPlaceScreen setIsWindowActive={setIsWindowActive} isWindowActive={isWindowActive}/>;
             case AdminSelectedPanel.ACTIVITIES:
               return <div/>
             default:
-- 
GitLab


From 8a8a1cadaa652388f5fd004a7ef58efeeec52d1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Fri, 24 May 2024 10:24:00 -0600
Subject: [PATCH 75/93] =?UTF-8?q?Se=20crea=20el=20custom=20hook=20que=20gu?=
 =?UTF-8?q?arda=20la=20l=C3=B3gica=20de=20validaci=C3=B3n=20y=20la=20que?=
 =?UTF-8?q?=20realiza=20la=20petici=C3=B3n=20a=20la=20datasource?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/hooks/usePlaceRegister.tsx | 103 +++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 web/src/hooks/usePlaceRegister.tsx

diff --git a/web/src/hooks/usePlaceRegister.tsx b/web/src/hooks/usePlaceRegister.tsx
new file mode 100644
index 00000000..8058351b
--- /dev/null
+++ b/web/src/hooks/usePlaceRegister.tsx
@@ -0,0 +1,103 @@
+import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form"
+import { PlaceFormValues } from "../infraestructure/entities/place";
+import { toast } from "react-toastify";
+import { useState } from "react";
+import axios, { AxiosError } from "axios";
+
+const resolver: Resolver<PlaceFormValues> = async (data) => {
+  const errors: FieldErrors<PlaceFormValues> = {};
+
+  if(!data.idTown){
+    errors.idTown = {
+      type : "required",
+      message : "Debe seleccionar el pueblo mágico al que pertenece el lugar"
+    }
+  }
+
+  if(!data.nameES){
+    errors.nameES = {
+      type : "required",
+      message : "El nombre del lugar en español es requerido"
+    }
+  }
+
+  if(!data.nameEN){
+    errors.nameEN = {
+      type : "required",
+      message : "El nombre del lugar en inglés es requerido"
+    }
+  }
+
+  if (!data.descriptionES) {
+    errors.descriptionES = {
+      type: "required",
+      message: "La descripción del lugar en español es requerida"
+    };
+  }
+
+  if (!data.descriptionEN) {
+    errors.descriptionEN = {
+      type: "required",
+      message: "La descripción del lugar en inglés es requerida"
+    };
+  }
+
+  if(!data.latitude || !data.longitude){
+    errors.latitude = {
+      type: "required",
+      message: "Debe de seleccionar la ubicación del lugar"
+    }
+  }
+
+  if(!data.imagesList || data.imagesList.length<3){
+    errors.imagesList = {
+      type: "required",
+      message: "Debe de haber al menos 3 imagénes representativas del lugar"
+    }
+  }
+
+  return {
+    values: Object.keys(errors).length > 0 ? {} : data,
+    errors: errors
+  };
+};
+
+export const usePlaceRegister = () => {
+  const {
+    register, 
+    handleSubmit,
+    setValue,
+    formState: {errors},
+  } = useForm<PlaceFormValues>({resolver});
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const onSubmit : SubmitHandler<PlaceFormValues> = (data: PlaceFormValues) => {
+    const fetch = async () => {
+      try{
+        
+      }catch(error: any){
+        if(axios.isAxiosError(error)){
+          error as AxiosError;
+          switch(error.code){
+            case(axios.AxiosError.ERR_BAD_REQUEST):
+              setErrorMessage("Acceso no autorizado");
+              break;
+            case(axios.AxiosError.ERR_NETWORK):
+              setErrorMessage("Conexión con el servidor fallida");
+              break;
+          }
+        }
+        throw new Error;
+      }
+    }
+    toast.promise(
+      fetch(),{
+        pending: "Subiendo datos...",
+        success: "Los datos se han subido correctamente",
+        error: errorMessage
+      }
+    )
+  }
+
+  return {register, handleSubmit, errors, onSubmit, setValue};
+}
\ No newline at end of file
-- 
GitLab


From c14095e10ba0a70e029f9d023538e8bac2152051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:07:36 -0600
Subject: [PATCH 76/93] Se crea una interface para guardar los valores de un
 lugar

---
 web/src/infraestructure/entities/place.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 web/src/infraestructure/entities/place.ts

diff --git a/web/src/infraestructure/entities/place.ts b/web/src/infraestructure/entities/place.ts
new file mode 100644
index 00000000..ac2fff45
--- /dev/null
+++ b/web/src/infraestructure/entities/place.ts
@@ -0,0 +1,8 @@
+export interface PlaceFormValues{
+    idTown: number;
+    names: string[];
+    descriptions: string[];
+    latitude: number;
+    longitude: number;
+    imagesList: File[];
+}
\ No newline at end of file
-- 
GitLab


From 5395a556259bb2ea48da602619af9f0b81ae1c30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:08:04 -0600
Subject: [PATCH 77/93] Se crea una interface para guardar una imagen y su URL

---
 web/src/infraestructure/entities/image.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 web/src/infraestructure/entities/image.ts

diff --git a/web/src/infraestructure/entities/image.ts b/web/src/infraestructure/entities/image.ts
new file mode 100644
index 00000000..a7147705
--- /dev/null
+++ b/web/src/infraestructure/entities/image.ts
@@ -0,0 +1,4 @@
+export interface Image{
+  file: File;
+  preview: string;
+}
\ No newline at end of file
-- 
GitLab


From 043ced5641e942b6db001b32198db8bc28a9963f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:08:25 -0600
Subject: [PATCH 78/93] Se crea la constante que guarda la lista de idiomas

---
 web/src/constants/languages.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 web/src/constants/languages.ts

diff --git a/web/src/constants/languages.ts b/web/src/constants/languages.ts
new file mode 100644
index 00000000..770db8d7
--- /dev/null
+++ b/web/src/constants/languages.ts
@@ -0,0 +1,4 @@
+export const languaguesList: string[] = [
+    'Español',
+    'Inglés',
+]
\ No newline at end of file
-- 
GitLab


From ef3a3a6adca37984acf572a9174c02eea55f66aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:10:23 -0600
Subject: [PATCH 79/93] Se agrega una notificacion cuando un error ocurre

---
 .../sa_panel_admin_register.tsx               | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx b/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx
index a540b5d3..89bb73a1 100644
--- a/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_register/sa_panel_admin_register.tsx
@@ -7,7 +7,8 @@ import { usePasswoordVisibility } from "../../../hooks/usePasswordVisibility";
 import { State } from "../../../infraestructure/entities/state";
 import { useTown } from "../../../hooks/useTown";
 import { Town } from "../../../infraestructure/entities/town";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
+import { ToastContainer, toast } from "react-toastify";
 
 interface props {
   setWindowActive: Dispatch<SetStateAction<boolean>>,
@@ -46,7 +47,26 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa
         }
       } catch (error: any) {
         if (axios.isAxiosError(error)) {
-          //console.log(error)
+          error as AxiosError;
+          let message = "";
+          switch(error.code){
+            case(axios.AxiosError.ERR_BAD_REQUEST):
+              message = "Acceso no autorizado";
+              break;
+            case(axios.AxiosError.ERR_NETWORK):
+              message = "Conexión con el servidor fallida";
+              break;
+          }
+          toast.error(message, {
+            position: "bottom-right",
+            autoClose: 1500,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "colored"
+          });
         }
       }
     }
@@ -119,7 +139,7 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa
 
           <div className="admin_input_cnt">
             <label>Pueblo mágico al que representa</label>
-            {townsList === null || townsList.length==0
+            {townsList === null || townsList.length===0
             ?
               <label>No hay pueblo registrados</label>
             :
@@ -135,6 +155,15 @@ export const SuperadminPanelAdminRegister = ({setWindowActive, setShowRegisterPa
             <p className="error">{errors.townAdmin?.message}</p>
           </div>
           
+          <ToastContainer
+            position='bottom-right'
+            autoClose = {1000}
+            hideProgressBar = {true}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+          />
+
           <div className="admin_input_cnt">
             <input className="submit_btn" type="submit" content="Registrar"/>
           </div>
-- 
GitLab


From 6b4fb380c9b7d64333adbeb9710da4b9f4cf6fec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:11:11 -0600
Subject: [PATCH 80/93] Se guardan las coordenadas del marcador en el
 formulario

---
 web/src/components/map/map.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/src/components/map/map.tsx b/web/src/components/map/map.tsx
index 726fc6e5..d1c45e29 100644
--- a/web/src/components/map/map.tsx
+++ b/web/src/components/map/map.tsx
@@ -2,8 +2,14 @@ import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
 import { useState, useMemo } from "react";
 import { REACT_APP_GOOGLE_API_KEY } from "../../constants/api_keys";
 import { LoadingScreen } from "../loading_screen/loading_screen";
+import { UseFormSetValue } from "react-hook-form";
+import { PlaceFormValues } from "../../infraestructure/entities/place";
 
-export const MapComponent = () => {
+interface props{
+  setValue: UseFormSetValue<PlaceFormValues>;
+}
+
+export const MapComponent = ({setValue}: props) => {
   const {isLoaded} = useLoadScript({
     googleMapsApiKey: REACT_APP_GOOGLE_API_KEY
   });
@@ -15,6 +21,8 @@ export const MapComponent = () => {
       setMarker(true);
       setLatitude(event.latLng.lat());
       setLongitude(event.latLng.lng());
+      setValue("latitude", event.latLng.lat(), {shouldValidate: true});
+      setValue("longitude", event.latLng.lng(), {shouldValidate: true});
     }
   }
   
-- 
GitLab


From caed1184b9db7808e6ff41921c4fe01dd5c79c7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:13:03 -0600
Subject: [PATCH 81/93] Se agregan validaciones a los campos del formulario y
 se agregan estados para los nombres, las descripciones, los estados y los
 pueblos

---
 web/src/hooks/usePlaceRegister.tsx | 112 +++++++++++++++++++++--------
 1 file changed, 84 insertions(+), 28 deletions(-)

diff --git a/web/src/hooks/usePlaceRegister.tsx b/web/src/hooks/usePlaceRegister.tsx
index 8058351b..6ddde056 100644
--- a/web/src/hooks/usePlaceRegister.tsx
+++ b/web/src/hooks/usePlaceRegister.tsx
@@ -1,8 +1,11 @@
 import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form"
 import { PlaceFormValues } from "../infraestructure/entities/place";
 import { toast } from "react-toastify";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import axios, { AxiosError } from "axios";
+import { languaguesList } from "../constants/languages";
+import { useGetStatesList } from "./useGetStatesList";
+import { useTown } from "./useTown";
 
 const resolver: Resolver<PlaceFormValues> = async (data) => {
   const errors: FieldErrors<PlaceFormValues> = {};
@@ -14,34 +17,22 @@ const resolver: Resolver<PlaceFormValues> = async (data) => {
     }
   }
 
-  if(!data.nameES){
-    errors.nameES = {
-      type : "required",
-      message : "El nombre del lugar en español es requerido"
+  for(var index = languaguesList.length-1; index>=0; index--){
+    if(!data.names || !data.names[index]){
+      errors.names = {
+        type: "required",
+        message: "El nombre del lugar en "+languaguesList[index]+" es requerido"
+      };
     }
-  }
 
-  if(!data.nameEN){
-    errors.nameEN = {
-      type : "required",
-      message : "El nombre del lugar en inglés es requerido"
+    if(!data.descriptions || !data.descriptions[index]){
+      errors.descriptions = {
+        type: "required",
+        message: "La descripción del lugar en "+languaguesList[index]+" es requerida"
+      };
     }
   }
 
-  if (!data.descriptionES) {
-    errors.descriptionES = {
-      type: "required",
-      message: "La descripción del lugar en español es requerida"
-    };
-  }
-
-  if (!data.descriptionEN) {
-    errors.descriptionEN = {
-      type: "required",
-      message: "La descripción del lugar en inglés es requerida"
-    };
-  }
-
   if(!data.latitude || !data.longitude){
     errors.latitude = {
       type: "required",
@@ -68,13 +59,59 @@ export const usePlaceRegister = () => {
     handleSubmit,
     setValue,
     formState: {errors},
+    clearErrors,
   } = useForm<PlaceFormValues>({resolver});
   const [errorMessage, setErrorMessage] = useState("");
+  const [languageNameIndexSelected, setLanguageNameIndexSelected] = useState(0);
+  const [languageDescriptionIndexSelected, setLanguageDescriptionIndexSelected] = useState(0);
+  const [names, setNames] = useState<string[]>(new Array(languaguesList.length).fill(""));
+  const [descriptions, setDescriptions] = useState<string[]>(new Array(languaguesList.length).fill(""));
+  const [isLoading, setIsLoading] = useState(false);
+  const {townsList, getTownsByState} = useTown();
+  const {getStates, statesList} = useGetStatesList();
+
+  useEffect(() => {
+    setIsLoading(true);
+    const getStatesList = async () => {
+      try{
+        getStates();
+      }catch(error: any){
+        if(axios.isAxiosError(error)){
+          error as AxiosError;
+          let message = "";
+          switch(error.code){
+            case(axios.AxiosError.ERR_BAD_REQUEST):
+              message = "Acceso no autorizado";
+              break;
+            case(axios.AxiosError.ERR_NETWORK):
+              message = "Conexión con el servidor fallida";
+              break;
+          }
+          toast.error(message, {
+            position: "bottom-right",
+            autoClose: 1500,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "colored"
+          });
+        }
+      }
+    }
+    getStatesList();
+    setIsLoading(false);
+  },[]);
+
+  const updateTownsList = (idState: number, stateName: string) => {
+    getTownsByState(idState, stateName);
+  }
 
   const onSubmit : SubmitHandler<PlaceFormValues> = (data: PlaceFormValues) => {
     const fetch = async () => {
       try{
-        
+        console.log(data);
       }catch(error: any){
         if(axios.isAxiosError(error)){
           error as AxiosError;
@@ -87,7 +124,7 @@ export const usePlaceRegister = () => {
               break;
           }
         }
-        throw new Error;
+        throw new Error();
       }
     }
     toast.promise(
@@ -99,5 +136,24 @@ export const usePlaceRegister = () => {
     )
   }
 
-  return {register, handleSubmit, errors, onSubmit, setValue};
-}
\ No newline at end of file
+  return {
+    register, 
+    handleSubmit, 
+    errors, 
+    onSubmit, 
+    setValue,
+    languageNameIndexSelected, 
+    setLanguageNameIndexSelected,
+    languageDescriptionIndexSelected,
+    setLanguageDescriptionIndexSelected,
+    names,
+    setNames,
+    descriptions,
+    setDescriptions,
+    clearErrors,
+    isLoading,
+    statesList,
+    townsList,
+    updateTownsList
+  };
+}
-- 
GitLab


From f19edaa5158d9189474984e1f01970efdf105471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:13:52 -0600
Subject: [PATCH 82/93] =?UTF-8?q?Se=20crea=20el=20componente=20y=20los=20e?=
 =?UTF-8?q?stilos=20para=20el=20=C3=A1rea=20de=20subir=20im=C3=A1genes=20y?=
 =?UTF-8?q?=20su=20visualizaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/styles.css                     | 69 +++++++++++++++++++
 .../multiple_images_dropzone.tsx              | 53 ++++++++++++++
 2 files changed, 122 insertions(+)
 create mode 100644 web/src/components/multiple_images_dropzone/assets/css/styles.css
 create mode 100644 web/src/components/multiple_images_dropzone/multiple_images_dropzone.tsx

diff --git a/web/src/components/multiple_images_dropzone/assets/css/styles.css b/web/src/components/multiple_images_dropzone/assets/css/styles.css
new file mode 100644
index 00000000..8078660d
--- /dev/null
+++ b/web/src/components/multiple_images_dropzone/assets/css/styles.css
@@ -0,0 +1,69 @@
+.multiple_images_dropzone_root{
+  width: 100%;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+}
+
+.multiple_image_dropzone{
+  height: 20%;
+  width: 100%;
+  cursor: pointer;
+  border-color: #eeeeee;
+  border-style: dashed;
+  background-color: #fafafa;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.multiple_image_dropzone:hover {
+  border-color: rgb(106, 188, 226);
+  color: rgb(43, 38, 38);
+}
+
+.previews_list_cnt{
+  height: 80%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  overflow-x: auto;
+}
+
+.previews_list_cnt .preview{
+  display: inline-flex;
+  border-radius: 2;
+  cursor: pointer;
+  border: 2px solid #eaeaea;
+  width: 60px;
+  height: 60px;
+  box-sizing: border-box;
+  margin-right: 2px;
+  position: relative;
+}
+
+.previews_list_cnt .preview:hover{
+  border: 2px solid #aba7a7;
+}
+
+.previews_list_cnt .preview .remove_button{
+  position: absolute;
+  right: 0px;
+  cursor: pointer;
+  color: red;
+}
+
+.previews_list_cnt .preview .preview_inner{
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.previews_list_cnt .preview .preview_inner img{
+  display: block;
+  width: auto;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/web/src/components/multiple_images_dropzone/multiple_images_dropzone.tsx b/web/src/components/multiple_images_dropzone/multiple_images_dropzone.tsx
new file mode 100644
index 00000000..cd5ce535
--- /dev/null
+++ b/web/src/components/multiple_images_dropzone/multiple_images_dropzone.tsx
@@ -0,0 +1,53 @@
+import { UseFormSetValue } from "react-hook-form";
+import { PlaceFormValues } from "../../infraestructure/entities/place";
+import { useDropzoneMultiplesImages } from "../../hooks/useDropzoneMultiplesImages";
+import "./assets/css/styles.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+
+interface props{
+  setValue: UseFormSetValue<PlaceFormValues>;
+}
+
+export const MultipleImagesDropzone = ({setValue}:props) => {
+  const {
+    getRootProps, 
+    getInputProps,
+    imagesFiles,
+    removeImage,
+  } = useDropzoneMultiplesImages(setValue);
+
+  return (
+    <div className="multiple_images_dropzone_root">
+      <div {...getRootProps({className: "multiple_image_dropzone"})}>
+        <input {...getInputProps()}/>
+        <p>Arrastra tu imagen o seleccionala dando click aquí.</p>
+      </div>
+      <div className="previews_list_cnt">
+        {
+          imagesFiles &&
+          imagesFiles.map((image, index) => {
+            return (
+              <div className="preview" key={image.file.name}
+                onClick={() => {
+                  
+                }}
+              >
+                <div className="preview_inner">
+                  <img
+                    src={image.preview}
+                    onLoad={() => {URL.revokeObjectURL(image.preview)}}
+                  />
+                </div>
+                <FontAwesomeIcon key={index} className="remove_button" icon={faTimesCircle}
+                  onClick={() => removeImage(index)}
+                />
+              </div>
+            );
+          })
+        }
+      </div>
+    </div>
+  );
+}
+
-- 
GitLab


From 9c913283e15f69336ef41995b9ad2646b3f44c08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:14:31 -0600
Subject: [PATCH 83/93] =?UTF-8?q?Se=20crea=20el=20custom=20hook=20encargad?=
 =?UTF-8?q?o=20de=20la=20l=C3=B3gica=20de=20subir=20im=C3=A1genes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/hooks/useDropzoneMultiplesImages.tsx | 72 ++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 web/src/hooks/useDropzoneMultiplesImages.tsx

diff --git a/web/src/hooks/useDropzoneMultiplesImages.tsx b/web/src/hooks/useDropzoneMultiplesImages.tsx
new file mode 100644
index 00000000..cc5cd5da
--- /dev/null
+++ b/web/src/hooks/useDropzoneMultiplesImages.tsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { toast } from "react-toastify";
+import { Image } from "../infraestructure/entities/image";
+import { UseFormSetValue } from "react-hook-form";
+import { PlaceFormValues } from "../infraestructure/entities/place";
+
+export const useDropzoneMultiplesImages = (setValue: UseFormSetValue<PlaceFormValues>) => {
+  const [imagesFiles, setImagesFiles] = useState<Image[]>([]);
+  const [files, setFiles] = useState<File[]>([]);
+  const MAX_SIZE = 10485760;
+  const {getRootProps, getInputProps} = useDropzone(
+    {
+      maxSize: MAX_SIZE,
+      accept: {
+        'image/*': []
+      },
+      onDrop(acceptedFiles, fileRejections) {
+        fileRejections.map(({file, errors}) => (
+          toast.error("Error: " + errors[0].message +" : "+ file.name, {
+            position: "bottom-right",
+            autoClose: 1500,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "colored"
+          })
+        ));
+        
+        const backupImages = [...imagesFiles];
+        const backupFiles = [...files];
+        acceptedFiles.forEach((file, index)=>{
+          if(imagesFiles.length<=10 && index<10){
+            const preview = URL.createObjectURL(file);
+            backupImages.push({file, preview});
+            backupFiles.push(file);
+          }else{
+            toast.error("Error: Ha superado los 10 archivos", {
+              position: "bottom-right",
+              autoClose: 1500,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: false,
+              draggable: true,
+              progress: undefined,
+              theme: "colored"
+            });
+          }
+        });
+        setImagesFiles(backupImages);
+        setFiles(backupFiles);
+        console.log(backupFiles.length);
+        setValue("imagesList", backupFiles, {shouldValidate:true});
+      }
+    }
+  );
+
+  const removeImage = (index: number) => {
+    const backupImages = [...imagesFiles];
+    const backupFiles = [...files];
+    backupImages.splice(index, 1);
+    backupFiles.splice(index, 1);
+    setImagesFiles(backupImages);
+    setFiles(backupFiles);
+    setValue("imagesList", backupFiles, {shouldValidate:true});
+    console.log(backupFiles.length);
+  }
+
+  return {getInputProps, getRootProps, imagesFiles, removeImage};
+}
\ No newline at end of file
-- 
GitLab


From 8557240615ad3e2438e4af2f6cd08a8c02f761b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Wed, 12 Jun 2024 18:15:43 -0600
Subject: [PATCH 84/93] Se agregan los campos para los nombres, las
 descripciones, las imagenes y el pueblo del lugar

---
 .../admin_panel_place_register.tsx            | 163 +++++++++++++++++-
 .../assets/css/styles.css                     |  50 ++++++
 2 files changed, 206 insertions(+), 7 deletions(-)

diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
index 33a10661..1706e141 100644
--- a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
+++ b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
@@ -3,13 +3,36 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Dispatch, SetStateAction} from "react";
 import "./assets/css/styles.css";
 import { MapComponent } from "../../map/map";
+import { usePlaceRegister } from "../../../hooks/usePlaceRegister";
+import { languaguesList } from "../../../constants/languages";
+import { ToastContainer, toast } from "react-toastify";
+import { LoadingScreen } from "../../loading_screen/loading_screen";
+import { MultipleImagesDropzone } from "../../multiple_images_dropzone/multiple_images_dropzone";
 
 interface props {
   setIsWindowActive: Dispatch<SetStateAction<boolean>>;
 }
 
 export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
-  
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    setValue,
+    languageNameIndexSelected,
+    setLanguageNameIndexSelected,
+    languageDescriptionIndexSelected,
+    setNames,
+    names,
+    descriptions,
+    setDescriptions,
+    setLanguageDescriptionIndexSelected,
+    isLoading,
+    statesList,
+    updateTownsList,
+    townsList,
+  } = usePlaceRegister();
 
   return (
     <div className="place_register_wrap">
@@ -19,18 +42,144 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
           onClick={() => setIsWindowActive(false)}/>
       </div>
       <div className="place_register_body">
-        <form>
-          <div className="inputs_container">
-            
-          </div>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          {
+            isLoading
+            ?
+              <LoadingScreen/>
+            :
+            <div className="inputs_container">
+              <div className="input">
+                <div className="input_header">
+                  Nombre del lugar
+                  <select onChange={(e) => setLanguageNameIndexSelected(Number(e.target.value))}>
+                      {languaguesList.map((language, index) => {
+                        return (
+                          <option key={index} value={index}>{language}</option>
+                        );
+                      })}
+                  </select>
+                </div>
+                {
+                  languaguesList.map((language, index) => {
+                      if(index===languageNameIndexSelected){
+                        return (
+                          <input type="text" 
+                            value={names[index]}
+                            onChange={(e) => {
+                              const updatedNamesList = [...names];
+                              updatedNamesList[index] = e.target.value;
+                              setNames(updatedNamesList);
+                              setValue("names", updatedNamesList, {shouldValidate: true});
+                            }}
+                          />
+                      );
+                      }
+                  })
+                }
+                <p className="error">{errors.names?.message}</p>
+              </div>
+
+              <div className="input">
+                <div className="input_header">
+                  Descripción del lugar
+                  <select onChange={(e) => setLanguageDescriptionIndexSelected(Number(e.target.value))}>
+                      {languaguesList.map((language, index) => {
+                        return (
+                          <option key={index} value={index}>{language}</option>
+                        );
+                      })}
+                  </select>
+                </div>
+                {
+                  languaguesList.map((language, index) => {
+                      if(index===languageDescriptionIndexSelected){
+                        return (
+                          <textarea id={index.toString()} 
+                            className="place_description"
+                            value={descriptions[index]}
+                            onChange={(e) => {
+                              const updatedDescriptionsList = [...descriptions];
+                              updatedDescriptionsList[index] = e.target.value;
+                              setDescriptions(updatedDescriptionsList);
+                              setValue("descriptions", updatedDescriptionsList, {shouldValidate: true});
+                            }}
+                          />
+                      );
+                      }
+                  })
+                }
+                <p className="error">{errors.descriptions?.message}</p>
+              </div>
+
+              <div className="input">
+                <div className="input_header">
+                  Pueblo mágico al que pertenece el lugar
+                </div>
+                <div className="town_select_cnt">
+                  <div>
+                    Estado
+                    <select 
+                      onChange={(event) => {
+                        updateTownsList(Number(event.target.value), 
+                          event.target.options[event.target.selectedIndex].text);
+                        }}
+                      >
+                        {statesList === null || statesList.length===0 ? 
+                        <option disabled selected value="">No hay estados</option>
+                        : 
+                        <>
+                          <option disabled selected value="">Selecciona el estado</option>
+                          {statesList.map((state, index) => {
+                          return (
+                            <option key={state.stateId} value={state.stateId}>{state.name}</option>
+                          );
+                          })}
+                        </>
+                        }
+                      </select>
+                      </div>
+                      <div> 
+                      Pueblo mágico
+                      <select {...register("idTown")}>
+                        {
+                          townsList === null || townsList.length===0 ? 
+                            <option disabled selected value="">No hay pueblos</option>
+                          : 
+                            townsList.map((towns) => {
+                              return (
+                                <option key={towns.idTown} value={towns.idTown}>{towns.name}</option>
+                              );
+                            })
+                        }
+                    </select>
+                  </div>
+                </div>
+                <p className="error">{errors.idTown?.message}</p>
+              </div>
+
+              <MultipleImagesDropzone setValue={setValue}/>
+              <p className="error">{errors.imagesList?.message}</p>
+              <input type="submit"/>
+            </div>
+          }
+
           <div className="map_container">
             <div className="map">
-              <MapComponent/>
+              <MapComponent setValue={setValue}/>
             </div>
             <div className="map_error_cnt">
-              
+              <p className="error">{errors.latitude?.message}</p>
             </div>
           </div>
+          <ToastContainer
+            position='bottom-right'
+            autoClose = {1000}
+            hideProgressBar = {true}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+          />
         </form>
       </div>
     </div>
diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css b/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
index 1bfa2f29..47ba039a 100644
--- a/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
+++ b/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
@@ -66,4 +66,54 @@
 .map_error_cnt{
   height: 5%;
   width: 100%;
+}
+
+.input{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.input_header{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.input .input_header select{
+  position: absolute;
+  right: 5px;
+}
+
+.error{
+  color: red;
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
+}
+
+.place_description{
+  height: 200px;
+  padding: 5px;
+  overflow-y: auto;
+  resize: none;
+}
+
+.town_select_cnt{
+  display: flex;
+  width: 100%;
+}
+
+.town_select_cnt div{
+  width: 50%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.town_select_cnt div select{
+  width: 50%;
 }
\ No newline at end of file
-- 
GitLab


From 2ab0cc877d063f016102425b83ecaa85ac8ea83d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 16:39:49 -0600
Subject: [PATCH 85/93] Se modifica el ancho de la ventana de registro de un
 lugar

---
 .../assets/css/styles.css                     | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css b/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
index 47ba039a..8c7cafd3 100644
--- a/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
+++ b/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
@@ -9,7 +9,7 @@
   top: 0;
   bottom: 0;
   margin: auto;
-  width: 70vw;
+  width: 75vw;
   height: 90vh;
   display: flex;
   flex-direction: column;
@@ -94,7 +94,7 @@
 }
 
 .place_description{
-  height: 200px;
+  height: 150px;
   padding: 5px;
   overflow-y: auto;
   resize: none;
@@ -116,4 +116,19 @@
 
 .town_select_cnt div select{
   width: 50%;
+}
+
+.input_body{
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+}
+
+.input_body div{
+  height: 100%;
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 }
\ No newline at end of file
-- 
GitLab


From d9ef73c7dd91facac5d098454959a4c5b1542d3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 16:40:13 -0600
Subject: [PATCH 86/93] Se agrega una key a cada contenedor de las previews

---
 .../multiple_images_dropzone/multiple_images_dropzone.tsx      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/multiple_images_dropzone/multiple_images_dropzone.tsx b/web/src/components/multiple_images_dropzone/multiple_images_dropzone.tsx
index cd5ce535..72daeca9 100644
--- a/web/src/components/multiple_images_dropzone/multiple_images_dropzone.tsx
+++ b/web/src/components/multiple_images_dropzone/multiple_images_dropzone.tsx
@@ -28,7 +28,8 @@ export const MultipleImagesDropzone = ({setValue}:props) => {
           imagesFiles &&
           imagesFiles.map((image, index) => {
             return (
-              <div className="preview" key={image.file.name}
+              <div className="preview"
+                key={index}
                 onClick={() => {
                   
                 }}
-- 
GitLab


From 96beb4f285d460f8f8132ba6ee1236fb7ced50af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 16:40:47 -0600
Subject: [PATCH 87/93] =?UTF-8?q?Se=20crea=20una=20constante=20para=20el?=
 =?UTF-8?q?=20n=C3=BAmero=20min=C3=ADmo=20de=20im=C3=A1genes=20de=20un=20l?=
 =?UTF-8?q?ugar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/constants/images_nuber.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 web/src/constants/images_nuber.ts

diff --git a/web/src/constants/images_nuber.ts b/web/src/constants/images_nuber.ts
new file mode 100644
index 00000000..d9b2beb7
--- /dev/null
+++ b/web/src/constants/images_nuber.ts
@@ -0,0 +1 @@
+export const MIN_NUMBER_PLACE_IMAGES = 1;
\ No newline at end of file
-- 
GitLab


From 2baaeeb0476707118c66ba77068a15982848efcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 16:41:17 -0600
Subject: [PATCH 88/93] Se eliminan logs innecesarios

---
 web/src/hooks/useDropzoneMultiplesImages.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/hooks/useDropzoneMultiplesImages.tsx b/web/src/hooks/useDropzoneMultiplesImages.tsx
index cc5cd5da..ac96f91a 100644
--- a/web/src/hooks/useDropzoneMultiplesImages.tsx
+++ b/web/src/hooks/useDropzoneMultiplesImages.tsx
@@ -51,7 +51,6 @@ export const useDropzoneMultiplesImages = (setValue: UseFormSetValue<PlaceFormVa
         });
         setImagesFiles(backupImages);
         setFiles(backupFiles);
-        console.log(backupFiles.length);
         setValue("imagesList", backupFiles, {shouldValidate:true});
       }
     }
@@ -65,7 +64,6 @@ export const useDropzoneMultiplesImages = (setValue: UseFormSetValue<PlaceFormVa
     setImagesFiles(backupImages);
     setFiles(backupFiles);
     setValue("imagesList", backupFiles, {shouldValidate:true});
-    console.log(backupFiles.length);
   }
 
   return {getInputProps, getRootProps, imagesFiles, removeImage};
-- 
GitLab


From 223f6201c255b75aeee2efb8e8b8e5e70d2f7781 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 16:41:56 -0600
Subject: [PATCH 89/93] =?UTF-8?q?Se=20agregan=20los=20campos=20para=20el?=
 =?UTF-8?q?=20horario=20y=20los=20d=C3=ADas=20disponible=20del=20lugar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin_panel_place_register.tsx            | 121 +++++++++++++-----
 1 file changed, 88 insertions(+), 33 deletions(-)

diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
index 1706e141..cbfda67f 100644
--- a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
+++ b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
@@ -8,6 +8,7 @@ import { languaguesList } from "../../../constants/languages";
 import { ToastContainer, toast } from "react-toastify";
 import { LoadingScreen } from "../../loading_screen/loading_screen";
 import { MultipleImagesDropzone } from "../../multiple_images_dropzone/multiple_images_dropzone";
+import { AvailableDays, availableDaysList } from "../../../infraestructure/entities/place";
 
 interface props {
   setIsWindowActive: Dispatch<SetStateAction<boolean>>;
@@ -20,11 +21,7 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
     errors,
     onSubmit,
     setValue,
-    languageNameIndexSelected,
-    setLanguageNameIndexSelected,
     languageDescriptionIndexSelected,
-    setNames,
-    names,
     descriptions,
     setDescriptions,
     setLanguageDescriptionIndexSelected,
@@ -32,6 +29,10 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
     statesList,
     updateTownsList,
     townsList,
+    updateTimeForm,
+    availableDays,
+    setAvailableDays,
+    resetField,
   } = usePlaceRegister();
 
   return (
@@ -52,38 +53,19 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
               <div className="input">
                 <div className="input_header">
                   Nombre del lugar
-                  <select onChange={(e) => setLanguageNameIndexSelected(Number(e.target.value))}>
-                      {languaguesList.map((language, index) => {
-                        return (
-                          <option key={index} value={index}>{language}</option>
-                        );
-                      })}
-                  </select>
                 </div>
-                {
-                  languaguesList.map((language, index) => {
-                      if(index===languageNameIndexSelected){
-                        return (
-                          <input type="text" 
-                            value={names[index]}
-                            onChange={(e) => {
-                              const updatedNamesList = [...names];
-                              updatedNamesList[index] = e.target.value;
-                              setNames(updatedNamesList);
-                              setValue("names", updatedNamesList, {shouldValidate: true});
-                            }}
-                          />
-                      );
-                      }
-                  })
-                }
-                <p className="error">{errors.names?.message}</p>
+                <input 
+                  type="text"
+                  {...register('name')}
+                  autoComplete="off"
+                />
+                <p className="error">{errors.name?.message}</p>
               </div>
 
               <div className="input">
                 <div className="input_header">
                   Descripción del lugar
-                  <select onChange={(e) => setLanguageDescriptionIndexSelected(Number(e.target.value))}>
+                  <select  name="language_description_select" onChange={(e) => setLanguageDescriptionIndexSelected(Number(e.target.value))}>
                       {languaguesList.map((language, index) => {
                         return (
                           <option key={index} value={index}>{language}</option>
@@ -98,6 +80,7 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
                           <textarea id={index.toString()} 
                             className="place_description"
                             value={descriptions[index]}
+                            key={language}
                             onChange={(e) => {
                               const updatedDescriptionsList = [...descriptions];
                               updatedDescriptionsList[index] = e.target.value;
@@ -112,6 +95,77 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
                 <p className="error">{errors.descriptions?.message}</p>
               </div>
 
+              <div className="input">
+                <div className="input_header">
+                  Horario
+                </div>
+                <div className="input_body">
+                  <div>
+                    Hora de apertura
+                    <input 
+                    type="time"
+                    autoComplete="off"
+                    onChange={(event) => {
+                      updateTimeForm(event.target.value, true);
+                    }}
+                  />
+                  </div>
+
+                  <div>
+                    Hora de cierre
+                    <input 
+                    type="time"
+                    autoComplete="off"
+                    onChange={(event) => {
+                      updateTimeForm(event.target.value, false);
+                    }}
+                  />
+                  </div>
+                </div>
+                <p className="error">{errors.openAt?.message || errors.closeAt?.message}</p>
+                Dias disponibles
+                <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
+                  <div>
+                    <select name="days_select" 
+                      onChange={(e) => {
+                        const selectedOption = availableDaysList[Number(e.target.value)];
+                        setAvailableDays(selectedOption.option);
+                        resetField('startDate');
+                        resetField('endDate');
+                        setValue('available', selectedOption.option,{shouldValidate:true});
+                      }}
+                    >
+                        {availableDaysList.map((option, index) => {
+                          return (
+                            <option key={index} value={index}>{option.name}</option>
+                          );
+                        })}
+                    </select>
+                  </div>
+
+                  <div>
+                    {
+                      availableDays === AvailableDays.CUSTOM 
+                      &&
+                      <div style={{width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                          Inicio
+                          <input
+                            type="date"
+                            {...register('startDate')}
+                          />
+                          Cierre
+                          <input
+                            type="date"
+                            {...register('endDate')}
+                          />
+                      </div>
+                      
+                    }
+                  </div>
+                </div>
+                <p className="error">{errors.available?.message || errors.startDate?.message || errors.endDate?.message}</p>
+              </div>
+
               <div className="input">
                 <div className="input_header">
                   Pueblo mágico al que pertenece el lugar
@@ -119,14 +173,15 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
                 <div className="town_select_cnt">
                   <div>
                     Estado
-                    <select 
+                    <select
+                      name="state_select" 
                       onChange={(event) => {
                         updateTownsList(Number(event.target.value), 
                           event.target.options[event.target.selectedIndex].text);
                         }}
                       >
                         {statesList === null || statesList.length===0 ? 
-                        <option disabled selected value="">No hay estados</option>
+                        <option disabled defaultValue="" value="">No hay estados</option>
                         : 
                         <>
                           <option disabled selected value="">Selecciona el estado</option>
@@ -144,7 +199,7 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
                       <select {...register("idTown")}>
                         {
                           townsList === null || townsList.length===0 ? 
-                            <option disabled selected value="">No hay pueblos</option>
+                            <option disabled defaultValue="" value="">No hay pueblos</option>
                           : 
                             townsList.map((towns) => {
                               return (
-- 
GitLab


From a893107c8e9a5b2f188ed75d172b49ed61015f71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 16:43:24 -0600
Subject: [PATCH 90/93] =?UTF-8?q?Se=20reduce=20la=20altura=20de=20la=20caj?=
 =?UTF-8?q?a=20de=20texto=20de=20la=20descripci=C3=B3n=20del=20lugar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin_panel_place_register/assets/css/styles.css            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css b/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
index 8c7cafd3..c0057a5e 100644
--- a/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
+++ b/web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css
@@ -94,7 +94,7 @@
 }
 
 .place_description{
-  height: 150px;
+  height: 130px;
   padding: 5px;
   overflow-y: auto;
   resize: none;
-- 
GitLab


From 0c340cf342748cc1ba90b09cf198e05d34d05573 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 16:44:51 -0600
Subject: [PATCH 91/93] =?UTF-8?q?Se=20agregan=20los=20campos=20de=20hora?=
 =?UTF-8?q?=20de=20apertura=20y=20cierre,=20d=C3=ADas=20disponibles=20y=20?=
 =?UTF-8?q?la=20fecha=20disponible,=20adem=C3=A1s=20se=20agregan=20algunos?=
 =?UTF-8?q?=20enumerados?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/infraestructure/entities/place.ts | 38 ++++++++++++++++++-----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/web/src/infraestructure/entities/place.ts b/web/src/infraestructure/entities/place.ts
index ac2fff45..6c983762 100644
--- a/web/src/infraestructure/entities/place.ts
+++ b/web/src/infraestructure/entities/place.ts
@@ -1,8 +1,32 @@
 export interface PlaceFormValues{
-    idTown: number;
-    names: string[];
-    descriptions: string[];
-    latitude: number;
-    longitude: number;
-    imagesList: File[];
-}
\ No newline at end of file
+  idTown: number;
+  name: string;
+  descriptions: string[];
+  latitude: number;
+  longitude: number;
+  openAt: number;
+  closeAt: number;
+  available: AvailableDays;
+  imagesList: File[];
+  startDate?: Date;
+  endDate?: Date;
+}
+
+export enum AvailableDays {
+  WEEKEND = 'weekend',
+  ALL_DAYS = 'all_days',
+  WEEKDAYS = 'weekdays',
+  CUSTOM = 'custom'
+}
+
+export interface availableDaysOption{
+  option: AvailableDays;
+  name: string;
+}
+
+export const availableDaysList= [
+  { option: AvailableDays.WEEKEND, name: 'Fines de semana' },
+  { option: AvailableDays.ALL_DAYS, name: 'Todos los dias' },
+  { option: AvailableDays.WEEKDAYS, name: 'Lunes a Viernes' },
+  { option: AvailableDays.CUSTOM, name: 'Personalizado' }
+];
\ No newline at end of file
-- 
GitLab


From 0607c5c1e58609494222a38f226b9f30d3395807 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 16:45:52 -0600
Subject: [PATCH 92/93] =?UTF-8?q?Se=20agregan=20las=20validaciones=20neces?=
 =?UTF-8?q?arias=20para=20los=20campos=20agregados=20recientemente,=20adem?=
 =?UTF-8?q?=C3=A1s=20se=20agrega=20un=20m=C3=A9todo=20para=20actualizar=20?=
 =?UTF-8?q?el=20tiempo=20de=20apertura=20y=20cierre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/hooks/usePlaceRegister.tsx | 113 ++++++++++++++++++++++++-----
 1 file changed, 95 insertions(+), 18 deletions(-)

diff --git a/web/src/hooks/usePlaceRegister.tsx b/web/src/hooks/usePlaceRegister.tsx
index 6ddde056..ff3f4df7 100644
--- a/web/src/hooks/usePlaceRegister.tsx
+++ b/web/src/hooks/usePlaceRegister.tsx
@@ -1,11 +1,12 @@
 import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form"
-import { PlaceFormValues } from "../infraestructure/entities/place";
+import { PlaceFormValues, AvailableDays } from "../infraestructure/entities/place";
 import { toast } from "react-toastify";
 import { useEffect, useState } from "react";
 import axios, { AxiosError } from "axios";
 import { languaguesList } from "../constants/languages";
 import { useGetStatesList } from "./useGetStatesList";
 import { useTown } from "./useTown";
+import { MIN_NUMBER_PLACE_IMAGES } from "../constants/images_nuber";
 
 const resolver: Resolver<PlaceFormValues> = async (data) => {
   const errors: FieldErrors<PlaceFormValues> = {};
@@ -17,14 +18,42 @@ const resolver: Resolver<PlaceFormValues> = async (data) => {
     }
   }
 
-  for(var index = languaguesList.length-1; index>=0; index--){
-    if(!data.names || !data.names[index]){
-      errors.names = {
-        type: "required",
-        message: "El nombre del lugar en "+languaguesList[index]+" es requerido"
-      };
-    }
+  if(!data.openAt){
+    errors.openAt = {
+      type: "required",
+      message: "La hora de apertura es requerida"
+    };
+  }
+
+  if(!data.closeAt){
+    errors.closeAt = {
+      type: "required",
+      message: "La hora de cierre es requerida"
+    };
+  }
+
+  if(data.openAt>data.closeAt){
+    errors.closeAt = {
+      type: "required",
+      message: "La hora de apertura debe ser antes que la hora de cierre"
+    };
+  }
+
+  if(data.openAt===data.closeAt){
+    errors.closeAt = {
+      type: "required",
+      message: "Debe de haber al menos una hora de diferencia"
+    };
+  }
+
+  if(!data.name){
+    errors.name = {
+      type: "required",
+      message: "El nombre del lugar es requerido"
+    };
+  }
 
+  for(var index = languaguesList.length-1; index>=0; index--){
     if(!data.descriptions || !data.descriptions[index]){
       errors.descriptions = {
         type: "required",
@@ -33,6 +62,40 @@ const resolver: Resolver<PlaceFormValues> = async (data) => {
     }
   }
 
+  if(!data.available){
+    errors.available = {
+      type: "required",
+      message: "Se requieren los días que está disponible el lugar"
+    };
+  }else{
+    if(data.available === AvailableDays.CUSTOM){
+      if(!data.startDate){
+        errors.startDate = {
+          type: "required",
+          message: "Se requiere la fecha de inicio"
+        };
+      }
+      
+      if(!data.endDate){
+        errors.endDate = {
+          type: "required",
+          message: "Se requiere la fecha de cierre"
+        };
+      }
+
+      if(data.startDate && data.endDate){
+        const startDate = new Date(data.startDate);
+        const endDate = new Date(data.endDate);
+        if(startDate.getTime() > endDate.getTime()){
+          errors.endDate = {
+            type: "required",
+            message: "La fecha de inicio no puede ser después de la fecha de cierre"
+          };
+        }
+      }
+    }
+  }
+
   if(!data.latitude || !data.longitude){
     errors.latitude = {
       type: "required",
@@ -40,10 +103,10 @@ const resolver: Resolver<PlaceFormValues> = async (data) => {
     }
   }
 
-  if(!data.imagesList || data.imagesList.length<3){
+  if(!data.imagesList || data.imagesList.length<MIN_NUMBER_PLACE_IMAGES){
     errors.imagesList = {
       type: "required",
-      message: "Debe de haber al menos 3 imagénes representativas del lugar"
+      message: "Debe de haber al menos "+MIN_NUMBER_PLACE_IMAGES+" imagénes representativas del lugar"
     }
   }
 
@@ -60,16 +123,16 @@ export const usePlaceRegister = () => {
     setValue,
     formState: {errors},
     clearErrors,
+    resetField,
   } = useForm<PlaceFormValues>({resolver});
   const [errorMessage, setErrorMessage] = useState("");
-  const [languageNameIndexSelected, setLanguageNameIndexSelected] = useState(0);
   const [languageDescriptionIndexSelected, setLanguageDescriptionIndexSelected] = useState(0);
-  const [names, setNames] = useState<string[]>(new Array(languaguesList.length).fill(""));
   const [descriptions, setDescriptions] = useState<string[]>(new Array(languaguesList.length).fill(""));
+  const [availableDays, setAvailableDays] = useState<AvailableDays>(AvailableDays.WEEKEND);
   const [isLoading, setIsLoading] = useState(false);
   const {townsList, getTownsByState} = useTown();
   const {getStates, statesList} = useGetStatesList();
-
+  
   useEffect(() => {
     setIsLoading(true);
     const getStatesList = async () => {
@@ -101,6 +164,7 @@ export const usePlaceRegister = () => {
       }
     }
     getStatesList();
+    setValue('available',availableDays,{shouldValidate: true});
     setIsLoading(false);
   },[]);
 
@@ -136,24 +200,37 @@ export const usePlaceRegister = () => {
     )
   }
 
+  const updateTimeForm = (time: string, isOpeningHour: boolean) => {
+    const timeSplitted = time.split(":");
+    let hours = Number(timeSplitted[0]);
+    const minutes = Number(timeSplitted[1]);
+    hours += (minutes/60);
+    hours = Math.round(hours);
+    if(isOpeningHour){
+      setValue("openAt", hours, {shouldValidate: true});
+    }else{
+      setValue("closeAt", hours, {shouldValidate: true});
+    }
+  }
+
   return {
     register, 
     handleSubmit, 
     errors, 
     onSubmit, 
     setValue,
-    languageNameIndexSelected, 
-    setLanguageNameIndexSelected,
     languageDescriptionIndexSelected,
     setLanguageDescriptionIndexSelected,
-    names,
-    setNames,
     descriptions,
     setDescriptions,
     clearErrors,
     isLoading,
     statesList,
     townsList,
-    updateTownsList
+    updateTownsList,
+    updateTimeForm,
+    availableDays,
+    setAvailableDays,
+    resetField
   };
 }
-- 
GitLab


From f8b3b1c5eced396a82a8113f02ca75bd3102df3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 13 Jun 2024 17:15:06 -0600
Subject: [PATCH 93/93] =?UTF-8?q?Se=20agrego=20la=20l=C3=B3gica=20para=20r?=
 =?UTF-8?q?egistrar=20un=20lugar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data/datasources/prod/place_datasource.ts | 31 +++++++++++++++++++
 .../repositories/prod/place_repository.ts     | 12 +++++++
 web/src/hooks/usePlaceRegister.tsx            |  7 ++++-
 .../datasources/place_datasource.ts           |  5 +++
 .../repositories/place_repository.ts          |  5 +++
 5 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 web/src/data/datasources/prod/place_datasource.ts
 create mode 100644 web/src/data/repositories/prod/place_repository.ts
 create mode 100644 web/src/infraestructure/datasources/place_datasource.ts
 create mode 100644 web/src/infraestructure/repositories/place_repository.ts

diff --git a/web/src/data/datasources/prod/place_datasource.ts b/web/src/data/datasources/prod/place_datasource.ts
new file mode 100644
index 00000000..ff214c3b
--- /dev/null
+++ b/web/src/data/datasources/prod/place_datasource.ts
@@ -0,0 +1,31 @@
+import axios from "axios";
+import { APIUrl } from "../../../constants/api_url";
+import { PlaceDatasourceInf } from "../../../infraestructure/datasources/place_datasource";
+import { AvailableDays, PlaceFormValues } from "../../../infraestructure/entities/place";
+
+export class PlaceDatasourceProd implements PlaceDatasourceInf{
+  async registerPlace(form: PlaceFormValues): Promise<void> {
+    const formToSend = new FormData();
+    formToSend.append('available', form.available);
+    formToSend.append('idTown', String(form.idTown));
+    formToSend.append('name', form.name);
+    formToSend.append('descriptionES', form.descriptions[0]);
+    formToSend.append('descriptionEN', form.descriptions[1]);
+    formToSend.append('image', form.imagesList[0]);
+    formToSend.append('latitude', String(form.latitude));
+    formToSend.append('longitude', String(form.longitude));
+    formToSend.append('openAt', String(form.openAt));
+    formToSend.append('closeAt', String(form.closeAt));
+
+    if(form.available === AvailableDays.CUSTOM){
+      formToSend.append('startDate', String(form.startDate));
+      formToSend.append('endDate', String(form.endDate));
+    }
+
+    const headers = {
+      'Content-Type': 'multipart/form-data'
+    };
+
+    await axios.post(APIUrl + '/place', formToSend,{headers});
+  } 
+}
\ No newline at end of file
diff --git a/web/src/data/repositories/prod/place_repository.ts b/web/src/data/repositories/prod/place_repository.ts
new file mode 100644
index 00000000..25da3777
--- /dev/null
+++ b/web/src/data/repositories/prod/place_repository.ts
@@ -0,0 +1,12 @@
+import { PlaceDatasourceInf } from "../../../infraestructure/datasources/place_datasource";
+import { PlaceFormValues } from "../../../infraestructure/entities/place";
+import { PlaceRepositoryInf } from "../../../infraestructure/repositories/place_repository";
+
+export class PlaceRepositoryProd implements PlaceRepositoryInf{
+  constructor(
+    private datasouce: PlaceDatasourceInf
+  ){}
+  async registerPlace(form: PlaceFormValues): Promise<void> {
+    return this.datasouce.registerPlace(form);
+  }
+}
\ No newline at end of file
diff --git a/web/src/hooks/usePlaceRegister.tsx b/web/src/hooks/usePlaceRegister.tsx
index ff3f4df7..6fb19965 100644
--- a/web/src/hooks/usePlaceRegister.tsx
+++ b/web/src/hooks/usePlaceRegister.tsx
@@ -7,6 +7,11 @@ import { languaguesList } from "../constants/languages";
 import { useGetStatesList } from "./useGetStatesList";
 import { useTown } from "./useTown";
 import { MIN_NUMBER_PLACE_IMAGES } from "../constants/images_nuber";
+import { PlaceDatasourceProd } from "../data/datasources/prod/place_datasource";
+import { PlaceRepositoryProd } from "../data/repositories/prod/place_repository";
+
+const placeDatasouce = new PlaceDatasourceProd();
+const placeRepository = new PlaceRepositoryProd(placeDatasouce);
 
 const resolver: Resolver<PlaceFormValues> = async (data) => {
   const errors: FieldErrors<PlaceFormValues> = {};
@@ -175,7 +180,7 @@ export const usePlaceRegister = () => {
   const onSubmit : SubmitHandler<PlaceFormValues> = (data: PlaceFormValues) => {
     const fetch = async () => {
       try{
-        console.log(data);
+        await placeRepository.registerPlace(data);
       }catch(error: any){
         if(axios.isAxiosError(error)){
           error as AxiosError;
diff --git a/web/src/infraestructure/datasources/place_datasource.ts b/web/src/infraestructure/datasources/place_datasource.ts
new file mode 100644
index 00000000..a49a2128
--- /dev/null
+++ b/web/src/infraestructure/datasources/place_datasource.ts
@@ -0,0 +1,5 @@
+import { PlaceFormValues } from "../entities/place";
+
+export interface PlaceDatasourceInf{
+    registerPlace(form: PlaceFormValues): Promise<void>;
+}
\ No newline at end of file
diff --git a/web/src/infraestructure/repositories/place_repository.ts b/web/src/infraestructure/repositories/place_repository.ts
new file mode 100644
index 00000000..42267ef1
--- /dev/null
+++ b/web/src/infraestructure/repositories/place_repository.ts
@@ -0,0 +1,5 @@
+import { PlaceFormValues } from "../entities/place";
+
+export interface PlaceRepositoryInf{
+    registerPlace(form: PlaceFormValues): Promise<void>;
+}
\ No newline at end of file
-- 
GitLab