Removing console logs and fix some eslint and typescript bug

Co-authored-by: Ozair Ghulam https://github.com/OzairGh
Co-authored-by: Christina Or https://github.com/christinaor
Co-authored-by: Khanh Bui https://github.com/AndyB909

Author: d28601581

src/app/components/Action.tsx

@@ -50,7 +50,6 @@ const Action = (props: ActionProps): JSX.Element => {
     sliderIndex,
     dispatch,
     displayName,
-    componentName,
     componentData,
     viewIndex,
     isCurrIndex,
@@ -103,46 +102,46 @@ const Action = (props: ActionProps): JSX.Element => {
         className={
         selected || last ? 'action-component selected' : 'action-component'
       }
-      onClick={() => {
-        dispatch(changeView(index));
-      }}
-      role="presentation"
-      style={index > sliderIndex ? { color: '#5f6369' } : {}}
-      tabIndex={index}
-    >
-      <ReactHover options={optionsCursorTrueWithMargin}>
-        <Trigger type="trigger">
-          <div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
-            <div className="action-component-text">
-              <input key={`ActionInput${displayName}`} type="text" className="actionname" placeholder={`Snapshot: ${displayName}`} />
-            </div>
-            <button className="time-button" type="button">
-              {displayTime}
-            </button>
-            {
-              isCurrIndex ? (
-                <button
-                  className="current-location"
-                  type="button"
-                >
-                  Current
-                </button>
-              )
-                : (
+        onClick={() => {
+          dispatch(changeView(index));
+        }}
+        role="presentation"
+        style={index > sliderIndex ? { color: '#5f6369' } : {}}
+        tabIndex={index}
+      >
+        <ReactHover options={optionsCursorTrueWithMargin}>
+          <Trigger type="trigger">
+            <div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
+              <div className="action-component-text">
+                <input key={`ActionInput${displayName}`} type="text" className="actionname" placeholder={`Snapshot: ${displayName}`} />
+              </div>
+              <button className="time-button" type="button">
+                {displayTime}
+              </button>
+              {
+                isCurrIndex ? (
                   <button
-                    className="jump-button"
-                    onClick={(e: any): void => {
-                      e.stopPropagation();
-                      dispatch(changeSlider(index));
-                      dispatch(changeView(index));
-                    }}
-                    tabIndex={index}
+                    className="current-location"
                     type="button"
                   >
-                    Jump
+                    Current
                   </button>
                 )
-            }
+                  : (
+                    <button
+                      className="jump-button"
+                      onClick={(e: any): void => {
+                        e.stopPropagation();
+                        dispatch(changeSlider(index));
+                        dispatch(changeView(index));
+                      }}
+                      tabIndex={index}
+                      type="button"
+                    >
+                      Jump
+                    </button>
+                  )
+              }
             </div>
           </Trigger>
           <Hover type="hover" />

src/app/components/App.tsx

@@ -1,10 +1,6 @@
-import React, { useReducer, useState } from 'react';
+import React, { useReducer } from 'react';
 import {
   MemoryRouter as Router,
-  Route,
-  NavLink,
-  Switch,
-  useLocation,
 } from 'react-router-dom';
 // import { Steps, Hints } from 'intro.js-react';
 import MainContainer from '../containers/MainContainer';
@@ -13,8 +9,10 @@ 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). This is used to determine the proper tutorial to render when How To button is pressed.
+// 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,