From ddba5d3b8c065cdf1ef206b13fea02444ffdf1f7 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 24 Jun 2017 17:07:25 -0700 Subject: [PATCH] Use Redux store to keep track of layout --- .../mastodon/containers/mastodon.js | 1 + app/javascript/mastodon/features/ui/index.js | 31 +++++++++++-------- app/javascript/mastodon/is_mobile.js | 4 +-- app/javascript/mastodon/reducers/settings.js | 1 + 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js index 3bd89902f..f66110520 100644 --- a/app/javascript/mastodon/containers/mastodon.js +++ b/app/javascript/mastodon/containers/mastodon.js @@ -24,6 +24,7 @@ addLocaleData(localeData); const store = configureStore(); const initialState = JSON.parse(document.getElementById('initial-state').textContent); +if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout'); 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 a372deac5..f8c10f9a3 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -74,21 +74,17 @@ class WrappedRoute extends React.Component { } -function columnClass(columns) { - switch (columns) { - case "auto": return "auto-columns"; - case "single": return "single-column"; - case "multiple": return "multi-columns"; - default: return "auto-columns"; - } -} +const mapStateToProps = state => ({ + layout: state.getIn(['settings', 'layout']), +}); -@connect() +@connect(mapStateToProps) export default class UI extends React.PureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, children: PropTypes.node, + layout: PropTypes.string, }; state = { @@ -184,15 +180,24 @@ export default class UI extends React.PureComponent { } render () { - const { width, draggingOver } = this.state; + const { width, draggingOver, layout } = this.state; const { children } = this.props; - const columns = "auto"; + const columnsClass = layout => { + switch (layout) { + case 'single': + return 'single-column'; + case 'multiple': + return 'multiple-columns'; + default: + return 'auto-columns'; + } + } return ( -
+
- + diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js index 8689dbe23..014a9a8d5 100644 --- a/app/javascript/mastodon/is_mobile.js +++ b/app/javascript/mastodon/is_mobile.js @@ -2,9 +2,9 @@ const LAYOUT_BREAKPOINT = 1024; export function isMobile(width, columns) { switch (columns) { - case "multiple": + case 'multiple': return false; - case "single": + case 'single': return true; default: return width <= LAYOUT_BREAKPOINT; diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js index ddad7a4fc..9a15a1fe3 100644 --- a/app/javascript/mastodon/reducers/settings.js +++ b/app/javascript/mastodon/reducers/settings.js @@ -6,6 +6,7 @@ import uuid from '../uuid'; const initialState = Immutable.Map({ onboarded: false, + layout: 'auto', home: Immutable.Map({ shows: Immutable.Map({