From 6a1e820e5d081f3e90bcd08011b5a422d0c5e2ce Mon Sep 17 00:00:00 2001
From: Timothy Asir Jeyasingh <tjeyasin@redhat.com>
Date: Wed, 20 Sep 2023 14:25:40 +0530
Subject: [PATCH] Create separate provider for the context and pass its
 descendants as a childern

Signed-off-by: Timothy Asir Jeyasingh <tjeyasin@redhat.com>
---
 .../data-policy/dr-dashboard.tsx              |  47 ++++++--
 packages/odf/components/topology/Topology.tsx | 107 ++++++++++++++----
 2 files changed, 120 insertions(+), 34 deletions(-)

diff --git a/packages/mco/components/mco-dashboard/data-policy/dr-dashboard.tsx b/packages/mco/components/mco-dashboard/data-policy/dr-dashboard.tsx
index a3b010d5a..02469df69 100644
--- a/packages/mco/components/mco-dashboard/data-policy/dr-dashboard.tsx
+++ b/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>
+  );
+};
 
-  // 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
+// 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
+const DRDashboard: React.FC = () => {
   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>
   );
 };
diff --git a/packages/odf/components/topology/Topology.tsx b/packages/odf/components/topology/Topology.tsx
index 928072583..cd90cd197 100644
--- a/packages/odf/components/topology/Topology.tsx
+++ b/packages/odf/components/topology/Topology.tsx
@@ -432,15 +432,85 @@ const TopologyViewComponent: React.FC = () => {
 
 const Error = ({ error }) => <>{error}</>;
 
+const TopologySearchContextProvider: React.FC<{ children: React.ReactNode }> =
+  ({ children }) => {
+    const [activeItemsUID, setActiveItemsUID] = React.useState<string[]>([]);
+    const [activeItem, setActiveItem] = React.useState<string>('');
+    const contextValue = React.useMemo(
+      () => ({
+        activeItemsUID,
+        setActiveItemsUID,
+        activeItem,
+        setActiveItem,
+      }),
+      [activeItemsUID, setActiveItemsUID, activeItem, setActiveItem]
+    );
+
+    return (
+      <TopologySearchContext.Provider value={contextValue}>
+        {children}
+      </TopologySearchContext.Provider>
+    );
+  };
+
+const TopologyDataContextProvider: React.FC<{
+  children: React.ReactNode;
+  nodes: NodeKind[];
+  storageCluster: StorageClusterKind;
+  zones: string[];
+  deployments: DeploymentKind[];
+  visualizationLevel: TopologyViewLevel;
+  activeNode: string;
+  nodeDeploymentMap: any;
+}> = ({
+  children,
+  nodes,
+  storageCluster,
+  zones,
+  deployments,
+  visualizationLevel,
+  activeNode,
+  nodeDeploymentMap,
+}) => {
+  const [selectedElement, setSelectedElement] =
+    React.useState<GraphElement>(null);
+  const contextValue = React.useMemo(
+    () => ({
+      nodes,
+      storageCluster,
+      zones,
+      deployments,
+      visualizationLevel,
+      activeNode,
+      nodeDeploymentMap,
+      selectedElement,
+      setSelectedElement,
+    }),
+    [
+      nodes,
+      storageCluster,
+      zones,
+      deployments,
+      visualizationLevel,
+      activeNode,
+      nodeDeploymentMap,
+      selectedElement,
+      setSelectedElement,
+    ]
+  );
+
+  return (
+    <TopologyDataContext.Provider value={contextValue}>
+      {children}
+    </TopologyDataContext.Provider>
+  );
+};
+
 const Topology: React.FC = () => {
   const [controller, setController] = React.useState<Visualization>(null);
   const [visualizationLevel, setVisualizationLevel] =
     React.useState<TopologyViewLevel>(TopologyViewLevel.NODES);
-  const [activeItemsUID, setActiveItemsUID] = React.useState<string[]>([]);
-  const [activeItem, setActiveItem] = React.useState<string>('');
   const [activeNode, setActiveNode] = React.useState('');
-  const [selectedElement, setSelectedElement] =
-    React.useState<GraphElement>(null);
 
   const [nodes, nodesLoaded, nodesError] =
     useK8sWatchResource<NodeKind[]>(nodeResource);
@@ -532,23 +602,16 @@ const Topology: React.FC = () => {
   const zones = memoizedNodes.map(getTopologyDomain);
 
   return (
-    <TopologyDataContext.Provider
-      value={{
-        nodes: memoizedNodes,
-        storageCluster: storageCluster[0],
-        zones,
-        deployments: memoizedDeployments,
-        visualizationLevel: visualizationLevel,
-        activeNode,
-        setActiveNode,
-        nodeDeploymentMap,
-        selectedElement,
-        setSelectedElement,
-      }}
+    <TopologyDataContextProvider
+      nodes={memoizedNodes}
+      storageCluster={storageCluster[0]}
+      zones={zones}
+      deployments={memoizedDeployments}
+      visualizationLevel={visualizationLevel}
+      activeNode={activeNode}
+      nodeDeploymentMap={nodeDeploymentMap}
     >
-      <TopologySearchContext.Provider
-        value={{ activeItemsUID, setActiveItemsUID, activeItem, setActiveItem }}
-      >
+      <TopologySearchContextProvider>
         <VisualizationProvider controller={controller}>
           <div className="odf__topology-view" id="odf-topology">
             <TopologyTopBar />
@@ -569,8 +632,8 @@ const Topology: React.FC = () => {
             </HandleErrorAndLoading>
           </div>
         </VisualizationProvider>
-      </TopologySearchContext.Provider>
-    </TopologyDataContext.Provider>
+      </TopologySearchContextProvider>
+    </TopologyDataContextProvider>
   );
 };