success to hide BookmarkButton

src/client/js/components/BookmarkButton.jsx

@@ -8,6 +8,7 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import { toastError } from '../util/apiNotification';
 import PageContainer from '../services/PageContainer';
 import AppContainer from '../services/AppContainer';
+import NavigationContainer from '../services/NavigationContainer';
 
 class BookmarkButton extends React.Component {
 
@@ -35,23 +36,32 @@ class BookmarkButton extends React.Component {
 
 
   render() {
-    const { appContainer, pageContainer, t } = this.props;
+    const {
+      appContainer, pageContainer, navigationContainer, t,
+    } = this.props;
     const { isGuestUser } = appContainer;
 
+    const { editorMode } = navigationContainer.state;
+
+    const isViewMode = editorMode === 'view';
+
     return (
       <div>
-        <button
-          type="button"
-          id="bookmark-button"
-          onClick={this.handleClick}
-          className={`btn btn-bookmark border-0
-          ${`btn-${this.props.size}`} ${pageContainer.state.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
-        >
-          <i className="icon-star mr-3"></i>
-          <span className="total-bookmarks">
-            {pageContainer.state.sumOfBookmarks}
-          </span>
-        </button>
+        {isViewMode
+        && (
+          <button
+            type="button"
+            id="bookmark-button"
+            onClick={this.handleClick}
+            className={`btn btn-bookmark border-0
+            ${`btn-${this.props.size}`} ${pageContainer.state.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+          >
+            <i className="icon-star mr-3"></i>
+            <span className="total-bookmarks">
+              {pageContainer.state.sumOfBookmarks}
+            </span>
+          </button>
+        )}
 
         {isGuestUser && (
         <UncontrolledTooltip placement="top" target="bookmark-button" fade={false}>
@@ -67,12 +77,12 @@ class BookmarkButton extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const BookmarkButtonWrapper = withUnstatedContainers(BookmarkButton, [AppContainer, PageContainer]);
+const BookmarkButtonWrapper = withUnstatedContainers(BookmarkButton, [AppContainer, NavigationContainer, PageContainer]);
 
 BookmarkButton.propTypes = {
   appContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
   pageContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
   pageId: PropTypes.string,
   t: PropTypes.func.isRequired,
   size: PropTypes.string,