Skip to content

Commit 8f7bd68

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Add redux
1 parent d55390a commit 8f7bd68

26 files changed

Lines changed: 2854 additions & 274 deletions

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
"mime-types": "^2.1.18",
2929
"react": "^16.3.2",
3030
"react-dom": "^16.3.2",
31+
"react-redux": "^5.0.7",
32+
"redux": "^4.0.0",
3133
"style-loader": "^0.21.0",
3234
"svg.js": "^2.6.4",
3335
"webpack": "^4.6.0",

‎src/public/dist/bundle.js‎

Lines changed: 2649 additions & 191 deletions
Large diffs are not rendered by default.

‎src/public/dist/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/js/App.js‎

Lines changed: 34 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react';
2+
import { connect } from 'react-redux';
23
import devProcessTesting from './utils/dev-test';
4+
35
import { createConnection } from './utils/connection';
6+
import { getTreeLayout } from './utils/treeLayout';
47
import { SOCKET_EVENT_TYPE } from '../../shared/constants';
5-
import ViewsSwitchList, {
6-
SWITCH_KEYS
7-
} from './components/controls/ViewsSwitchList';
8-
import TreeDiagram from './components/tree-diagram/TreeDiagram';
9-
import {
10-
getTreeLayout,
11-
getTreeLayoutWithCodeCrumbs
12-
} from './components/tree-diagram/treeLayout';
8+
9+
import ViewsSwitches from './components/controls/ViewSwitches/ViewSwitchesContainer';
10+
import TreeDiagram from './components/tree-diagram/TreeDiagramContainer';
11+
12+
//TODO: move out logic, just pass
13+
import { SWITCH_KEYS } from './components/controls/ViewSwitches/store/constants';
1314

1415
import './App.css';
1516

