Merge pull request #2 from oslabs-beta/louis/new-feature

Updated typescript interface and remove deprecated code

src/app/components/Action.tsx

@@ -58,33 +58,33 @@ const Action = (props: ActionProps): JSX.Element => {
 
   /**
    * @function cleanTime: Displays render times for state changes
-   * @returns render display time in seconds in miliseconds
+   * @returns render display time in seconds in milliseconds
    */
   const cleanTime = () => {
     if (!componentData || !componentData.actualDuration) {
       return 'NO TIME';
     }
     let seconds: number | string;
-    let miliseconds: any = componentData.actualDuration;
+    let milliseconds: any = componentData.actualDuration;
     if (Math.floor(componentData.actualDuration) > 60) {
       seconds = Math.floor(componentData.actualDuration / 60);
       seconds = JSON.stringify(seconds);
       if (seconds.length < 2) {
         seconds = '0'.concat(seconds);
       }
-      miliseconds = Math.floor(componentData.actualDuration % 60);
+      milliseconds = Math.floor(componentData.actualDuration % 60);
     } else {
       seconds = '00';
     }
-    miliseconds = Number.parseFloat(miliseconds).toFixed(2);
-    const arrayMiliseconds = miliseconds.split('.');
-    if (arrayMiliseconds[0].length < 2) {
-      arrayMiliseconds[0] = '0'.concat(arrayMiliseconds[0]);
+    milliseconds = Number.parseFloat(milliseconds).toFixed(2);
+    const arrayMilliseconds = milliseconds.split('.');
+    if (arrayMilliseconds[0].length < 2) {
+      arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]);
     }
     if (index === 0) {
-      return `${seconds}:${arrayMiliseconds[0]}.${arrayMiliseconds[1]}`;
+      return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
     }
-    return `+${seconds}:${arrayMiliseconds[0]}.${arrayMiliseconds[1]}`;
+    return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
   };
   const displayTime = cleanTime();
 

src/app/components/App.tsx

@@ -2,13 +2,10 @@ import React, { useReducer } from 'react';
 import {
   MemoryRouter as Router,
 } from 'react-router-dom';
-// import { Steps, Hints } from 'intro.js-react';
 import MainContainer from '../containers/MainContainer';
 import { StoreContext } from '../store';
 import mainReducer from '../reducers/mainReducer.js';
 
-// import 'intro.js/introjs.css';
-
 // currentTab is the current active tab within Google Chrome.
 // This is used to decide what tab Reactime should be monitoring. This can be "locked"
 // currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).

src/app/components/BarGraph.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React, { useEffect, useState } from 'react';
-import { BarStack, Bar } from '@visx/shape';
+import { BarStack } from '@visx/shape';
 import { SeriesPoint } from '@visx/shape/lib/types';
 import { Group } from '@visx/group';
 import { Grid } from '@visx/grid';
@@ -43,6 +43,18 @@ interface TooltipData {
   color: string;
 }
 
