Merge pull request #905 from PEM-Humboldt/feature/compensationBug

Fix HeaderNames bug
PEM-Humboldt · Feb 1, 2024 · 8bcdde8 · 8bcdde8
2 parents 3405251 + e37c079
commit 8bcdde8
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 31 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,7 +17,7 @@ import "indicators/dist/bundle.css";
 
 import isFlagEnabled from "utils/isFlagEnabled";
 
-import { LogosConfig } from "types/layoutTypes";
+import { LogosConfig, Names } from "types/layoutTypes";
 
 import { UserTypes } from "types/loginUimProps";
 
@@ -30,7 +30,10 @@ interface LoadComponentTypes {
 
 const App: React.FunctionComponent = () => {
   const [user, setUser] = useState<UserTypes | null>(null);
-  const [headerNames, setHeaderNames] = useState<object>({});
+  const [headerNames, setHeaderNames] = useState<Names>({
+    parent: "",
+    child: "",
+  });
   const [showCBMDashboard, setShowCBMDashboard] = useState<boolean>(false);
 
   const location = useLocation();
@@ -41,12 +44,6 @@ const App: React.FunctionComponent = () => {
 
   const buildQuery = (queryString: string) => new URLSearchParams(queryString);
 
-  const setHeaderNamesFunc = (parent: string, child: string) => {
-    setHeaderNames({
-      headerNames: { parent, child },
-    });
-  };
-
   const loadHome = () =>
     loadComponent({
       logoSet: "default",
@@ -63,7 +60,7 @@ const App: React.FunctionComponent = () => {
         <Search
           selectedAreaTypeId={query.get("area_type")}
           selectedAreaId={query.get("area_id")}
-          setHeaderNames={setHeaderNamesFunc}
+          setHeaderNames={setHeaderNames}
         />
       ),
       className: "fullgrid",
@@ -83,7 +80,7 @@ const App: React.FunctionComponent = () => {
       return loadComponent({
         logoSet: null,
         name: "Compensación ambiental",
-        component: <Compensation setHeaderNames={setHeaderNamesFunc} />,
+        component: <Compensation setHeaderNames={setHeaderNames} />,
         className: "fullgrid",
       });
     }
@@ -139,7 +136,7 @@ const App: React.FunctionComponent = () => {
           <Route exact path="/" render={loadHome} />
           <Route path="/Consultas" render={loadSearch} />
           <Route path="/Indicadores" render={loadIndicator} />
-          <Route path="/GEB/Compensaciones" component={loadCompensator} />
+          <Route path="/GEB/Compensaciones" render={loadCompensator} />
           <Route path="/Portafolios" render={loadPortfolio} />
           <Route path="/Alertas" render={loadHome} />
           <Route

diff --git a/src/app/Layout.tsx b/src/app/Layout.tsx
@@ -1,12 +1,7 @@
 import Footer from "app/layout/Footer";
 import Header from "app/layout/Header";
 
-import { LogosConfig } from "types/layoutTypes";
-
-interface Names {
-  parent?: string;
-  child?: string;
-}
+import { LogosConfig, Names } from "types/layoutTypes";
 
 interface LayoutProps {
   children: React.ReactNode;

diff --git a/src/app/layout/header/Menu.tsx b/src/app/layout/header/Menu.tsx
@@ -11,13 +11,19 @@ const Menu: React.FunctionComponent = () => {
   const [showCBMDashboard, setShowCBMDashboard] = useState<boolean>(false);
 
   useEffect(() => {
-    isFlagEnabled("alertsModule").then((value: boolean) =>
-      setShowAlerts(value)
-    );
+    let isMounted = true;
 
-    isFlagEnabled("CBMModule").then((value: boolean) =>
-      setShowCBMDashboard(value)
-    );
+    isFlagEnabled("alertsModule").then((value: boolean) => {
+      if (isMounted) setShowAlerts(value);
+    });
+
+    isFlagEnabled("CBMModule").then((value: boolean) => {
+      if (isMounted) setShowCBMDashboard(value);
+    });
+
+    return () => {
+      isMounted = false;
+    };
   }, []);
 
   const changeMenuState = () => {

diff --git a/src/pages/Compensation.jsx b/src/pages/Compensation.jsx
@@ -59,7 +59,7 @@ class Compensation extends Component {
 
   componentWillUnmount() {
     const { setHeaderNames } = this.props;
-    setHeaderNames(null, null);
+    setHeaderNames({ parent: "", child: "" });
   }
 
   loadProjectsList = () => {
@@ -161,7 +161,7 @@ class Compensation extends Component {
           currentCompany,
           currentProject: { id_region: idRegion, label, prj_status: prjStatus },
         } = this.state;
-        setHeaderNames(`${currentCompany} ${idRegion}`, `${prjStatus} ${label}`);
+        setHeaderNames({ parent: `${currentCompany} ${idRegion}`, child: `${prjStatus} ${label}` });
       });
     });
   }
@@ -305,7 +305,7 @@ class Compensation extends Component {
       biomesImpacted: [],
     }, () => {
       const { setHeaderNames } = this.props;
-      setHeaderNames(null, null);
+      setHeaderNames({ parent: "", child: "" });
     });
     this.loadProjectsList();
   }

diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx
@@ -71,7 +71,7 @@ class Search extends Component {
 
   componentWillUnmount() {
     const { setHeaderNames } = this.props;
-    setHeaderNames(null, null);
+    setHeaderNames({ parent: "", child: "" });
   }
 
   /**
@@ -142,7 +142,7 @@ class Search extends Component {
                 { selectedArea: inputId },
                 () => {
                   const { selectedAreaType, selectedArea } = this.state;
-                  setHeaderNames(selectedAreaType.name, selectedArea.name);
+                  setHeaderNames({ parent: selectedAreaType.name, child: selectedArea.name });
                 },
               );
             } else {
@@ -1375,7 +1375,7 @@ class Search extends Component {
           const { selectedAreaType, selectedArea } = this.state;
           if (selectedAreaType && selectedArea) {
             history.push(`?area_type=${selectedAreaType.id}&area_id=${selectedArea.id || selectedArea.name}`);
-            setHeaderNames(selectedAreaType.name, selectedArea.name);
+            setHeaderNames({ parent: selectedAreaType.name, child: selectedArea.name });
             ReactGA.send({ hitType: "pageview", page: location.pathname + location.search, title: "Consultas" });
           }
         },
@@ -1413,7 +1413,7 @@ class Search extends Component {
       layerError: false,
       loadingLayer: true,
     }));
-    setHeaderNames("Polígono", "Área Consultada");
+    setHeaderNames({ parent: "Polígono", child: "Área Consultada"});
     this.updateBounds(polygonBounds);
   }
 
@@ -1462,7 +1462,7 @@ class Search extends Component {
     }, () => {
       const { history, setHeaderNames } = this.props;
       history.replace(history.location.pathname);
-      setHeaderNames(null, null);
+      setHeaderNames({ parent: "", child: "" });
     });
   }
 

diff --git a/src/types/layoutTypes.ts b/src/types/layoutTypes.ts
@@ -11,3 +11,8 @@ export interface LogosConfig {
   default: Array<KEYS>;
   monitoreo: Array<KEYS>;
 }
+
+export interface Names {
+  parent: string;
+  child: string;
+}