From da05cde72108e4caf3a053d3dd949d97fe8ff711 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 24 Jun 2017 19:12:34 -0700 Subject: [PATCH] Better settings handling with localSettings (new!) --- .../mastodon/actions/local_settings.js | 20 +++++++++++++++++++ .../mastodon/containers/mastodon.js | 6 +++++- app/javascript/mastodon/features/ui/index.js | 10 +++++----- app/javascript/mastodon/reducers/index.js | 2 ++ .../mastodon/reducers/local_settings.js | 20 +++++++++++++++++++ 5 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 app/javascript/mastodon/actions/local_settings.js create mode 100644 app/javascript/mastodon/reducers/local_settings.js diff --git a/app/javascript/mastodon/actions/local_settings.js b/app/javascript/mastodon/actions/local_settings.js new file mode 100644 index 00000000000..742a1eec2c6 --- /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 f66110520ba..3468a794486 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 f8c10f9a30b..e5915ffe054 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 (
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js index be402a16b1b..24f7f94a6d2 100644 --- a/app/javascript/mastodon/reducers/index.js +++ b/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, diff --git a/app/javascript/mastodon/reducers/local_settings.js b/app/javascript/mastodon/reducers/local_settings.js new file mode 100644 index 00000000000..529d31ebba3 --- /dev/null +++ b/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; + } +};