Merge pull request #2979 from weseek/imprv/link-bookmark-and-recently-created-with-anchor-tag

Imprv/link bookmark and recently created with anchor tag

src/client/js/components/TableOfContents.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
@@ -15,6 +15,7 @@ import RecentlyCreatedIcon from './Icons/RecentlyCreatedIcon';
 
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:TableOfContents');
+const WIKI_HEADER_LINK = 120;
 
 /**
  * @author Yuki Takei <yuki@weseek.co.jp>
@@ -47,6 +48,10 @@ const TableOfContents = (props) => {
     navigationContainer.addSmoothScrollEvent(anchorsInToc);
   }, [tocHtml, navigationContainer]);
 
+  // get element for smoothScroll
+  const getBookMarkListHeaderDom = useMemo(() => { return document.getElementById('bookmarks-list') }, []);
+  const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
+
   return (
     <>
       <TopOfTableContents isGuestUserMode={isGuestUserMode} />
@@ -67,14 +72,22 @@ const TableOfContents = (props) => {
 
       { isUserPage && (
       <div className="mt-3 d-flex justify-content-around">
-        <a className="btn btn-outline-secondary btn-sm" href="#">
+        <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>
-        </a>
-        <a className="btn btn-outline-secondary btn-sm" href="#">
+        </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>
-        </a>
+        </button>
       </div>
       )}
     </>

src/server/views/layout-growi/user_page.html

@@ -51,8 +51,8 @@
   {% include 'widget/comments.html' %}
 
   {% if page %}
-    <div class="grw-page-list-m mt-5 pb-5">
-      <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3">
+    <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
+      <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3" id="bookmarks-list">
         <i id="user-bookmark-icon"></i>
         Bookmarks
       </h2>
@@ -62,8 +62,8 @@
       </div>
     </div>
 
-    <div class="grw-page-list-m mt-5 pb-5">
-      <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3">
+    <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
+      <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3" id="recently-created-list">
         <i id="recent-created-icon"></i>
         Recently Created
       </h2>