adjust

src/client/js/components/Navbar/ThreeStrandedButton.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
-const ThreeStrandedButton = (props) => {
+import NavigationContainer from '../../services/NavigationContainer';
 
-  const { t } = props;
+const ThreeStrandedButton = (props) => {
+  const { t, navigationContainer } = props;
 
   function threeStrandedButtonClickedHandler(viewType) {
-    if (props.onThreeStrandedButtonClicked != null) {
-      props.onThreeStrandedButtonClicked(viewType);
-    }
+    navigationContainer.setEditorMode(viewType);
   }
 
   return (
@@ -31,9 +31,16 @@ const ThreeStrandedButton = (props) => {
 
 };
 
+/**
+ * Wrapper component for using unstated
+ */
+const ThreeStrandedButtonWrapper = withUnstatedContainers(ThreeStrandedButton, [NavigationContainer]);
+
 ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
+
+  navigationContainer: PropTypes.object.isRequired,
   onThreeStrandedButtonClicked: PropTypes.func,
 };
 
-export default withTranslation()(ThreeStrandedButton);
+export default withTranslation()(ThreeStrandedButtonWrapper);

src/client/js/services/NavigationContainer.js

@@ -136,7 +136,7 @@ export default class NavigationContainer extends Container {
     } = newState;
 
     // get preference on view or edit
-    const preferDrawerMode = editorMode != null ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;
+    const preferDrawerMode = editorMode !== 'view' ? preferDrawerModeOnEditByUser : preferDrawerModeByUser;
 
     const isDrawerMode = isDeviceSmallerThanMd || preferDrawerMode;
     const isDrawerOpened = false; // close Drawer anyway