@@ -18,12 +19,6 @@ class App extends React.Component {
1819
super(props);
1920

2021
this.state = {
21-
switchesOn: {
22-
[SWITCH_KEYS.SOURCE]: true,
23-
[SWITCH_KEYS.DEPENDENCIES]: false, //TODO: false
24-
[SWITCH_KEYS.CODE_CRUMBS]: false
25-
},
26-
2722
filesTreeLayoutNodes: null,
2823
filesTree: null,
2924
filesList: null,
@@ -35,35 +30,29 @@ class App extends React.Component {
3530
createConnection(({ type, data }) => this.onSocketEvent(type, data));
3631
}
3732

38-
onSwitchChange = (key, checked) => {
39-
let subState = {
40-
switchesOn: {
41-
...this.state.switchesOn,
42-
[key]: checked
43-
}
44-
};
45-
46-
if (key === SWITCH_KEYS.CODE_CRUMBS) {
47-
subState = {
48-
...subState,
49-
filesTreeLayoutNodes: getTreeLayout(
50-
this.state.filesTree,
51-
checked
52-
)
53-
};
33+
componentWillReceiveProps(nextProps) {
34+
if (nextProps.codeCrumbsDiagramOn === this.props.codeCrumbsDiagramOn) {
35+
return;
5436
}
5537

56-
this.setState(subState);
57-
};
38+
this.setState({
39+
...this.state,
40+
filesTreeLayoutNodes: getTreeLayout(
41+
this.state.filesTree,
42+
nextProps.codeCrumbsDiagramOn
43+
)
44+
});
45+
}
5846

5947
onSocketEvent(type, data) {
6048
switch (type) {
6149
case SOCKET_EVENT_TYPE.SYNC_SOURCE_FILES:
62-
const { switchesOn } = this.state;
50+
const { codeCrumbsDiagramOn } = this.props;
51+
6352
const { filesTree, filesList, dependenciesList } = data.body;
6453
const filesTreeLayoutNodes = getTreeLayout(
6554
filesTree,
66-
switchesOn[SWITCH_KEYS.CODE_CRUMBS]
55+
codeCrumbsDiagramOn
6756
);
6857

6958
this.setState({
@@ -80,25 +69,15 @@ class App extends React.Component {
8069
}
8170

8271
render() {
83-
const {
84-
filesTreeLayoutNodes,
85-
dependenciesList,
86-
switchesOn
87-
} = this.state;
72+
const { filesTreeLayoutNodes, dependenciesList } = this.state;
8873

8974
return (
9075
<div className="App-container">
91-
<ViewsSwitchList
92-
defaultChecked={SWITCH_KEYS.SOURCE}
93-
onChange={this.onSwitchChange}
94-
/>
76+
<ViewsSwitches />
9577

9678
<TreeDiagram
9779
filesTreeLayoutNodes={filesTreeLayoutNodes}
9880
dependenciesList={dependenciesList}
99-
sourceDiagramOn={switchesOn[SWITCH_KEYS.SOURCE]}
100-
dependenciesDiagramOn={switchesOn[SWITCH_KEYS.DEPENDENCIES]}
101-
codeCrumbsDiagramOn={switchesOn[SWITCH_KEYS.CODE_CRUMBS]}
10281
/>
10382

10483
<footer className="App-footer">
@@ -112,4 +91,12 @@ class App extends React.Component {
11291
}
11392
}
11493

115-
export default App;
94+
const mapStateToProps = state => {
95+
const { checkedState } = state.viewSwitches;
96+
97+
return {
98+
codeCrumbsDiagramOn: checkedState[SWITCH_KEYS.CODE_CRUMBS]
99+
};
100+
};
101+
102+
export default connect(mapStateToProps)(App);

‎src/public/js/components/controls/ViewSwitches/ViewSwitchesContainer.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import ViewSwitchList from './component/ViewsSwitchList';
2+
import { connect } from 'react-redux';
3+
import { toggleSwitch } from './store/actions';
4+
5+
const mapStateToProps = state => {
6+
const { defaultChecked, switches } = state.viewSwitches;
7+
return { defaultChecked, switches };
8+
};
9+
10+
const mapDispatchToProps = {
11+
toggleSwitch
12+
};
13+
14+
export default connect(mapStateToProps, mapDispatchToProps)(ViewSwitchList);

src/public/js/components/controls/ViewSwitchList.css renamed to src/public/js/components/controls/ViewSwitches/component/ViewSwitchList.css

File renamed without changes.

src/public/js/components/controls/ViewsSwitchList.js renamed to src/public/js/components/controls/ViewSwitches/component/ViewsSwitchList.js

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,19 @@ import { Switch, Form, Icon } from 'antd';
33
const FormItem = Form.Item;
44
import './ViewSwitchList.css';
55

6-
export const SWITCH_KEYS = {
7-
SOURCE: 'SourceStructure',
8-
DEPENDENCIES: 'ModuleDependencies',
9-
CODE_CRUMBS: 'CodeCrumbs'
10-
};
11-
12-
const Switches = [
13-
{ name: 'Source', key: SWITCH_KEYS.SOURCE },
14-
{ name: 'Dependencies', key: SWITCH_KEYS.DEPENDENCIES },
15-
{ name: 'CodeCrumbs', key: SWITCH_KEYS.CODE_CRUMBS }
16-
];
17-
18-
const ViewsSwitchList = ({ onChange, defaultChecked }) => {
6+
const ViewsSwitchList = ({ switches, toggleSwitch, defaultChecked }) => {
197
return (
208
<div className="ViewSwitchList-container">
219
<Form layout="inline">
22-
{Switches.map(item => (
10+
{switches.map(item => (
2311
<FormItem key={item.key}>
2412
<span>{item.name + ' '}</span>
2513
<Switch
2614
size="small"
2715
defaultChecked={item.key === defaultChecked}
28-
onChange={checked => onChange(item.key, checked)}
16+
onChange={checked =>
17+
toggleSwitch(item.key, checked)
18+
}
2919
/>
3020
</FormItem>
3121
))}

‎src/public/js/components/controls/ViewSwitches/store/actions.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { ACTIONS } from './constants';
2+
3+
export const toggleSwitch = (switchKey, checked) => ({
4+
type: ACTIONS.TOGGLE_SWITCH,
5+
payload: { switchKey, checked }
6+
});

‎src/public/js/components/controls/ViewSwitches/store/constants.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const ACTIONS = {
2+
TOGGLE_SWITCH: 'SWITCHES_LIST.TOGGLE_SWITCH'
3+
};
4+
5+
export const SWITCH_KEYS = {
6+
SOURCE: 'SourceStructure',
7+
DEPENDENCIES: 'ModuleDependencies',
8+
CODE_CRUMBS: 'CodeCrumbs'
9+
};

‎src/public/js/components/controls/ViewSwitches/store/reducer.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { ACTIONS, SWITCH_KEYS } from './constants';
2+
3+
const DefaultState = {
4+
defaultChecked: SWITCH_KEYS.SOURCE,
5+
switches: [
6+
{ name: 'Source', key: SWITCH_KEYS.SOURCE },
7+
{ name: 'Dependencies', key: SWITCH_KEYS.DEPENDENCIES },
8+
{ name: 'CodeCrumbs', key: SWITCH_KEYS.CODE_CRUMBS }
9+
],
10+
checkedState: {
11+
[SWITCH_KEYS.SOURCE]: true,
12+
[SWITCH_KEYS.DEPENDENCIES]: false,
13+
[SWITCH_KEYS.CODE_CRUMBS]: false
14+
}
15+
};
16+
17+
export default (state = DefaultState, action) => {
18+
switch (action.type) {
19+
case ACTIONS.TOGGLE_SWITCH:
20+
const { switchKey, checked } = action.payload;
21+
22+
return {
23+
...state,
24+
checkedState: {
25+
...state.checkedState,
26+
[switchKey]: checked
27+
}
28+
};
29+
break;
30+
31+
default:
32+
return state;
33+
}
34+
};

0 commit comments

Comments
 (0)