manage device size in AppContainer

src/client/js/components/Sidebar.jsx

@@ -27,21 +27,18 @@ class Sidebar extends React.Component {
   };
 
   state = {
-    isDeviceSizeSmall: true,
     currentContentsId: 'recent',
   };
 
   componentWillMount() {
     this.hackUIController();
-    this.initBreakpointEvents();
   }
 
-  get isDrawerMode() {
+  componentDidUpdate(prevProps, prevState) {
     const { appContainer } = this.props;
-    const { isDeviceSizeSmall } = this.state;
-    const { preferDrawerModeByUser } = appContainer.state;
 
-    return isDeviceSizeSmall || preferDrawerModeByUser;
+    const isDrawerMode = appContainer.state.isDrawerMode || this.props.isDrawerModeOnInit;
+    this.toggleDrawerMode(isDrawerMode);
   }
 
   /**
@@ -60,36 +57,22 @@ class Sidebar extends React.Component {
     };
   }
 
-  initBreakpointEvents() {
-    const { appContainer, navigationUIController } = this.props;
-
-    const mdOrAvobeHandler = (mql) => {
-      // sm -> md
-      if (mql.matches) {
-        this.setState({ isDeviceSizeSmall: false });
-      }
-      // md -> sm
-      else {
-        // cache width
-        this.sidebarWidthCached = navigationUIController.state.productNavWidth;
-
-        this.setState({ isDeviceSizeSmall: true });
-      }
-
-      this.updateDrawerMode();
-    };
-
-    appContainer.addBreakpointListener('md', mdOrAvobeHandler, true);
-  }
+  toggleDrawerMode(bool) {
+    const { navigationUIController } = this.props;
 
-  updateDrawerMode() {
-    const { appContainer, navigationUIController } = this.props;
+    const isStateModified = navigationUIController.state.isResizeDisabled !== bool;
+    if (!isStateModified) {
+      return;
+    }
 
     // close Drawer anyway
-    appContainer.setState({ isDrawerOpened: false });
+    // appContainer.setState({ isDrawerOpened: false });
 
     // switch to Drawer
-    if (this.isDrawerMode) {
+    if (bool) {
+      // cache width
+      this.sidebarWidthCached = navigationUIController.state.productNavWidth;
+
       navigationUIController.disableResize();
       navigationUIController.expand();
 
@@ -144,8 +127,7 @@ class Sidebar extends React.Component {
   }
 
   render() {
-    const { isDrawerMode } = this;
-    const { isDrawerOpened } = this.props.appContainer.state;
+    const { isDrawerMode, isDrawerOpened } = this.props.appContainer.state;
 
     return (
       <>

src/client/js/services/AppContainer.js

@@ -35,9 +35,11 @@ export default class AppContainer extends Container {
 
     this.state = {
       editorMode: null,
+      isDeviceSmallThanMd: null,
       preferDarkModeByMediaQuery: false,
       preferDarkModeByUser: localStorage.preferDarkModeByUser === 'true',
       preferDrawerModeByUser: localStorage.preferDrawerModeByUser === 'true',
+      isDrawerMode: null,
       isDrawerOpened: false,
 
       isPageCreateModalShown: false,
@@ -113,10 +115,31 @@ export default class AppContainer extends Container {
   }
 
   init() {
+    this.initDeviceSize();
     this.initColorScheme();
     this.initPlugins();
   }
 
+  initDeviceSize() {
+    const mdOrAvobeHandler = async(mql) => {
+      let isDeviceSmallThanMd;
+
+      // sm -> md
+      if (mql.matches) {
+        isDeviceSmallThanMd = false;
+      }
+      // md -> sm
+      else {
+        isDeviceSmallThanMd = true;
+      }
+
+      this.setState({ isDeviceSmallThanMd });
+      this.updateDrawerMode(isDeviceSmallThanMd, this.state.preferDrawerModeByUser);
+    };
+
+    this.addBreakpointListener('md', mdOrAvobeHandler, true);
+  }
+
   async initColorScheme() {
     const switchStateByMediaQuery = async(mql) => {
       const preferDarkMode = mql.matches;
@@ -388,12 +411,18 @@ export default class AppContainer extends Container {
    */
   async setDrawerModePreference(preferDrawerMode) {
     this.setState({ preferDrawerModeByUser: preferDrawerMode });
+    this.updateDrawerMode(this.state.isDeviceSmallThanMd, preferDrawerMode);
 
     // store settings to localStorage
     const { localStorage } = window;
     localStorage.preferDrawerModeByUser = preferDrawerMode;
   }
 
+  updateDrawerMode(isDeviceSmallThanMd, preferDrawerModeByUser) {
+    const isDrawerMode = isDeviceSmallThanMd || preferDrawerModeByUser;
+    this.setState({ isDrawerMode });
+  }
+
   /**
    * Set color scheme preference by user
    * @param {boolean} isDarkMode