Codebase Cleanup

Author: DennisLpz

src/app/components/BarGraph.tsx

@@ -9,7 +9,6 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
 import { schemeSet3 } from 'd3-scale-chromatic';
-import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { save } from '../actions/actions';

src/app/components/BarGraphComparison.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useForceUpdate } from 'react';
+import React from 'react';
 import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
@@ -8,15 +8,11 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
 import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
 import { Text } from '@visx/text';
-
 import { schemeSet3 } from 'd3-scale-chromatic';
 import { makeStyles } from '@material-ui/core/styles';
 import Select from '@material-ui/core/Select';
-import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import snapshots from './snapshots';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { deleteSeries } from '../actions/actions';

src/app/components/WebMetrics.tsx

@@ -1,104 +1,102 @@
-import React, { useState, useEffect, Component } from 'react';
+import React from 'react';
 import Charts from 'react-apexcharts';
-import useForceUpdate from './useForceUpdate';
 
 const radialGraph = (props) => {
+  const state = {
+    series: [props.series],
+    options: {
+      colors: [props.color],
+      chart: {
+        height: 100,
+        width: 100,
+        type: 'radialBar',
+        toolbar: {
+          show: false,
+        },
+      },
+      plotOptions: {
+        radialBar: {
+          startAngle: -135,
+          endAngle: 135,
+          hollow: {
+            margin: 0,
+            size: '75%',
+            background: '#242529',
+            image: undefined,
+            imageOffsetX: 0,
+            imageOffsetY: 0,
+            position: 'front',
+            dropShadow: {
+              enabled: false,
+              top: 3,
+              left: 0,
+              blur: 4,
+              opacity: 0.24,
+            },
+          },
+          track: {
+            background: '#fff',
+            strokeWidth: '3%',
+            margin: 0, // margin is in pixels
+            dropShadow: {
+              enabled: true,
+              top: -3,
+              left: 0,
+              blur: 4,
+              opacity: 0.35,
+            },
+          },
 
-		const state = {
-		
-			series: [props.series],
-			options: {
-				colors: [props.color],
-				chart: {
-					height: 100,
-					width: 100,
-					type: 'radialBar',
-					toolbar: {
-						show: false,
-					}
-				},
-				plotOptions: {
-					radialBar: {
-						startAngle: -135,
-						endAngle: 135,
-						 hollow: {
-							margin: 0,
-							size: '75%',
-							background: '#242529',
-							image: undefined,
-							imageOffsetX: 0,
-							imageOffsetY: 0,
-							position: 'front',
-							dropShadow: {
-								enabled: false,
-								top: 3,
-								left: 0,
-								blur: 4,
-								opacity: 0.24
-							}
-						},
-						track: {
-							background: '#fff',
-							strokeWidth: '3%',
-							margin: 0, // margin is in pixels
-							dropShadow: {
-								enabled: true,
-								top: -3,
-								left: 0,
-								blur: 4,
-								opacity: 0.35
-							}
-						},
-				
-						dataLabels: {
-							show: true,
-							name: {
-								offsetY: -10,
-								show: true,
-								color: '#fff',
-								fontSize: '24px'
-							},
-							value: {
-								formatter: props.formatted,
-								color: '#fff',
-								fontSize: '16px',
-								show: true,
-							}
-						}
-					}
-				},
-				fill: {
-					type: 'solid',
-					gradient: {
-						shade: 'dark',
-						type: 'horizontal',
-						shadeIntensity: 0.1,
-						gradientToColors: [props.color],
-						inverseColors: false,
-						opacityFrom: 1,
-						opacityTo: 1,
-						stops: [0, 100]
-					}
-				},
-				stroke: {
-					lineCap: 'flat'
-				},
-				labels: [props.label],
-			},		
-    };
+          dataLabels: {
+            show: true,
+            name: {
+              offsetY: -10,
+              show: true,
+              color: '#fff',
+              fontSize: '24px',
+            },
+            value: {
+              formatter: props.formatted,
+              color: '#fff',
+              fontSize: '16px',
+              show: true,
+            },
+          },
+        },
+      },
+      fill: {
+        type: 'solid',
+        gradient: {
+          shade: 'dark',
+          type: 'horizontal',
+          shadeIntensity: 0.1,
+          gradientToColors: [props.color],
+          inverseColors: false,
+          opacityFrom: 1,
+          opacityTo: 1,
+          stops: [0, 100],
+        },
+      },
+      stroke: {
+        lineCap: 'flat',
+      },
+      labels: [props.label],
+    },
+  };
 
+  return (
+    <div id='card'>
+      <div id='chart'>
+        <Charts
+          options={state.options}
+          series={state.series}
+          type='radialBar'
+          height={250}
+          width={250}
+        />
+      </div>
+    </div>
+  );
+};
 
