Skip to content

Commit 2ce1674

Browse files
rxlinarxlina
authored
Merge pull request #1 from oslabs-beta/andy
added modules to be able to run properly
2 parents a7f76a0 + 33f921e commit 2ce1674

File tree

6 files changed

+101
-108
lines changed

6 files changed

+101
-108
lines changed

‎src/app/components/DiffRoute.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface DiffRouteProps{
1111
state?: string | unknown
1212
stateSnaphot?: Record<string, unknown>;
1313
children?: unknown[];
14-
atomSelectors?:object;
14+
atomSelectors?:object;
1515
atomsComponents?:object
1616
}>;
1717
}

‎src/app/components/StateRoute.tsx

Lines changed: 50 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ import WebMetrics from './WebMetrics';
2525
const History = require('./History').default;
2626
const ErrorHandler = require('./ErrorHandler').default;
2727

28-
const NO_STATE_MSG =
29-
'No state change detected. Trigger an event to change state';
28+
const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
3029
// eslint-disable-next-line react/prop-types
3130

3231
export interface StateRouteProps {
@@ -49,7 +48,7 @@ const StateRoute = (props: StateRouteProps) => {
4948
const { snapshot, hierarchy, snapshots, viewIndex, webMetrics } = props;
5049
const [{ tabs, currentTab }, dispatch] = useStoreContext();
5150
const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
52-
const isRecoil = snapshot.atomsComponents ? true : false;
51+
const isRecoil = !!snapshot.atomsComponents;
5352

5453
const [noRenderData, setNoRenderData] = useState(false);
5554
// component map zoom state
@@ -69,7 +68,7 @@ const StateRoute = (props: StateRouteProps) => {
6968
</ParentSize>
7069
);
7170
}
72-
return <div className='noState'>{NO_STATE_MSG}</div>;
71+
return <div className="noState">{NO_STATE_MSG}</div>;
7372
};
7473

7574
// the hierarchy gets set upon the first click on the page
@@ -88,7 +87,7 @@ const StateRoute = (props: StateRouteProps) => {
8887
/>
8988
);
9089
}
91-
return <div className='noState'>{NO_STATE_MSG}</div>;
90+
return <div className="noState">{NO_STATE_MSG}</div>;
9291
};
9392

