create a new component

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

@@ -14,16 +14,12 @@ import PageContainer from '../../services/PageContainer';
 
 import RevisionPathControls from '../Page/RevisionPathControls';
 import TagLabels from '../Page/TagLabels';
-import LikeButton from '../LikeButton';
-import BookmarkButton from '../BookmarkButton';
+import SubnavButtons from './SubNavButtons';
 import PageEditorModeManager from './PageEditorModeManager';
 
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
 
-import PageManagement from '../Page/PageManagement';
-
-
 const PagePathNav = ({
   // eslint-disable-next-line react/prop-types
   pageId, pagePath, isEditorMode,
@@ -63,27 +59,6 @@ const PagePathNav = ({
   );
 };
 
-
-/* eslint-enable react/prop-types */
-
-/* eslint-disable react/prop-types */
-const PageReactionButtons = ({ appContainer, pageContainer }) => {
-
-  return (
-    <>
-      {pageContainer.isAbleToShowLikeButton && (
-        <span className="mr-2">
-          <LikeButton />
-        </span>
-      )}
-      <span>
-        <BookmarkButton />
-      </span>
-    </>
-  );
-};
-/* eslint-enable react/prop-types */
-
 const GrowiSubNavigation = (props) => {
   const {
     appContainer, navigationContainer, pageContainer, isCompactMode,
@@ -128,8 +103,7 @@ const GrowiSubNavigation = (props) => {
 
         <div className={`d-flex ${isEditorMode ? 'align-items-center' : 'flex-column align-items-end'}`}>
           <div className="d-flex">
-            { pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
-            { pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} /> }
+            <SubnavButtons isCompactMode={isCompactMode} />
           </div>
           <div className={`${isEditorMode ? 'ml-2' : 'mt-2'}`}>
             {pageContainer.isAbleToShowPageEditorModeManager && (

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppContainer from '../../services/AppContainer';
+import NavigationContainer from '../../services/NavigationContainer';
+import PageContainer from '../../services/PageContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+import BookmarkButton from '../BookmarkButton';
+import LikeButton from '../LikeButton';
+import PageManagement from '../Page/PageManagement';
+
+const SubnavButtons = (props) => {
+  const {
+    appContainer, navigationContainer, pageContainer, isCompactMode,
+  } = props;
+
+  /* eslint-enable react/prop-types */
+
+  /* eslint-disable react/prop-types */
+  const PageReactionButtons = ({ pageContainer }) => {
+
+    return (
+      <>
+        {pageContainer.isAbleToShowLikeButton && (
+          <span>
+            <LikeButton />
+          </span>
+        )}
+        <span>
+          <BookmarkButton />
+        </span>
+
+      </>
+    );
+  };
+  /* eslint-enable react/prop-types */
+
+  const { editorMode } = navigationContainer.state;
+  const isViewMode = editorMode === 'view';
+
+  return (
+    <>
+      {isViewMode && (
+      <>
+        { pageContainer.isAbleToShowPageReactionButtons && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
+        { pageContainer.isAbleToShowPageManagement && <PageManagement isCompactMode={isCompactMode} /> }
+      </>
+      )}
+    </>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const SubnavButtonsWrapper = withUnstatedContainers(SubnavButtons, [AppContainer, NavigationContainer, PageContainer]);
+
+
+SubnavButtons.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
+  isCompactMode: PropTypes.bool,
+};
+
+export default SubnavButtonsWrapper;