-		return (
-			
-
-<div id="card">
-	<div id="chart">
-		<Charts options={state.options} series={state.series} type="radialBar" height={250} width={250}/>
-	</div>
-</div>
-
-		)
-}
-
-
-export default radialGraph;
+export default radialGraph;

src/app/containers/ActionContainer.tsx

@@ -1,9 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import { diff } from 'jsondiffpatch';
 import Action from '../components/Action';
 import SwitchAppDropdown from '../components/SwitchApp';
-
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { useEffect } from 'react';

src/app/containers/ButtonsContainer.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-
 import { importSnapshots, toggleMode } from '../actions/actions';
 import { useStoreContext } from '../store';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

src/app/containers/StateContainer.tsx

@@ -47,21 +47,6 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
       <div className='state-container'>
         <div className='main-navbar-container'>
           <div className='main-navbar-text'>
-            {' '}
-            {/* <button
-              id='side-bar-button'
-              className='toggleAC'
-              onClick={() => toggleActionContainer()}
-            >
-              Close
-            </button> */}
-            {/* <div className='toggleAC'>
-              <aside className='no-aside'>
-                <a className='toggle'>
-                  <i></i>
-                </a>
-              </aside>
-            </div> */}
           </div>
           <div className='main-navbar'>
             <NavLink

src/app/reducers/mainReducer.js

@@ -31,22 +31,23 @@ export default (state, action) =>
     };
 
     switch (action.type) {
+      // Save case will store the series user wants to save to the chrome local storage
       case types.SAVE: {
         const data = JSON.stringify(action.payload);
         localStorage.setItem(`${action.payload.currentTab}`, data);
         break;
       }
+      // Delete case will delete ALL stored series in chrome local storage. To see  chrome storage related data
+      // Chrome Extension Manager (chrome:extensions) --> background page link --> Application Tab
       case types.DELETE_SERIES: {
         const allStorage = () => {
           const keys = Object.keys(localStorage);
           let i = keys.length;
           while (i--) {
             localStorage.removeItem(keys[i]);
           }
-          //return values;
         };
         allStorage();
-
         Object.keys(tabs).forEach((tab) => {
           tabs[tab] = {
             ...tabs[tab],

src/app/styles/components/_buttons.scss

@@ -315,7 +315,7 @@ aside {
   position: relative;
   margin-top: 1rem;
 }
-
+/* toggle i handles arrow animation */
 .toggle i,
 .toggle i::after,
 .toggle i::before {
@@ -364,4 +364,5 @@ aside {
   height: 20px !important;
   margin-bottom: 40px;
   margin-right: 20px;
-}
+}
+/* ^ sidebar button open and closing functionality */

src/app/styles/layout/_stateContainer.scss

@@ -161,20 +161,9 @@
 .performance-nav-bar-container {
   background-color: $navbar-color;
   display: flex;
-  //   flex-direction: row;
-  //   justify-content: start;
-  //   align-items: center;
   height: 30px;
 }
 
-// .router-link-performance {
-//   width: 34%;
-//   // justify-content: center;
-//   // align-items: center;
-//   background-color: $medium-background-color;
-//   text-decoration: none;
-//   color: $text-color;
-// }
 .router-link-performance {
   height: 100%;
   width: 34%;
@@ -196,14 +185,9 @@
 
 // Web Metrics Container
 .web-metrics-container {
-
-  // padding: 3rem;
-  // display: grid;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 3rem;
-  // grid-template-columns: repeat(2, 1fr);
-  // grid-template-rows: repeat(2, 1fr);
-}
+}

src/backend/index.ts

@@ -29,18 +29,6 @@ const mode: Mode = {
 const linkFiber = linkFiberStart(snapShot, mode);
 const timeJump = timeJumpStart(snapShot, mode);
 
-// function getRouteURL(node: SnapshotNode): string {
-//   if (node.name === 'Router') {
-//     return node.state.location.pathname;
-//   }
-//   if (node.children && node.children.length >= 1) {
-//     const tempNode: any[] = node.children;
-//     for (let index = 0; index < tempNode.length; index += 1) {
-//       return getRouteURL(tempNode[index]); // Carlos: ???
-//     }
-//   }
-// }
-
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
   switch (action) {