combined 3 buttons in one component

src/client/js/components/ContentLinkButtons.jsx

@@ -13,69 +13,52 @@ const WIKI_HEADER_LINK = 120;
  * @author Yuki Takei <yuki@weseek.co.jp>
  *
  */
-const BookMarkAndRecentlyCreatedLinkButtons = (props) => {
+const ContentLinkButtons = (props) => {
 
   const { navigationContainer } = props;
 
   // get element for smoothScroll
+  const getCommentListDom = useMemo(() => { return document.getElementById('page-comments-list') }, []);
   const getBookMarkListHeaderDom = useMemo(() => { return document.getElementById('bookmarks-list') }, []);
   const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
 
   return (
-    <div className="mt-3 d-flex justify-content-between">
-      <button
-        type="button"
-        className="btn btn-outline-secondary btn-sm px-2"
-        onClick={() => navigationContainer.smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
-      >
-        <i className="mr-2 icon-star"></i>
-        <span>Bookmarks</span>
-      </button>
-      <button
-        type="button"
-        className="btn btn-outline-secondary btn-sm px-3"
-        onClick={() => navigationContainer.smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK)}
-      >
-        <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
-        <span>Recently Created</span>
-      </button>
-    </div>
-  );
-
-};
-
-BookMarkAndRecentlyCreatedLinkButtons.propTypes = {
-  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
-};
-
-const BookMarkAndRecentlyCreatedLinkButtonsWrapper = withUnstatedContainers(BookMarkAndRecentlyCreatedLinkButtons, [NavigationContainer]);
-export { BookMarkAndRecentlyCreatedLinkButtonsWrapper };
-
-
-const CommentLinkButton = (props) => {
-  const { navigationContainer } = props;
-
-  // get element for smoothScroll
-  const getCommentListDom = useMemo(() => { return document.getElementById('page-comments-list') }, []);
-
-  return (
-    <div className="mt-3">
-      <button
-        type="button"
-        className="btn btn-outline-secondary btn-sm btn-block"
-        onClick={() => navigationContainer.smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
-      >
-        <i className="mr-2 icon-fw icon-bubbles"></i>
-        <span>Comments</span>
-      </button>
-    </div>
+    <>
+      <div className="mt-3">
+        <button
+          type="button"
+          className="btn btn-outline-secondary btn-sm btn-block"
+          onClick={() => navigationContainer.smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
+        >
+          <i className="mr-2 icon-fw icon-bubbles"></i>
+          <span>Comments</span>
+        </button>
+      </div>
+      <div className="mt-3 d-flex justify-content-between">
+        <button
+          type="button"
+          className="btn btn-outline-secondary btn-sm px-2"
+          onClick={() => navigationContainer.smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
+        >
+          <i className="mr-2 icon-star"></i>
+          <span>Bookmarks</span>
+        </button>
+        <button
+          type="button"
+          className="btn btn-outline-secondary btn-sm px-3"
+          onClick={() => navigationContainer.smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK)}
+        >
+          <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
+          <span>Recently Created</span>
+        </button>
+      </div>
+    </>
   );
 
 };
 
-CommentLinkButton.propTypes = {
+ContentLinkButtons.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
-const CommentLinkButtonWrapper = withUnstatedContainers(CommentLinkButton, [NavigationContainer]);
-export { CommentLinkButtonWrapper };
+export default withUnstatedContainers(ContentLinkButtons, [NavigationContainer]);

src/client/js/components/Page/DisplaySwitcher.jsx

@@ -8,10 +8,8 @@ import Editor from '../PageEditor';
 import Page from '../Page';
 import UserInfo from '../User/UserInfo';
 import TableOfContents from '../TableOfContents';
-import {
-  CommentLinkButtonWrapper as CommentLinkButton,
-  BookMarkAndRecentlyCreatedLinkButtonsWrapper as BookMarkAndRecentlyCreatedLinkButtons,
-} from '../ContentLinkButtons';
+import
+BookMarkAndRecentlyCreatedLinkButtonsWrapper from '../ContentLinkButtons';
 import PageAccessories from '../PageAccessories';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
@@ -41,8 +39,8 @@ const DisplaySwitcher = (props) => {
                   <div id="revision-toc" className="revision-toc">
                     <TableOfContents />
                   </div>
-                  {isPageExist && <CommentLinkButton />}
-                  {pageUser && <BookMarkAndRecentlyCreatedLinkButtons />}
+                  {/* {isPageExist && <CommentLinkButton />} */}
+                  {pageUser && <BookMarkAndRecentlyCreatedLinkButtonsWrapper />}
                 </div>
               </div>
             </div>