Merge pull request #4 from oslabs-beta/reactime19.0-Jackie

Final TypeScript inclusions and cleanup

Author: jasnoo

src/app/components/Action.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import ReactHover, { Trigger, Hover } from 'react-hover';
 import { changeView, changeSlider } from '../actions/actions';
-import { ActionProps } from '../components/FrontendTypes';
+import { ActionProps, OptionsCursorTrueWithMargin } from '../components/FrontendTypes';
 
 /**
  * @function Action
@@ -41,12 +41,12 @@ const Action = (props: ActionProps): JSX.Element => {
    * @function cleanTime: Displays render times for state changes
    * @returns render display time in seconds in milliseconds
    */
-    const cleanTime = ():string => {
+    const cleanTime = (): string => {
     if (!componentData || !componentData.actualDuration) {
       return 'NO TIME';
     }
     let seconds: number | string;
-    let milliseconds: any  = componentData.actualDuration;
+    let milliseconds: any = componentData.actualDuration;
     if (Math.floor(componentData.actualDuration) > 60) {
       seconds = Math.floor(componentData.actualDuration / 60);
       seconds = JSON.stringify(seconds);
@@ -57,8 +57,8 @@ const Action = (props: ActionProps): JSX.Element => {
     } else {
       seconds = '00';
     }
-    milliseconds = Number.parseFloat(milliseconds).toFixed(2);
-    const arrayMilliseconds = milliseconds.split('.');
+    milliseconds = Number.parseFloat(milliseconds as string).toFixed(2);
+    const arrayMilliseconds: string | number = milliseconds.split('.');
     if (arrayMilliseconds[0].length < 2) {
       arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]);
     }
@@ -69,7 +69,7 @@ const Action = (props: ActionProps): JSX.Element => {
   };
   const displayTime: string = cleanTime();
 
-  const optionsCursorTrueWithMargin: {} = {
+  const optionsCursorTrueWithMargin: OptionsCursorTrueWithMargin = {
     followCursor: true,
     shiftX: 20,
     shiftY: 0,
@@ -79,7 +79,7 @@ const Action = (props: ActionProps): JSX.Element => {
     <div className='individual-action'>
       <div
         // Invoking keyboard functionality; functionality is in ActionContainer;
-        onKeyDown={(e) => handleOnkeyDown(e, viewIndex)}
+        onKeyDown={(e):void => handleOnkeyDown(e, viewIndex)}
         className={selected || last ? 'action-component selected' : 'action-component'}
         onClick={() => {
           dispatch(changeView(index));
@@ -112,7 +112,7 @@ const Action = (props: ActionProps): JSX.Element => {
               ) : (
                 <button
                   className='jump-button'
-                  onClick={(e: any): void => {
+                  onClick={(e): void => {
                     e.stopPropagation();
                     dispatch(changeSlider(index));
                     dispatch(changeView(index));

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

@@ -19,21 +19,15 @@ import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
 import { toggleExpanded, setCurrentTabInApp } from '../../../actions/actions';
 import { useStoreContext } from '../../../store';
+import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../components/FrontendTypes'
 
-const defaultMargin: {} = {
+const defaultMargin: DefaultMargin = {
   top: 30,
   left: 30,
   right: 55,
   bottom: 70,
 };
 
-export type LinkTypesProps = {
-  width: number;
-  height: number;
-  margin?: { top: number; right: number; bottom: number; left: number };
-  snapshots: Record<string, unknown>;
-  currentSnapshot?: Record<string, unknown>;
-};
 
 export default function ComponentMap({
   // imported props to be used to display the dendrogram
@@ -95,7 +89,7 @@ export default function ComponentMap({
     scroll: true,
   });
 
-  const tooltipStyles: {} = {
+  const tooltipStyles: ToolTipStyles = {
     ...defaultStyles,
     minWidth: 60,
     maxWidth: 300,

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

@@ -1,12 +1,13 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
+import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../components/FrontendTypes'
 // Font size of the Controls label and Dropdowns
-const controlStyles = {
+const controlStyles: ControlStyles = {
   fontSize: '12px',
   padding: '10px',
 };
-
-const dropDownStyle = {
+ 
+const dropDownStyle: DropDownStyle = {
   margin: '0.5em',
   fontSize: '12px',
   fontFamily: 'Roboto, sans-serif',
@@ -18,24 +19,10 @@ const dropDownStyle = {
   padding: '2px',
 };
 
-type Props = {
-  layout: string;
-  orientation: string;
-  linkType: string;
-  stepPercent: number;
-  selectedNode: string;
-  setLayout: (layout: string) => void;
-  setOrientation: (orientation: string) => void;
-  setLinkType: (linkType: string) => void;
-  setStepPercent: (percent: number) => void;
-  setSelectedNode: (selectedNode: string) => void;
-  snapShots: Record<string, unknown>;
-};
-
 // use BFS to put all the nodes under snapShots(which is the tree node) into an array
-const nodeList = [];
+const nodeList: Node[] = [];
 
-const collectNodes = (node): void => {
+const collectNodes = (node: Node): void => {
   nodeList.splice(0, nodeList.length);
   /* We used the .splice method here to ensure that nodeList
   did not accumulate with page refreshes */
@@ -58,7 +45,7 @@ export default function LinkControls({
   setStepPercent,
   setSelectedNode,
   snapShots,
-}: Props): JSX.Element {
+}: LinkControlProps): JSX.Element {
   collectNodes(snapShots);
 
   return (

src/app/components/StateRoute/ComponentMap/getLinkComponent.ts

@@ -12,16 +12,13 @@ import {
   LinkVerticalLine,
   LinkRadialLine,
 } from '@visx/shape';
+import { LinkComponent } from '../../../components/FrontendTypes'
 
 export default function getLinkComponent({
   layout,
   linkType,
   orientation,
-}: {
-  layout: string;
-  linkType: string;
-  orientation: string;
-}): React.ComponentType<unknown> {
+}: LinkComponent): React.ComponentType<unknown> {
   let LinkComponent: React.ComponentType<unknown>;
 
   if (layout === 'polar') {

src/app/components/StateRoute/History.tsx

@@ -5,18 +5,11 @@ import React, { useEffect } from 'react';
 // formatting findDiff return data to show the changes with colors, aligns with actions.tsx
 import { diff, formatters } from 'jsondiffpatch';
 import * as d3 from 'd3';
-
+import { DefaultMargin } from '../../components/FrontendTypes';
 import { changeView, changeSlider, setCurrentTabInApp } from '../../actions/actions';
 import { useStoreContext } from '../../store';
 
-interface defaultMargin {
-  top: number;
-  left: number;
-  right: number;
-  bottom: number;
-}
-
-const defaultMargin: defaultMargin = {
+const defaultMargin: DefaultMargin = {
   top: 30,
   left: 30,
   right: 55,

src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

@@ -10,14 +10,7 @@ import BarGraphComparison from './BarGraphComparison';
 import BarGraphComparisonActions from './BarGraphComparisonActions';
 import { useStoreContext } from '../../../store';
 import { setCurrentTabInApp } from '../../../actions/actions';
-import { PerfData, Series } from '../../FrontendTypes';
-
-interface PerformanceVisxProps {
-  width: number;
-  height: number;
-  snapshots: [];
-  hierarchy: any;
-}
+import { PerfData, Series, PerformanceVisxProps } from '../../FrontendTypes';
 
 const collectNodes = (snaps, componentName) => {
   const componentsResult = [];

src/app/components/StateRoute/StateRoute.tsx

@@ -14,25 +14,12 @@ import { changeView, changeSlider } from '../../actions/actions';
 import { useStoreContext } from '../../store';
 import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetrics from '../WebMetrics';
+import { StateRouteProps } from '../../components/FrontendTypes'
 
 const History = require('./History').default;
 
 const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 
-export interface StateRouteProps {
-  snapshot: {
-    name?: string;
-    componentData?: object;
-    state?: string | object;
-    stateSnaphot?: object;
-    children?: any[];
-  };
-  hierarchy: any;
-  snapshots: [];
-  viewIndex: number;
-  webMetrics: object;
-  currLocation: object;
-}
 
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props;
@@ -63,7 +50,7 @@ const StateRoute = (props: StateRouteProps) => {
   // 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 send an alert to the user that no state was found.
-  const renderHistory = () => {
+  const renderHistory:JSX.Element = () => {
     if (hierarchy) {
       return (
         <ParentSize>

src/app/components/StateRoute/Tree.tsx

@@ -3,6 +3,7 @@ import JSONTree from 'react-json-tree';
 
 import { setCurrentTabInApp } from '../../actions/actions';
 import { useStoreContext } from '../../store';
+import { TreeProps } from '../../components/FrontendTypes'
 
 const colors = {
   scheme: 'paraiso',
@@ -32,15 +33,6 @@ const getItemString = (type, data: { state?: object | string; name: string; chil
   return <span />;
 };
 
-interface TreeProps {
-  snapshot: {
-    name?: string;
-    componentData?: object;
-    state?: string | object;
-    stateSnaphot?: object;
-    children?: any[];
-  };
-}
 
 const Tree = (props: TreeProps) => {
   const { snapshot } = props;

src/app/components/SwitchApp.tsx

@@ -3,23 +3,23 @@ import Select from 'react-select';
 import { useStoreContext } from '../store';
 import { setTab } from '../actions/actions';
 
-const SwitchAppDropdown = () => {
+const SwitchAppDropdown = (): JSX.Element => {
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
 
-  const tabsArray: any[] = [];
+  const tabsArray: {}[] = [];
   Object.keys(tabs).forEach((tab) => {
     tabsArray.unshift({ value: tab, label: tabs[tab].title });
   });
 
-  const currTab = {
+  const currTab: {} = {
     value: currentTab,
     label: tabs[currentTab].title,
   };
 
-  const customStyles = {
-    menu: (provided, state) => {
-      const outline = state.isSelected ? 'transparent' : 'transparent';
-      const margin = 0;
+  const customStyles: {} = {
+    menu: (provided, state):{} => {
+      const outline: string = state.isSelected ? 'transparent' : 'transparent';
+      const margin: number = 0;
 
       return { ...provided, outline, margin };
     },
@@ -31,7 +31,7 @@ const SwitchAppDropdown = () => {
       classNamePrefix='tab-select'
       value={currTab}
       styles={customStyles}
-      onChange={(e) => {
+      onChange={(e): void => {
         dispatch(setTab(parseInt(e.value, 10)));
       }}
       options={tabsArray}

src/app/components/Tutorial.tsx

@@ -8,23 +8,15 @@ import 'intro.js/introjs.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons';
 import { tutorialSaveSeriesToggle, setCurrentTabInApp } from '../actions/actions';
+import { TutorialProps, TutorialState, StepsObj } from '../components/FrontendTypes';
 
 //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly.
 const { Steps } = require('intro.js-react');
 
-interface tutorialProps {
-  dispatch: (object) => void;
-  currentTabInApp: string;
-}
-
-interface tutorialState {
-  stepsEnabled: boolean;
-}
-
 // This is the tutorial displayed when the "How to use" button is clicked
 // This needs to be a class component to be compatible with updateStepElement from intro.js
-export default class Tutorial extends React.Component<tutorialProps, tutorialState> {
-  constructor(props: tutorialProps) {
+export default class Tutorial extends Component<TutorialProps, TutorialState> {
+  constructor(props: TutorialProps) {
     super(props);
     this.state = {
       stepsEnabled: false,
@@ -82,14 +74,8 @@ export default class Tutorial extends React.Component<tutorialProps, tutorialSta
       this.setState({ stepsEnabled: true });
     };
 
-    interface stepsObj {
-      title: string;
-      element?: string;
-      intro: string;
-      position: string;
-    }
 
-    let steps: stepsObj[] = [];
+    let steps: StepsObj[] = [];
 
     switch (currentTabInApp) {
       case 'map':