fix query position to navigationContainer.js

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+// import NavigationContainer from '../../services/NavigationContainer';
+// import { withUnstatedContainers } from '../UnstatedUtils';
 
 const ThreeStrandedButton = (props) => {
   const { t } = props;
+  // const { editorMode } = navigationContainer.state;
 
   function threeStrandedButtonClickedHandler(viewType) {
     if (props.onThreeStrandedButtonClicked != null) {
@@ -11,24 +14,6 @@ const ThreeStrandedButton = (props) => {
     }
   }
 
-  $('#view').on('click', () => {
-    $('body').removeClass('on-edit');
-    $('body').removeClass('builtin-editor');
-    $('body').removeClass('hackmd');
-  });
-
-  $('#edit').on('click', () => {
-    $('body').addClass('on-edit');
-    $('body').addClass('builtin-editor');
-    $('body').removeClass('hackmd');
-  });
-
-  $('#hackmd').on('click', () => {
-    $('body').addClass('on-edit');
-    $('body').addClass('hackmd');
-    $('body').removeClass('builtin-editor');
-  });
-
   return (
     <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
       <button
@@ -60,9 +45,11 @@ const ThreeStrandedButton = (props) => {
 
 };
 
+// const ThreeStrandedButtonWrapper = withUnstatedContainers(ThreeStrandedButton, [NavigationContainer]);
+
 ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
-
+  // navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
   onThreeStrandedButtonClicked: PropTypes.func,
 };
 

src/client/js/services/NavigationContainer.js

@@ -86,6 +86,23 @@ export default class NavigationContainer extends Container {
 
   setEditorMode(editorMode) {
     this.setState({ editorMode });
+    if (editorMode === 'view') {
+      $('body').removeClass('on-edit');
+      $('body').removeClass('builtin-editor');
+      $('body').removeClass('hackmd');
+    }
+
+    if (editorMode === 'edit') {
+      $('body').addClass('on-edit');
+      $('body').addClass('builtin-editor');
+    }
+
+    if (editorMode === 'hackmd') {
+      $('body').addClass('on-edit');
+      $('body').addClass('hackmd');
+      $('body').removeClass('builtin-editor');
+    }
+
     this.updateDrawerMode({ ...this.state, editorMode }); // generate newest state object
   }