From b3c9aa121db540535ca7c037b53b52390c11660c Mon Sep 17 00:00:00 2001 From: ivaosthu Date: Thu, 24 Nov 2016 19:34:23 +0100 Subject: [PATCH 1/2] Implemented a settings-store backed by localstorage. Closes #9 --- .../component/history/history-component.jsx | 2 +- .../component/history/history-container.js | 1 - .../history/history-list-component.jsx | 12 ++---- .../history/history-list-container.jsx | 21 ++++++++++ .../history/history-list-toggle-component.jsx | 2 +- frontend/src/store/index.js | 2 + frontend/src/store/settings/actions.js | 10 +++++ frontend/src/store/settings/index.js | 39 +++++++++++++++++++ 8 files changed, 78 insertions(+), 11 deletions(-) create mode 100644 frontend/src/component/history/history-list-container.jsx create mode 100644 frontend/src/store/settings/actions.js create mode 100644 frontend/src/store/settings/index.js diff --git a/frontend/src/component/history/history-component.jsx b/frontend/src/component/history/history-component.jsx index ad52076abc..39c2a9f430 100644 --- a/frontend/src/component/history/history-component.jsx +++ b/frontend/src/component/history/history-component.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import HistoryList from './history-list-component'; +import HistoryList from './history-list-container'; class History extends Component { diff --git a/frontend/src/component/history/history-container.js b/frontend/src/component/history/history-container.js index b8ff05c580..3b1d7cb8a2 100644 --- a/frontend/src/component/history/history-container.js +++ b/frontend/src/component/history/history-container.js @@ -4,7 +4,6 @@ import { fetchHistory } from '../../store/history-actions'; const mapStateToProps = (state) => { const history = state.history.get('list').toArray(); - return { history, }; diff --git a/frontend/src/component/history/history-list-component.jsx b/frontend/src/component/history/history-list-component.jsx index d5c4fe5748..bc16216237 100644 --- a/frontend/src/component/history/history-list-component.jsx +++ b/frontend/src/component/history/history-list-component.jsx @@ -6,27 +6,23 @@ import style from './history.scss'; class HistoryList extends Component { - constructor (props) { - super(props); - this.state = { showData: false }; - } - toggleShowDiff () { - this.setState({ showData: !this.state.showData }); + this.props.updateSetting('showData', !this.props.settings.showData); } render () { + const showData = this.props.settings.showData; const { history } = this.props; if (!history || history.length < 0) { return null; } - const entries = history.map((entry) => ); + const entries = history.map((entry) => ); return (
diff --git a/frontend/src/component/history/history-list-container.jsx b/frontend/src/component/history/history-list-container.jsx new file mode 100644 index 0000000000..b7215486af --- /dev/null +++ b/frontend/src/component/history/history-list-container.jsx @@ -0,0 +1,21 @@ +import { connect } from 'react-redux'; +import HistoryListComponent from './history-list-component'; +import { updateSettingForGroup } from '../../store/settings/actions'; + +const mapStateToProps = (state) => { + let settings = {}; + const historySettings = state.settings.get('history'); + if (historySettings) { + settings = historySettings.toJS(); + } + + return { + settings, + }; +}; + +const HistoryListContainer = connect(mapStateToProps, { + updateSetting: updateSettingForGroup('history'), +})(HistoryListComponent); + +export default HistoryListContainer; diff --git a/frontend/src/component/history/history-list-toggle-component.jsx b/frontend/src/component/history/history-list-toggle-component.jsx index e6c48dfd84..80b48e2ae4 100644 --- a/frontend/src/component/history/history-list-toggle-component.jsx +++ b/frontend/src/component/history/history-list-toggle-component.jsx @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from 'react'; -import ListComponent from './history-list-component'; +import ListComponent from './history-list-container'; import { fetchHistoryForToggle } from '../../data/history-api'; class HistoryListToggle extends Component { diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index 2710c6cc1e..8e75abe331 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -9,6 +9,7 @@ import error from './error-store'; import metrics from './metrics-store'; import clientStrategies from './client-strategy-store'; import clientInstances from './client-instance-store'; +import settings from './settings'; const unleashStore = combineReducers({ features, @@ -21,6 +22,7 @@ const unleashStore = combineReducers({ metrics, clientStrategies, clientInstances, + settings, }); export default unleashStore; diff --git a/frontend/src/store/settings/actions.js b/frontend/src/store/settings/actions.js new file mode 100644 index 0000000000..5aaa47345d --- /dev/null +++ b/frontend/src/store/settings/actions.js @@ -0,0 +1,10 @@ +export const UPDATE_SETTING = 'UPDATE_SETTING'; + +export const updateSetting = (group, field, value) => ({ + type: UPDATE_SETTING, + group, + field, + value, +}); + +export const updateSettingForGroup = (group) => (field, value) => updateSetting(group, field, value); diff --git a/frontend/src/store/settings/index.js b/frontend/src/store/settings/index.js new file mode 100644 index 0000000000..d6f0aab1b6 --- /dev/null +++ b/frontend/src/store/settings/index.js @@ -0,0 +1,39 @@ +import { fromJS, Map as $Map } from 'immutable'; +import { UPDATE_SETTING } from './actions'; + +// TODO: provde a mock if localstorage does not exists? +const localStorage = window.localStorage || {}; +const SETTINGS = 'settings'; + +function getInitState () { + try { + const state = JSON.parse(localStorage.getItem(SETTINGS)); + return state ? fromJS(state) : new $Map(); + } catch (e) { + return new $Map(); + } +} + +function updateSetting (state, action) { + let newState; + if (state.get(action.group)) { + newState = state.updateIn([action.group, action.field], () => action.value); + } else { + newState = state.set(action.group, new $Map()) + .updateIn([action.group, action.field], () => action.value); + } + + localStorage.setItem(SETTINGS, JSON.stringify(newState.toJSON())); + return newState; +} + +const settingStore = (state = getInitState(), action) => { + switch (action.type) { + case UPDATE_SETTING: + return updateSetting(state, action); + default: + return state; + } +}; + +export default settingStore; From bb3791987def4310ca22e6f07bf8544420aa4233 Mon Sep 17 00:00:00 2001 From: ivaosthu Date: Thu, 24 Nov 2016 20:30:06 +0100 Subject: [PATCH 2/2] simplify immutable js --- frontend/src/component/history/history-list-container.jsx | 6 +----- frontend/src/store/settings/index.js | 8 +------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/frontend/src/component/history/history-list-container.jsx b/frontend/src/component/history/history-list-container.jsx index b7215486af..df8a725a80 100644 --- a/frontend/src/component/history/history-list-container.jsx +++ b/frontend/src/component/history/history-list-container.jsx @@ -3,11 +3,7 @@ import HistoryListComponent from './history-list-component'; import { updateSettingForGroup } from '../../store/settings/actions'; const mapStateToProps = (state) => { - let settings = {}; - const historySettings = state.settings.get('history'); - if (historySettings) { - settings = historySettings.toJS(); - } + const settings = state.settings.toJS().history || {}; return { settings, diff --git a/frontend/src/store/settings/index.js b/frontend/src/store/settings/index.js index d6f0aab1b6..12d883b154 100644 --- a/frontend/src/store/settings/index.js +++ b/frontend/src/store/settings/index.js @@ -15,13 +15,7 @@ function getInitState () { } function updateSetting (state, action) { - let newState; - if (state.get(action.group)) { - newState = state.updateIn([action.group, action.field], () => action.value); - } else { - newState = state.set(action.group, new $Map()) - .updateIn([action.group, action.field], () => action.value); - } + const newState = state.updateIn([action.group, action.field], () => action.value); localStorage.setItem(SETTINGS, JSON.stringify(newState.toJSON())); return newState;