From 38f983db5c00d482f7c892c89b7e5e20333077f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20Luna=20Hern=C3=A1ndez?= <42101656@uaz.edu.mx>
Date: Thu, 14 Nov 2024 10:31:24 -0600
Subject: [PATCH] Correcion de error de carga infinita

---
 web/src/domain/useCase/useAdminHomePage.ts    |  2 +-
 web/src/domain/useCase/useAdminTownInfo.ts    | 23 ++++++-------
 .../admin/admin_town_info/admin_town_info.tsx | 34 ++++---------------
 .../admin/panel/admin_home_page.tsx           |  1 +
 4 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/web/src/domain/useCase/useAdminHomePage.ts b/web/src/domain/useCase/useAdminHomePage.ts
index e50539fc..c0f8ccd0 100644
--- a/web/src/domain/useCase/useAdminHomePage.ts
+++ b/web/src/domain/useCase/useAdminHomePage.ts
@@ -47,7 +47,7 @@ export const useAdminHomePage = () => {
       setIsLoading(false);
     };
     checkAdminRole();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user]);
 
   // Update town information
diff --git a/web/src/domain/useCase/useAdminTownInfo.ts b/web/src/domain/useCase/useAdminTownInfo.ts
index 5b1fed51..1547ccb1 100644
--- a/web/src/domain/useCase/useAdminTownInfo.ts
+++ b/web/src/domain/useCase/useAdminTownInfo.ts
@@ -3,31 +3,28 @@ import { useEffect, useState } from "react";
 import { useGetStatesList } from "./useGetStatesList";
 
 // Custom hook for managing town information in admin panel
-export const useAdminTownInfo = (updateTown: ()=>void) => {
+export const useAdminTownInfo = (updateTown: () => void) => {
   const [isEnglish, setIsEnglish] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
   const [renderCount, setRenderCount] = useState(0);
-  const {getStates, statesList} = useGetStatesList();
+  const { getStates, statesList } = useGetStatesList();
 
   // Function to force re-render the list
-  const forceRenderList = () =>{
+  const forceRenderList = () => {
     updateTown();
-    setRenderCount(prevCount => prevCount + 1);
-  }
+    setRenderCount((prevCount) => prevCount + 1);
+  };
 
   // Fetch states on component mount
-  useEffect(()=> {
+  useEffect(() => {
     getStates();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  },[]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return {
     isEnglish,
-    isLoading,
     setIsEnglish,
-    setIsLoading,
     forceRenderList,
     renderCount,
     statesList,
-  }
-}
\ No newline at end of file
+  };
+};
diff --git a/web/src/presentation/admin/admin_town_info/admin_town_info.tsx b/web/src/presentation/admin/admin_town_info/admin_town_info.tsx
index 5ca208e3..c3609171 100644
--- a/web/src/presentation/admin/admin_town_info/admin_town_info.tsx
+++ b/web/src/presentation/admin/admin_town_info/admin_town_info.tsx
@@ -13,6 +13,7 @@ interface props {
   setIsWindowActive: Dispatch<SetStateAction<boolean>>;
   town: Town | undefined;
   updateTown: () => Promise<void>;
+  isLoading: boolean;
 }
 
 // Main component function
@@ -21,17 +22,11 @@ export const AdminTownInfo = ({
   isWindowActive,
   setIsWindowActive,
   town,
+  isLoading,
 }: props) => {
   // Destructure values from the custom hook
-  const {
-    isEnglish,
-    isLoading,
-    setIsEnglish,
-    setIsLoading,
-    renderCount,
-    forceRenderList,
-    statesList,
-  } = useAdminTownInfo(updateTown);
+  const { isEnglish, setIsEnglish, renderCount, forceRenderList, statesList } =
+    useAdminTownInfo(updateTown);
 
   // State to manage the visibility of the town register window
   const [isTownRegisterWindowActive, setIsTownRegisterWindowActive] =
@@ -59,6 +54,8 @@ export const AdminTownInfo = ({
     );
   }
 
+  if (isLoading) return <LoadingScreen />;
+
   // Main render of the component
   return (
     <div className="town_info_root">
@@ -73,29 +70,12 @@ export const AdminTownInfo = ({
         />
       )}
       <div className="town_info_cnt" key={renderCount}>
-        {isLoading && (
-          <div
-            style={{
-              width: "100%",
-              height: "100%",
-              background: "#eaeaea",
-              position: "fixed",
-            }}
-          >
-            <LoadingScreen />
-          </div>
-        )}
-
         <div className="info_header">
           <p>{town?.name}</p>
         </div>
         <div className="info_body">
           <div className="town_image_cnt">
-            <img
-              src={town?.imageURL as string}
-              onLoad={() => setIsLoading(false)}
-              alt=""
-            />
+            <img src={town?.imageURL as string} alt="" />
           </div>
           <div className="info_fields_cnt">
             <div className="buttons_cnt">
diff --git a/web/src/presentation/admin/panel/admin_home_page.tsx b/web/src/presentation/admin/panel/admin_home_page.tsx
index 13e47c89..4fdff781 100644
--- a/web/src/presentation/admin/panel/admin_home_page.tsx
+++ b/web/src/presentation/admin/panel/admin_home_page.tsx
@@ -114,6 +114,7 @@ export const AdminHomePage = () => {
                     setIsWindowActive={setIsWindowActive}
                     isWindowActive={isWindowActive}
                     town={town}
+                    isLoading={isLoading}
                   />
                 );
               case AdminSelectedPanel.PLACES:
-- 
GitLab