[redux] move some redux utils to shared file (#1164)

* move some redux utils to shared file so they can be used in the new export view too

* enhancer is a func now

caravel/assets/javascripts/SqlLab/index.jsx

@@ -10,21 +10,15 @@ 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 '../reduxUtils';
 
 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);
+let store = createStore(sqlLabReducer, initialState, enhancer());
 
 // jquery hack to highlight the navbar menu
 $('a[href="/caravel/sqllab"]').parent().addClass('active');

caravel/assets/javascripts/SqlLab/reducers.js

@@ -1,6 +1,8 @@
 import shortid from 'shortid';
 import * as actions from './actions';
 import { now } from '../modules/dates';
+import { addToObject, alterInObject, alterInArr, removeFromArr, getFromArr, addToArr }
+  from '../reduxUtils.js';
 
 const defaultQueryEditor = {
   id: shortid.generate(),
@@ -23,68 +25,6 @@ export const initialState = {
   queriesLastUpdate: 0,
 };
 
-function addToObject(state, arrKey, obj) {
-  const newObject = Object.assign({}, state[arrKey]);
-  const copiedObject = Object.assign({}, obj);
-
-  if (!copiedObject.id) {
-    copiedObject.id = shortid.generate();
-  }
-  newObject[copiedObject.id] = copiedObject;
-  return Object.assign({}, state, { [arrKey]: newObject });
-}
-
-function alterInObject(state, arrKey, obj, alterations) {
-  const newObject = Object.assign({}, state[arrKey]);
-  newObject[obj.id] = Object.assign({}, newObject[obj.id], alterations);
-  return Object.assign({}, state, { [arrKey]: newObject });
-}
-
-function alterInArr(state, arrKey, obj, alterations) {
-  // Finds an item in an array in the state and replaces it with a
-  // new object with an altered property
-  const idKey = 'id';
-  const newArr = [];
-  state[arrKey].forEach((arrItem) => {
-    if (obj[idKey] === arrItem[idKey]) {
-      newArr.push(Object.assign({}, arrItem, alterations));
-    } else {
-      newArr.push(arrItem);
-    }
-  });
-  return Object.assign({}, state, { [arrKey]: newArr });
-}
-
-function removeFromArr(state, arrKey, obj, idKey = 'id') {
-  const newArr = [];
-  state[arrKey].forEach((arrItem) => {
-    if (!(obj[idKey] === arrItem[idKey])) {
-      newArr.push(arrItem);
-    }
-  });
-  return Object.assign({}, state, { [arrKey]: newArr });
-}
-
-function getFromArr(arr, id) {
-  let obj;
-  arr.forEach((o) => {
-    if (o.id === id) {
-      obj = o;
-    }
-  });
-  return obj;
-}
-
-function addToArr(state, arrKey, obj) {
-  const newObj = Object.assign({}, obj);
-  if (!newObj.id) {
-    newObj.id = shortid.generate();
-  }
-  const newState = {};
-  newState[arrKey] = [...state[arrKey], newObj];
-  return Object.assign({}, state, newState);
-}
-
 export const sqlLabReducer = function (state, action) {
   const actionHandlers = {
     [actions.ADD_QUERY_EDITOR]() {

caravel/assets/javascripts/reduxUtils.js

@@ -0,0 +1,75 @@
+import shortid from 'shortid';
+import { compose } from 'redux';
+import persistState from 'redux-localstorage';
+
+export function addToObject(state, arrKey, obj) {
+  const newObject = Object.assign({}, state[arrKey]);
+  const copiedObject = Object.assign({}, obj);
+
+  if (!copiedObject.id) {
+    copiedObject.id = shortid.generate();
+  }
+  newObject[copiedObject.id] = copiedObject;
+  return Object.assign({}, state, { [arrKey]: newObject });
+}
+
+export function alterInObject(state, arrKey, obj, alterations) {
+  const newObject = Object.assign({}, state[arrKey]);
+  newObject[obj.id] = Object.assign({}, newObject[obj.id], alterations);
+  return Object.assign({}, state, { [arrKey]: newObject });
+}
+
+export function alterInArr(state, arrKey, obj, alterations) {
+  // Finds an item in an array in the state and replaces it with a
+  // new object with an altered property
+  const idKey = 'id';
+  const newArr = [];
+  state[arrKey].forEach((arrItem) => {
+    if (obj[idKey] === arrItem[idKey]) {
+      newArr.push(Object.assign({}, arrItem, alterations));
+    } else {
+      newArr.push(arrItem);
+    }
+  });
+  return Object.assign({}, state, { [arrKey]: newArr });
+}
+
+export function removeFromArr(state, arrKey, obj, idKey = 'id') {
+  const newArr = [];
+  state[arrKey].forEach((arrItem) => {
+    if (!(obj[idKey] === arrItem[idKey])) {
+      newArr.push(arrItem);
+    }
+  });
+  return Object.assign({}, state, { [arrKey]: newArr });
+}
+
+export function getFromArr(arr, id) {
+  let obj;
+  arr.forEach((o) => {
+    if (o.id === id) {
+      obj = o;
+    }
+  });
+  return obj;
+}
+
+export function addToArr(state, arrKey, obj) {
+  const newObj = Object.assign({}, obj);
+  if (!newObj.id) {
+    newObj.id = shortid.generate();
+  }
+  const newState = {};
+  newState[arrKey] = [...state[arrKey], newObj];
+  return Object.assign({}, state, newState);
+}
+
+export function enhancer() {
+  let enhancerWithPersistState = compose(persistState());
+  if (process.env.NODE_ENV === 'dev') {
+    enhancerWithPersistState = compose(
+      persistState(), window.devToolsExtension && window.devToolsExtension()
+    );
+  }
+  return enhancerWithPersistState;
+}