Merge pull request #10 from Unleash/settings-store

Implemented a settings-store backed by localstorage.

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 {
 

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,
     };

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) => <HistoryItem  key={`log${entry.id}`} entry={entry} showData={this.state.showData} />);
+        const entries =  history.map((entry) => <HistoryItem  key={`log${entry.id}`} entry={entry} showData={showData} />);
 
         return (
             <div>
                 <Switch
-                    checked={this.state.showData}
+                    checked={showData}
                     label="Show full events"
                     onChange={this.toggleShowDiff.bind(this)}
                     />

frontend/src/component/history/history-list-container.jsx

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import HistoryListComponent from './history-list-component';
+import { updateSettingForGroup } from '../../store/settings/actions';
+
+const mapStateToProps = (state) => {
+    const settings = state.settings.toJS().history || {};
+
+    return {
+        settings,
+    };
+};
+
+const HistoryListContainer = connect(mapStateToProps, {
+    updateSetting: updateSettingForGroup('history'),
+})(HistoryListComponent);
+
+export default HistoryListContainer;

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 {

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;

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);

frontend/src/store/settings/index.js

@@ -0,0 +1,33 @@
+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) {
+    const newState = state.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;