Skip to content

Commit 975b25e

Browse files
victorvrvkiacolbert
authored andcommitted
Merge for launch (#95)
* fixed icons size * fixed icons size (#86) * created an InitialDisplay component to render on CDM * Removed console.log - preparing for merge to master * Removed console.log and restyled codebase to airbnb standards * removed styles.css file * updated manifest and icons * Update README
1 parent 7dc2237 commit 975b25e

29 files changed

+162
-150
lines changed

README.md

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,21 +25,18 @@
2525
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
2626

2727
### Prerequisites
28-
Your application must be using the hook `useReducer` for actions to be recorded.
28+
You must use an unminified version of React. Also, your application must be using the hook `useReducer` for actions to be recorded.
2929

3030
### Installing
3131
React Rewind will soon be available as a Chrome extension through the Google Chrome Web Store.
3232

3333
To install locally, setup instructions are as follows:
3434

35-
1. `git clone https://github.com/reactrewind/react-rewind.git`
36-
2. `cd react-rewind`
37-
3. `npm run install_dep`
38-
4. `npm run build`
39-
5. Visit the URL `chrome://extensions/`
40-
6. Click Load Unpacked button and select the folder `react-rewind/src/browser/chrome`
41-
7. On your application page, open the Chrome Developer tools and select `React Rewind` from the tool bar
42-
8. Click Record and begin interacting with your application
35+
1. `git clone --single-branch --branch beta-release https://github.com/reactrewind/react-rewind.git`
36+
2. Visit the URL `chrome://extensions/`
37+
3. Click Load Unpacked button and select the folder `react-rewind/chrome`
38+
4. On your application page, open the Chrome Developer (Ctrl + Shift + J / Mac: Cmd + Option + I) tools and select `React Rewind` from the tool bar
39+
5. Click Record and begin interacting with your application
4340

4441

4542
As you interact with your application, actions will populate the events panel. Click on these actions to view more details about them, such as the action object that was dispatched, the effects or state difference, and the whole state of the application after the dispatch. The time slider panel allows you to rewind, fast forward, and play through all recorded actions.

src/app/components/App.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ class App extends Component {
8383
// If the user paused the recording session, we return
8484
const { isRecording } = this.state;
8585
if (!isRecording) return;
86-
console.log('got new data');
86+
8787
const newData = {
8888
action: msg.action,
8989
state: msg.state,
@@ -104,11 +104,13 @@ class App extends Component {
104104
isPlayingIndex: state.data.length,
105105
filteredData: [...state.filteredData, newData],
106106
eventTimes: [...state.eventTimes, eventTime],
107+
...newData,
107108
}));
108109
} else {
109110
this.setState(state => ({
110111
data: [...state.data, newData],
111112
isPlayingIndex: state.data.length,
113+
...newData,
112114
}));
113115
}
114116
});

src/app/components/DetailCards/Actions/ActionsDisplay.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react';
22
import ReactJson from 'react-json-view';
33

4-
//styled components
4+
// styled components
55
import { DetailsWrapper } from '../../../styles/Details.jsx';
66

