InfoMenu update fix.

eclipse-tractusx · Oct 21, 2023 · 68b237f · 68b237f
1 parent 02749d8
commit 68b237f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 24 deletions.
diff --git a/demand-capacity-mgmt-frontend/src/components/common/TopMenu.tsx b/demand-capacity-mgmt-frontend/src/components/common/TopMenu.tsx
@@ -26,6 +26,10 @@ import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { FiLogOut, FiSettings } from 'react-icons/fi';
 import { useNavigate } from "react-router-dom";
+import CapacityGroupsProvider from '../../contexts/CapacityGroupsContextProvider';
+import DemandCategoryContextProvider from '../../contexts/DemandCategoryProvider';
+import EventsContextProvider from '../../contexts/EventsContextProvider';
+import { InfoMenuProvider } from '../../contexts/InfoMenuContextProvider';
 import { useUser } from "../../contexts/UserContext";
 import { logout } from "../../util/Auth";
 import InfoMenu from "../menu/InfoMenu";
@@ -82,7 +86,15 @@ function TopMenuLinks() {
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav" >
           <div className={`info-menu ${collapsed ? 'move-out' : 'move-in'}`}>
-            <InfoMenu />
+            <DemandCategoryContextProvider>
+              <CapacityGroupsProvider>
+                <EventsContextProvider>
+                  <InfoMenuProvider>
+                    <InfoMenu />
+                  </InfoMenuProvider>
+                </EventsContextProvider>
+              </CapacityGroupsProvider>
+            </DemandCategoryContextProvider>
           </div>
 
         </Navbar.Collapse>

diff --git a/demand-capacity-mgmt-frontend/src/components/dcm/Layout.tsx b/demand-capacity-mgmt-frontend/src/components/dcm/Layout.tsx
@@ -1,8 +1,4 @@
 import React, { ReactNode } from 'react';
-import CapacityGroupsProvider from '../../contexts/CapacityGroupsContextProvider';
-import DemandCategoryContextProvider from '../../contexts/DemandCategoryProvider';
-import EventsContextProvider from '../../contexts/EventsContextProvider';
-import { InfoMenuProvider } from '../../contexts/InfoMenuContextProvider';
 import QuickAcessItems from '../common/QuickAcessItems';
 import TopMenu from '../common/TopMenu';
 
@@ -13,15 +9,8 @@ interface Props {
 const Layout: React.FC<Props> = ({ children }) => {
     return (
         <div className='root-container'>
-            <DemandCategoryContextProvider>
-                <CapacityGroupsProvider>
-                    <EventsContextProvider>
-                        <InfoMenuProvider>
-                            <TopMenu />
-                        </InfoMenuProvider>
-                    </EventsContextProvider>
-                </CapacityGroupsProvider>
-            </DemandCategoryContextProvider>
+
+            <TopMenu />
 
             <div className='overflow-control-container'>
                 {children}

diff --git a/demand-capacity-mgmt-frontend/src/components/menu/InfoMenu.tsx b/demand-capacity-mgmt-frontend/src/components/menu/InfoMenu.tsx
@@ -24,15 +24,29 @@ import Nav from "react-bootstrap/Nav";
 import { FaArrowDown, FaArrowUp, FaHome, FaStar } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 import { useInfoMenu } from "../../contexts/InfoMenuContextProvider";
+//Events, Capacitity groups, material demands
+import { useContext, useEffect } from "react";
+import { CapacityGroupContext } from '../../contexts/CapacityGroupsContextProvider';
+import { DemandContext } from '../../contexts/DemandContextProvider';
+import { EventsContext } from '../../contexts/EventsContextProvider';
 
 
 function InfoMenu() {
-    const { data } = useInfoMenu();
+    const { data, fetchData } = useInfoMenu();
+
+    const { capacitygroups } = useContext(CapacityGroupContext) || {};
+    const { demandprops } = useContext(DemandContext) || {};
+    const { events } = useContext(EventsContext) || {};
+
     const navigate = useNavigate();
     const handleNavigation = (path: string) => {
         navigate(path);
     }
 
+    useEffect(() => {
+        fetchData();
+    }, [fetchData, capacitygroups, demandprops, events]);
+
     const formatData = (data: number | null | undefined): number | string => {
         return data !== null && data !== undefined ? data : '0';
     };

diff --git a/demand-capacity-mgmt-frontend/src/contexts/InfoMenuContextProvider.tsx b/demand-capacity-mgmt-frontend/src/contexts/InfoMenuContextProvider.tsx
@@ -25,10 +25,6 @@ import React, { FunctionComponent, createContext, useCallback, useContext, useEf
 import { InfoMenuData } from '../interfaces/InfoMenu_interfaces';
 import createAPIInstance from "../util/Api";
 import { useUser } from "./UserContext";
-//Events, Capacitity groups, material demands
-import { CapacityGroupContext } from '../contexts/CapacityGroupsContextProvider';
-import { DemandContext } from '../contexts/DemandContextProvider';
-import { EventsContext } from '../contexts/EventsContextProvider';
 
 interface InfoMenuContextData {
     data: InfoMenuData | null;
@@ -46,9 +42,7 @@ export const InfoMenuProvider: FunctionComponent<InfoMenuProviderProps> = ({ chi
     const { access_token } = useUser();
 
     //These are used to trigger the top Menu whenever they change
-    const { capacitygroups } = useContext(CapacityGroupContext) || {};;
-    const { demandprops } = useContext(DemandContext) || {};;
-    const { events } = useContext(EventsContext) || {};;
+
 
     const fetchData = useCallback(async () => {
         try {
@@ -62,9 +56,8 @@ export const InfoMenuProvider: FunctionComponent<InfoMenuProviderProps> = ({ chi
     }, [access_token]);
 
     useEffect(() => {
-        console.log('Update Trigger')
         fetchData();
-    }, [fetchData, access_token, demandprops, capacitygroups, events]);
+    }, [fetchData, access_token]);
 
     return (
         <InfoMenuContext.Provider value={{ data, fetchData }}>