From 8549b6143656ddd868948584ffd99c021805d9a4 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Wed, 9 Mar 2016 10:08:55 +0100 Subject: [PATCH] SONAR-7454 Keep state of "Tree" and "List" when switching between them --- .../components/MeasureDrilldown.js | 22 +++++++++- .../components/MeasureDrilldownList.js | 42 ++++++++++++------- .../components/MeasureDrilldownTree.js | 34 +++++++-------- 3 files changed, 63 insertions(+), 35 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldown.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldown.js index c8205cb0a50..d0e78285813 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldown.js +++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldown.js @@ -30,13 +30,33 @@ import { hasHistory, hasBubbleChart, hasTreemap } from '../utils'; import { translate } from '../../../helpers/l10n'; export default class MeasureDrilldown extends React.Component { + state = { + tree: { + components: [], + breadcrumbs: [], + selected: null, + fetching: true + }, + list: { + components: [], + selected: null, + fetching: true + } + }; + render () { const { children, metric, ...other } = this.props; const { component } = this.context; const showListView = ['VW', 'SVW', 'DEV'].indexOf(component.qualifier) === -1; - const child = React.cloneElement(children, { component, metric, ...other }); + const child = React.cloneElement(children, { + component, + metric, + ...other, + store: this.state, + updateStore: this.setState.bind(this) + }); return (
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js index 0a0e49601aa..78872e291a7 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js +++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownList.js @@ -27,15 +27,11 @@ import { enhanceWithSingleMeasure } from '../utils'; import { getFiles } from '../../../api/components'; export default class MeasureDrilldownList extends React.Component { - state = { - components: [], - selected: null, - fetching: true - }; - componentDidMount () { this.mounted = true; - this.fetchComponents(this.context.component); + if (this.props.store.list.fetching) { + this.fetchComponents(this.context.component); + } } componentDidUpdate (nextProps, nextState, nextContext) { @@ -50,7 +46,7 @@ export default class MeasureDrilldownList extends React.Component { } fetchComponents (baseComponent) { - const { metric } = this.props; + const { metric, store, updateStore } = this.props; const asc = metric.direction === 1; const options = { @@ -59,28 +55,42 @@ export default class MeasureDrilldownList extends React.Component { asc }; - this.setState({ fetching: true }); + updateStore({ + list: { + ...store.list, + fetching: true + } + }); getFiles(baseComponent.key, [metric.key], options).then(files => { if (this.mounted) { const components = enhanceWithSingleMeasure(files); - this.setState({ - components, - selected: null, - fetching: false + updateStore({ + list: { + ...store.list, + components, + selected: null, + fetching: false + } }); } }); } handleFileClick (selected) { - this.setState({ selected }); + const { store, updateStore } = this.props; + updateStore({ + list: { + ...store.list, + selected + } + }); } render () { - const { metric } = this.props; - const { components, selected, fetching } = this.state; + const { metric, store } = this.props; + const { components, selected, fetching } = store.list; if (fetching) { return ; diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js index 5e2a2a65d64..0f925cc2f42 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js +++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureDrilldownTree.js @@ -27,16 +27,11 @@ import { enhanceWithSingleMeasure } from '../utils'; import { getChildren } from '../../../api/components'; export default class MeasureDrilldownTree extends React.Component { - state = { - components: [], - breadcrumbs: [], - selected: null, - fetching: true - }; - componentDidMount () { this.mounted = true; - this.fetchComponents(this.context.component); + if (this.props.store.tree.fetching) { + this.fetchComponents(this.context.component); + } } componentDidUpdate (nextProps, nextState, nextContext) { @@ -51,7 +46,7 @@ export default class MeasureDrilldownTree extends React.Component { } fetchComponents (baseComponent) { - const { metric } = this.props; + const { metric, store, updateStore } = this.props; const asc = metric.direction === 1; const options = { @@ -62,26 +57,29 @@ export default class MeasureDrilldownTree extends React.Component { const componentKey = baseComponent.refKey || baseComponent.key; - this.setState({ fetching: true }); + updateStore({ tree: { ...store.tree, fetching: true } }); getChildren(componentKey, [metric.key], options).then(children => { if (this.mounted) { const components = enhanceWithSingleMeasure(children); - const indexInBreadcrumbs = this.state.breadcrumbs + const indexInBreadcrumbs = store.tree.breadcrumbs .findIndex(component => component === baseComponent); const breadcrumbs = indexInBreadcrumbs !== -1 ? - this.state.breadcrumbs.slice(0, indexInBreadcrumbs + 1) : - [...this.state.breadcrumbs, baseComponent]; + store.tree.breadcrumbs.slice(0, indexInBreadcrumbs + 1) : + [...store.tree.breadcrumbs, baseComponent]; - this.setState({ + const tree = { + ...store.tree, baseComponent, breadcrumbs, components, selected: null, fetching: false - }); + }; + + updateStore({ tree }); } }); } @@ -95,12 +93,12 @@ export default class MeasureDrilldownTree extends React.Component { } handleFileOpen (selected) { - this.setState({ selected }); + this.props.updateStore({ tree: { ...this.props.store.tree, selected } }); } render () { - const { metric } = this.props; - const { components, selected, breadcrumbs, fetching } = this.state; + const { metric, store } = this.props; + const { components, selected, breadcrumbs, fetching } = store.tree; const parent = breadcrumbs.length > 1 ? breadcrumbs[breadcrumbs.length - 2] : null; if (fetching) { -- 2.39.5