Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ascott merged 2 commits into from
Sep 22, 2016
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59eb70f
move some redux utils to shared file so they can be used in the new e…
Sep 21, 2016
9b1ec0d
enhancer is a func now
Sep 21, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 3 additions & 9 deletions caravel/assets/javascripts/SqlLab/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
64 changes: 2 additions & 62 deletions caravel/assets/javascripts/SqlLab/reducers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }
Copy link
Member

@bkyryliuk bkyryliuk Sep 21, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing trailing comma.

Copy link
Author

@ascott ascott Sep 21, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need trailing commas in destructured vars afaik.

Copy link
Author

@ascott ascott Sep 21, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nvm, you are right: https://codeclimate.com/github/airbnb/caravel/pull/1164

Copy link
Author

@ascott ascott Sep 21, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interesting tho, eslint complains that trailing comma is not needed here. where does codeclimate get it's js lint rules from? @bkyryliuk

Copy link
Member

@bkyryliuk bkyryliuk Sep 22, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ascott - .codeclimate.yml
It uses:

  eslint:
    enabled: true
    config:
      config: caravel/assets/.eslintrc

from '../reduxUtils.js';

const defaultQueryEditor = {
id: shortid.generate(),
Expand All @@ -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]() {
Expand Down
75 changes: 75 additions & 0 deletions caravel/assets/javascripts/reduxUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}