success to use both of BookMarkListLinkButtonWrapper and RecentlyCreatedLinkButtonWrapper

src/client/js/components/ContentLinkButtons.jsx

@@ -16,39 +16,81 @@ const WIKI_HEADER_LINK = 120;
  * @author Yuki Takei <yuki@weseek.co.jp>
  *
  */
-const ContentLinkButtons = (props) => {
+// const ContentLinkButtons = (props) => {
 
-  const { navigationContainer } = 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>
+//   );
+
+// };
 
-  // get element for smoothScroll
+
+export const BookMarkListLinkButton = (props) => {
   const getBookMarkListHeaderDom = useMemo(() => { return document.getElementById('bookmarks-list') }, []);
-  const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
+  const { navigationContainer } = props;
 
   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>
+    <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 = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+const BookMarkListLinkButtonWrapper = withUnstatedContainers(BookMarkListLinkButton, [NavigationContainer]);
+export { BookMarkListLinkButtonWrapper };
+
+const RecentlyCreatedLinkButton = (props) => {
+  const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
+  const { navigationContainer } = props;
+
+  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>
+  );
 };
 
-ContentLinkButtons.propTypes = {
+RecentlyCreatedLinkButton.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
-export default withUnstatedContainers(ContentLinkButtons, [NavigationContainer]);
+const RecentlyCreatedLinkButtonWrapper = withUnstatedContainers(RecentlyCreatedLinkButton, [NavigationContainer]);
+export { RecentlyCreatedLinkButtonWrapper };

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

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