+interface BarGraphProps {
+    width: number,
+    height: number,
+    data: Record<string, unknown>,
+    comparison: unknown,
+    setRoute: () => void,
+    allRoutes: unknown,
+    filteredSnapshots: unknown,
+    snapshot: unknown,
+    setSnapshot: () => void
+  }
+
 /* DEFAULTS */
 const margin = {
   top: 30, right: 30, bottom: 0, left: 50,
@@ -59,7 +71,7 @@ const tooltipStyles = {
   fontFamily: 'Roboto',
 };
 
-const BarGraph = props => {
+const BarGraph = (props: BarGraphProps): unknown => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
     width,
@@ -70,7 +82,7 @@ const BarGraph = props => {
     allRoutes,
     filteredSnapshots,
     snapshot,
-    setSnapshot
+    setSnapshot,
   } = props;
   const [seriesNameInput, setSeriesNameInput] = useState(`Series ${comparison.length + 1}`);
   const {

src/app/components/BarGraphComparison.tsx

@@ -17,12 +17,6 @@ import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../actio
 import { useStoreContext } from '../store';
 
 /* TYPESCRIPT */
-interface data {
-  snapshotId?: string;
-}
-interface series {
-  seriesId?: any;
-}
 
 interface margin {
   top: number;
@@ -51,6 +45,16 @@ interface TooltipData {
   color: string;
 }
 
+interface BarGraphComparisonProps {
+  width: number,
+  height: number,
+  data: Record<string, unknown>,
+  comparison: string | [],
+  setSeries: () => void,
+  series: unknown,
+  setAction: () => void,
+  }
+
 /* DEFAULTS */
 const margin = {
   top: 30, right: 30, bottom: 0, left: 50,
@@ -67,10 +71,10 @@ const tooltipStyles = {
   fontFamily: 'Roboto',
 };
 
-const BarGraphComparison = props => {
+const BarGraphComparison = (props: BarGraphComparisonProps): unknown => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
-    width, height, data, comparison, setSeries, series, setAction
+    width, height, data, comparison, setSeries, series, setAction,
   } = props;
   const [snapshots] = React.useState(0);
   const [open, setOpen] = React.useState(false);
@@ -207,7 +211,7 @@ const BarGraphComparison = props => {
     return data.barStack;
   }
   const animateButton = e => {
-    e.preventDefault;
+    e.preventDefault();
     e.target.classList.add('animate');
     e.target.innerHTML = 'Deleted!';
     setTimeout(() => {

src/app/components/Diff.tsx

@@ -28,7 +28,7 @@ function Diff(props: DiffProps) {
   }
 
   // cleaning preview from stateless data
-  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:string|any;stateSnaphot?:object; children?:any[]}) => {
+  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:string|any; stateSnaphot?:object; children?:any[]}) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;

src/app/components/StateRoute.tsx

@@ -22,7 +22,6 @@ import PerformanceVisx from './PerformanceVisx';
 import WebMetrics from './WebMetrics';
 
 const History = require('./History').default;
-const ErrorHandler = require('./ErrorHandler').default;
 
 const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 // eslint-disable-next-line react/prop-types
@@ -64,9 +63,9 @@ const StateRoute = (props: StateRouteProps) => {
 
   // the hierarchy gets set upon the first click on the page
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
-  // if true, we invoke teh D3 render chart with hierarchy
+  // if true, we invoke the D3 render chart with hierarchy
   // by invoking History component, and passing in all the props required to render D3 elements and perform timeJump from clicking of node
-  // otherwise we an alert to the user that no state was found.
+  // otherwise we send an alert to the user that no state was found.
   const renderHistory = () => {
     if (hierarchy) {
       return (

src/app/containers/ActionContainer.tsx

@@ -22,7 +22,7 @@ const resetSlider = () => {
 function ActionContainer(props): JSX.Element {
   const [{ tabs, currentTab, port }, dispatch] = useStoreContext();
   const {
-    currLocation, hierarchy, sliderIndex, viewIndex, snapshots,
+    currLocation, hierarchy, sliderIndex, viewIndex,
   } = tabs[currentTab];
   const {
     toggleActionContainer, actionView, setActionView,
@@ -52,8 +52,6 @@ function ActionContainer(props): JSX.Element {
         state: obj.stateSnapshot.children[0].state,
         componentName: obj.stateSnapshot.children[0].name,
         routePath: obj.stateSnapshot.route.url,
-        // nathan testing new entries for component name, original above
-        // componentName: findDiff(obj.index),
         componentData:
           JSON.stringify(obj.stateSnapshot.children[0].componentData) === '{}'
             ? ''

src/app/containers/ButtonsContainer.tsx

@@ -1,13 +1,9 @@
 // @ts-nocheck
 
 import * as React from 'react';
-import {
-  useState, useRef, useEffect,
-} from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faUpload,
-  faQuestion,
   faDownload,
   faSquare,
   faColumns,
@@ -54,16 +50,11 @@ function importHandler(dispatch: (a: any) => void) {
   fileUpload.click();
 }
 
-function howToUseHandler() {
-  window.open('https://github.com/open-source-labs/reactime', '_blank');
-  return null;
-}
-
 function ButtonsContainer(): JSX.Element {
   const [{ tabs, currentTab, split, currentTabInApp }, dispatch] = useStoreContext();
   const {
     snapshots,
-    mode: { paused, persist },
+    mode: { paused },
   } = tabs[currentTab];
 
   return (
@@ -94,20 +85,6 @@ function ButtonsContainer(): JSX.Element {
         {split ? 'Unsplit' : 'Split'}
       </button>
 
-      {/* removing the UI for now Defunt perist feauture. See docs for more info */}
-      {/* <button
-        className="persist-button"
-        type="button"
-        onClick={() => dispatch(toggleMode('persist'))}
-      >
-        {persist ? (
-          <FontAwesomeIcon icon={faRedoAlt} />
-        ) : (
-          <FontAwesomeIcon icon={faMapPin} />
-        )}
-        {persist ? 'Unpersist' : 'Persist'}
-      </button> */}
-
       <button
         className="export-button"
         type="button"

src/app/containers/ErrorContainer.tsx

@@ -5,7 +5,7 @@ import Loader from '../components/Loader';
 import ErrorMsg from '../components/ErrorMsg';
 import { useStoreContext } from '../store';
 
-function ErrorContainer(props): JSX.Element {
+function ErrorContainer(): any {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTitle, currentTab } = store;
   // hooks for error checks

src/app/containers/MainContainer.tsx

@@ -19,7 +19,7 @@ import {
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 
-function MainContainer(): any {
+function MainContainer(): JSX.Element {
   const [store, dispatch] = useStoreContext();
   const {
     tabs, currentTab, port, split,
@@ -28,6 +28,7 @@ function MainContainer(): any {
   // this function handles Time Jump sidebar view
   const toggleActionContainer = () => {
     setActionView(!actionView);
+    // aside is like an added text that appears "on the side" aside some text.
     const toggleElem = document.querySelector('aside');
     toggleElem.classList.toggle('no-aside');
     // hides the record toggle button from Actions Container in Time Jump sidebar view
@@ -47,15 +48,16 @@ function MainContainer(): any {
     const currentPort = chrome.runtime.connect();
     // listen for a message containing snapshots from the background script
     currentPort.onMessage.addListener(
+    // parameter message is an object with following type script properties
       (message: {
         action: string;
         payload: Record<string, unknown>;
         sourceTab: number;
       }) => {
         const { action, payload, sourceTab } = message;
-        let maxTab;
+        let maxTab: number;
         if (!sourceTab) {
-          const tabsArray: any = Object.keys(payload);
+          const tabsArray: Array<string> = Object.keys(payload);
           maxTab = Math.max(...tabsArray);
         }
         switch (action) {
@@ -92,7 +94,7 @@ function MainContainer(): any {
     );
 
     currentPort.onDisconnect.addListener(() => {
-      console.log('this port is disconeccting line 79');
+      console.log('this port is disconnecting line 79');
       // disconnecting
     });
 

src/app/containers/StateContainer.tsx

@@ -1,5 +1,8 @@
 // @ts-nocheck
 import React, { useState } from 'react';
+/* <Router> that keeps the history of your “URL” in memory (does not read/write to the address bar)
+ Useful in tests and non-browser environments like React Native.
+*/
 import {
   MemoryRouter as Router,
   Route,
@@ -8,6 +11,7 @@ import {
 } from 'react-router-dom';
 import StateRoute from '../components/StateRoute';
 import DiffRoute from '../components/DiffRoute';
+
 interface StateContainerProps {
   snapshot: Record<
     number,
@@ -36,7 +40,6 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
     viewIndex,
     webMetrics,
     currLocation,
-    // added snapshots, Rob 11/4
     snapshots,
   } = props;
 

src/app/containers/TravelContainer.tsx

@@ -40,15 +40,14 @@ interface TravelContainerProps {
   snapshotsLength: number,
 }
 
-function TravelContainer(props:TravelContainerProps) {
+function TravelContainer(props:TravelContainerProps): JSX.Element {
   const { snapshotsLength } = props;
   const [selectedSpeed, setSpeed] = useState(speeds[1]);
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { sliderIndex, playing } = tabs[currentTab];
 
   return (
     <div className="travel-container">
-
       <button
         className="play-button"
         type="button"

src/backend/helpers.ts

@@ -80,6 +80,7 @@ export const getHooksNames = (elementType: string): Array<string> => {
     return ['unknown'];
   }
 
+  // hookNames will contain an object with methods (functions)
   const hooksNames: any = {};
 
   // Begin search for hook names, only if ast has a body property.

src/backend/linkFiber.ts

@@ -360,7 +360,9 @@ function createTree(
  * linkFiber contains core module functionality, exported as an anonymous function.
  */
 export default (snap: Snapshot, mode: Mode): (() => void) => {
+  // checks for visiblity of document
   function onVisibilityChange(): void {
+    // hidden property = background tab/minimized window
     doWork = !document.hidden;
   }
   return () => {
@@ -372,7 +374,7 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       action: 'devToolsInstalled',
       payload: 'devToolsInstalled'
     }, '*');
-    // reactInstance returns an object of the react
+    // reactInstance returns an object of the react, 1st element in map
     const reactInstance = devTools.renderers.get(1);
     // if no React Instance found then target is not a compatible app
     if (!reactInstance) { return; }