Skip to content

Commit 9e1ea4d

Browse files
mylee1995mylee1995
committed
merged dev
2 parents 75c5c0b + 8a31b79 commit 9e1ea4d

File tree

15 files changed

+2330
-2286
lines changed

15 files changed

+2330
-2286
lines changed

‎package-lock.json

Lines changed: 2105 additions & 2124 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/components/Tree.jsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import JSONTree from 'react-json-tree';
33

44
const getItemString = (type, data, itemType, itemString) => (
55
<span>
6-
//
7-
{type}
6+
{/* //
7+
{type} */}
88
</span>
99
);
1010

@@ -18,7 +18,10 @@ const Tree = (props) => {
1818
<JSONTree
1919
data={snapshot}
2020
theme={{ tree: () => ({ className: 'json-tree' }) }}
21+
shouldExpandNode={() => true}
2122
getItemString={getItemString}
23+
// labelRenderer={raw => <strong>{raw}</strong>}
24+
// valueRenderer={raw => <em>{raw}</em>}
2225
/>
2326
)}
2427
</React.Fragment>

‎src/app/containers/ActionContainer.jsx

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,50 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
23
import Action from '../components/Action';
34

4-
class ActionContainer extends Component {
5-
constructor(props) {
6-
super(props);
5+
const ActionContainer = ({
6+
snapshots,
7+
snapshotIndex,
8+
handleChangeSnapshot,
9+
handleJumpSnapshot,
10+
emptySnapshot,
11+
}) => {
12+
let actionsArr = [];
13+
if (snapshots.length > 0) {
14+
actionsArr = snapshots.map((snapshot, index) => {
15+
const selected = index === snapshotIndex;
16+
return (
17+
<Action
18+
key={`action${index}`}
19+
index={index}
20+
snapshot={snapshot}
21+
selected={selected}
22+
handleChangeSnapshot={handleChangeSnapshot}
23+
handleJumpSnapshot={handleJumpSnapshot}
24+
/>
25+
);
26+
});
727
}
8-
9-
render() {
10-
const {
11-
snapshots,
12-
snapshotIndex,
13-
handleChangeSnapshot,
14-
handleJumpSnapshot,
15-
emptySnapshot,
16-
} = this.props;
17-
let actionsArr = [];
18-
if (snapshots.length > 0) {
19-
actionsArr = snapshots.map((snapshot, index) => {
20-
const selected = index === snapshotIndex;
21-
return (
22-
<Action
23-
key={`action${index}`}
24-
index={index}
25-
snapshot={snapshot}
26-
selected={selected}
27-
handleChangeSnapshot={handleChangeSnapshot}
28-
handleJumpSnapshot={handleJumpSnapshot}
29-
/>
30-
);
31-
});
32-
}
33-
return (
34-
<div className="action-container">
35-
<div className="action-component">
36-
<div className="empty-button" onClick={emptySnapshot}>
37-
emptySnapshot
38-
</div>
28+
return (
29+
<div className="action-container">
30+
<div className="action-component exclude">
31+
<div className="empty-button" onClick={emptySnapshot}>
32+
emptySnapshot
3933
</div>
40-
<div>{actionsArr}</div>
4134
</div>
42-
);
43-
}
44-
}
35+
<div>{actionsArr}</div>
36+
</div>
37+
);
38+
};
39+
40+
ActionContainer.propTypes = {
41+
snapshots: PropTypes.arrayOf(
42+
PropTypes.object,
43+
).isRequired,
44+
snapshotIndex: PropTypes.number.isRequired,
45+
handleChangeSnapshot: PropTypes.func.isRequired,
46+
handleJumpSnapshot: PropTypes.func.isRequired,
47+
emptySnapshot: PropTypes.func.isRequired,
48+
};
4549

4650
export default ActionContainer;

‎src/app/containers/ButtonsContainer.jsx

Lines changed: 15 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,19 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
23

3-
const autoBind = require('auto-bind');
4+
const ButtonsContainer = ({ mode: { paused, locked }, toggleMode }) => (
5+
<div className="buttons-container">
6+
<div className="pause-button" onClick={() => toggleMode('paused')}>{(paused) ? 'Resume' : 'Pause'}</div>
7+
<div className="lock-button" onClick={() => toggleMode('locked')}>{(locked) ? 'Unlock' : 'Lock'}</div>
8+
</div>
9+
);
410

5-
class ButtonsContainer extends Component {
6-
constructor(props) {
7-
super(props);
11+
ButtonsContainer.propTypes = {
12+
toggleMode: PropTypes.func.isRequired,
13+
mode: PropTypes.shape({
14+
paused: PropTypes.bool,
15+
locked: PropTypes.bool,
16+
}).isRequired,
17+
};
818

9-
this.state = {
10-
paused: false,
11-
locked: false,
12-
};
13-
14-
autoBind(this);
15-
}
16-
17-
togglePause(port) {
18-
const { paused } = this.state;
19-
port.postMessage({ action: 'setPause', payload: !paused });
20-
this.setState({ paused: !paused });
21-
}
22-
23-
toggleLock(port) {
24-
const { locked } = this.state;
25-
port.postMessage({ action: 'setLock', payload: !locked });
26-
this.setState({ locked: !locked });
27-
}
28-
29-
render() {
30-
const { paused, locked } = this.state;
31-
const { port } = this.props;
32-
return (
33-
<div className="buttons-container">
34-
<div className="pause-button" onClick={() => this.togglePause(port)}>{(paused) ? 'Resume' : 'Pause'}</div>
35-
<div className="lock-button" onClick={() => this.toggleLock(port)}>{(locked) ? 'Unlock' : 'Lock'}</div>
36-
</div>
37-
);
38-
}
39-
}
4019
export default ButtonsContainer;

‎src/app/containers/HeadContainer.jsx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22

3-
class HeadContainer extends Component {
4-
constructor() {
5-
super();
6-
}
7-
8-
render() {
9-
return <div className="head-container">HeadContainer</div>;
10-
}
11-
}
3+
const HeadContainer = () => (
4+
<div className="head-container" />
5+
);
126

137
export default HeadContainer;

‎src/app/containers/MainContainer.jsx

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,41 @@ class MainContainer extends Component {
1717
this.state = {
1818
snapshots: [],
1919
snapshotIndex: 0,
20-
currentIndex: null,
2120
port: null,
2221
playing: false,
22+
mode: {
23+
locked: false,
24+
paused: false,
25+
persist: false,
26+
},
2327
};
2428

2529
autoBind(this);
2630
}
2731

2832
componentDidMount() {
29-
console.log('componentDidMount');
3033
// open connection with background script
3134
const port = chrome.runtime.connect();
3235

3336
// listen for a message containing snapshots from the background script
34-
port.onMessage.addListener((snapshots) => {
35-
const snapshotIndex = snapshots.length - 1;
36-
37-
// set state with the information received from the background script
38-
this.setState({ snapshots, snapshotIndex });
37+
port.onMessage.addListener((message) => {
38+
const { action, payload } = message;
39+
switch (action) {
40+
case 'sendSnapshots': {
41+
const snapshotIndex = payload.length - 1;
42+
43+
// set state with the information received from the background script
44+
this.setState({ snapshots: payload, snapshotIndex });
45+
break;
46+
}
47+
case 'initialConnectSnapshot': {
48+
const { snapshots, mode } = payload;
49+
const snapshotIndex = snapshots.length - 1;
50+
this.setState({ snapshots, snapshotIndex, mode });
51+
break;
52+
}
53+
default:
54+
}
3955
});
4056

4157
// console log if the port with background script disconnects
@@ -92,7 +108,8 @@ class MainContainer extends Component {
92108
port.postMessage({ action: 'emptySnap' });
93109
}
94110

95-
// change the snapshot index, this will change the state shown in the state container but won't change the DOM
111+
// change the snapshot index
112+
// this will change the state shown in the state container but won't change the DOM
96113
handleChangeSnapshot(snapshotIndex) {
97114
// snapshotIndex
98115
// --> 1. affects the action that is highlighted
@@ -102,12 +119,31 @@ class MainContainer extends Component {
102119

103120
handleJumpSnapshot(snapshotIndex) {
104121
const { snapshots, port } = this.state;
105-
this.setState({ currentIndex: snapshotIndex });
106122
port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
107123
}
108124

125+
toggleMode(targetMode) {
126+
const { mode, mode: { locked, paused, persist }, port } = this.state;
127+
switch (targetMode) {
128+
case 'paused':
129+
port.postMessage({ action: 'setPause', payload: !paused });
130+
mode.paused = !paused;
131+
break;
132+
case 'locked':
133+
port.postMessage({ action: 'setLock', payload: !locked });
134+
mode.locked = !locked;
135+
break;
136+
case 'persist':
137+
port.postMessage({ action: 'setPersist', payload: !locked });
138+
mode.persist = !persist;
139+
break;
140+
default:
141+
}
142+
this.setState({ mode });
143+
}
144+
109145
render() {
110-
const { snapshots, snapshotIndex, port, playing } = this.state;
146+
const { snapshots, snapshotIndex, mode, playing } = this.state;
111147
return (
112148
<div className="main-container">
113149
<HeadContainer />
@@ -130,7 +166,7 @@ class MainContainer extends Component {
130166
play={this.play}
131167
playing = {playing}
132168
/>
133-
<ButtonsContainer port={port} />
169+
<ButtonsContainer mode={mode} toggleMode={this.toggleMode} />
134170
</div>
135171
</div>
136172
);

‎src/app/containers/StateContainer.jsx

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
1-
import React, { Component } from 'react';
2-
import { MemoryRouter as Router, Route, NavLink } from 'react-router-dom';
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {
4+
MemoryRouter as Router, Route, NavLink, Switch,
5+
} from 'react-router-dom';
36
import Tree from '../components/Tree';
47
import Chart from '../components/Chart';
58

6-
class StateContainer extends Component {
7-
constructor(props) {
8-
super(props);
9-
}
9+
const StateContainer = ({ snapshot }) => (
10+
<Router>
11+
<div className="state-container">
12+
<div className="navbar">
13+
<NavLink className="router-link" activeClassName="is-active" to="/">
14+
Tree
15+
</NavLink>
16+
<NavLink className="router-link" activeClassName="is-active" to="/chart">
17+
Chart
18+
</NavLink>
19+
</div>
20+
<Switch>
21+
<Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
22+
<Route path="/" render={() => <Tree snapshot={snapshot} />} />
23+
</Switch>
24+
</div>
25+
</Router>
26+
);
1027

11-
render() {
12-
const { snapshot } = this.props;
13-
return (
14-
<Router>
15-
<div className="state-container">
16-
<div className="navbar">
17-
<NavLink className="router-link" activeClassName="is-active" to="/tree">
18-
Tree
19-
</NavLink>
20-
<NavLink className="router-link" activeClassName="is-active" to="/chart">
21-
Chart
22-
</NavLink>
23-
</div>
24-
<Route path="/tree" render={() => <Tree snapshot={snapshot} />} />
25-
<Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
26-
</div>
27-
</Router>
28-
);
29-
}
30-
}
31-
{
32-
}
28+
StateContainer.propTypes = {
29+
snapshot: PropTypes.shape({
30+
state: PropTypes.oneOfType([
31+
PropTypes.string,
32+
PropTypes.object,
33+
]),
34+
children: PropTypes.arrayOf(
35+
PropTypes.object,
36+
),
37+
}).isRequired,
38+
};
3339

3440
export default StateContainer;

‎src/app/containers/TravelContainer.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
23
import MainSlider from '../components/MainSlider';
34

45
const TravelContainer = ({
@@ -29,4 +30,14 @@ const TravelContainer = ({
2930
</div>
3031
</div>
3132
);
33+
34+
TravelContainer.propTypes = {
35+
playForward: PropTypes.func.isRequired,
36+
moveBackward: PropTypes.func.isRequired,
37+
moveForward: PropTypes.func.isRequired,
38+
snapshotsLength: PropTypes.number.isRequired,
39+
handleChangeSnapshot: PropTypes.func.isRequired,
40+
handleJumpSnapshot: PropTypes.func.isRequired,
41+
snapshotIndex: PropTypes.number.isRequired,
42+
};
3243
export default TravelContainer;

‎src/app/styles/abstracts/_variables.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ $light-grey-three: rgb(101, 104, 110) !default;
2121
/// @type Color
2222
$navbar-color: rgb(68, 72, 78) !default;
2323

24+
/// @type Color
25+
$head-color: #353b46 !default;
26+
2427
/// @type Color
2528
$border-color: rgba(190, 190, 190, 0.5) !default;
2629

0 commit comments

Comments
 (0)