Skip to content

Commit 97fd9f1

Browse files
ragad-mohammedragad-mohammed
committed
Provider/Consumer display complete
1 parent febc66b commit 97fd9f1

File tree

3 files changed

+118
-141
lines changed

3 files changed

+118
-141
lines changed

‎src/app/components/Actions/ClickableLink.tsx

Lines changed: 0 additions & 99 deletions
This file was deleted.

‎src/app/containers/ActionContainer.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import DropDown from '../components/Actions/DropDown';
1010
import ProvConContainer from './ProvConContainer';
1111
import { ActionContainerProps, CurrentTab, MainState, Obj, RootState } from '../FrontendTypes';
1212
import { Button, Switch } from '@mui/material';
13-
import ClickableLink from '../components/Actions/ClickableLink';
13+
1414
/*
1515
This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
1616
*/
@@ -234,7 +234,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
234234
dropdownSelection = {dropdownSelection}
235235
setDropdownSelection={setDropdownSelection}
236236
/>
237-
<ClickableLink />
238237
<div className='action-component exclude'>
239238
<Button
240239
className='clear-button'

‎src/app/containers/ProvConContainer.tsx

Lines changed: 117 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import { ProvConContainerProps} from '../FrontendTypes';
55

66
const ProvConContainer = (props: ProvConContainerProps): JSX.Element => {
77

8-
const { currentSnapshot } = props
9-
console.log('currentSnapshot', currentSnapshot)
8+
const { currentSnapshot } = props;
109

1110
const keepContextAndProviderNodes = (node) => {
1211
if (!node) return null;
@@ -39,50 +38,128 @@ const ProvConContainer = (props: ProvConContainerProps): JSX.Element => {
3938
const contextProvidersOnly = keepContextAndProviderNodes(currentSnapshot);
4039
console.log('context only', contextProvidersOnly)
4140

42-
const [visibleKeys, setVisibleKeys] = useState({});
4341

44-
const toggleInfo = (key:string) => {
45-
setVisibleKeys((prev) => ({
46-
...prev, //copies all current keys and their visibility from prev object
47-
[key]: !prev[key] // adds or updates the key in the visibleKeys object.
48-
}))
42+
43+
// State for managing expansion of nodes
44+
const [expandedNodes, setExpandedNodes] = useState({});
45+
46+
// Toggle function to expand/collapse a node
47+
const toggleExpand = (nodeName) => {
48+
setExpandedNodes((prev) => ({
49+
...prev,
50+
[nodeName]: !prev[nodeName],
51+
}));
52+
};
53+
54+
// // Recursive function to render nested objects
55+
// const renderNestedObject = (node, depth = 0) => {
56+
// const isExpanded = expandedNodes[node.name];
57+
58+
// return (
59+
// <div key={node.name} style={{ marginLeft: `${depth * 20}px` }}>
60+
// <p
61+
// onClick={() => toggleExpand(node.name)}
62+
// style={{
63+
// cursor: "pointer",
64+
// fontWeight: "bold",
65+
// textDecoration: "underline",
66+
// color: isExpanded ? "green" : "blue",
67+
// }}
68+
// >
69+
// {node.name}
70+
// </p>
71+
72+
// {isExpanded &&
73+
// node?.children?.[0]?.componentData?.context &&
74+
// node?.children?.[0]?.componentData?.props?.value && (
75+
// <div>
76+
// <p>
77+
// Context Property:{" "}
78+
// {JSON.stringify(
79+
// node.children[0].componentData.context
80+
// )}
81+
// </p>
82+
// <p>
83+
// Context Value:{" "}
84+
// {JSON.stringify(
85+
// node.children[0].componentData.props.value
86+
// )}
87+
// </p>
88+
// </div>
89+
// )}
90+
91+
// {/* Recursively render children */}
92+
// {isExpanded &&
93+
// node.children &&
94+
// node.children.map((child) =>
95+
// renderNestedObject(child, depth + 1)
96+
// )}
97+
// </div>
98+
// );
99+
// };
100+
const style = {
101+
whiteSpace: "normal", // Allow text to wrap
102+
overflowWrap: "break-word", // Break long words
103+
width: "300px", // Limit container width
104+
border: "1px solid black", // Optional: Visualize container
105+
padding: "10px", // Optional: Add padding
49106
};
50-
const someInfo = {
51-
ThemeProvider: {
52-
UserProvider: {
53-
UserContext: 'some info herecdxjchffhdjhfdfdfhdjhfdjhfdjhfvhhhh',
54-
},
55-
ThemeContext1: {
56-
Nested: 'some info here'},
57-
ThemeConext2: 'some info here'
58-
},
59-
}
60107

61108

62-
// Recursive function to render nested objects
63-
const renderNestedObjec = (obj, parentKey = '') => { //parentKey is unique keys that represent the hierarchy of the object.
64-
return Object.keys(obj).map((key) => {
65-
const fullKey = parentKey ? `${parentKey}.${key}` : key; // if parentKey does not exisit --> fullKey = key, else fullKey=ParentKey.Key
66-
return (
67-
// each key is rendered as a div
68-
<div key={fullKey} style={{width: '100%', backgroundColor: 'red'}} >
69-
<div
70-
style={{ color: 'blue', cursor: 'pointer' }}
71-
onClick={() => toggleInfo(fullKey)} // Pass the unique key to toggle visibility
72-
>
73-
<strong>{key}</strong>
74-
</div>
75-
{visibleKeys[fullKey] && // Check if the key is visible
76-
(typeof obj[key] === 'object' //check if the value of the key is an object
77-
? renderNestedObjec(obj[key], fullKey) // Recursive rendering for nested objects
78-
//if value is not an object
79-
: <div >{obj[key]}</div>)}
109+
const renderNestedObject = (node, depth = 0) => {
110+
const isExpanded = expandedNodes[node.name];
111+
112+
return (
113+
<div key={node.name}>
114+
{/* Render Node Name */}
115+
<p
116+
onClick={() => toggleExpand(node.name)}
117+
style={{
118+
cursor: "pointer",
119+
fontWeight: "bold",
120+
textDecoration: "underline",
121+
color: isExpanded ? "green" : "blue",
122+
}}
123+
>
124+
{node.name}
125+
</p>
126+
127+
{/* Render HookState if it exists */}
128+
{isExpanded && node.componentData?.hooksState && (
129+
<p style={{ whiteSpace: "normal" , overflowWrap: "break-word", padding: "20px"}}>
130+
State: {JSON.stringify(node.componentData.hooksState)}
131+
</p>
132+
)}
133+
134+
{/* Render Context Property if it exists */}
135+
{isExpanded && node.componentData?.context && Object.keys(node.componentData?.context).length !== 0 && (
136+
<p style={{ whiteSpace: "normal", overflowWrap: "break-word", padding: "20px"}}>
137+
Context Property: {JSON.stringify(node.componentData.context)}
138+
</p>
139+
)}
140+
141+
{/* Render Context Value if it exists */}
142+
{isExpanded && node.componentData?.props?.value && (
143+
<p style={{ whiteSpace: "normal" , overflowWrap: "break-word", padding: "10px"}}>
144+
Context Value: {JSON.stringify(node.componentData.props.value)}
145+
</p>
146+
)}
147+
148+
{/* Recursively Render Children */}
149+
{isExpanded &&
150+
node.children &&
151+
node.children.map((child) => renderNestedObject(child, depth + 1))}
152+
</div>
153+
);
154+
};
155+
156+
157+
return (
158+
<div style={{ width: "300px" }}>
159+
{renderNestedObject(contextProvidersOnly)}
80160
</div>
81-
);
82-
});
83-
};
161+
);
84162

85-
return <div style={{width: '100%'}}>{renderNestedObjec(someInfo)}</div>;
86163
};
87164

88165

0 commit comments

Comments
 (0)