combined bookmarkLinkButton and RecentlyCreatedButton like default

src/client/js/components/ContentLinkButtons.jsx

@@ -16,110 +16,70 @@ const WIKI_HEADER_LINK = 120;
  * @author Yuki Takei <yuki@weseek.co.jp>
  *
  */
-// const ContentLinkButtons = (props) => {
-
-//   const { navigationContainer } = props;
-
-//   // get element for smoothScroll
-// 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"
-//         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"
-//         onClick={() => navigationContainer.smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK)}
-//       >
-//         <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
-//         <span>Recently Created</span>
-//       </button>
-//     </div>
-//   );
-
-// };
+const ContentLinkButtons = (props) => {
 
-
-const CommentLinkButton = (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">
+    <div className="mt-3 d-flex justify-content-between">
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm w-100"
-        onClick={() => navigationContainer.smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
+        className="btn btn-outline-secondary btn-sm"
+        onClick={() => navigationContainer.smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
       >
-        <i className="mr-2 icon-fw icon-bubbles"></i>
-        <span>Comments</span>
+        <i className="mr-2 icon-star"></i>
+        <span>Bookmarks</span>
+      </button>
+      <button
+        type="button"
+        className="btn btn-outline-secondary btn-sm"
+        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 = {
-  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
-};
-
-const CommentLinkButtonWrapper = withUnstatedContainers(CommentLinkButton, [NavigationContainer]);
-export { CommentLinkButtonWrapper };
-
-const BookMarkListLinkButton = (props) => {
-  const getBookMarkListHeaderDom = useMemo(() => { return document.getElementById('bookmarks-list') }, []);
-  const { navigationContainer } = props;
-
-  return (
-    <button
-      type="button"
-      className="btn btn-outline-secondary btn-sm"
-      onClick={() => navigationContainer.smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
-    >
-      <i className="mr-2 icon-star"></i>
-      <span>Bookmarks</span>
-    </button>
-  );
-};
-
-BookMarkListLinkButton.propTypes = {
+ContentLinkButtons.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
-const BookMarkListLinkButtonWrapper = withUnstatedContainers(BookMarkListLinkButton, [NavigationContainer]);
-export { BookMarkListLinkButtonWrapper };
+const ContentLinkButtonsWrapper = withUnstatedContainers(ContentLinkButtons, [NavigationContainer]);
+export { ContentLinkButtonsWrapper };
 
 
-const RecentlyCreatedLinkButton = (props) => {
-  const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
+const CommentLinkButton = (props) => {
   const { navigationContainer } = props;
 
+  // get element for smoothScroll
+  const getCommentListDom = useMemo(() => { return document.getElementById('page-comments-list') }, []);
+
   return (
-    <button
-      type="button"
-      className="btn btn-outline-secondary btn-sm"
-      onClick={() => navigationContainer.smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK)}
-    >
-      <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
-      <span>Recently Created</span>
-    </button>
+    <div className="mt-3">
+      <button
+        type="button"
+        className="btn btn-outline-secondary btn-sm w-100"
+        onClick={() => navigationContainer.smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
+      >
+        <i className="mr-2 icon-fw icon-bubbles"></i>
+        <span>Comments</span>
+      </button>
+    </div>
   );
+
 };
 
-RecentlyCreatedLinkButton.propTypes = {
+CommentLinkButton.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
-const RecentlyCreatedLinkButtonWrapper = withUnstatedContainers(RecentlyCreatedLinkButton, [NavigationContainer]);
-export { RecentlyCreatedLinkButtonWrapper };
+const CommentLinkButtonWrapper = withUnstatedContainers(CommentLinkButton, [NavigationContainer]);
+export { CommentLinkButtonWrapper };

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

@@ -9,9 +9,8 @@ import Page from '../Page';
 import UserInfo from '../User/UserInfo';
 import TableOfContents from '../TableOfContents';
 import {
-  BookMarkListLinkButtonWrapper as BookMarkListLinkButton,
-  RecentlyCreatedLinkButtonWrapper as RecentlyCreatedLinkButton,
   CommentLinkButtonWrapper as CommentLinkButton,
+  ContentLinkButtonsWrapper as ContentLinkButtons,
 } from '../ContentLinkButtons';
 import PageAccessories from '../PageAccessories';
 import PageEditorByHackmd from '../PageEditorByHackmd';
@@ -43,8 +42,7 @@ const DisplaySwitcher = (props) => {
                     <TableOfContents />
                   </div>
                   {isPageExist && <CommentLinkButton />}
-                  {pageUser && (<><BookMarkListLinkButton /> <RecentlyCreatedLinkButton /></>)
-                  }
+                  {pageUser && <ContentLinkButtons />}
                 </div>
               </div>
             </div>