Skip to content

Commit c2923d9

Browse files
AndyB909AndyB909
authored
Merge pull request #287 from oslabs-beta/master
Merging reactime 15.0
2 parents 39a03b7 + 0a0e30a commit c2923d9

37 files changed

+9411
-9526
lines changed

‎DeveloperREADME.md

+26-33
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,44 @@
11
<div>
2-
<h1>
3-
Development Enviroment Setup
4-
<h1>
2+
<h1>Development Enviroment Setup</h1>
53

6-
<h2>
7-
Getting Started
8-
<h2>
4+
<h2>Getting Started</h2>
95

10-
<h4>1. Download React Dev Tools from the Chrome Webstore <a href=https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en>
11-
Click Here To Download
12-
</a></h4>
6+
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>
137

14-
<h4>2. Clone down the Reactime repo onto your machine.</h4>
8+
2. Clone down the Reactime repo onto your machine.
159

16-
`````
10+
```
1711
git clone https://github.com/open-source-labs/reactime.git
18-
`````
12+
```
1913

20-
<h4> 3. Install dependencies and build.</h4>
14+
3. Install dependencies and build.
2115

22-
`````
16+
```
2317
cd reactime
2418
npm install --force
2519
npm run build
26-
`````
27-
<h4> 4. Spin up the demo application. </h4>
20+
```
2821

29-
`````
22+
4. Spin up the demo application.
23+
24+
```
3025
cd demo-app
3126
npm install
3227
npm start
33-
`````
34-
<br>
28+
```
3529

36-
<h4>
3730
5. Add Reactime to your Chrome extensions.
38-
<br>
39-
- Navigate to chrome://extensions
40-
<br>
41-
- Select “Load Unpacked”
42-
<br>
43-
- Choose reactime > src > extension > build
44-
<br>
45-
Navigate to http://localhost:8080/ to inspect the demo application using Reactime!
46-
<br>
47-
<br>
48-
<h4>
31+
32+
- Navigate to chrome://extensions
33+
- Select “Load Unpacked”
34+
- Choose reactime > src > extension > build
35+
- Navigate to http://localhost:8080/ to inspect the demo application using Reactime!
36+
<br>
37+
4938
<p align="center">
50-
<img src="./assets/reactime-dev-setup.gif" />
51-
</p>
39+
<img src="./assets/reactime-dev-setup.gif" />
40+
</p>
41+
42+
<h2>Documentation for Consideration</h2>
43+
<h4>Can Reactime be integrated with Redux compatibility so applications using Redux can track state in Reactime?</h4>
44+
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.

‎README.md

+114-85
Large diffs are not rendered by default.

‎assets/components-viewing.gif

1.14 MB
Loading

‎assets/reactime-2022-workflow.png

336 KB
Loading

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,7 @@
192192
"react-split": "^2.0.14",
193193
"recoil": "0.0.10",
194194
"util": "^0.12.4",
195-
"web-vitals": "^1.1.0"
195+
"web-vitals": "^1.1.0",
196+
"yarn": "^1.22.19"
196197
}
197-
}
198+
}

‎src/app/components/Action.tsx

+35-36
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ const Action = (props: ActionProps): JSX.Element => {
5050
sliderIndex,
5151
dispatch,
5252
displayName,
53-
componentName,
5453
componentData,
5554
viewIndex,
5655
isCurrIndex,
@@ -103,46 +102,46 @@ const Action = (props: ActionProps): JSX.Element => {
103102
className={
104103
selected || last ? 'action-component selected' : 'action-component'
105104
}
106-
onClick={() => {
107-
dispatch(changeView(index));
108-
}}
109-
role="presentation"
110-
style={index > sliderIndex ? { color: '#5f6369' } : {}}
111-
tabIndex={index}
112-
>
113-
<ReactHover options={optionsCursorTrueWithMargin}>
114-
<Trigger type="trigger">
115-
<div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
116-
<div className="action-component-text">
117-
<input key={`ActionInput${displayName}`} type="text" className="actionname" placeholder={`Snapshot: ${displayName}`} />
118-
</div>
119-
<button className="time-button" type="button">
120-
{displayTime}
121-
</button>
122-
{
123-
isCurrIndex ? (
124-
<button
125-
className="current-location"
126-
type="button"
127-
>
128-
Current
129-
</button>
130-
)
131-
: (
105+
onClick={() => {
106+
dispatch(changeView(index));
107+
}}
108+
role="presentation"
109+
style={index > sliderIndex ? { color: '#5f6369' } : {}}
110+
tabIndex={index}
111+
>
112+
<ReactHover options={optionsCursorTrueWithMargin}>
113+
<Trigger type="trigger">
114+
<div className="action-component-trigger" style={index > sliderIndex ? { color: '#5f6369' } : {}}>
115+
<div className="action-component-text">
116+
<input key={`ActionInput${displayName}`} type="text" className="actionname" placeholder={`Snapshot: ${displayName}`} />
117+
</div>
118+
<button className="time-button" type="button">
119+
{displayTime}
120+
</button>
121+
{
122+
isCurrIndex ? (
132123
<button
133-
className="jump-button"
134-
onClick={(e: any): void => {
135-
e.stopPropagation();
136-
dispatch(changeSlider(index));
137-
dispatch(changeView(index));
138-
}}
139-
tabIndex={index}
124+
className="current-location"
140125
type="button"
141126
>
142-
Jump
127+
Current
143128
</button>
144129
)
145-
}
130+
: (
131+
<button
132+
className="jump-button"
133+
onClick={(e: any): void => {
134+
e.stopPropagation();
135+
dispatch(changeSlider(index));
136+
dispatch(changeView(index));
137+
}}
138+
tabIndex={index}
139+
type="button"
140+
>
141+
Jump
142+
</button>
143+
)
144+
}
146145
</div>
147146
</Trigger>
148147
<Hover type="hover" />

‎src/app/components/App.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
import React, { useReducer, useState } from 'react';
1+
import React, { useReducer } from 'react';
22
import {
33
MemoryRouter as Router,
4-
Route,
5-
NavLink,
6-
Switch,
7-
useLocation,
84
} from 'react-router-dom';
95
// import { Steps, Hints } from 'intro.js-react';
106
import MainContainer from '../containers/MainContainer';
117
import { StoreContext } from '../store';
128
import mainReducer from '../reducers/mainReducer.js';
139

14-
1510
// import 'intro.js/introjs.css';
1611

17-
// currentTab is the current active tab within Google Chrome. This is used to decide what tab Reactime should be monitoring. This can be "locked"
18-
// 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.
12+
// currentTab is the current active tab within Google Chrome.
13+
// This is used to decide what tab Reactime should be monitoring. This can be "locked"
14+
// currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
15+
// This is used to determine the proper tutorial to render when How To button is pressed.
1916

2017
const initialState: {
2118
port: null | number,

0 commit comments

Comments
 (0)