refactor SubNavButtons

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -8,12 +8,12 @@ import {
   useIsAbleToShowPageEditorModeManager, useIsAbleToShowPageAuthors,
 } from '~/stores/ui';
 import {
-  useCurrentCreatedAt, useCurrentUpdatedAt, useCurrentPageId, useRevisionId, useCurrentPagePath, useIsDeletable,
-  useIsAbleToDeleteCompletely, useCreator, useRevisionAuthor, useIsGuestUser,
+  useCurrentCreatedAt, useCurrentUpdatedAt, useCurrentPageId, useRevisionId, useCurrentPagePath,
+  useCreator, useRevisionAuthor, useIsGuestUser,
 } from '~/stores/context';
 import { useSWRTagsInfo } from '~/stores/page';
 
-import SubNavButtons from './SubNavButtons';
+import { SubNavButtons } from './SubNavButtons';
 import PageEditorModeManager from './PageEditorModeManager';
 
 import { toastSuccess, toastError } from '~/client/util/apiNotification';
@@ -30,8 +30,6 @@ const GrowiContextualSubNavigation = (props) => {
   const { data: pageId } = useCurrentPageId();
   const { data: revisionId } = useRevisionId();
   const { data: path } = useCurrentPagePath();
-  const { data: isDeletable } = useIsDeletable();
-  const { data: isAbleToDeleteCompletely } = useIsAbleToDeleteCompletely();
   const { data: creator } = useCreator();
   const { data: revisionAuthor } = useRevisionAuthor();
   const { data: isGuestUser } = useIsGuestUser();
@@ -48,7 +46,6 @@ const GrowiContextualSubNavigation = (props) => {
   } = props;
 
   const isViewMode = editorMode === EditorMode.View;
-  const isPageExist = pageId != null;
 
   const tagsUpdatedHandler = useCallback(async(newTags: string[]) => {
     // It will not be reflected in the DB until the page is refreshed
@@ -80,15 +77,11 @@ const GrowiContextualSubNavigation = (props) => {
     return (
       <>
         <div className="h-50 d-flex flex-column align-items-end justify-content-center">
-          { isViewMode && isPageExist && path != null && (
+          { isViewMode && (
             <SubNavButtons
               isCompactMode={isCompactMode}
               pageId={pageId}
-              revisionId={revisionId}
-              path={path}
-              isDeletable={isDeletable}
-              isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-              isAbleToShowPageManagement={isAbleToShowPageManagement}
+              showPageControlDropdown={isAbleToShowPageManagement}
             />
           ) }
         </div>
@@ -105,10 +98,10 @@ const GrowiContextualSubNavigation = (props) => {
       </>
     );
   }, [
-    pageId, path, revisionId,
+    pageId,
     editorMode, mutateEditorMode,
-    isAbleToDeleteCompletely, isAbleToShowPageEditorModeManager, isAbleToShowPageManagement,
-    isCompactMode, isDeletable, isDeviceSmallerThanMd, isGuestUser, isPageExist, isViewMode,
+    isCompactMode, isDeviceSmallerThanMd, isGuestUser,
+    isViewMode, isAbleToShowPageEditorModeManager, isAbleToShowPageManagement,
   ]);
 
 

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -1,10 +1,7 @@
-import React, {
-  FC, useCallback,
-} from 'react';
+import React, { useCallback } from 'react';
 
 import SubscribeButton from '../SubscribeButton';
 import PageReactionButtons from '../PageReactionButtons';
-import PageManagement from '../Page/PageManagement';
 import { useSWRPageInfo } from '../../stores/page';
 import { useSWRBookmarkInfo } from '../../stores/bookmark';
 import { toastError } from '../../client/util/apiNotification';
@@ -12,18 +9,14 @@ import { apiv3Put } from '../../client/util/apiv3-client';
 import { useSWRxLikerList } from '../../stores/user';
 import { useIsGuestUser } from '~/stores/context';
 
-type SubNavButtonsProps= {
+
+type SubNavButtonsSubstanceProps= {
   isCompactMode?: boolean,
-  pageId: string,
-  revisionId: string,
-  path: string,
-  isAbleToShowPageManagement?: boolean,
-  isDeletable?: boolean,
-  isAbleToDeleteCompletely?: boolean,
+  showPageControlDropdown?: boolean,
 }
-const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
+const SubNavButtonsSubstance = (props: { pageId: string } & SubNavButtonsSubstanceProps): JSX.Element => {
   const {
-    isCompactMode, pageId, revisionId, path, isAbleToShowPageManagement, isDeletable, isAbleToDeleteCompletely,
+    isCompactMode, pageId, showPageControlDropdown,
   } = props;
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -61,6 +54,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     }
   }, [bookmarkInfo, isGuestUser, mutateBookmarkInfo, pageId]);
 
+
   if (pageInfoError != null || pageInfo == null) {
     return <></>;
   }
@@ -89,19 +83,37 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
         onBookMarkClicked={bookmarkClickHandler}
       >
       </PageReactionButtons>
-      { isAbleToShowPageManagement && (
-        <PageManagement
-          pageId={pageId}
-          revisionId={revisionId}
-          path={path}
-          isCompactMode={isCompactMode}
-          isDeletable={isDeletable}
-          isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-        >
-        </PageManagement>
+
+      { showPageControlDropdown && (
+        /*
+          TODO:
+          replace with PageItemControl
+        */
+        <></>
+        // <PageManagement
+        //   pageId={pageId}
+        //   revisionId={revisionId}
+        //   path={path}
+        //   isCompactMode={isCompactMode}
+        //   isDeletable={isDeletable}
+        //   isAbleToDeleteCompletely={isAbleToDeleteCompletely}
+        // >
+        // </PageManagement>
       )}
     </div>
   );
 };
 
-export default SubNavButtons;
+type SubNavButtonsProps= SubNavButtonsSubstanceProps & {
+  pageId?: string | null,
+};
+
+export const SubNavButtons = (props: SubNavButtonsProps): JSX.Element => {
+  const { pageId, isCompactMode } = props;
+
+  if (pageId == null) {
+    return <></>;
+  }
+
+  return <SubNavButtonsSubstance pageId={pageId} isCompactMode={isCompactMode} />;
+};

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -6,7 +6,7 @@ import { IPageSearchMeta } from '~/interfaces/search';
 import RevisionLoader from '../Page/RevisionLoader';
 import AppContainer from '../../client/services/AppContainer';
 import { GrowiSubNavigation } from '../Navbar/GrowiSubNavigation';
-import SubNavButtons from '../Navbar/SubNavButtons';
+import { SubNavButtons } from '../Navbar/SubNavButtons';
 
 type Props ={
   appContainer: AppContainer,
@@ -28,11 +28,7 @@ const SearchResultContent: FC<Props> = (props: Props) => {
     return (
       <>
         <div className="h-50 d-flex flex-column align-items-end justify-content-center">
-          <SubNavButtons
-            pageId={page._id}
-            revisionId={page.revision as string}
-            path={page.path}
-          />
+          <SubNavButtons pageId={page._id} />
         </div>
         <div className="h-50 d-flex flex-column align-items-end justify-content-center">
         </div>