Merge pull request #287 from oslabs-beta/master

Merging reactime 15.0

DeveloperREADME.md

@@ -1,51 +1,44 @@
 <div>
-<h1>
-Development Enviroment Setup
-<h1>
+<h1>Development Enviroment Setup</h1>
 
-<h2>
-Getting Started 
-<h2>
+<h2>Getting Started</h2>
 
-<h4>1. Download React Dev Tools from the Chrome Webstore <a href=https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en>
-Click Here To Download
-</a></h4>
+1. <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">Download React Dev Tools from the Chrome Webstore Here</a>
 
-<h4>2. Clone down the Reactime repo onto your machine.</h4>
+2. Clone down the Reactime repo onto your machine.
 
-`````
+```
 git clone https://github.com/open-source-labs/reactime.git
-`````
+```
 
-<h4> 3. Install dependencies and build.</h4>
+3. Install dependencies and build.
 
-`````
+```
 cd reactime
 npm install --force
 npm run build
-`````
-<h4> 4. Spin up the demo application. </h4>
+```
 
-`````
+4. Spin up the demo application.
+
+```
 cd demo-app
 npm install
 npm start
-`````
-<br>
+```
 
-<h4>
 5. Add Reactime to your Chrome extensions.
-<br>
-- Navigate to chrome://extensions
-<br>
-- Select “Load Unpacked”
-<br>
-- Choose reactime > src > extension > build
-<br>
-Navigate to http://localhost:8080/ to inspect the demo application using Reactime!
-<br>
-<br>
-<h4>
+
+-   Navigate to chrome://extensions
+-   Select “Load Unpacked”
+-   Choose reactime > src > extension > build
+-   Navigate to http://localhost:8080/ to inspect the demo application using Reactime!
+    <br>
+
 <p align="center">
-<img src="./assets/reactime-dev-setup.gif" />
-</p>
+  <img src="./assets/reactime-dev-setup.gif" />
+</p>
+
+<h2>Documentation for Consideration</h2>
+<h4>Can Reactime be integrated with Redux compatibility so applications using Redux can track state in Reactime?</h4>
+Yes, but it would be very time-consuming and not the most feasible option while Redux devtools exists already. With how Redux devtools is currently set up, a developer is unable to use Redux devtools as a third-party user and integrate its functionality into their own application, as Redux devtools is meant to be used directly on an application using Redux for state-tracking purposes. Since the devtools do not appear to have a public API for integrated use in an application or it simply does not exist, Redux devtools would need to be rebuilt from the ground up and then integrated into Reactime, or built into Reactime directly still from scratch.

package.json

@@ -192,6 +192,7 @@
     "react-split": "^2.0.14",
     "recoil": "0.0.10",
     "util": "^0.12.4",
-    "web-vitals": "^1.1.0"
+    "web-vitals": "^1.1.0",
+    "yarn": "^1.22.19"
   }
-}
+}

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,21 +1,18 @@
-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';
 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). 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,