Merge pull request #5 from oslabs-beta/feature-hooks

Feature hooks

Author: yuanjackie1

src/app/actions/actions.ts

@@ -5,9 +5,11 @@ export const save = (newSeries, newSeriesName) => ({
   type: types.SAVE,
   payload: { newSeries, newSeriesName },
 });
+
 export const deleteSeries = () => ({
   type: types.DELETE_SERIES,
 });
+
 export const toggleMode = (mode) => ({
   type: types.TOGGLE_MODE,
   payload: mode,
@@ -86,10 +88,6 @@ export const noDev = (tab) => ({
   payload: tab,
 });
 
-export const toggleSplit = () => ({
-  type: types.TOGGLE_SPLIT,
-});
-
 export const toggleExpanded = (node) => ({
   type: types.TOGGLE_EXPANDED,
   payload: node,

src/app/components/App.tsx

@@ -13,7 +13,6 @@ const initialState: InitialStateProps = {
   port: null,
   currentTab: null,
   currentTitle: 'No Target',
-  split: false,
   tabs: {},
   currentTabInApp: null,
 };

src/app/components/FrontendTypes.ts

@@ -138,7 +138,6 @@ export interface InitialStateProps {
   port: null | number;
   currentTab: null | number;
   currentTitle: null | string;
-  split: null | boolean;
   tabs: unknown;
   currentTabInApp: null | string;
 }

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -17,6 +17,7 @@ import { localPoint } from '@visx/event';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
+import ToolTipDataDisplay from './ToolTipDataDisplay';
 import { toggleExpanded, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
 import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../components/FrontendTypes'
@@ -93,7 +94,7 @@ export default function ComponentMap({
     ...defaultStyles,
     minWidth: 60,
     maxWidth: 300,
-    backgroundColor: 'rgba(0,0,0,0.9)',
+    backgroundColor: 'rgb(15,15,15)',
     color: 'white',
     fontSize: '14px',
     lineHeight: '18px',
@@ -116,24 +117,6 @@ export default function ComponentMap({
     return `${renderTime} ms `;
   };
 
-  const formatData: []  = (data, type) => {
-    const contextFormat: string[] = [];
-    for (const key in data) {
-      // Suggestion: update the front end to display as a list if we have object
-      let inputData = data[key];
-      if (inputData !== null && typeof inputData === 'object') {
-        inputData = JSON.stringify(inputData);
-      }
-      contextFormat.push(<p className={`${type}-item`}>{`${key}: ${inputData}`}</p>);
-    }
-    return contextFormat;
-  };
-
-  const formatState: string[] = (state) => {
-    if (state === 'stateless') return ['stateless'];
-    return ['stateful'];
-  };
-
   // places all nodes into a flat array
   const nodeList: [] = [];
 
@@ -290,19 +273,13 @@ export default function ComponentMap({
                           onMouseEnter={(event) => {
                             /** This 'if' statement block checks to see if you've just left another component node
                              * by seeing if there's a current setTimeout waiting to close that component node's 
-                             * tooltip (see onMouseLeave immediately below).
-                             * This setTimeout gives the mouse time to enter the tooltip element so the tooltip 
-                             * can persist. If instead of entering said tooltip element you've left the previous 
-                             * component node to enter this component node, this logic will clear the timeout event,
-                             * and close the tooltip. */
+                             * tooltip (see onMouseLeave immediately below). If so it clears the tooltip generated 
+                             * from that component node so a new tooltip for the node you've just entered can render. */
                             if (toolTipTimeoutID.current !== null) {
                               clearTimeout(toolTipTimeoutID.current);
                               hideTooltip();
                             }
-                            /** The following line resets the toolTipTimeoutID.current to null, showing that there
-                            * are no current setTimeouts running. I placed this outside of the above if statement  
-                            * to make sure there are no edge cases that would allow for the toolTipTimeoutID.current
-                            * to hold onto an old reference. */
+                            // Removes the previous timeoutID to avoid errors
                             toolTipTimeoutID.current = null;
                             //This generates a tooltip for the component node the mouse has entered.
                             handleMouseAndClickOver(event);
@@ -316,13 +293,11 @@ export default function ComponentMap({
                            * If the mouse enters the tooltip before the timeout delay has passed, the 
                            * setTimeout event will be canceled. */
                           onMouseLeave={() => {
-                            // This line invokes setTimeout and saves its ID to the useRef var toolTipTimeoutID
+                            // Store setTimeout ID so timeout can be cleared if necessary
                             toolTipTimeoutID.current = setTimeout(() => {
                               // hideTooltip unmounts the tooltip
                               hideTooltip();
-                              // As the timeout has been executed, the timeoutID can be reset to null
                               toolTipTimeoutID.current = null;
-                              //There is a delay of 300 ms
                             }, 300);
                           }}
                         />
@@ -355,56 +330,39 @@ export default function ComponentMap({
           style={tooltipStyles}
 
           //------------- Mouse Over TooltipInPortal--------------------------------------------------------------------
-          /** This onMouseEnter fires when the mouse first moves/hovers over the tooltip
-           * The supplied event listener callback stops the setTimeout that was going to 
-           * close the tooltip from firing */ 
-          
+          /** After the mouse enters the tooltip, it's able to persist by clearing the setTimeout
+           *  that would've unmounted it */ 
           onMouseEnter={() => {
-            // The setTimeoutID stored in toolTipTimeoutID.current is from the setTimeout initiated by leaving the 
-            // component node that generated the tooltip. If you've triggered an onMouseEnter event in that tooltip,
             clearTimeout(toolTipTimeoutID.current);
-            // This line resets the timeoutID to null
             toolTipTimeoutID.current = null;
           }}
 
           //------------- Mouse Leave TooltipInPortal -----------------------------------------------------------------
-          /** This onMouseLeave event fires when the mouse leaves the tooltip 
-           * The supplied event listener callback unmounts the tooltip */
+          /** When the mouse leaves the tooltip, the tooltip unmounts */
           onMouseLeave={() => {
-            // hideTooltip unmounts the tooltip
             hideTooltip();
           }}
         >
           <div>
-            <div style={{}}>
-              {' '}
-              <strong>{tooltipData.name}</strong>{' '}
+            <div>
+              <strong>{tooltipData.name}</strong>
             </div>
-            <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
-            <div className='stateTip'>
-              State: {formatState(tooltipData.state)}
+            <div className='tooltipKey'>
+              key: {tooltipData.componentData.key !== null ? tooltipData.componentData.key : 'null'}
             </div>
-            <div style={React.scrollStyle}>
-              <div className='tooltipWrapper'>
-                <h2>Props:</h2>
-                {formatData(tooltipData.componentData.props, 'props')}
-              </div>
-              
-              {/* Currently no use for this field
-              <div className='tooltipWrapper'>
-                <h2>Initial Context:</h2>
-                {formatData(tooltipData.componentData.context, 'context')}
-              </div> */}
-
-              <div className='tooltipWrapper'>
-                <h2>State:</h2>
-                {formatData(
-                  tooltipData.componentData.hooksIndex
-                    ? tooltipData.componentData.hooksState
-                    : tooltipData.componentData.state,
-                  'state',
-                )}
-              </div>
+            <div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
+            
+            <div>
+              <ToolTipDataDisplay
+                containerName='Props' 
+                dataObj={tooltipData.componentData.props}
+              />
+              <ToolTipDataDisplay
+                containerName='State'
+                dataObj={tooltipData.componentData.hooksIndex
+                  ? tooltipData.componentData.hooksState
+                  : tooltipData.componentData.state}
+              />
             </div>
           </div>
         </TooltipInPortal>

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import JSONTree from 'react-json-tree';
+
+
+const colors = {
+  scheme: 'paraiso',
+  author: 'jan t. sott',
+  base00: '#2f1e2e',
+  base01: '#41323f',
+  base02: '#4f424c',
+  base03: '#776e71',
+  base04: '#8d8687',
+  base05: '#a39e9b',
+  base06: '#b9b6b0',
+  base07: '#e7e9db',
+  base08: '#ef6155',
+  //base09 is orange for booleans and numbers. This base in particular fails to match the entered color.
+  base09: '#824508', 
+// base09: '#592bad', // alternative purple
+  base0A: '#fec418',
+  base0B: '#48b685',
+  base0C: '#5bc4bf',
+  base0D: '#06b6ef',
+  base0E: '#815ba4',
+  base0F: '#e96ba8',
+};
+
+
+const ToolTipDataDisplay = ({ containerName, dataObj }) => {
+  //The key:value properties of printableObject will be rendered in the JSON Tree
+  const printableObject = {}
+  //If state is null rather than an object, print "State: null" in tooltip
+  if (!dataObj) {
+      printableObject[containerName] = dataObj;
+  } else {
+    // Props often contain circular references and messages from the backend must be sent as JSON
+    // objects (strings). JSON objects can't contain circular ref's, so the backend filters out problematic
+    // values by stringifying the values of object properties and ignoring any values that fail the
+    // conversion due to a circular ref. 
+    // The following logic converts these values back to JS so they display clearly and are collapsible.
+    const data = {};
+    for (const key in dataObj) {
+      if (typeof dataObj[key] === 'string') {
+        try {
+          data[key] = JSON.parse(dataObj[key]);
+        } catch {
+          data[key] = dataObj[key];
+        }
+      } else {
+        data[key] = dataObj[key];
+      }
+    }
+    // Adds container name (State, Props, future different names for hooks) at top of object
+    // so everything nested in it will collapse when you click on it.
+    printableObject[containerName] = data
+  }
+
+  return (
+    <div
+      className='tooltipData'
+      key={`${containerName}-data-container`}
+    >
+      <JSONTree
+        data={printableObject}
+        theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }}
+        shouldExpandNode={() => true}
+        hideRoot={true}
+        />
+    </div>
+  )
+};
+
+export default ToolTipDataDisplay;

src/app/components/Tutorial.tsx

@@ -260,7 +260,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           ref={(steps) => (this.steps = steps)}
         />
         <button className='howToUse-button' type='button' onClick={() => startIntro()}>
-          <FontAwesomeIcon icon={faQuestion} /> How to use
+          <FontAwesomeIcon icon={faQuestion} /> Tutorial
         </button>
       </>
     );

src/app/constants/actionTypes.ts

@@ -13,7 +13,6 @@ export const NEW_SNAPSHOTS = 'NEW_SNAPSHOTS';
 export const SET_TAB = 'SET_TAB';
 export const DELETE_TAB = 'DELETE_TAB';
 export const NO_DEV = 'NO_DEV';
-export const TOGGLE_SPLIT = 'TOGGLE_SPLIT';
 export const TOGGLE_EXPANDED = 'TOGGLE_EXPANDED';
 export const LAUNCH_CONTENT = 'LAUNCH_CONTENT';
 export const SLIDER_ZERO = 'SLIDER_ZERO';

src/app/containers/ButtonsContainer.tsx

@@ -8,7 +8,7 @@ import {
   faUnlock,
   faLock,
 } from '@fortawesome/free-solid-svg-icons';
-import { importSnapshots, toggleMode, toggleSplit } from '../actions/actions';
+import { importSnapshots, toggleMode } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 import Tutorial from '../components/Tutorial';
@@ -53,7 +53,7 @@ function importHandler(dispatch: (a: unknown) => void): void {
 }
 
 function ButtonsContainer(): JSX.Element {
-  const [{ tabs, currentTab, split, currentTabInApp }, dispatch] = useStoreContext();
+  const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
   const {
     snapshots,
     mode: { paused },
@@ -62,8 +62,8 @@ function ButtonsContainer(): JSX.Element {
   return (
     <div className='buttons-container'>
       <button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
-        {paused ? <FontAwesomeIcon icon={faUnlock} /> : <FontAwesomeIcon icon={faLock} />}
-        {paused ? 'Unlock' : 'Lock'}
+        {paused ? <FontAwesomeIcon icon={faLock} /> : <FontAwesomeIcon icon={faUnlock} />}
+        {paused ? 'Locked' : 'Unlocked'}
       </button>
       <button className='export-button' type='button' onClick={() => exportHandler(snapshots)}>
         <FontAwesomeIcon icon={faDownload} />