Skip to content

Commit 423eb1e

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
feat: finish migrating tree diagram components
1 parent 0142f55 commit 423eb1e

File tree

11 files changed

+89
-43
lines changed

11 files changed

+89
-43
lines changed

‎.gitignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
node_modules
33

44
# Build directories
5-
src/public/dist/local/bundle
6-
src/public/dist/standalone/bundle
5+
src/public/dist/local/bundle/
6+
src/public/dist/standalone/bundle/
77

88
# example for dev
99
# example-project

‎src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/FlowEdge.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,16 @@ const getSortedFlowSteps = ({ codeCrumbedFlowsMap, selectedCrumbedFlowKey, files
6767
const mapStateToProps = (state, props) => {
6868
const { codeCrumbsMinimize } = getCheckedState(state);
6969

70-
const { filesLayoutMap } = getSourceLayout(state, props);
71-
const { selectedCrumbedFlowKey, codeCrumbedFlowsMap } = getCodeCrumbsUserChoice(state, props);
70+
const { namespace } = props;
71+
const namespaceProps = { namespace };
7272

73+
const { filesLayoutMap } = getSourceLayout(state, namespaceProps);
74+
const { selectedCrumbedFlowKey, codeCrumbedFlowsMap } = getCodeCrumbsUserChoice(
75+
state,
76+
namespaceProps
77+
);
78+
79+
// TODO: ftw is this
7380
const sortedFlowSteps =
7481
selectedCrumbedFlowKey !== NO_TRAIL_FLOW
7582
? getSortedFlowSteps({

‎src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/Tree.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const Tree = props => {
7171
selectedCrumbedFlowKey !== NO_TRAIL_FLOW
7272
}
7373
flowStep={ccParams.flowStep}
74-
onClick={() => onCodeCrumbSelect(file, crumbData)}
74+
onClick={() => onCodeCrumbSelect({ fileNode: file, codeCrumb: crumbData })}
7575
/>
7676
</React.Fragment>
7777
);

‎src/public/js/components/treeDiagram/component/Tree/CodeCrumbs/index.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ import { getCheckedState } from 'core/controlsBus/selectors';
77
import Tree from './Tree';
88

99
const mapStateToProps = (state, props) => {
10-
const { filesMap } = getSource(state, props);
11-
const { filesLayoutMap } = getSourceLayout(state, props);
12-
const { selectedCrumbedFlowKey } = getCodeCrumbsUserChoice(state, props);
1310
const {
1411
sourceDiagramOn,
1512
dependenciesDiagramOn,
@@ -18,6 +15,12 @@ const mapStateToProps = (state, props) => {
1815
codeCrumbsLineNumbers
1916
} = getCheckedState(state);
2017

18+
const { namespace } = props;
19+
const namespaceProps = { namespace };
20+
const { filesMap } = getSource(state, namespaceProps);
21+
const { filesLayoutMap } = getSourceLayout(state, namespaceProps);
22+
const { selectedCrumbedFlowKey } = getCodeCrumbsUserChoice(state, namespaceProps);
23+
2124
return {
2225
filesLayoutMap,
2326
filesMap,
@@ -30,8 +33,11 @@ const mapStateToProps = (state, props) => {
3033
};
3134
};
3235

33-
const mapDispatchToProps = {
34-
onCodeCrumbSelect: selectCodeCrumb
36+
const mapDispatchToProps = (dispatch, props) => {
37+
const { namespace } = props;
38+
return {
39+
onCodeCrumbSelect: options => dispatch(selectCodeCrumb(options, namespace))
40+
};
3541
};
3642

3743
export default connect(

‎src/public/js/components/treeDiagram/component/Tree/Dependencies/index.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,11 @@ const DependenciesTree = props => {
140140
const mapStateToProps = (state, props) => {
141141
const { sourceDiagramOn } = getCheckedState(state);
142142

143-
const { filesLayoutMap } = getSourceLayout(state, props);
144-
const { selectedNode } = getSourceUserChoice(state, props);
145-
const { selectedDependencyEdgeNodes } = getDependenciesUserChoice(state, props);
143+
const { namespace } = props;
144+
const namespaceProps = { namespace };
145+
const { filesLayoutMap } = getSourceLayout(state, namespaceProps);
146+
const { selectedNode } = getSourceUserChoice(state, namespaceProps);
147+
const { selectedDependencyEdgeNodes } = getDependenciesUserChoice(state, namespaceProps);
146148

147149
return {
148150
sourceDiagramOn,
@@ -152,8 +154,11 @@ const mapStateToProps = (state, props) => {
152154
};
153155
};
154156

155-
const mapDispatchToProps = {
156-
onDependencyEdgeClick: selectDependencyEdge
157+
const mapDispatchToProps = (dispatch, ownProps) => {
158+
const { namespace } = ownProps;
159+
return {
160+
onDependencyEdgeClick: options => dispatch(selectDependencyEdge(options, namespace))
161+
};
157162
};
158163

159164
export default connect(

‎src/public/js/components/treeDiagram/component/Tree/Source/Tree.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import CodeCrumbedFlowEdges from '../CodeCrumbs/FlowEdge';
1212

1313
const SourceTree = props => {
1414
const {
15+
namespace,
16+
1517
sourceDiagramOn,
1618
dependenciesDiagramOn,
1719
sourceDimFolders,
@@ -101,9 +103,9 @@ const SourceTree = props => {
101103
selectedNodeDependencies[path] &&
102104
!selectedNodeDependencies[path].importedModuleNames.length
103105
}
104-
onNodeClick={() => {
105-
onFileNodeClick(fileNode);
106-
}}
106+
onNodeClick={() =>
107+
onFileNodeClick(fileNode)
108+
}
107109
/>
108110
);
109111
} else if (type === DIR_NODE_TYPE) {
@@ -129,15 +131,22 @@ const SourceTree = props => {
129131
{(sourceDiagramOn && selectedSourceEdges) || null}
130132

131133
{dependenciesDiagramOn &&
132-
selectedNode.dependencies && <DependenciesTree shiftToCenterPoint={shiftToCenterPoint} />}
134+
selectedNode.dependencies && (
135+
<DependenciesTree namespace={namespace} shiftToCenterPoint={shiftToCenterPoint} />
136+
)}
133137

134-
{(codeCrumbsDiagramOn && <CodeCrumbedFlowEdges shiftToCenterPoint={shiftToCenterPoint} />) ||
138+
{(codeCrumbsDiagramOn && (
139+
<CodeCrumbedFlowEdges namespace={namespace} shiftToCenterPoint={shiftToCenterPoint} />
140+
)) ||
135141
null}
136142

137143
{(sourceDiagramOn && sourceNodes) || null}
138144
{(sourceDiagramOn && sourceDotes) || null}
139145

140-
{(codeCrumbsDiagramOn && <CodeCrumbsTree shiftToCenterPoint={shiftToCenterPoint} />) || null}
146+
{(codeCrumbsDiagramOn && (
147+
<CodeCrumbsTree namespace={namespace} shiftToCenterPoint={shiftToCenterPoint} />
148+
)) ||
149+
null}
141150
</React.Fragment>
142151
);
143152
};

‎src/public/js/components/treeDiagram/component/Tree/Source/index.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,18 @@ const mapStateToProps = (state, props) => {
2020
codeCrumbsMinimize
2121
} = getCheckedState(state);
2222

23-
const { filesMap } = getSource(state, props);
24-
const { sourceLayoutTree } = getSourceLayout(state, props);
25-
const { selectedNode, openedFolders } = getSourceUserChoice(state, props);
23+
const { namespace } = props;
24+
const namespaceProps = { namespace };
25+
const { filesMap } = getSource(state, namespaceProps);
26+
const { sourceLayoutTree } = getSourceLayout(state, namespaceProps);
27+
const { selectedNode, openedFolders } = getSourceUserChoice(state, namespaceProps);
2628
const { dependenciesEntryName, selectedDependencyEdgeNodes } = getDependenciesUserChoice(
2729
state,
28-
props
30+
namespaceProps
2931
);
3032

3133
return {
34+
namespace,
3235
sourceDiagramOn,
3336
dependenciesDiagramOn,
3437
sourceDimFolders,
@@ -43,9 +46,12 @@ const mapStateToProps = (state, props) => {
4346
};
4447
};
4548

46-
const mapDispatchToProps = {
47-
onFileNodeClick: selectNode,
48-
onFolderNodeClick: toggleFolder
49+
const mapDispatchToProps = (dispatch, ownProps) => {
50+
const { namespace } = ownProps;
51+
return {
52+
onFileNodeClick: fileNode => dispatch(selectNode(fileNode, namespace)),
53+
onFolderNodeClick: folderNode => dispatch(toggleFolder(folderNode, namespace))
54+
};
4955
};
5056

5157
export default connect(

‎src/public/js/components/treeDiagram/component/TreeDiagram.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ class TreeDiagram extends React.Component {
6060

6161
const mapStateToProps = (state, props) => {
6262
const { namespace } = props;
63-
const { sourceLayoutTree } = getSourceLayout(state, props);
64-
const { diagramZoom } = getValuesState(state, props);
63+
const { sourceLayoutTree } = getSourceLayout(state, { namespace });
64+
const { diagramZoom } = getValuesState(state);
6565

6666
return {
6767
namespace,
@@ -74,7 +74,6 @@ const mapStateToProps = (state, props) => {
7474
const mapDispatchToProps = (dispatch, ownProps) => {
7575
const { namespace } = ownProps;
7676
return {
77-
// TODO: add namespace here, not from component render
7877
onUnderLayerClick: () => dispatch(selectDependencyEdge(undefined, namespace))
7978
};
8079
};

‎src/public/js/core/dataBus/actions.js‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,28 @@ export const selectNode = (fileNode, namespace) => dispatch => {
3838
});
3939
}
4040

41-
fetchFile(fileNode.path, { parseDependencies: true }).then(data =>
42-
dispatch({
43-
type: ACTIONS.SELECT_NODE,
44-
payload: { ...fileNode, ...data },
45-
namespace
46-
})
47-
);
41+
fetchFile(fileNode.path, { parseDependencies: true })
42+
.then(data =>
43+
dispatch({
44+
type: ACTIONS.SELECT_NODE,
45+
payload: { ...fileNode, ...data },
46+
namespace
47+
})
48+
)
49+
.catch(e => {
50+
console.log(`Could not fetch details from server for ${fileNode.path}`, e);
51+
dispatch({
52+
type: ACTIONS.SELECT_NODE,
53+
payload: fileNode,
54+
namespace
55+
});
56+
});
4857
};
4958

50-
export const toggleFolder = folderNode => ({
59+
export const toggleFolder = (folderNode, namespace) => ({
5160
type: ACTIONS.TOGGLE_FOLDER,
52-
payload: folderNode
61+
payload: folderNode,
62+
namespace
5363
});
5464

5565
export const openAllFolders = namespace => ({
@@ -62,9 +72,10 @@ export const closeAllFolders = namespace => ({
6272
namespace
6373
});
6474

65-
export const selectCodeCrumb = (fileNode, codeCrumb) => ({
75+
export const selectCodeCrumb = (payload, namespace) => ({
6676
type: ACTIONS.SELECT_CODE_CRUMB,
67-
payload: { fileNode, codeCrumb }
77+
payload,
78+
namespace
6879
});
6980

7081
export const setDependenciesEntryPoint = (fileNode, namespace) => (dispatch, getState) => {

‎src/public/js/core/dataBus/selectors.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createSelector } from 'reselect';
22

33
export const getNamespaceState = (state, props = {}) => {
4-
const namespace = props.namespace || Object.keys(state.dataBus)[0]; //XXX remove
4+
const { namespace } = props;
55
return state.dataBus[namespace];
66
};
77

0 commit comments

Comments
 (0)