Better settings handling with localSettings (new!)

app/javascript/mastodon/actions/local_settings.js

@@ -0,0 +1,20 @@
+export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE';
+
+export function changeLocalSetting(key, value) {
+  return dispatch => {
+    dispatch({
+      type: LOCAL_SETTING_CHANGE,
+      key,
+      value,
+    });
+
+    dispatch(saveLocalSettings());
+  };
+};
+
+export function saveLocalSettings() {
+  return (_, getState) => {
+    const localSettings = getState().get('localSettings').toJS();
+    localStorage.setItem('mastodon-settings', JSON.stringify(localSettings));
+  };
+};

app/javascript/mastodon/containers/mastodon.js

@@ -24,7 +24,11 @@ addLocaleData(localeData);
 
 const store = configureStore();
 const initialState = JSON.parse(document.getElementById('initial-state').textContent);
-if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout');
+try {
+  initialState.localSettings = JSON.parse(localStorage.getItem('mastodon-settings'));
+} catch (e) {
+  initialState.localSettings = {};
+}
 store.dispatch(hydrateStore(initialState));
 
 export default class Mastodon extends React.PureComponent {

app/javascript/mastodon/features/ui/index.js

@@ -75,7 +75,7 @@ class WrappedRoute extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  layout: state.getIn(['settings', 'layout']),
+  layout: state.getIn(['localSettings', 'layout']),
 });
 
 @connect(mapStateToProps)
@@ -180,19 +180,19 @@ export default class UI extends React.PureComponent {
   }
 
   render () {
-    const { width, draggingOver, layout } = this.state;
+    const { width, draggingOver } = this.state;
-    const { children } = this.props;
+    const { children, layout } = this.props;
 
     const columnsClass = layout => {
       switch (layout) {
       case 'single':
         return 'single-column';
       case 'multiple':
-        return 'multiple-columns';
+        return 'multi-columns';
       default:
         return 'auto-columns';
       }
-    }
+    };
 
     return (
       <div className={'ui ' + columnsClass(layout)} ref={this.setRef}>

app/javascript/mastodon/reducers/index.js

@@ -14,6 +14,7 @@ import relationships from './relationships';
 import search from './search';
 import notifications from './notifications';
 import settings from './settings';
+import localSettings from './local_settings';
 import status_lists from './status_lists';
 import cards from './cards';
 import reports from './reports';
@@ -36,6 +37,7 @@ export default combineReducers({
   search,
   notifications,
   settings,
+  localSettings,
   cards,
   reports,
   contexts,

app/javascript/mastodon/reducers/local_settings.js

@@ -0,0 +1,20 @@
+import { LOCAL_SETTING_CHANGE } from '../actions/local_settings';
+import { STORE_HYDRATE } from '../actions/store';
+import Immutable from 'immutable';
+
+const initialState = Immutable.Map({
+  layout: 'auto',
+});
+
+const hydrate = (state, localSettings) => state.mergeDeep(localSettings);
+
+export default function localSettings(state = initialState, action) {
+  switch(action.type) {
+  case STORE_HYDRATE:
+    return hydrate(state, action.state.get('localSettings'));
+  case LOCAL_SETTING_CHANGE:
+    return state.setIn(action.key, action.value);
+  default:
+    return state;
+  }
+};