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;