Skip to content

Commit ac2dc01

Browse files
bmicharebmichare
committed
Working on moving router wrapper up so we can access useLocation within tutorial, checking out web metrics tab
1 parent 8ea77a1 commit ac2dc01

File tree

2 files changed

+196
-96
lines changed

2 files changed

+196
-96
lines changed

‎src/app/components/App.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import React, { useReducer, useState } from 'react';
2+
import {
3+
MemoryRouter as Router,
4+
Route,
5+
NavLink,
6+
Switch,
7+
useLocation,
8+
} from 'react-router-dom';
29
// import { Steps, Hints } from 'intro.js-react';
310
import MainContainer from '../containers/MainContainer';
411
import { StoreContext } from '../store';
512
import mainReducer from '../reducers/mainReducer.js';
613

14+
715
// import 'intro.js/introjs.css';
816

917
// currentTab is the current active tab within Google Chrome. This is used to decide what tab Reactime should be monitoring. This can be "locked"
@@ -26,9 +34,11 @@ const initialState: {
2634

2735
function App(): JSX.Element {
2836
return (
29-
<StoreContext.Provider value={useReducer(mainReducer, initialState)}>
30-
<MainContainer />
31-
</StoreContext.Provider>
37+
<Router>
38+
<StoreContext.Provider value={useReducer(mainReducer, initialState)}>
39+
<MainContainer />
40+
</StoreContext.Provider>
41+
</Router>
3242
);
3343
}
3444

‎src/app/components/Tutorial.tsx

Lines changed: 183 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -2,122 +2,211 @@
22
import * as React from 'react';
33
import { useState, useEffect } from 'react';
44
import { useLocation } from 'react-router-dom';
5-
import { Steps, Hints } from 'intro.js-react';
5+
import { Steps, Hints, introJs } from 'intro.js-react';
66
import 'intro.js/introjs.css';
77
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
88
import { faQuestion } from '@fortawesome/free-solid-svg-icons';
99
import { useStoreContext } from '../store';
1010

11+
const onChangeHandler = () => {
12+
13+
};
14+
1115
export default function Tutorial(): JSX.Element {
1216
const [stepsEnabled, setStepsEnabled] = useState(false);
1317
const [initialStep, setInitialStep] = useState(0);
1418
const [store, dispatch] = useStoreContext();
1519
const { currentTabInApp } = store;
16-
//why is this state rather than just a variable?
17-
const [steps, setSteps] = useState([
18-
{
19-
title: 'Reactime Tutorial',
20-
intro: 'A performance and state managment tool for React apps.',
21-
position: 'top',
22-
},
23-
{
24-
title: 'Actions',
25-
element: '.action-container',
26-
intro: "<ul><li>Reactime records a snapshot whenever a target application's state is changed</li></ul>",
27-
position: 'right',
28-
},
29-
{
30-
element: '.individual-action',
31-
title: 'Snapshot',
32-
intro: '<ul><li>Each snapshot allows the user to jump to any previously recorded state.</li> <li>It also detects the amount of renders of each component and average time of rendering</li></ul>.',
33-
position: 'right',
34-
},
35-
{
36-
title: 'Timejump',
37-
element: '.rc-slider',
38-
intro: '<ul><li>Use the slider to go back in time to a particular state change</li><li>Click the Play button to run through each state change automatically</li></ul>',
39-
position: 'top',
40-
},
41-
{
42-
title: 'Lock Button',
43-
element: '.pause-button',
44-
intro: '<ul><li>Use button to lock Reactime to the target application\'s tab in the Chrome Browser</li></ul>',
45-
position: 'top',
46-
},
47-
{
48-
title: 'Split Button',
49-
element: '.split-button',
50-
intro: '<ul> <li>Use button to split Reactime into two windows in order to view multiple tabs simultaneously</li> </ul>',
51-
position: 'top',
52-
},
53-
{
54-
title: 'Download Button',
55-
element: '.export-button',
56-
intro: '<ul><li>Use button to download a JSON file of all snapshots</li> </ul>',
57-
position: 'top',
58-
},
59-
{
60-
title: 'Upload Button',
61-
element: '.import-button',
62-
intro: '<ul><li>Use button to upload a previously downloaded JSON file for snapshot comparisons</li></ul>',
63-
position: 'top',
64-
},
65-
{
66-
element: '.map-tab',
67-
title: 'Map Tab',
68-
intro: '<ul><li>This tab visually displays a component hierarchy tree for your app</li></ul>',
69-
position: 'bottom',
70-
},
71-
{
72-
title: 'Performance Tab',
73-
element: '.performance-tab',
74-
intro: '<ul><li>User can save a series of state snapshots and use it to analyze changes in component, render performance between current, and previous series of snapshots.</li> <li>User can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots.</li></ul>',
75-
position: 'bottom',
76-
},
77-
{
78-
title: 'History Tab',
79-
element: '.history-tab',
80-
intro: '<ul><li>This tab visually displays a history of each snapshot</li></ul>',
81-
position: 'bottom',
82-
},
83-
{
84-
title: 'Web Metrics Tab',
85-
element: '.web-metrics-tab',
86-
intro: '<ul> <li>This tab visually displays performance metrics and allows the user to gauge efficiency of their application</li></ul>',
87-
position: 'bottom',
88-
},
89-
{
90-
title: 'Tree Tab',
91-
element: '.tree-tab',
92-
intro: '<ul><li>This tab visually displays a JSON Tree containing the different components and states</li></ul>',
93-
position: 'bottom',
94-
},
95-
{
96-
title: 'Tutorial Complete',
97-
intro: '<ul><li>Please visit our official Github Repo for more information </li><br> <li><a href="https://github.com/open-source-labs/reactime" target="_blank">Reactime Github</a></li></ul>',
98-
position: 'top',
99-
},
100-
]);
101-
20+
// why is this state rather than just a variable?
21+
// const [steps, setSteps] = useState([
22+
// {
23+
// title: 'Reactime Tutorial',
24+
// intro: 'A performance and state managment tool for React apps.',
25+
// position: 'top',
26+
// },
27+
// {
28+
// title: 'Actions',
29+
// element: '.action-container',
30+
// intro: "<ul><li>Reactime records a snapshot whenever a target application's state is changed</li></ul>",
31+
// position: 'right',
32+
// },
33+
// {
34+
// element: '.individual-action',
35+
// title: 'Snapshot',
36+
// intro: '<ul><li>Each snapshot allows the user to jump to any previously recorded state.</li> <li>It also detects the amount of renders of each component and average time of rendering</li></ul>.',
37+
// position: 'right',
38+
// },
39+
// {
40+
// title: 'Timejump',
41+
// element: '.rc-slider',
42+
// intro: '<ul><li>Use the slider to go back in time to a particular state change</li><li>Click the Play button to run through each state change automatically</li></ul>',
43+
// position: 'top',
44+
// },
45+
// {
46+
// title: 'Lock Button',
47+
// element: '.pause-button',
48+
// intro: '<ul><li>Use button to lock Reactime to the target application\'s tab in the Chrome Browser</li></ul>',
49+
// position: 'top',
50+
// },
51+
// {
52+
// title: 'Split Button',
53+
// element: '.split-button',
54+
// intro: '<ul> <li>Use button to split Reactime into two windows in order to view multiple tabs simultaneously</li> </ul>',
55+
// position: 'top',
56+
// },
57+
// {
58+
// title: 'Download Button',
59+
// element: '.export-button',
60+
// intro: '<ul><li>Use button to download a JSON file of all snapshots</li> </ul>',
61+
// position: 'top',
62+
// },
63+
// {
64+
// title: 'Upload Button',
65+
// element: '.import-button',
66+
// intro: '<ul><li>Use button to upload a previously downloaded JSON file for snapshot comparisons</li></ul>',
67+
// position: 'top',
68+
// },
69+
// {
70+
// element: '.map-tab',
71+
// title: 'Map Tab',
72+
// intro: '<ul><li>This tab visually displays a component hierarchy tree for your app</li></ul>',
73+
// position: 'bottom',
74+
// },
75+
// {
76+
// title: 'Performance Tab',
77+
// element: '.performance-tab',
78+
// intro: '<ul><li>User can save a series of state snapshots and use it to analyze changes in component, render performance between current, and previous series of snapshots.</li> <li>User can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots.</li></ul>',
79+
// position: 'bottom',
80+
// },
81+
// {
82+
// title: 'History Tab',
83+
// element: '.history-tab',
84+
// intro: '<ul><li>This tab visually displays a history of each snapshot</li></ul>',
85+
// position: 'bottom',
86+
// },
87+
// {
88+
// title: 'Web Metrics Tab',
89+
// element: '.web-metrics-tab',
90+
// intro: '<ul> <li>This tab visually displays performance metrics and allows the user to gauge efficiency of their application</li></ul>',
91+
// position: 'bottom',
92+
// },
93+
// {
94+
// title: 'Tree Tab',
95+
// element: '.tree-tab',
96+
// intro: '<ul><li>This tab visually displays a JSON Tree containing the different components and states</li></ul>',
97+
// position: 'bottom',
98+
// },
99+
// {
100+
// title: 'Tutorial Complete',
101+
// intro: '<ul><li>Please visit our official Github Repo for more information </li><br> <li><a href="https://github.com/open-source-labs/reactime" target="_blank">Reactime Github</a></li></ul>',
102+
// position: 'top',
103+
// },
104+
// ]);
105+
// const location = useLocation();
102106
const onExit = () => {
103107
setStepsEnabled(false);
104108
};
105109
const startIntro = () => {
106110
setStepsEnabled(true);
111+
// console.log(location)
107112
};
108-
let stepsTest = [{
113+
let steps = [{
114+
title: 'Reactime Tutorial',
115+
intro: 'A performance and state managment tool for React apps.',
116+
position: 'top',
117+
},
118+
{
119+
title: 'Actions',
120+
element: '.action-container',
121+
intro: "<ul><li>Reactime records a snapshot whenever a target application's state is changed</li></ul>",
122+
position: 'right',
123+
},
124+
{
125+
element: '.individual-action',
126+
title: 'Snapshot',
127+
intro: '<ul><li>Each snapshot allows the user to jump to any previously recorded state.</li> <li>It also detects the amount of renders of each component and average time of rendering</li></ul>.',
128+
position: 'right',
129+
},
130+
{
131+
title: 'Timejump',
132+
element: '.rc-slider',
133+
intro: '<ul><li>Use the slider to go back in time to a particular state change</li><li>Click the Play button to run through each state change automatically</li></ul>',
134+
position: 'top',
135+
},
136+
{
137+
title: 'Lock Button',
138+
element: '.pause-button',
139+
intro: '<ul><li>Use button to lock Reactime to the target application\'s tab in the Chrome Browser</li></ul>',
140+
position: 'top',
141+
},
142+
{
143+
title: 'Split Button',
144+
element: '.split-button',
145+
intro: '<ul> <li>Use button to split Reactime into two windows in order to view multiple tabs simultaneously</li> </ul>',
146+
position: 'top',
147+
},
148+
{
149+
title: 'Download Button',
150+
element: '.export-button',
151+
intro: '<ul><li>Use button to download a JSON file of all snapshots</li> </ul>',
152+
position: 'top',
153+
},
154+
{
155+
title: 'Upload Button',
156+
element: '.import-button',
157+
intro: '<ul><li>Use button to upload a previously downloaded JSON file for snapshot comparisons</li></ul>',
158+
position: 'top',
159+
},
160+
{
161+
element: '.map-tab',
162+
title: 'Map Tab',
163+
intro: '<ul><li>This tab visually displays a component hierarchy tree for your app</li></ul>',
164+
position: 'bottom',
165+
},
166+
{
167+
title: 'Performance Tab',
168+
element: '.performance-tab',
169+
intro: '<ul><li>User can save a series of state snapshots and use it to analyze changes in component, render performance between current, and previous series of snapshots.</li> <li>User can save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots.</li></ul>',
170+
position: 'bottom',
171+
},
172+
{
173+
title: 'History Tab',
174+
element: '.history-tab',
175+
intro: '<ul><li>This tab visually displays a history of each snapshot</li></ul>',
176+
position: 'bottom',
177+
},
178+
{
179+
title: 'Web Metrics Tab',
180+
element: '.web-metrics-tab',
181+
intro: '<ul> <li>This tab visually displays performance metrics and allows the user to gauge efficiency of their application</li></ul>',
182+
position: 'bottom',
183+
},
184+
{
185+
title: 'Tree Tab',
186+
element: '.tree-tab',
187+
intro: '<ul><li>This tab visually displays a JSON Tree containing the different components and states</li></ul>',
188+
position: 'bottom',
189+
},
190+
{
109191
title: 'Tutorial Complete',
110192
intro: '<ul><li>Please visit our official Github Repo for more information </li><br> <li><a href="https://github.com/open-source-labs/reactime" target="_blank">Reactime Github</a></li></ul>',
111193
position: 'top',
112194
}];
113195

114196
switch (currentTabInApp) {
115197
case 'performance':
116-
stepsTest = [{
117-
title: 'performance',
118-
intro: '<ul><li>Please visit our official Github Repo for more information </li><br> <li><a href="https://github.com/open-source-labs/reactime" target="_blank">Reactime Github</a></li></ul>',
198+
steps = [{
199+
title: 'Welcome to the performance tab!',
200+
element: '.bargraph-position',
201+
intro: '<ul><li>Here we can analyze the render times of our app</li> <li>This is the current series of state changes within our app</li> <li>Mouse over the bargraph elements for details on each specific component</li></ul>',
202+
position: 'top',
203+
},
204+
{
205+
title: 'Save Series Button',
206+
element: '.save-series-button',
207+
intro: '<ul><li>Click here to save our current series data</li></ul>',
119208
position: 'top',
120-
}];
209+
},];
121210
break;
122211
default:
123212
break;
@@ -127,7 +216,7 @@ export default function Tutorial(): JSX.Element {
127216
<>
128217
<Steps
129218
enabled={stepsEnabled}
130-
steps={stepsTest}
219+
steps={steps}
131220
initialStep={initialStep}
132221
onExit={onExit}
133222
options={{
@@ -144,6 +233,7 @@ export default function Tutorial(): JSX.Element {
144233
keyboardNavigation: true,
145234
overlayOpacity: 0.65,
146235
}}
236+
onChange={onChangeHandler}
147237
/>
148238

149239
<button

0 commit comments

Comments
 (0)