From 352ae516ccc76114a73984862994ae2674ee02f9 Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Wed, 21 Sep 2016 09:59:23 -0700 Subject: [PATCH] Modifications based on comments --- caravel/assets/javascripts/SqlLab/index.jsx | 10 +---- caravel/assets/javascripts/SqlLab/reducers.js | 44 ++++++++++--------- .../assets/javascripts/explorev2/index.jsx | 17 +++---- .../explorev2/reducers/exploreReducer.js | 6 +-- .../javascripts/explorev2/stores/store.js | 2 + caravel/assets/utils/common.js | 13 ++++++ 6 files changed, 50 insertions(+), 42 deletions(-) diff --git a/caravel/assets/javascripts/SqlLab/index.jsx b/caravel/assets/javascripts/SqlLab/index.jsx index 6c9bd25e8e810..e0a7fa18c0c2b 100644 --- a/caravel/assets/javascripts/SqlLab/index.jsx +++ b/caravel/assets/javascripts/SqlLab/index.jsx @@ -10,20 +10,14 @@ import TabbedSqlEditors from './components/TabbedSqlEditors'; import QueryAutoRefresh from './components/QueryAutoRefresh'; import Alerts from './components/Alerts'; -import { bindActionCreators, compose, createStore } from 'redux'; +import { bindActionCreators, createStore } from 'redux'; import { connect, Provider } from 'react-redux'; import { initialState, sqlLabReducer } from './reducers'; -import persistState from 'redux-localstorage'; +import { enhancer } from '../../utils/common'; require('./main.css'); -let enhancer = compose(persistState()); -if (process.env.NODE_ENV === 'dev') { - enhancer = compose( - persistState(), window.devToolsExtension && window.devToolsExtension() - ); -} let store = createStore(sqlLabReducer, initialState, enhancer); // jquery hack to highlight the navbar menu diff --git a/caravel/assets/javascripts/SqlLab/reducers.js b/caravel/assets/javascripts/SqlLab/reducers.js index 61ec52d3b1caa..5dce1877a4f0b 100644 --- a/caravel/assets/javascripts/SqlLab/reducers.js +++ b/caravel/assets/javascripts/SqlLab/reducers.js @@ -1,7 +1,9 @@ import shortid from 'shortid'; import * as actions from './actions'; import { now } from '../modules/dates'; -import * as utils from '../../utils/reducerUtils'; +import + { addToArr, alterInArr, removeFromArr, addToObject, alterInObject } + from '../../utils/reducerUtils'; const defaultQueryEditor = { id: shortid.generate(), @@ -30,10 +32,10 @@ export const sqlLabReducer = function (state, action) { const tabHistory = state.tabHistory.slice(); tabHistory.push(action.queryEditor.id); const newState = Object.assign({}, state, { tabHistory }); - return utils.addToArr(newState, 'queryEditors', action.queryEditor); + return addToArr(newState, 'queryEditors', action.queryEditor); }, [actions.REMOVE_QUERY_EDITOR]() { - let newState = utils.removeFromArr(state, 'queryEditors', action.queryEditor); + let newState = removeFromArr(state, 'queryEditors', action.queryEditor); // List of remaining queryEditor ids const qeIds = newState.queryEditors.map((qe) => qe.id); let th = state.tabHistory.slice(); @@ -50,25 +52,25 @@ export const sqlLabReducer = function (state, action) { return Object.assign({}, initialState); }, [actions.ADD_TABLE]() { - return utils.addToArr(state, 'tables', action.table); + return addToArr(state, 'tables', action.table); }, [actions.EXPAND_TABLE]() { - return utils.alterInArr(state, 'tables', action.table, { expanded: true }); + return alterInArr(state, 'tables', action.table, { expanded: true }); }, [actions.COLLAPSE_TABLE]() { - return utils.alterInArr(state, 'tables', action.table, { expanded: false }); + return alterInArr(state, 'tables', action.table, { expanded: false }); }, [actions.REMOVE_TABLE]() { - return utils.removeFromArr(state, 'tables', action.table); + return removeFromArr(state, 'tables', action.table); }, [actions.START_QUERY]() { - const newState = utils.addToObject(state, 'queries', action.query); + const newState = addToObject(state, 'queries', action.query); const sqlEditor = { id: action.query.sqlEditorId }; - return utils.alterInArr( + return alterInArr( newState, 'queryEditors', sqlEditor, { latestQueryId: action.query.id }); }, [actions.STOP_QUERY]() { - return utils.alterInObject(state, 'queries', action.query, { state: 'stopped' }); + return alterInObject(state, 'queries', action.query, { state: 'stopped' }); }, [actions.QUERY_SUCCESS]() { const alts = { @@ -78,11 +80,11 @@ export const sqlLabReducer = function (state, action) { progress: 100, endDttm: now(), }; - return utils.alterInObject(state, 'queries', action.query, alts); + return alterInObject(state, 'queries', action.query, alts); }, [actions.QUERY_FAILED]() { const alts = { state: 'failed', errorMessage: action.msg, endDttm: now() }; - return utils.alterInObject(state, 'queries', action.query, alts); + return alterInObject(state, 'queries', action.query, alts); }, [actions.SET_ACTIVE_QUERY_EDITOR]() { const qeIds = state.queryEditors.map((qe) => qe.id); @@ -94,29 +96,29 @@ export const sqlLabReducer = function (state, action) { return state; }, [actions.QUERY_EDITOR_SETDB]() { - return utils.alterInArr(state, 'queryEditors', action.queryEditor, { dbId: action.dbId }); + return alterInArr(state, 'queryEditors', action.queryEditor, { dbId: action.dbId }); }, [actions.QUERY_EDITOR_SET_SCHEMA]() { - return utils.alterInArr(state, 'queryEditors', action.queryEditor, { schema: action.schema }); + return alterInArr(state, 'queryEditors', action.queryEditor, { schema: action.schema }); }, [actions.QUERY_EDITOR_SET_TITLE]() { - return utils.alterInArr(state, 'queryEditors', action.queryEditor, { title: action.title }); + return alterInArr(state, 'queryEditors', action.queryEditor, { title: action.title }); }, [actions.QUERY_EDITOR_SET_SQL]() { - return utils.alterInArr(state, 'queryEditors', action.queryEditor, { sql: action.sql }); + return alterInArr(state, 'queryEditors', action.queryEditor, { sql: action.sql }); }, [actions.QUERY_EDITOR_SET_AUTORUN]() { - return utils.alterInArr( + return alterInArr( state, 'queryEditors', action.queryEditor, { autorun: action.autorun }); }, [actions.ADD_WORKSPACE_QUERY]() { - return utils.addToArr(state, 'workspaceQueries', action.query); + return addToArr(state, 'workspaceQueries', action.query); }, [actions.REMOVE_WORKSPACE_QUERY]() { - return utils.removeFromArr(state, 'workspaceQueries', action.query); + return removeFromArr(state, 'workspaceQueries', action.query); }, [actions.ADD_ALERT]() { - return utils.addToArr(state, 'alerts', action.alert); + return addToArr(state, 'alerts', action.alert); }, [actions.SET_DATABASES]() { const databases = {}; @@ -126,7 +128,7 @@ export const sqlLabReducer = function (state, action) { return Object.assign({}, state, { databases }); }, [actions.REMOVE_ALERT]() { - return utils.removeFromArr(state, 'alerts', action.alert); + return removeFromArr(state, 'alerts', action.alert); }, [actions.SET_NETWORK_STATUS]() { if (state.networkOn !== action.networkOn) { diff --git a/caravel/assets/javascripts/explorev2/index.jsx b/caravel/assets/javascripts/explorev2/index.jsx index 8974b6a2ed59f..53e8a64035f45 100644 --- a/caravel/assets/javascripts/explorev2/index.jsx +++ b/caravel/assets/javascripts/explorev2/index.jsx @@ -2,25 +2,22 @@ import React from 'react'; import ReactDOM from 'react-dom'; import ExploreViewContainer from './components/ExploreViewContainer'; -import { compose, createStore } from 'redux'; +import { createStore } from 'redux'; import { Provider } from 'react-redux'; +import { enhancer } from '../../utils/common'; import { initialState } from './stores/store'; const exploreViewContainer = document.getElementById('js-explore-view-container'); const bootstrapData = exploreViewContainer.getAttribute('data-bootstrap'); - import { exploreReducer } from './reducers/exploreReducer'; -import persistState from 'redux-localstorage'; -let enhancer = compose(persistState()); -if (process.env.NODE_ENV === 'dev') { - enhancer = compose( - persistState(), window.devToolsExtension && window.devToolsExtension() - ); -} -let store = createStore(exploreReducer, initialState, enhancer); +const bootstrappedState = Object.assign(initialState, { + datasources: bootstrapData.datasources, + viz: bootstrapData.viz, +}); +const store = createStore(exploreReducer, bootstrappedState, enhancer); ReactDOM.render( diff --git a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js index a7bdf0cf62ec8..e7c0de6d49a8e 100644 --- a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js +++ b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js @@ -1,5 +1,5 @@ import * as actions from '../actions/exploreActions'; -import * as utils from '../../../utils/reducerUtils'; +import { addToArr, removeFromArr } from '../../../utils/reducerUtils'; export const exploreReducer = function (state, action) { const actionHandlers = { @@ -52,10 +52,10 @@ export const exploreReducer = function (state, action) { return Object.assign({}, state, { SQL: action.sql }); }, [actions.ADD_FILTER]() { - return utils.addToArr(state, 'filters', action.filter); + return addToArr(state, 'filters', action.filter); }, [actions.REMOVE_FILTER]() { - return utils.removeFromArr(state, 'filters', action.filter); + return removeFromArr(state, 'filters', action.filter); }, }; if (action.type in actionHandlers) { diff --git a/caravel/assets/javascripts/explorev2/stores/store.js b/caravel/assets/javascripts/explorev2/stores/store.js index bf16f4fbb5f51..5dcfd2d387a9e 100644 --- a/caravel/assets/javascripts/explorev2/stores/store.js +++ b/caravel/assets/javascripts/explorev2/stores/store.js @@ -16,7 +16,9 @@ const defaultSql = { }; export const initialState = { + datasources: null, datasourceId: null, + viz: null, vizType: null, timeFilter: defaultTimeFilter, groupBy: defaultGroupBy, diff --git a/caravel/assets/utils/common.js b/caravel/assets/utils/common.js index a6aa001e41d80..5e98b996bfb5a 100644 --- a/caravel/assets/utils/common.js +++ b/caravel/assets/utils/common.js @@ -1,4 +1,7 @@ /* eslint global-require: 0 */ +import persistState from 'redux-localstorage'; +import { compose } from 'redux'; + const d3 = window.d3 || require('d3'); export const EARTH_CIRCUMFERENCE_KM = 40075.16; @@ -26,3 +29,13 @@ export function rgbLuminance(r, g, b) { // Formula: https://en.wikipedia.org/wiki/Relative_luminance return (LUMINANCE_RED_WEIGHT * r) + (LUMINANCE_GREEN_WEIGHT * g) + (LUMINANCE_BLUE_WEIGHT * b); } + +export function getDevEnhancer() { + let enhancer = compose(persistState()); + if (process.env.NODE_ENV === 'dev') { + enhancer = compose( + persistState(), window.devToolsExtension && window.devToolsExtension() + ); + } + return enhancer; +}