9493
const renderAtomsRelationship = () => (
@@ -112,10 +111,11 @@ const StateRoute = (props: StateRouteProps) => {
112111
if (hierarchy) {
113112
return <Tree snapshot={snapshot} />;
114113
}
115-
return <div className='noState'>{NO_STATE_MSG}</div>;
114+
return <div className="noState">{NO_STATE_MSG}</div>;
116115
};
117116
const renderWebMetrics = () => {
118-
let LCPColor, FIDColor, FCPColor, TTFBColor;
117+
let LCPColor; let FIDColor; let FCPColor; let
118+
TTFBColor;
119119

120120
if (webMetrics.LCP <= 2000) LCPColor = '#0bce6b';
121121
if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = '#E56543';
@@ -130,44 +130,40 @@ const StateRoute = (props: StateRouteProps) => {
130130
if (webMetrics.TTFB > 600) TTFBColor = '#fc2000';
131131

132132
return (
133-
<div className='web-metrics-container'>
133+
<div className="web-metrics-container">
134134
<WebMetrics
135135
color={LCPColor}
136136
series={(webMetrics.LCP / 2500) * 100}
137-
formatted={(val) => {
138-
return Number.isNaN(val)
139-
? '- ms'
140-
: ((val / 100) * 2500).toFixed(2) + ' ms';
141-
}}
142-
label='LCP'
143-
name='Largest Contentful Paint'
144-
description='Measures loading performance. The benchmark is less than 2500 ms.'
137+
formatted={val => (Number.isNaN(val)
138+
? '- ms'
139+
: `${((val / 100) * 2500).toFixed(2)} ms`)}
140+
label="LCP"
141+
name="Largest Contentful Paint"
142+
description="Measures loading performance. The benchmark is less than 2500 ms."
145143
/>
146144
<WebMetrics
147145
color={FIDColor}
148146
series={webMetrics.FID * 25}
149-
formatted={(val) => {
150-
return Number.isNaN(val) ? '- ms' : (val / 25).toFixed(2) + ' ms';
151-
}}
152-
label='FID'
153-
name='First Input Delay'
154-
description='Measures interactivity. The benchmark is less than 100 ms.'
147+
formatted={val => (Number.isNaN(val) ? '- ms' : `${(val / 25).toFixed(2)} ms`)}
148+
label="FID"
149+
name="First Input Delay"
150+
description="Measures interactivity. The benchmark is less than 100 ms."
155151
/>
156152
<WebMetrics
157153
color={FCPColor}
158154
series={(webMetrics.FCP / 1000) * 100}
159-
formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'}
160-
label='FCP'
161-
name='First Contentful Paint'
162-
description='Measures the time it takes the browser to render the first piece of DOM content. No benchmark.'
155+
formatted={val => `${((val / 100) * 1000).toFixed(2)} ms`}
156+
label="FCP"
157+
name="First Contentful Paint"
158+
description="Measures the time it takes the browser to render the first piece of DOM content. No benchmark."
163159
/>
164160
<WebMetrics
165161
color={TTFBColor}
166162
series={(webMetrics.TTFB / 10) * 100}
167-
formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'}
168-
label='TTFB'
169-
name='Time to First Byte'
170-
description='Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms.'
163+
formatted={val => `${((val / 100) * 10).toFixed(2)} ms`}
164+
label="TTFB"
165+
name="Time to First Byte"
166+
description="Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms."
171167
/>
172168
</div>
173169
);
@@ -190,61 +186,61 @@ const StateRoute = (props: StateRouteProps) => {
190186
</ParentSize>
191187
);
192188
}
193-
return <div className='noState'>{NO_STATE_MSG}</div>;
189+
return <div className="noState">{NO_STATE_MSG}</div>;
194190
};
195191

196192
return (
197193
<Router>
198-
<div className='navbar'>
194+
<div className="navbar">
199195
<NavLink
200-
className='router-link'
201-
activeClassName='is-active'
196+
className="router-link"
197+
activeClassName="is-active"
202198
exact
203-
to='/'
199+
to="/"
204200
>
205201
Map
206202
</NavLink>
207203
<NavLink
208-
className='router-link'
209-
activeClassName='is-active'
210-
to='/performance'
204+
className="router-link"
205+
activeClassName="is-active"
206+
to="/performance"
211207
>
212208
Performance
213209
</NavLink>
214210
<NavLink
215-
className='router-link'
216-
activeClassName='is-active'
217-
to='/history'
211+
className="router-link"
212+
activeClassName="is-active"
213+
to="/history"
218214
>
219215
History
220216
</NavLink>
221217
<NavLink
222-
className='router-link'
223-
activeClassName='is-active'
224-
to='/webMetrics'
218+
className="router-link"
219+
activeClassName="is-active"
220+
to="/webMetrics"
225221
>
226222
Web Metrics
227223
</NavLink>
228-
<NavLink className='router-link' activeClassName='is-active' to='/tree'>
224+
<NavLink className="router-link" activeClassName="is-active" to="/tree">
229225
Tree
230226
</NavLink>
231227
{isRecoil && (
232228
<NavLink
233-
className='router-link'
234-
activeClassName='is-active'
235-
to='/relationship'
229+
className="router-link"
230+
activeClassName="is-active"
231+
to="/relationship"
236232
>
237233
AtomsRecoil
238234
</NavLink>
239235
)}
240236
</div>
241237
<Switch>
242-
<Route path='/performance' render={renderPerfView} />
243-
<Route path='/history' render={renderHistory} />
244-
<Route path='/relationship' render={renderAtomsRelationship} />
245-
<Route path='/webMetrics' render={renderWebMetrics} />
246-
<Route path='/tree' render={renderTree} />
247-
<Route path='/' render={renderComponentMap} />
238+
<Route path="/performance" render={renderPerfView} />
239+
<Route path="/history" render={renderHistory} />
240+
<Route path="/relationship" render={renderAtomsRelationship} />
241+
<Route path="/webMetrics" render={renderWebMetrics} />
242+
<Route path="/tree" render={renderTree} />
243+
<Route path="/" render={renderComponentMap} />
248244
</Switch>
249245
</Router>
250246
);

‎src/app/components/WebMetrics.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import Charts from 'react-apexcharts';
33
import ReactHover, { Trigger, Hover } from 'react-hover';
44

5-
const radialGraph = (props) => {
5+
const radialGraph = props => {
66
const state = {
77
series: [props.series],
88
options: {
@@ -91,21 +91,21 @@ const radialGraph = (props) => {
9191
};
9292

9393
return (
94-
<div className='metric'>
94+
<div className="metric">
9595
<ReactHover options={optionsCursorTrueWithMargin}>
96-
<Trigger type='trigger'>
97-
<div id='chart'>
96+
<Trigger type="trigger">
97+
<div id="chart">
9898
<Charts
9999
options={state.options}
100100
series={state.series}
101-
type='radialBar'
101+
type="radialBar"
102102
height={200}
103103
width={200}
104104
/>
105105
</div>
106106
</Trigger>
107-
<Hover type='hover'>
108-
<div style={{ padding: '0.5rem 1rem' }} id='hover-box'>
107+
<Hover type="hover">
108+
<div style={{ padding: '0.5rem 1rem' }} id="hover-box">
109109
<p>
110110
<strong>{props.name}</strong>
111111
</p>

‎src/app/module.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,7 @@ declare module 'react-json-tree';
1111
declare module 'react-router-dom';
1212
declare module 'enzyme-adapter-react-16';
1313
declare module 'enzyme';
14+
declare module 'react-apexcharts';
15+
declare module 'react-hover';
16+
declare module 'crypto';
17+
declare module 'cookie';

‎src/app/user_id/user_id.js

Lines changed: 37 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,66 @@
1-
const crypto = require("crypto");
1+
const crypto = require('crypto');
22

3-
const cookie = require("cookie");
3+
const cookie = require('cookie');
44

5-
class MPID{
6-
constructor(){
7-
this.cookie = null;
5+
class MPID {
6+
constructor() {
7+
this.cookie = null;
88
this.distinct_id = null;
9-
this.debug = false;
9+
this.debug = false;
1010
}
1111

12-
setCookie(){
13-
//create a string of random data
14-
this.cookie = cookie.serialize("reactime", crypto.randomBytes(64).toString('hex') );
12+
setCookie() {
13+
// create a string of random data
14+
this.cookie = cookie.serialize('reactime', crypto.randomBytes(64).toString('hex'));
1515
this.distinct_id = this.cookie?.reactime?.slice(0, 20);
16-
if(this.cookie){
17-
return this.cookie;
18-
}else{
19-
throw new Error("Unable to set cookie. Cookie is falsey");
16+
if (this.cookie) {
17+
return this.cookie;
2018
}
21-
19+
throw new Error('Unable to set cookie. Cookie is falsey');
2220
}
2321

24-
getCookie(){
25-
if(this.cookie){
26-
//this.distinct_id = parsedCookie?.reactime?.slice(0, 20);
22+
getCookie() {
23+
if (this.cookie) {
24+
// this.distinct_id = parsedCookie?.reactime?.slice(0, 20);
2725
return this.cookie;
28-
}else{
29-
throw new Error("Cookie truthy, but unreturnable");
3026
}
31-
27+
throw new Error('Cookie truthy, but unreturnable');
3228
}
3329

34-
checkDocumentCookie(doc){
35-
let parsedCookie = cookie.parse(doc.cookie);
36-
37-
if( parsedCookie?.reactime ){
38-
this.cookie = parsedCookie?.reactime;
39-
if(!this.distinct_id){
30+
checkDocumentCookie(doc) {
31+
const parsedCookie = cookie.parse(doc.cookie);
32+
33+
if (parsedCookie?.reactime) {
34+
this.cookie = parsedCookie?.reactime;
35+
if (!this.distinct_id) {
4036
this.distinct_id = parsedCookie?.reactime?.slice(0, 20);
4137
}
42-
return true;
43-
}else{
44-
this.setCookie();
45-
return false;
38+
return true;
4639
}
40+
this.setCookie();
41+
return false;
4742
}
4843

49-
get_dId(){
50-
try{
51-
if(this.distinct_id ) {
44+
get_dId() {
45+
try {
46+
if (this.distinct_id) {
5247
return this.distinct_id;
53-
}else{
54-
55-
//return this.checkDocumentCookie
5648
}
57-
}catch( e ){
49+
50+
// return this.checkDocumentCookie
51+
} catch (e) {
5852
throw new Error(`unable to set cookie. Reason: ${e}. `);
5953
}
6054
}
6155
}
6256

63-
6457
export default MPID;
6558

66-
//example:
67-
// 1. User opens app.
68-
//let user = new MPID(document.cookie);
69-
//if usercookie exists
70-
// 2. document.cookie to check if any cookies are available.
59+
// example:
60+
// 1. User opens app.
61+
// let user = new MPID(document.cookie);
62+
// if usercookie exists
63+
// 2. document.cookie to check if any cookies are available.
7164
// 3. pass to getCookie
7265
// 4. if we id a cookie as ours.
73-
// 5. use that for mixpanel tracking.
66+
// 5. use that for mixpanel tracking.

‎webpack.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ const config = {
1717
path: path.resolve(__dirname, 'src/extension/build/bundles'),
1818
filename: '[name].bundle.js',
1919
},
20-
node: {
20+
node: {
2121
net: 'empty',
22-
tls: 'empty'
22+
tls: 'empty',
2323
},
2424
module: {
2525
rules: [

0 commit comments

Comments
 (0)