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

…a childern Signed-off-by: Timothy Asir Jeyasingh <[email protected]>
red-hat-storage · Oct 25, 2023 · d5d30db · d5d30db
1 parent 2718754
commit d5d30db
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 36 deletions.
diff --git a/packages/mco/components/mco-dashboard/data-policy/dr-dashboard-context.tsx b/packages/mco/components/mco-dashboard/data-policy/dr-dashboard-context.tsx
@@ -2,6 +2,21 @@ import * as React from 'react';
 import { PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
 import { DrClusterAppsMap } from '../../../types';
 
+export const combineComponents = (...components: React.FC[]): React.FC => {
+  return components.reduce(
+    (AccumulatedComponents, CurrentComponent) => {
+      return ({ children }: React.ComponentProps<React.FC>): JSX.Element => {
+        return (
+          <AccumulatedComponents>
+            <CurrentComponent>{children}</CurrentComponent>
+          </AccumulatedComponents>
+        );
+      };
+    },
+    ({ children }) => <>{children}</>
+  );
+};
+
 export const CSVStatusesContext = React.createContext<CSVStatusesContextType>(
   {} as CSVStatusesContextType
 );

diff --git a/packages/mco/components/mco-dashboard/data-policy/dr-dashboard.tsx b/packages/mco/components/mco-dashboard/data-policy/dr-dashboard.tsx
@@ -28,7 +28,11 @@ import {
 import { StorageDashboard, STATUS_QUERIES } from '../queries';
 import { AlertsCard } from './alert-card/alert-card';
 import { ClusterAppCard } from './cluster-app-card/cluster-app-card';
-import { CSVStatusesContext, DRResourcesContext } from './dr-dashboard-context';
+import {
+  CSVStatusesContext,
+  DRResourcesContext,
+  combineComponents,
+} from './dr-dashboard-context';
 import { StatusCard } from './status-card/status-card';
 import { SummaryCard } from './summary-card/summary-card';
 import '../mco-dashboard.scss';
@@ -63,14 +67,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 +179,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 providers = [CSVStatusesContextProvider, DRResourcesContextProvider];
+
+const AppContextProvider = combineComponents(...providers);
 
-  // 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}>
-          <UpperSection />
-        </DRResourcesContext.Provider>
-      </CSVStatusesContext.Provider>
+      <AppContextProvider>
+        <UpperSection />
+      </AppContextProvider>
     </div>
   );
 };

diff --git 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>
   );
 };