re-impl DisplaySwitcher and ContentLinkButtons

packages/app/src/components/ContentLinkButtons.tsx

@@ -1,54 +1,26 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-
-import { pagePathUtils } from '@growi/core';
-import AppContainer from '~/client/services/AppContainer';
-import PageContainer from '~/client/services/PageContainer';
-
-import { withUnstatedContainers } from './UnstatedUtils';
+import React, { useCallback, useMemo } from 'react';
 
 import RecentlyCreatedIcon from './Icons/RecentlyCreatedIcon';
 import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
-
-const { isTopPage } = pagePathUtils;
+import { usePageUser } from '~/stores/context';
 
 const WIKI_HEADER_LINK = 120;
 
-/**
- * @author Yuki Takei <yuki@weseek.co.jp>
- *
- */
-const ContentLinkButtons = (props) => {
 
-  const { appContainer, pageContainer } = props;
-  const { pageUser, path } = pageContainer.state;
-  const { isPageExist } = pageContainer.state;
-  const { isSharedUser } = appContainer;
+const ContentLinkButtons = (): JSX.Element => {
 
-  const isTopPagePath = isTopPage(path);
+  const { data: pageUser } = usePageUser();
 
   // 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') }, []);
 
 
-  const CommentLinkButton = () => {
-    return (
-      <div className="mt-3">
-        <button
-          type="button"
-          className="btn btn-outline-secondary btn-sm btn-block"
-          onClick={() => smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
-        >
-          <i className="mr-2 icon-fw icon-bubbles"></i>
-          <span>Comments</span>
-        </button>
-      </div>
-    );
-  };
+  const BookMarkLinkButton = useCallback((): JSX.Element => {
+    if (getBookMarkListHeaderDom == null) {
+      return <></>;
+    }
 
-  const BookMarkLinkButton = () => {
     return (
       <button
         type="button"
@@ -58,11 +30,14 @@ const ContentLinkButtons = (props) => {
         <i className="fa fa-fw fa-bookmark-o"></i>
         <span>Bookmarks</span>
       </button>
-
     );
-  };
+  }, [getBookMarkListHeaderDom]);
+
+  const RecentlyCreatedLinkButton = useCallback(() => {
+    if (getRecentlyCreatedListHeaderDom == null) {
+      return <></>;
+    }
 
-  const RecentlyCreatedLinkButton = () => {
     return (
       <button
         type="button"
@@ -72,25 +47,20 @@ const ContentLinkButtons = (props) => {
         <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
         <span>Recently Created</span>
       </button>
-
     );
-  };
+  }, [getRecentlyCreatedListHeaderDom]);
 
-  return (
-    <>
-      {isPageExist && !isSharedUser && !isTopPagePath && <CommentLinkButton />}
+  if (pageUser == null) {
+    return <></>;
+  }
 
-      <div className="mt-3 d-flex justify-content-between">
-        {pageUser && <><BookMarkLinkButton /><RecentlyCreatedLinkButton /></>}
-      </div>
-    </>
+  return (
+    <div className="mt-3 d-flex justify-content-between">
+      <BookMarkLinkButton />
+      <RecentlyCreatedLinkButton />
+    </div>
   );
 
 };
 
-ContentLinkButtons.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-};
-
-export default withUnstatedContainers(ContentLinkButtons, [AppContainer, PageContainer]);
+export default ContentLinkButtons;

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TabContent, TabPane } from 'reactstrap';
 
+import { pagePathUtils } from '@growi/core';
+
 import { EditorMode, useEditorMode, useDescendantsPageListModal } from '~/stores/ui';
 import {
   useCurrentPagePath, useIsSharedUser, useIsEditable, useCurrentPageId, useIsUserPage, usePageUser,
 } from '~/stores/context';
 
 
+import { smoothScrollIntoView } from '~/client/util/smooth-scroll';
+
 import PageListIcon from '../Icons/PageListIcon';
 import Editor from '../PageEditor';
 import Page from '../Page';
@@ -19,9 +23,19 @@ import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 import HashChanged from '../EventListeneres/HashChanged';
 
 
+const WIKI_HEADER_LINK = 120;
+
+const { isTopPage } = pagePathUtils;
+
+
 const DisplaySwitcher = (): JSX.Element => {
   const { t } = useTranslation();
 
+
+  // get element for smoothScroll
+  const getCommentListDom = useMemo(() => { return document.getElementById('page-comments-list') }, []);
+
+
   const { data: currentPageId } = useCurrentPageId();
   const { data: currentPath } = useCurrentPagePath();
   const { data: isSharedUser } = useIsSharedUser();
@@ -35,6 +49,7 @@ const DisplaySwitcher = (): JSX.Element => {
 
   const isPageExist = currentPageId != null;
   const isViewMode = editorMode === EditorMode.View;
+  const isTopPagePath = isTopPage(currentPath ?? '');
 
   return (
     <>
@@ -46,11 +61,12 @@ const DisplaySwitcher = (): JSX.Element => {
               <div className="grw-side-contents-container">
                 <div className="grw-side-contents-sticky-container">
 
+                  {/* Page list */}
                   <div className="grw-page-accessories-control">
                     { currentPath != null && !isSharedUser && (
                       <button
                         type="button"
-                        className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between"
+                        className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
                         onClick={() => openDescendantPageListModal(currentPath)}
                       >
                         <PageListIcon />
@@ -60,6 +76,21 @@ const DisplaySwitcher = (): JSX.Element => {
                     ) }
                   </div>
 
+                  {/* Comments */}
+                  { getCommentListDom != null && !isTopPagePath && (
+                    <div className="mt-2">
+                      <button
+                        type="button"
+                        className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
+                        onClick={() => smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
+                      >
+                        <i className="mr-2 icon-fw icon-bubbles"></i>
+                        <span>Comments</span>
+                        <span></span> {/* for a count badge */}
+                      </button>
+                    </div>
+                  ) }
+
                   <div className="d-none d-lg-block">
                     <div id="revision-toc" className="revision-toc">
                       <TableOfContents />