Create separate provider for the context and pass its descendants as …

…a childern

Signed-off-by: Timothy Asir Jeyasingh <[email protected]>

packages/mco/components/mco-dashboard/data-policy/dr-dashboard.tsx

@@ -63,14 +63,30 @@ const UpperSection: React.FC = () => (
   </Grid>
 );
 
-export const DRDashboard: React.FC = () => {
+const CSVStatusesContextProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const [csvData, csvError, csvLoading] = useCustomPrometheusPoll({
     endpoint: 'api/v1/query' as any,
     query: STATUS_QUERIES[StorageDashboard.CSV_STATUS_ALL_WHITELISTED],
     basePath: ACM_ENDPOINT,
     cluster: HUB_CLUSTER_NAME,
   });
+  const contextValue = React.useMemo(
+    () => ({ csvData, csvError, csvLoading }),
+    [csvData, csvError, csvLoading]
+  );
+
+  return (
+    <CSVStatusesContext.Provider value={contextValue}>
+      {children}
+    </CSVStatusesContext.Provider>
+  );
+};
 
+const DRResourcesContextProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const [drResources, drLoaded, drLoadError] =
     useDisasterRecoveryResourceWatch();
   const [argoApplicationSetResources, loaded, loadError] =
@@ -159,21 +175,28 @@ export const DRDashboard: React.FC = () => {
     loadError,
   ]);
 
-  const dRResourcesContext = {
-    drClusterAppsMap,
-    loaded,
-    loadError,
-  };
+  const contextValue = React.useMemo(
+    () => ({ drClusterAppsMap, loaded, loadError }),
+    [drClusterAppsMap, loaded, loadError]
+  );
+
+  return (
+    <DRResourcesContext.Provider value={contextValue}>
+      {children}
+    </DRResourcesContext.Provider>
+  );
+};
 
+const DRDashboard: React.FC = () => {
   // ToDo(Sanjal): combime multiple Context together to make it scalable
   // refer: https://javascript.plainenglish.io/how-to-combine-context-providers-for-cleaner-react-code-9ed24f20225e
   return (
     <div className="odf-dashboard-body">
-      <CSVStatusesContext.Provider value={{ csvData, csvError, csvLoading }}>
-        <DRResourcesContext.Provider value={dRResourcesContext}>
+      <CSVStatusesContextProvider>
+        <DRResourcesContextProvider>
           <UpperSection />
-        </DRResourcesContext.Provider>
-      </CSVStatusesContext.Provider>
+        </DRResourcesContextProvider>
+      </CSVStatusesContextProvider>
     </div>
   );
 };

packages/odf/components/topology/Topology.tsx

@@ -531,24 +531,64 @@ const Topology: React.FC = () => {
 
   const zones = memoizedNodes.map(getTopologyDomain);
 
+  const TopologyDataContextProvider: React.FC<{ children: React.ReactNode }> =
+    ({ children }) => {
+      const contextValue = React.useMemo(
+        () => ({
+          nodes: memoizedNodes,
+          storageCluster: storageCluster[0],
+          zones,
+          deployments: memoizedDeployments,
+          visualizationLevel: visualizationLevel,
+          activeNode,
+          setActiveNode,
+          nodeDeploymentMap,
+          selectedElement,
+          setSelectedElement,
+        }),
+        [
+          memoizedNodes,
+          storageCluster,
+          zones,
+          memoizedDeployments,
+          visualizationLevel,
+          activeNode,
+          setActiveNode,
+          nodeDeploymentMap,
+          selectedElement,
+          setSelectedElement,
+        ]
+      );
+
+      return (
+        <TopologyDataContext.Provider value={contextValue}>
+          {children}
+        </TopologyDataContext.Provider>
+      );
+    };
+
+  const TopologySearchContextProvider: React.FC<{ children: React.ReactNode }> =
+    ({ children }) => {
+      const contextValue = React.useMemo(
+        () => ({
+          activeItemsUID,
+          setActiveItemsUID,
+          activeItem,
+          setActiveItem,
+        }),
+        [activeItemsUID, setActiveItemsUID, activeItem, setActiveItem]
+      );
+
+      return (
+        <TopologySearchContext.Provider value={contextValue}>
+          {children}
+        </TopologySearchContext.Provider>
+      );
+    };
+
   return (
-    <TopologyDataContext.Provider
-      value={{
-        nodes: memoizedNodes,
-        storageCluster: storageCluster[0],
-        zones,
-        deployments: memoizedDeployments,
-        visualizationLevel: visualizationLevel,
-        activeNode,
-        setActiveNode,
-        nodeDeploymentMap,
-        selectedElement,
-        setSelectedElement,
-      }}
-    >
-      <TopologySearchContext.Provider
-        value={{ activeItemsUID, setActiveItemsUID, activeItem, setActiveItem }}
-      >
+    <TopologyDataContextProvider>
+      <TopologySearchContextProvider>
         <VisualizationProvider controller={controller}>
           <div className="odf__topology-view" id="odf-topology">
             <TopologyTopBar />
@@ -569,8 +609,8 @@ const Topology: React.FC = () => {
             </HandleErrorAndLoading>
           </div>
         </VisualizationProvider>
-      </TopologySearchContext.Provider>
-    </TopologyDataContext.Provider>
+      </TopologySearchContextProvider>
+    </TopologyDataContextProvider>
   );
 };