[sqllab] bugfix SouthPane doesn't update as expected (#1699)

* [sqllab] bugfix SouthPane doesn't update as expected

* Linting
This commit is contained in:
Maxime Beauchemin 2016-11-28 16:24:02 -08:00 committed by GitHub
parent 84e8f741ae
commit b7019ad4f3
2 changed files with 21 additions and 24 deletions

View File

@ -5,7 +5,6 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import React from 'react';
import { areArraysShallowEqual } from '../../reduxUtils';
import shortid from 'shortid';
@ -28,11 +27,6 @@ class SouthPane extends React.PureComponent {
switchTab(id) {
this.props.actions.setActiveSouthPaneTab(id);
}
shouldComponentUpdate(nextProps) {
return !areArraysShallowEqual(this.props.editorQueries, nextProps.editorQueries)
|| !areArraysShallowEqual(this.props.dataPreviewQueries, nextProps.dataPreviewQueries)
|| this.props.activeSouthPaneTab !== nextProps.activeSouthPaneTab;
}
render() {
let latestQuery;
const props = this.props;

View File

@ -6,7 +6,7 @@ import * as Actions from '../actions';
import SqlEditor from './SqlEditor';
import { getParamFromQuery } from '../../../utils/common';
import CopyQueryTabUrl from './CopyQueryTabUrl';
import { areObjectsEqual } from '../../reduxUtils';
import { areArraysShallowEqual } from '../../reduxUtils';
const propTypes = {
actions: React.PropTypes.object.isRequired,
@ -37,6 +37,7 @@ class TabbedSqlEditors extends React.PureComponent {
cleanUri,
query,
queriesArray: [],
dataPreviewQueries: [],
hideLeftBar: false,
};
}
@ -56,17 +57,27 @@ class TabbedSqlEditors extends React.PureComponent {
}
}
componentWillReceiveProps(nextProps) {
const activeQeId = this.props.tabHistory[this.props.tabHistory.length - 1];
const newActiveQeId = nextProps.tabHistory[nextProps.tabHistory.length - 1];
if (activeQeId !== newActiveQeId || !areObjectsEqual(this.props.queries, nextProps.queries)) {
const queriesArray = [];
for (const id in this.props.queries) {
if (this.props.queries[id].sqlEditorId === newActiveQeId) {
queriesArray.push(this.props.queries[id]);
}
const nextActiveQeId = nextProps.tabHistory[nextProps.tabHistory.length - 1];
const queriesArray = [];
for (const id in nextProps.queries) {
if (nextProps.queries[id].sqlEditorId === nextActiveQeId) {
queriesArray.push(nextProps.queries[id]);
}
}
if (!areArraysShallowEqual(queriesArray, this.state.queriesArray)) {
this.setState({ queriesArray });
}
const dataPreviewQueries = [];
nextProps.tables.forEach((table) => {
const queryId = table.dataPreviewQueryId;
if (queryId && nextProps.queries[queryId] && table.queryEditorId === nextActiveQeId) {
dataPreviewQueries.push(nextProps.queries[queryId]);
}
});
if (!areArraysShallowEqual(dataPreviewQueries, this.state.dataPreviewQueries)) {
this.setState({ dataPreviewQueries });
}
}
renameTab(qe) {
/* eslint no-alert: 0 */
@ -124,14 +135,6 @@ class TabbedSqlEditors extends React.PureComponent {
}
const state = (latestQuery) ? latestQuery.state : '';
const dataPreviewQueries = [];
this.props.tables.forEach((table) => {
const queryId = table.dataPreviewQueryId;
if (queryId && this.props.queries[queryId] && table.queryEditorId === qe.id) {
dataPreviewQueries.push(this.props.queries[queryId]);
}
});
const tabTitle = (
<div>
<div className={'circle ' + state} /> {qe.title} {' '}
@ -173,7 +176,7 @@ class TabbedSqlEditors extends React.PureComponent {
tables={this.props.tables.filter((t) => (t.queryEditorId === qe.id))}
queryEditor={qe}
editorQueries={this.state.queriesArray}
dataPreviewQueries={dataPreviewQueries}
dataPreviewQueries={this.state.dataPreviewQueries}
latestQuery={latestQuery}
database={database}
actions={this.props.actions}