passed props to ProvConTainer

Author: ragad-mohammed

src/app/FrontendTypes.ts

@@ -108,6 +108,12 @@ export interface ActionContainerProps {
   actionView: boolean;
   setActionView: React.Dispatch<React.SetStateAction<boolean>>;
   toggleActionContainer: () => void;
+  snapshots: any
+  currLocation: any
+}
+
+export interface ProvConContainerProps {
+currentSnapshot: any; 
 }
 
 export interface StateContainerProps {

src/app/containers/ActionContainer.tsx

@@ -36,7 +36,8 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
   const {
     toggleActionContainer, // function that handles Time Jump Sidebar view from MainContainer
     actionView, // local state declared in MainContainer
-    setActionView, // function to update actionView state declared in MainContainer
+    setActionView, // function to update actionView state declared in MainContainer,
+    snapshots,
   } = props;
   const [recordingActions, setRecordingActions] = useState(true); // We create a local state 'recordingActions' and set it to true
   let actionsArr: JSX.Element[] = []; // we create an array 'actionsArr' that will hold elements we create later on
@@ -248,7 +249,8 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               Clear
             </Button>
           </div>
-         {dropdownSelection === 'Provider/Consumer' && <ProvConContainer/>}
+         {dropdownSelection === 'Provider/Consumer' && <ProvConContainer currentSnapshot={currLocation.stateSnapshot}
+         />}
           {dropdownSelection === 'TimeJump' && 
             Object.keys(routes).map((route, i) => (
               <RouteDescription key={`route${i}`} actions={routes[route]} />

src/app/containers/MainContainer.tsx

@@ -212,6 +212,8 @@ function MainContainer(): JSX.Element {
           actionView={actionView}
           setActionView={setActionView}
           toggleActionContainer={toggleActionContainer}
+          snapshots={snapshots} 
+          currLocation={currLocation}
         />
         {/* @ts-ignore */}
         {snapshots.length ? (

src/app/containers/ProvConContainer.tsx

@@ -1,11 +1,90 @@
-import React from "react";
+import { width } from '@mui/system';
+import React, {useState} from 'react';
+import { ProvConContainerProps} from '../FrontendTypes';
 
-const ProvConContainer = (): JSX.Element  => {
-    return (
-        <div>
-            hello
+
+const ProvConContainer = (props: ProvConContainerProps): JSX.Element  => {
+
+    const { currentSnapshot } = props
+  
+    console.log('currentSnapshot', currentSnapshot)
+
+    const keepContextAndProviderNodes = (node) => {
+      if (!node) return null;
+  
+      // Check if this node should be kept
+      const hasContext =
+        node?.componentData?.context && Object.keys(node.componentData.context).length > 0;
+      const isProvider = node?.name && node.name.endsWith('Provider');
+      const shouldKeepNode = hasContext || isProvider;
+  
+      // Process children first
+      let processedChildren = [];
+      if (node.children) {
+        processedChildren = node.children
+          .map((child) => keepContextAndProviderNodes(child))
+          .filter(Boolean); // Remove null results
+      }
+  
+      // If this node should be kept or has kept children, return it
+      if (shouldKeepNode || processedChildren.length > 0) {
+        return {
+          ...node,
+          children: processedChildren,
+        };
+      }
+  
+      // If neither the node should be kept nor it has kept children, filter it out
+      return null;
+    };
+    const contextProvidersOnly = keepContextAndProviderNodes(currentSnapshot);
+    console.log('context only', contextProvidersOnly)
+
+    const [visibleKeys, setVisibleKeys] = useState({});
+
+    const toggleInfo = (key:string) => {
+        setVisibleKeys((prev) => ({
+          ...prev, //copies all current keys and their visibility from prev object
+          [key]: !prev[key] // adds or updates the key in the visibleKeys object.
+        }))
+      };
+    const someInfo = {
+      ThemeProvider: { 
+        UserProvider: {
+          UserContext: 'some info herecdxjchffhdjhfdfdfhdjhfdjhfdjhfvhhhh',
+        },
+        ThemeContext1:  {
+          Nested: 'some info here'},
+        ThemeConext2: 'some info here'
+      },
+    }
+    
+
+    // Recursive function to render nested objects
+  const renderNestedObjec = (obj, parentKey = '') => { //parentKey is unique keys that represent the hierarchy of the object.
+    return Object.keys(obj).map((key) => {
+      const fullKey = parentKey ? `${parentKey}.${key}` : key; // if parentKey does not exisit --> fullKey = key, else fullKey=ParentKey.Key
+      return (
+        // each key is rendered as a div
+        <div key={fullKey} style={{width: '100%', backgroundColor: 'red'}} > 
+          <div
+            style={{ color: 'blue', cursor: 'pointer' }}
+            onClick={() => toggleInfo(fullKey)} // Pass the unique key to toggle visibility
+          >
+            <strong>{key}</strong>
+          </div>
+          {visibleKeys[fullKey] && // Check if the key is visible
+            (typeof obj[key] === 'object' //check if the value of the key is an object
+              ? renderNestedObjec(obj[key], fullKey) // Recursive rendering for nested objects
+              //if value is not an object
+              : <div >{obj[key]}</div>)}
         </div>
-    )
-}
+      );
+    });
+  };
+
+  return <div style={{width: '100%'}}>{renderNestedObjec(someInfo)}</div>;
+};
+
 
 export default ProvConContainer;