Skip to content

Commit fe0ac3a

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Add data bus component
1 parent 8f7bd68 commit fe0ac3a

14 files changed

Lines changed: 484 additions & 258 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"react-dom": "^16.3.2",
3131
"react-redux": "^5.0.7",
3232
"redux": "^4.0.0",
33+
"redux-thunk": "^2.2.0",
3334
"style-loader": "^0.21.0",
3435
"svg.js": "^2.6.4",
3536
"webpack": "^4.6.0",

‎src/public/dist/bundle.js‎

Lines changed: 317 additions & 148 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: 17 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,27 @@
11
import React from 'react';
2-
import { connect } from 'react-redux';
32
import devProcessTesting from './utils/dev-test';
43

5-
import { createConnection } from './utils/connection';
6-
import { getTreeLayout } from './utils/treeLayout';
7-
import { SOCKET_EVENT_TYPE } from '../../shared/constants';
8-
4+
import DataBus from './components/data-bus/DataBusContainer';
95
import ViewsSwitches from './components/controls/ViewSwitches/ViewSwitchesContainer';
106
import TreeDiagram from './components/tree-diagram/TreeDiagramContainer';
117

12-
//TODO: move out logic, just pass
13-
import { SWITCH_KEYS } from './components/controls/ViewSwitches/store/constants';
14-
158
import './App.css';
169

17-
class App extends React.Component {
18-
constructor(props) {
19-
super(props);
20-
21-
this.state = {
22-
filesTreeLayoutNodes: null,
23-
filesTree: null,
24-
filesList: null,
25-
dependenciesList: null
26-
};
27-
}
28-
29-
componentDidMount() {
30-
createConnection(({ type, data }) => this.onSocketEvent(type, data));
31-
}
32-
33-
componentWillReceiveProps(nextProps) {
34-
if (nextProps.codeCrumbsDiagramOn === this.props.codeCrumbsDiagramOn) {
35-
return;
36-
}
37-
38-
this.setState({
39-
...this.state,
40-
filesTreeLayoutNodes: getTreeLayout(
41-
this.state.filesTree,
42-
nextProps.codeCrumbsDiagramOn
43-
)
44-
});
45-
}
46-
47-
onSocketEvent(type, data) {
48-
switch (type) {
49-
case SOCKET_EVENT_TYPE.SYNC_SOURCE_FILES:
50-
const { codeCrumbsDiagramOn } = this.props;
51-
52-
const { filesTree, filesList, dependenciesList } = data.body;
53-
const filesTreeLayoutNodes = getTreeLayout(
54-
filesTree,
55-
codeCrumbsDiagramOn
56-
);
57-
58-
this.setState({
59-
filesTreeLayoutNodes,
60-
filesTree,
61-
filesList,
62-
dependenciesList
63-
});
64-
break;
65-
66-
default:
67-
break;
68-
}
69-
}
70-
71-
render() {
72-
const { filesTreeLayoutNodes, dependenciesList } = this.state;
73-
74-
return (
75-
<div className="App-container">
76-
<ViewsSwitches />
77-
78-
<TreeDiagram
79-
filesTreeLayoutNodes={filesTreeLayoutNodes}
80-
dependenciesList={dependenciesList}
81-
/>
82-
83-
<footer className="App-footer">
84-
Bohdan Liashenko{' '}
85-
<a href="https://github.com/Bogdan-Lyashenko/codecrumbs">
86-
Project Github
87-
</a>
88-
</footer>
89-
</div>
90-
);
91-
}
92-
}
93-
94-
const mapStateToProps = state => {
95-
const { checkedState } = state.viewSwitches;
96-
97-
return {
98-
codeCrumbsDiagramOn: checkedState[SWITCH_KEYS.CODE_CRUMBS]
99-
};
10+
const App = () => {
11+
return (
12+
<div className="App-container">
13+
<DataBus />
14+
<ViewsSwitches />
15+
<TreeDiagram />
16+
17+
<footer className="App-footer">
18+
Bohdan Liashenko{' '}
19+
<a href="https://github.com/Bogdan-Lyashenko/codecrumbs">
20+
Project Github
21+
</a>
22+
</footer>
23+
</div>
24+
);
10025
};
10126

102-
export default connect(mapStateToProps)(App);
27+
export default App;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export const ACTIONS = {
33
};
44

55
export const SWITCH_KEYS = {
6-
SOURCE: 'SourceStructure',
7-
DEPENDENCIES: 'ModuleDependencies',
8-
CODE_CRUMBS: 'CodeCrumbs'
6+
SOURCE: 'source',
7+
DEPENDENCIES: 'dependencies',
8+
CODE_CRUMBS: 'codeCrumbs'
99
};

‎src/public/js/components/data-bus/DataBusContainer.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux';
3+
4+
import { createConnection } from '../../utils/connection';
5+
import { SOCKET_EVENT_TYPE } from '../../../../shared/constants';
6+
import {
7+
setInitialSourceData,
8+
calcFilesTreeLayoutNodes
9+
} from './store/actions';
10+
11+
class DataBusContainer extends React.Component {
12+
componentDidMount() {
13+
createConnection(({ type, data }) => this.onSocketEvent(type, data));
14+
}
15+
16+
componentWillReceiveProps(nextProps) {
17+
if (nextProps.codeCrumbsDiagramOn === this.props.codeCrumbsDiagramOn) {
18+
return;
19+
}
20+
21+
this.props.calcFilesTreeLayoutNodes(nextProps.codeCrumbsDiagramOn);
22+
}
23+
24+
onSocketEvent(type, data) {
25+
switch (type) {
26+
case SOCKET_EVENT_TYPE.SYNC_SOURCE_FILES:
27+
const { filesTree, filesList, dependenciesList } = data.body;
28+
29+
this.props.setInitialSourceData({
30+
filesTree,
31+
filesList,
32+
dependenciesList
33+
});
34+
35+
this.props.calcFilesTreeLayoutNodes(
36+
this.props.codeCrumbsDiagramOn
37+
);
38+
break;
39+
40+
default:
41+
break;
42+
}
43+
}
44+
45+
render() {
46+
return <div className="DataBus-container" />;
47+
}
48+
}
49+
50+
const mapStateToProps = state => {
51+
const { checkedState } = state.viewSwitches;
52+
53+
return {
54+
codeCrumbsDiagramOn: checkedState.codeCrumbs
55+
};
56+
};
57+
58+
const mapDispatchToProps = {
59+
setInitialSourceData,
60+
calcFilesTreeLayoutNodes
61+
};
62+
63+
export default connect(mapStateToProps, mapDispatchToProps)(DataBusContainer);

‎src/public/js/components/data-bus/store/actions.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ACTIONS } from './constants';
2+
import { getTreeLayout } from '../../../utils/treeLayout';
3+
4+
export const setInitialSourceData = data => ({
5+
type: ACTIONS.SET_INITIAL_SOURCE_DATA,
6+
payload: data
7+
});
8+
9+
export const calcFilesTreeLayoutNodes = codeCrumbsOn => (
10+
dispatch,
11+
getState
12+
) => {
13+
const state = getState();
14+
const { dataBus } = state;
15+
16+
if (!dataBus.filesTree) return;
17+
18+
return dispatch({
19+
type: ACTIONS.UPDATE_FILES_TREE_LAYOUT_NODES,
20+
payload: getTreeLayout(dataBus.filesTree, codeCrumbsOn)
21+
});
22+
};

