Skip to content

Commit 0d2decc

Browse files
garrettlchowgarrettlchow
authored
Merge pull request #17 from oslabs-beta/click-tab/ragad
Prov/Con panel comeplet
2 parents 958140a + 38c2157 commit 0d2decc

File tree

1 file changed

+84
-68
lines changed

1 file changed

+84
-68
lines changed

‎src/app/containers/ProvConContainer.tsx‎

Lines changed: 84 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { width } from '@mui/system';
21
import React, {useState} from 'react';
32
import { ProvConContainerProps} from '../FrontendTypes';
43

54

65
const ProvConContainer = (props: ProvConContainerProps): JSX.Element => {
76

7+
//deconstruct props
88
const { currentSnapshot } = props;
99

10+
//parse through node
1011
const keepContextAndProviderNodes = (node) => {
1112
if (!node) return null;
1213

@@ -51,61 +52,6 @@ const ProvConContainer = (props: ProvConContainerProps): JSX.Element => {
5152
}));
5253
};
5354

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
106-
};
107-
108-
10955
const renderNestedObject = (node, depth = 0) => {
11056
const isExpanded = expandedNodes[node.name];
11157

@@ -118,31 +64,101 @@ const ProvConContainer = (props: ProvConContainerProps): JSX.Element => {
11864
cursor: "pointer",
11965
fontWeight: "bold",
12066
textDecoration: "underline",
121-
color: isExpanded ? "green" : "blue",
67+
color: isExpanded ? "#1f2937" : "#059669",
12268
}}
12369
>
12470
{node.name}
12571
</p>
126-
12772
{/* Render HookState if it exists */}
12873
{isExpanded && node.componentData?.hooksState && (
129-
<p style={{ whiteSpace: "normal" , overflowWrap: "break-word", padding: "20px"}}>
130-
State: {JSON.stringify(node.componentData.hooksState)}
131-
</p>
74+
<div>
75+
<h1 style={{fontWeight: "bold"}}>State: {'{}'}</h1>
76+
<ul>
77+
{Object.entries(node.componentData.hooksState).map(([key, value]) => (
78+
<li style={{ whiteSpace: "normal" , overflowWrap: "break-word", listStyleType: "none" }}>
79+
<strong>{key}:</strong> {typeof value === 'object'? JSON.stringify(value, null,2): value.toString()}
80+
</li>
81+
))}
82+
</ul>
83+
</div>
13284
)}
13385

13486
{/* Render Context Property if it exists */}
13587
{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>
88+
<div>
89+
<h1 style={{fontWeight: "bold"}}>Context Property: {'{}'} </h1>
90+
<ul>
91+
{Object.entries(node.componentData.context).map(([key, value]) => {
92+
// Parse if the value is a JSON string
93+
let parsedValue = value;
94+
if (typeof value === "string") {
95+
try {
96+
parsedValue = JSON.parse(value);
97+
} catch {
98+
parsedValue = value; // Keep the original value if parsing fails
99+
}
100+
}
101+
return (
102+
<li key={key} style={{ whiteSpace: "normal", overflowWrap: "break-word", listStyleType: "none" }}>
103+
<strong>{key}:</strong>{" "}
104+
{typeof parsedValue === "object" && parsedValue !== null ? (
105+
<ul style={{ listStyleType: "none", paddingLeft: "1rem" }}>
106+
{Object.entries(parsedValue).map(([nestedKey, nestedValue]) => (
107+
<li key={nestedKey}>
108+
<strong>{nestedKey}:</strong> {nestedValue === null ? "null" : nestedValue.toString()}
109+
</li>
110+
))}
111+
</ul>
112+
) : (
113+
parsedValue === null ? "null" : parsedValue.toString()
114+
)}
115+
</li>
116+
);
117+
})}
118+
</ul>
119+
</div>
120+
139121
)}
140122

141123
{/* Render Context Value if it exists */}
142124
{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>
125+
<div>
126+
<h1 style={{fontWeight: "bold"}}>Context Value: {'{}'}</h1>
127+
<ul>
128+
{(() => {
129+
try {
130+
const parsedValue = JSON.parse(node.componentData.props.value); // Parse the JSON string
131+
return Object.entries(parsedValue).map(([key, value]) => (
132+
<li key={key} style={{ whiteSpace: "normal", overflowWrap: "break-word", listStyleType: "none" }}>
133+
{/* <strong>{key}:</strong> {typeof value === 'object' ? JSON.stringify(value, null, 2) : value?.toString()} */}
134+
135+
<strong>{key}:</strong>{" "}
136+
{value === null ? (
137+
"null"
138+
) : typeof value === "object" ? (
139+
<ul style={{ listStyleType: "none", paddingLeft: "1rem" }}>
140+
{Object.entries(value).map(([nestedKey, nestedValue]) => (
141+
<li key={nestedKey}>
142+
<strong>{nestedKey}:</strong> {nestedValue === null ? "null" : nestedValue?.toString()}
143+
</li>
144+
))}
145+
</ul>
146+
) : (
147+
value?.toString()
148+
)}
149+
</li>
150+
));
151+
} catch (error) {
152+
return (
153+
<li style={{ color: "red" }}>
154+
Error parsing value: {error.message}
155+
</li>
156+
);
157+
}
158+
})()}
159+
</ul>
160+
</div>
161+
146162
)}
147163

148164
{/* Recursively Render Children */}
@@ -155,7 +171,7 @@ const ProvConContainer = (props: ProvConContainerProps): JSX.Element => {
155171

156172

157173
return (
158-
<div style={{ width: "300px" }}>
174+
<div style={{ width: "260px", marginLeft: "25px"}}>
159175
{renderNestedObject(contextProvidersOnly)}
160176
</div>
161177
);

0 commit comments

Comments
 (0)