diff --git a/app/javascript/mastodon/actions/local_settings.js b/app/javascript/mastodon/actions/local_settings.js new file mode 100644 index 0000000000..742a1eec2c --- /dev/null +++ b/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)); + }; +}; diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index f66110520b..3468a79448 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/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 { diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index f8c10f9a30..e5915ffe05 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/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 { children } = this.props; + const { width, draggingOver } = this.state; + 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 (