Use Redux store to keep track of layout

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 (
-      <div className={'ui ' + columnClass(columns)} ref={this.setRef}>
+      <div className={'ui ' + columnsClass(layout)} ref={this.setRef}>
         <TabsBar />
-        <ColumnsAreaContainer singleColumn={isMobile(width, columns)}>
+        <ColumnsAreaContainer singleColumn={isMobile(width, layout)}>
           <WrappedSwitch>
             <Redirect from='/' to='/getting-started' exact />
             <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
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({