Merge pull request #8 from oslabs-beta/everyone45/styling

Everyone45/styling

Author: rxlina

src/app/components/ComponentMap.tsx

@@ -121,11 +121,21 @@ export default function ComponentMap({
   const tooltipStyles = {
     ...defaultStyles,
     minWidth: 60,
+    maxWidth: 300,
     backgroundColor: 'rgba(0,0,0,0.9)',
     color: 'white',
     fontSize: '14px',
     lineHeight: '18px',
     fontFamily: 'Roboto',
+    zIndex: 100,
+  };
+
+  const scrollStyle = {
+    minWidth: '60',
+    maxWidth: '300',
+    maxHeight: '100px',
+    overflowY: 'scroll',
+    overflowWrap: 'break-word',
   };
 
   const formatRenderTime = time => {
@@ -136,6 +146,21 @@ export default function ComponentMap({
   //places all nodes into a flat array
   const nodeList = [];
 
+  const makePropsPretty = data => {
+    const propsFormat = [];
+    for (const key in data) {
+      console.log('this is the key', key);
+      if (typeof data[key] === 'object') {
+        const nestedObj = makePropsPretty(data[key]);
+      }
+      propsFormat.push(<p>
+        {`${JSON.stringify(key)}: ${JSON.stringify(nestedObj || data[key])}`}
+      </p>);
+    }
+    console.log('this is propsFormat', propsFormat);
+    return propsFormat;
+  };
+
   const collectNodes = (node) => {
     nodeList.splice(0, nodeList.length);
     console.log("Root node:", node);
@@ -342,23 +367,26 @@ export default function ComponentMap({
               <strong>{tooltipData.name}</strong>
               {' '}
             </div>
-            <div>
-              State:
-              {tooltipData.state}
-            </div>
-            <div>
-              Props:
-              {JSON.stringify(tooltipData.componentData.props)}
-            </div>
             <div>
               {' '}
               Render time:
               {' '}
               {formatRenderTime(tooltipData.componentData.actualDuration)}
               {' '}
             </div>
+            <div>
+              State:
+              {tooltipData.state}
+            </div>
+            <div style={scrollStyle}>
+              Props:
+              {makePropsPretty(tooltipData.componentData.props)}
+              {/* {JSON.stringify(tooltipData.componentData.props)} */}
+            </div>
           </div>
         </TooltipInPortal>
+
+
       )}
     </div>
   );

src/backend/linkFiber.ts

@@ -474,7 +474,7 @@ function createTree(
           const lastClass = currentFiber.child.stateNode.classList[
             currentFiber.child.stateNode.classList.length - 1
           ];
-          if (lastClass.includes('fromLinkFiber')) {
+          if (typeof lastClass[lastClass.length - 1] === 'string') {
             currentFiber.child.stateNode.classList.remove(lastClass);
           }
         }

src/backend/tree.ts

@@ -11,7 +11,7 @@ import { createGenerateClassName } from "@material-ui/styles";
 
 let copyInstances = 0;
 const circularComponentTable = new Set<Tree>();
-let componentNames = {}
+let componentNames = {};
 
 // Removes unserializable state data such as functions
 function scrubUnserializableMembers(tree: Tree): Tree {
@@ -103,7 +103,6 @@ class Tree {
   addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
     const uniqueName = this.checkForDuplicates(name);
     console.log("ChildName:", uniqueName);
-    this.name = uniqueName;
     const newChild: Tree = new Tree(state, uniqueName, componentData, rtid, recoilDomNode);
     newChild.parent = this;
     this.children.push(newChild);
@@ -113,7 +112,6 @@ class Tree {
   addSibling(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
     const uniqueName = this.checkForDuplicates(name);
     console.log("SiblingName:", uniqueName);
-    this.name = uniqueName;
     const newSibling: Tree = new Tree(state, uniqueName, componentData, rtid, recoilDomNode);
     newSibling.parent = this.parent;
     this.parent.children.push(newSibling);