‎src/public/js/components/data-bus/store/constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const ACTIONS = {
2+
SET_INITIAL_SOURCE_DATA: 'DATA_BUS.SET_INITIAL_SOURCE_DATA',
3+
UPDATE_FILES_TREE_LAYOUT_NODES: 'DATA_BUS.UPDATE_FILES_TREE_LAYOUT_NODES'
4+
};

‎src/public/js/components/data-bus/store/reducer.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { ACTIONS } from './constants';
2+
3+
const DefaultState = {
4+
filesTree: null,
5+
filesList: null,
6+
dependenciesList: null,
7+
8+
filesTreeLayoutNodes: null
9+
};
10+
11+
export default (state = DefaultState, action) => {
12+
switch (action.type) {
13+
case ACTIONS.SET_INITIAL_SOURCE_DATA:
14+
return {
15+
...state,
16+
...action.payload
17+
};
18+
break;
19+
20+
case ACTIONS.UPDATE_FILES_TREE_LAYOUT_NODES:
21+
return {
22+
...state,
23+
filesTreeLayoutNodes: action.payload
24+
};
25+
break;
26+
27+
default:
28+
return state;
29+
}
30+
};

‎src/public/js/components/tree-diagram/TreeDiagramContainer.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { connect } from 'react-redux';
22
import TreeDiagram from './component/TreeDiagram';
3-
import { SWITCH_KEYS } from '../controls/ViewSwitches/store/constants';
43

54
const mapStateToProps = state => {
65
const { checkedState } = state.viewSwitches;
6+
const { filesTreeLayoutNodes, dependenciesList } = state.dataBus;
77

88
return {
9-
sourceDiagramOn: checkedState[SWITCH_KEYS.SOURCE],
10-
dependenciesDiagramOn: checkedState[SWITCH_KEYS.DEPENDENCIES],
11-
codeCrumbsDiagramOn: checkedState[SWITCH_KEYS.CODE_CRUMBS]
9+
sourceDiagramOn: checkedState.source,
10+
dependenciesDiagramOn: checkedState.dependencies,
11+
codeCrumbsDiagramOn: checkedState.codeCrumbs,
12+
filesTreeLayoutNodes,
13+
dependenciesList
1214
};
1315
};
1416

0 commit comments

Comments
 (0)