Merge branch 'reactime19.0-Jackie' into feature-testing-add-ts

Author: jasnoo

src/app/components/Action.tsx

@@ -5,27 +5,7 @@
 import React from 'react';
 import ReactHover, { Trigger, Hover } from 'react-hover';
 import { changeView, changeSlider } from '../actions/actions';
-
-/**
- * @template ActionProps Props for the action component
- */
-
-interface ActionProps {
-  key: string;
-  selected: boolean;
-  last: boolean;
-  index: number;
-  sliderIndex: number;
-  dispatch: (a: any) => void;
-  displayName: string;
-  componentName: string;
-  componentData: { actualDuration: number } | undefined;
-  routePath: any;
-  state?: Record<string, unknown>;
-  viewIndex: number | undefined;
-  isCurrIndex: boolean;
-  handleOnkeyDown: (e: any, i: number) => any;
-}
+import { ActionProps } from '../components/FrontendTypes';
 
 /**
  * @function Action
@@ -66,7 +46,7 @@ const Action = (props: ActionProps): JSX.Element => {
       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);
@@ -89,7 +69,7 @@ const Action = (props: ActionProps): JSX.Element => {
   };
   const displayTime: string = cleanTime();
 
-  const optionsCursorTrueWithMargin = {
+  const optionsCursorTrueWithMargin: {} = {
     followCursor: true,
     shiftX: 20,
     shiftY: 0,

src/app/components/App.tsx

@@ -3,20 +3,13 @@ import { MemoryRouter as Router } from 'react-router-dom';
 import MainContainer from '../containers/MainContainer';
 import { StoreContext } from '../store';
 import mainReducer from '../reducers/mainReducer.js';
-
+import { InitialStateProps } from '../components/FrontendTypes';
 // 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).
 // This is used to determine the proper tutorial to render when How To button is pressed.
 
-const initialState: {
-  port: null | number;
-  currentTab: null | number;
-  currentTitle: null | string;
-  split: null | boolean;
-  tabs: unknown;
-  currentTabInApp: null | string;
-} = {
+const initialState: InitialStateProps = {
   port: null,
   currentTab: null,
   currentTitle: 'No Target',

src/app/components/Diff.tsx

@@ -2,23 +2,20 @@ import React from 'react';
 import { diff, formatters } from 'jsondiffpatch';
 import ReactHtmlParser from 'react-html-parser';
 import { useStoreContext } from '../store';
+import { DiffProps, StatelessCleanning } from '../components/FrontendTypes';
 
-interface DiffProps {
-  snapshot: { state?: Record<string, unknown> };
-  show?: boolean | undefined;
-}
 /**
  * Displays tree showing specific two versions of tree
  * one with specific state changes, the other the whole tree
  * @param props props from maincontainer
  * @returns a diff tree or a string stating no state changes have happened
  */
-function Diff(props: DiffProps) {
+function Diff(props: DiffProps): JSX.Element {
   const { snapshot, show } = props;
   const [mainState] = useStoreContext();
   const { currentTab, tabs } = mainState; // k/v pairs of mainstate store object being created
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
-  let previous;
+  let previous:unknown;
 
   // previous follows viewIndex or sliderIndex
   if (viewIndex !== -1) {
@@ -29,13 +26,7 @@ function Diff(props: DiffProps) {
   }
 
   // cleaning preview from stateless data
-  const statelessCleanning = (obj: {
-    name?: string;
-    componentData?: Record<string, unknown>;
-    state?: string | any;
-    stateSnaphot?: Record<string, unknown>;
-    children?: any[];
-  }) => {
+  const statelessCleanning = (obj: StatelessCleanning) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;
@@ -66,13 +57,13 @@ function Diff(props: DiffProps) {
   };
 
   // displays stateful data
-  const previousDisplay = statelessCleanning(previous);
+  const previousDisplay: StatelessCleanning = statelessCleanning(previous);
   // diff function returns a comparison of two objects, one has an updated change
   // just displays stateful data
-  const delta = diff(previousDisplay, snapshot);
+  const delta: StatelessCleanning = diff(previousDisplay, snapshot);
   // returns html in string
   // just displays stateful data
-  const html = formatters.html.format(delta, previousDisplay);
+  const html: StatelessCleanning = formatters.html.format(delta, previousDisplay);
   if (show) formatters.html.showUnchanged();
   else formatters.html.hideUnchanged();
 

src/app/components/DiffRoute.tsx

@@ -1,19 +1,7 @@
 import React from 'react';
 import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
 import Diff from './Diff';
-
-interface DiffRouteProps {
-  snapshot: Record<
-    string,
-    {
-      name?: string;
-      componentData?: Record<string, unknown>;
-      state?: string | unknown;
-      stateSnaphot?: Record<string, unknown>;
-      children?: unknown[];
-    }
-  >;
-}
+import { DiffRouteProps } from '../components/FrontendTypes';
 
 const DiffRoute = (props: DiffRouteProps): JSX.Element => (
   <Router>

src/app/components/Dropdown.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 import Select from 'react-select';
-
-interface DropdownProps {
-  selectedSpeed: { value: number; label: string };
-  speeds: { value: number; label: string }[];
-  setSpeed: () => void;
-}
+import { DropdownProps } from '../components/FrontendTypes'
 
 const Dropdown = (props: DropdownProps): JSX.Element => {
   const { speeds, setSpeed, selectedSpeed } = props;

src/app/components/ErrorMsg.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 
 // parses loadingArray and status and returns the correct message
-function parseError(loadingArray: [], status: any): string {
+function parseError(loadingArray: [], status: Record<string, unknown>): string {
   let stillLoading = true;
   loadingArray.forEach((e) => {
     if (e === false) stillLoading = false;