refactor

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

@@ -9,8 +9,6 @@ import GrowiRenderer from '../../util/GrowiRenderer';
 
 import RevisionBody from './RevisionBody';
 
-const WIKI_HEADER_LINK = 120;
-
 class RevisionRenderer extends React.PureComponent {
 
   constructor(props) {
@@ -38,7 +36,7 @@ class RevisionRenderer extends React.PureComponent {
 
   componentDidUpdate(prevProps) {
     const { markdown: prevMarkdown, highlightKeywords: prevHighlightKeywords } = prevProps;
-    const { markdown, highlightKeywords } = this.props;
+    const { markdown, highlightKeywords, navigationContainer } = this.props;
 
     // render only when props.markdown is updated
     if (markdown !== prevMarkdown || highlightKeywords !== prevHighlightKeywords) {
@@ -49,12 +47,7 @@ class RevisionRenderer extends React.PureComponent {
 
     const HeaderLink = document.getElementsByClassName('revision-head-link');
     const HeaderLinkArray = Array.from(HeaderLink);
-    HeaderLinkArray.forEach(link => link.addEventListener('click', (e) => {
-      e.preventDefault();
-
-      window.location.hash = link.getAttribute('href');
-      this.props.navigationContainer.smoothScrollIntoView(link, WIKI_HEADER_LINK);
-    }));
+    navigationContainer.addSmoothScrollEvent(HeaderLinkArray);
 
     const { interceptorManager } = this.props.appContainer;
 

src/client/js/components/TableOfContents.jsx

@@ -10,8 +10,6 @@ import NavigationContainer from '../services/NavigationContainer';
 import { withUnstatedContainers } from './UnstatedUtils';
 import StickyStretchableScroller from './StickyStretchableScroller';
 
-const WIKI_HEADER_LINK = 120;
-
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:TableOfContents');
 
@@ -21,7 +19,7 @@ const logger = loggerFactory('growi:TableOfContents');
  */
 const TableOfContents = (props) => {
 
-  const { pageContainer } = props;
+  const { pageContainer, navigationContainer } = props;
 
   const calcViewHeight = useCallback(() => {
     // calculate absolute top of '#revision-toc' element
@@ -37,13 +35,7 @@ const TableOfContents = (props) => {
   useEffect(() => {
     const tocDom = document.getElementById('revision-toc-content');
     const anchorsInToc = Array.from(tocDom.getElementsByTagName('a'));
-    anchorsInToc.forEach(link => link.addEventListener('click', (e) => {
-      e.preventDefault();
-
-      window.location.hash = link.getAttribute('href').replace('#', '');
-      const huga = document.getElementById(link.getAttribute('href').replace('#', ''));
-      props.navigationContainer.smoothScrollIntoView(huga, WIKI_HEADER_LINK);
-    }));
+    navigationContainer.addSmoothScrollEvent(anchorsInToc);
   }, [tocHtml]);
 
   return (

src/client/js/services/NavigationContainer.js

@@ -6,6 +6,7 @@ import { Container } from 'unstated';
  */
 
 const SCROLL_THRES_SKIP = 200;
+const WIKI_HEADER_LINK = 120;
 
 export default class NavigationContainer extends Container {
 
@@ -171,6 +172,21 @@ export default class NavigationContainer extends Container {
     this.setState({ isPageCreateModalShown: false });
   }
 
+  /**
+   * Function that implements the click event for realizing smooth scroll
+   * @param {array} elements
+   */
+  addSmoothScrollEvent(elements = {}) {
+    elements.forEach(link => link.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      const href = link.getAttribute('href').replace('#', '');
+      window.location.hash = href;
+      const targetDom = document.getElementById(href);
+      this.smoothScrollIntoView(targetDom, WIKI_HEADER_LINK);
+    }));
+  }
+
   smoothScrollIntoView(element = null, offsetTop = 0) {
     const targetElement = element || window.document.body;