Moved queriesArray from render() to local state (#1505)

* Moved queriesArray from render() to local state, so that QueriesArray
is only reloaded only during switching tabs or queries object is updated.

* Changed object comparison function to take length into consideration
This commit is contained in:
vera-liu
2016-11-01 19:40:09 -07:00
committed by GitHub
parent 769fb0820f
commit 26318f94fe
2 changed files with 35 additions and 7 deletions

View File

@@ -6,6 +6,7 @@ import * as Actions from '../actions';
import SqlEditor from './SqlEditor';
import { getParamFromQuery } from '../../../utils/common';
import CopyQueryTabUrl from './CopyQueryTabUrl';
import { areObjectsEqual } from '../../reduxUtils';
const propTypes = {
actions: React.PropTypes.object.isRequired,
@@ -34,6 +35,7 @@ class TabbedSqlEditors extends React.PureComponent {
uri,
cleanUri,
query,
queriesArray: [],
};
}
componentWillMount() {
@@ -51,6 +53,19 @@ class TabbedSqlEditors extends React.PureComponent {
window.history.replaceState({}, document.title, this.state.cleanUri);
}
}
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]);
}
}
this.setState({ queriesArray });
}
}
renameTab(qe) {
/* eslint no-alert: 0 */
const newTitle = prompt('Enter a new title for the tab');
@@ -93,12 +108,7 @@ class TabbedSqlEditors extends React.PureComponent {
render() {
const editors = this.props.queryEditors.map((qe, i) => {
const isSelected = (qe.id === this.activeQueryEditor().id);
const queriesArray = [];
for (const id in this.props.queries) {
if (this.props.queries[id].sqlEditorId === qe.id) {
queriesArray.push(this.props.queries[id]);
}
}
let latestQuery;
if (qe.latestQueryId) {
latestQuery = this.props.queries[qe.latestQueryId];
@@ -142,7 +152,7 @@ class TabbedSqlEditors extends React.PureComponent {
<SqlEditor
tables={this.props.tables.filter((t) => (t.queryEditorId === qe.id))}
queryEditor={qe}
queries={queriesArray}
queries={this.state.queriesArray}
latestQuery={latestQuery}
database={database}
actions={this.props.actions}