7-
export default function Actions(props) {
7+
export default function Actions({ action, setIsClicked }) {
88
// renders action information
9-
const { action } = props;
9+
setIsClicked(true);
1010
return (
1111
<DetailsWrapper>
1212
{<ReactJson
13-
theme={'threezerotwofour'}
13+
theme="threezerotwofour"
1414
style={{ backgroundColor: 'transparent' }}
1515
displayDataTypes={false}
1616
src={action}

src/app/components/DetailCards/DetailsNav.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ export default function RightNav(props) {
99
<>
1010
<DetailsNavWrapper>
1111
<Buttons>
12-
<NavLink exact activeClassName='active' to='/'>
12+
<NavLink exact activeClassName="active" to="/">
1313
<Button>actions</Button>
1414
</NavLink>
15-
<NavLink activeClassName='active' to='/effects'>
15+
<NavLink activeClassName="active" to="/effects">
1616
<Button>effects</Button>
1717
</NavLink>
18-
<NavLink activeClassName='active' to='/state'>
18+
<NavLink activeClassName="active" to="/state">
1919
<Button>state</Button>
2020
</NavLink>
2121
</Buttons>

src/app/components/DetailCards/Effects/EffectsDisplay.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react';
22
import ReactJson from 'react-json-view';
33
import { DetailsWrapper } from '../../../styles/Details.jsx';
4-
// functionality
4+
55
// gets difference from previous state to new state
66
import stateDifference from '../../stateDifference.jsx';
77

88

99
export default function Effects(props) {
10-
const { prevState, actionState } = props;
10+
const { prevState, actionState, setIsClicked } = props;
1111
const differenceOfPrevAndNextState = stateDifference(prevState, actionState);
12-
12+
setIsClicked(true);
1313
return (
1414
<DetailsWrapper>
1515
<ReactJson
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import ReactJson from 'react-json-view';
3+
4+
// styled components
5+
import { DetailsWrapper } from '../../../styles/Details.jsx';
6+
7+
export default function InitialDisplay({ action }) {
8+
// renders action information
9+
return (
10+
<DetailsWrapper>
11+
{<ReactJson
12+
theme="threezerotwofour"
13+
style={{ backgroundColor: 'transparent' }}
14+
displayDataTypes={false}
15+
src={action}
16+
/> || 'select an event'}
17+
</DetailsWrapper>
18+
);
19+
}

src/app/components/DetailCards/State/StateCard.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function EffectCard(props) {
88
return (
99
<div>
1010
<ReactJson
11-
theme={'threezerotwofour'}
11+
theme="threezerotwofour"
1212
style={{ backgroundColor: 'transparent', height: '-webkit-fill-available' }}
1313
displayDataTypes={false}
1414
src={actionState}

src/app/components/DetailCards/State/StateDisplay.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import StateCard from './StateCard.jsx';
44
// styled component
55
import { DetailsWrapper } from '../../../styles/Details.jsx';
66

7-
export default function State(props) {
7+
export default function State({ actionState, setIsClicked }) {
88
// stringifying data to pass down to StateCard to display
9-
const { actionState } = props;
9+
setIsClicked(true);
1010
return (
1111
<DetailsWrapper>
12-
{<StateCard actionState={actionState} />}
12+
{<StateCard actionState={actionState} />}
1313
</DetailsWrapper>
1414
);
1515
}

src/app/components/EventCards/EventCreator.jsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { EventCard, EventTimeDiv } from '../../styles/Events.jsx';
55
export default function EventCreator(props) {
66
// renders individual action
77
const {
8-
action, id, addAction, actionTime, selectedEvent, index, eventTimes,
8+
action, id, addAction, selectedEvent, eventTimes,
99
} = props;
1010

1111
let displayTime;
@@ -16,20 +16,23 @@ export default function EventCreator(props) {
1616
} else {
1717
timeDifference = eventTimes[id] - eventTimes[id - 1];
1818
timeDifference = new Date(timeDifference);
19-
19+
2020
let minute = timeDifference.getMinutes();
21-
minute < 10 ? minute = '0' + minute : minute;
21+
minute = minute < 10 ? '0'.concat(minute) : minute;
22+
2223
let second = timeDifference.getSeconds();
23-
second < 10 ? second = '0' + second : second;
24+
second = second < 10 ? '0'.concat(second) : second;
25+
2426
let millisecond = Math.floor(timeDifference.getMilliseconds() / 10);
25-
millisecond < 10 ? millisecond = '0' + millisecond : millisecond;
27+
millisecond = millisecond < 10 ? '0'.concat(millisecond) : millisecond;
2628

2729
displayTime = `${minute} : ${second} : ${millisecond}`;
2830
}
2931

3032
return (
3133
<EventCard id={id} onClick={addAction} selectedEvent={selectedEvent}>
32-
&#x2630;{action}
34+
&#x2630;
35+
{action}
3336
<EventTimeDiv id={id} selectedEvent={selectedEvent}>{displayTime}</EventTimeDiv>
3437
</EventCard>
3538

src/app/components/EventCards/EventsDisplay.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import EventCreator from './EventCreator.jsx';
77
import { EventsWrapper } from '../../styles/Events.jsx';
88

99
export default function Events(props) {
10-
const {
11-
data,
10+
const {
1211
activeEventId,
1312
filteredData,
1413
eventTimes,
1514
} = props;
15+
1616
return (
1717
<EventsWrapper>
1818
{filteredData.map((e, i) => (

src/app/components/EventCards/FilterBar.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { FilterWrapper } from '../../styles/FilterBar.jsx';
66

77
export default function FilterBar(props) {
88
const {
9-
searchChange
9+
searchChange,
10+
searchField,
1011
} = props;
1112

1213
return (
@@ -16,7 +17,7 @@ export default function FilterBar(props) {
1617
type="text"
1718
placeholder="filter actions by name..."
1819
onChange={searchChange}
19-
value={props.searchField}
20+
value={searchField}
2021
/>
2122
</FilterWrapper>
2223
</>
Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,34 @@
1-
21
function stateDifference(old, curr) {
2+
if (typeof old !== typeof curr) return curr;
33

4-
if(typeof(old) === "string" && typeof(curr) === "string") {
5-
if(old === curr) return false;
4+
if (typeof old === typeof curr && !Array.isArray(old) && typeof old !== 'object') {
5+
if (old === curr) return undefined;
66
return curr;
77
}
8-
else if(typeof(old) === "number" && typeof(curr) === "number") {
9-
if( old === curr) return false;
10-
return curr;
11-
}
12-
else if(typeof(old) !== typeof(curr)) {
13-
return curr;
14-
}
15-
else if(Array.isArray(old) && Array.isArray(curr)) {
16-
let newArr = [];
17-
for ( let i = 0; i < curr.length; i++){
18-
if(!old.includes(curr[i])){
19-
let result = stateDifference(old[i], curr[i])
20-
if (result) {
21-
newArr.push(result)
8+
9+
if (Array.isArray(old) && Array.isArray(curr)) {
10+
const newArr = [];
11+
for (let i = 0; i < curr.length; i++) {
12+
if (!old.includes(curr[i])) {
13+
const result = stateDifference(old[i], curr[i]);
14+
if (result !== undefined) {
15+
newArr.push(result);
2216
}
2317
}
24-
}
25-
return newArr.length > 0 ? newArr : false;
18+
}
19+
20+
return newArr.length > 0 ? newArr : undefined;
2621
}
27-
else if(typeof(old) === "object" && typeof(curr) === "object") {
28-
let newObj = {}
29-
for ( let prop in curr) {
30-
let result = stateDifference(old[prop], curr[prop])
31-
if (result) {
32-
newObj[prop] = result
33-
}
22+
23+
const newObj = {};
24+
for (let prop in curr) {
25+
const result = stateDifference(old[prop], curr[prop])
26+
if (result !== undefined) {
27+
newObj[prop] = result;
3428
}
35-
return Object.keys(newObj).length === 0 ? false : newObj
3629
}
30+
31+
return Object.keys(newObj).length === 0 ? undefined : newObj;
3732
}
3833

39-
export default stateDifference;
34+
export default stateDifference;

src/app/container/Details.jsx

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import React, { Component } from 'react';
2-
3-
const ReactRouter = require('react-router-dom');
4-
5-
const Router = ReactRouter.BrowserRouter;
6-
const { Route } = ReactRouter;
1+
import React, { useState } from 'react';
72

83
// details nav component import
94
import DetailsNav from '../components/DetailCards/DetailsNav.jsx';
105

116
// component imports for react router
12-
import ActionsDisplay from '../components/DetailCards/Actions/ActionsDisplay.jsx'
13-
import EffectsDisplay from '../components/DetailCards/Effects/EffectsDisplay.jsx'
14-
import StateDisplay from '../components/DetailCards/State/StateDisplay.jsx'
7+
import ActionsDisplay from '../components/DetailCards/Actions/ActionsDisplay.jsx';
8+
import EffectsDisplay from '../components/DetailCards/Effects/EffectsDisplay.jsx';
9+
import StateDisplay from '../components/DetailCards/State/StateDisplay.jsx';
10+
import InitalDisplay from '../components/DetailCards/InitialDetailCard/InitialDisplay.jsx';
1511

12+
const ReactRouter = require('react-router-dom');
13+
14+
const Router = ReactRouter.BrowserRouter;
15+
const { Route } = ReactRouter;
1616

1717
export default function Details(props) {
1818
// destructuring required info that's being passed down from App.jsx
@@ -21,24 +21,45 @@ export default function Details(props) {
2121
action, prevState, actionState,
2222
} = props;
2323

24-
24+
const [isClicked, setIsClicked] = useState(false);
25+
2526
return (
2627
<Router>
2728
<>
2829
<DetailsNav />
30+
{isClicked === false ? <InitalDisplay action={action} /> : null }
2931
{/* routing components and rendering them with props */}
3032
<Route
3133
exact
3234
path='/'
33-
render={props => <ActionsDisplay {...props} action={action} />}
35+
render={props => (
36+
<ActionsDisplay
37+
{...props}
38+
action={action}
39+
setIsClicked={setIsClicked}
40+
/>
41+
)}
3442
/>
3543
<Route
3644
path='/effects'
37-
render={props => <EffectsDisplay {...props} prevState={prevState} actionState={actionState} />}
45+
render={props => (
46+
<EffectsDisplay
47+
{...props}
48+
prevState={prevState}
49+
setIsClicked={setIsClicked}
50+
actionState={actionState}
51+
/>
52+
)}
3853
/>
3954
<Route
4055
path='/state'
41-
render={props => <StateDisplay {...props} actionState={actionState} />}
56+
render={props => (
57+
<StateDisplay
58+
{...props}
59+
actionState={actionState}
60+
setIsClicked={setIsClicked}
61+
/>
62+
)}
4263
/>
4364
</>
4465
</Router>

src/app/container/Events.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext, useState, Component} from 'react';
1+
import React, { Component } from 'react';
22

33
// components
44
import EventsNav from '../components/EventCards/EventsNav.jsx';

0 commit comments

Comments
 (0)