use GrowiSubNavigation instead of SearchResultContentSubNavigation

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

@@ -80,7 +80,7 @@ const GrowiContextualSubNavigation = (props) => {
     return (
       <>
         <div className="h-50 d-flex flex-column align-items-end justify-content-center">
-          { isPageExist && path != null && (
+          { isViewMode && isPageExist && path != null && (
             <SubNavButtons
               isCompactMode={isCompactMode}
               pageId={pageId}
@@ -88,7 +88,6 @@ const GrowiContextualSubNavigation = (props) => {
               path={path}
               isDeletable={isDeletable}
               isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-              isViewMode={isViewMode}
               isAbleToShowPageManagement={isAbleToShowPageManagement}
             />
           ) }

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

@@ -17,14 +17,13 @@ type SubNavButtonsProps= {
   pageId: string,
   revisionId: string,
   path: string,
-  isViewMode?: boolean
   isAbleToShowPageManagement?: boolean,
   isDeletable?: boolean,
   isAbleToDeleteCompletely?: boolean,
 }
 const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   const {
-    isCompactMode, pageId, revisionId, path, isViewMode, isAbleToShowPageManagement, isDeletable, isAbleToDeleteCompletely,
+    isCompactMode, pageId, revisionId, path, isAbleToShowPageManagement, isDeletable, isAbleToDeleteCompletely,
   } = props;
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -75,35 +74,31 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
 
   return (
     <div className="d-flex" style={{ gap: '2px' }}>
-      {isViewMode && (
-        <>
-          <span>
-            <SubscribeButton pageId={props.pageId} />
-          </span>
-          <PageReactionButtons
-            isCompactMode={isCompactMode}
-            sumOfLikers={sumOfLikers}
-            isLiked={isLiked}
-            likers={likers || []}
-            onLikeClicked={likeClickhandler}
-            sumOfBookmarks={sumOfBookmarks}
-            isBookmarked={isBookmarked}
-            bookmarkedUsers={bookmarkedUsers}
-            onBookMarkClicked={bookmarkClickHandler}
-          >
-          </PageReactionButtons>
-          { isAbleToShowPageManagement && (
-            <PageManagement
-              pageId={pageId}
-              revisionId={revisionId}
-              path={path}
-              isCompactMode={isCompactMode}
-              isDeletable={isDeletable}
-              isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-            >
-            </PageManagement>
-          )}
-        </>
+      <span>
+        <SubscribeButton pageId={props.pageId} />
+      </span>
+      <PageReactionButtons
+        isCompactMode={isCompactMode}
+        sumOfLikers={sumOfLikers}
+        isLiked={isLiked}
+        likers={likers || []}
+        onLikeClicked={likeClickhandler}
+        sumOfBookmarks={sumOfBookmarks}
+        isBookmarked={isBookmarked}
+        bookmarkedUsers={bookmarkedUsers}
+        onBookMarkClicked={bookmarkClickHandler}
+      >
+      </PageReactionButtons>
+      { isAbleToShowPageManagement && (
+        <PageManagement
+          pageId={pageId}
+          revisionId={revisionId}
+          path={path}
+          isCompactMode={isCompactMode}
+          isDeletable={isDeletable}
+          isAbleToDeleteCompletely={isAbleToDeleteCompletely}
+        >
+        </PageManagement>
       )}
     </div>
   );

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

@@ -1,11 +1,12 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { IPageWithMeta } from '~/interfaces/page';
 import { IPageSearchMeta } from '~/interfaces/search';
 
 import RevisionLoader from '../Page/RevisionLoader';
 import AppContainer from '../../client/services/AppContainer';
-import SearchResultContentSubNavigation from './SearchResultContentSubNavigation';
+import { GrowiSubNavigation } from '../Navbar/GrowiSubNavigation';
+import SubNavButtons from '../Navbar/SubNavButtons';
 
 type Props ={
   appContainer: AppContainer,
@@ -16,17 +17,38 @@ type Props ={
 
 const SearchResultContent: FC<Props> = (props: Props) => {
   const page = props.focusedSearchResultData?.pageData;
+
+  const growiRenderer = props.appContainer.getRenderer('searchresult');
+
+  const ControlComponents = useCallback(() => {
+    if (page == null) {
+      return <></>;
+    }
+
+    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}
+          />
+        </div>
+        <div className="h-50 d-flex flex-column align-items-end justify-content-center">
+        </div>
+      </>
+    );
+  }, [page]);
+
   // return if page is null
   if (page == null) return <></>;
-  const growiRenderer = props.appContainer.getRenderer('searchresult');
+
   return (
     <div key={page._id} className="search-result-page grw-page-path-text-muted-container d-flex flex-column">
-      <SearchResultContentSubNavigation
-        pageId={page._id}
-        revisionId={page.revision}
-        path={page.path}
-      >
-      </SearchResultContentSubNavigation>
+      <GrowiSubNavigation
+        page={page}
+        controls={ControlComponents}
+      />
       <div className="search-result-page-content">
         <RevisionLoader
           growiRenderer={growiRenderer}

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

@@ -1,85 +0,0 @@
-import React, { FC } from 'react';
-
-import { pagePathUtils } from '@growi/core';
-
-import { EditorMode, useEditorMode } from '~/stores/ui';
-
-import PagePathNav from '../PagePathNav';
-import { withUnstatedContainers } from '../UnstatedUtils';
-import AppContainer from '../../client/services/AppContainer';
-import { useSWRTagsInfo } from '../../stores/page';
-import SubNavButtons from '../Navbar/SubNavButtons';
-
-
-type Props = {
-  appContainer:AppContainer
-  pageId: string,
-  revisionId: string,
-  path: string,
-  isSignleLineMode?: boolean,
-  isCompactMode?: boolean,
-}
-
-
-const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
-  const {
-    appContainer, pageId, revisionId, path, isCompactMode, isSignleLineMode,
-  } = props;
-
-  const { isTrashPage, isDeletablePage } = pagePathUtils;
-
-  const { data: editorMode } = useEditorMode();
-
-  const { data: tagInfoData, error: tagInfoError } = useSWRTagsInfo(pageId);
-
-  if (tagInfoError != null || tagInfoData == null) {
-    return <></>;
-  }
-
-  const isViewMode = editorMode === EditorMode.View;
-
-  const isPageDeletable = isDeletablePage(path);
-  const { isSharedUser } = appContainer;
-  const isAbleToShowPageManagement = !(isTrashPage(path)) && !isSharedUser;
-  return (
-    <div className="shadow-sm search-result-content-nav">
-      <div className={`grw-subnav container-fluid d-flex align-items-start justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
-        {/* Left side */}
-        <div className="grw-path-nav-container">
-          <PagePathNav pageId={pageId} pagePath={path} isCompactMode={isCompactMode} isSingleLineMode={isSignleLineMode} />
-        </div>
-        {/* Right side */}
-        {/*
-          DeleteCompletely is currently disabled
-          TODO : Retrive isAbleToDeleteCompleltly state everywhere in the system via swr.
-          story: https://redmine.weseek.co.jp/issues/82222
-        */}
-        <div className="d-flex">
-          <SubNavButtons
-            isCompactMode={isCompactMode}
-            pageId={pageId}
-            revisionId={revisionId}
-            path={path}
-            isViewMode={isViewMode}
-            isDeletable={isPageDeletable}
-            isAbleToDeleteCompletely={false}
-            isAbleToShowPageManagement={isAbleToShowPageManagement}
-          >
-          </SubNavButtons>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-
-/**
- * Wrapper component for using unstated
- */
-const SearchResultContentSubNavigationUnstatedWrapper = withUnstatedContainers(SearchResultContentSubNavigation, [AppContainer]);
-
-// wrapping tsx component returned by withUnstatedContainers to avoid type error when this component used in other tsx components.
-const SearchResultContentSubNavigationWrapper = (props) => {
-  return <SearchResultContentSubNavigationUnstatedWrapper {...props}></SearchResultContentSubNavigationUnstatedWrapper>;
-};
-export default SearchResultContentSubNavigationWrapper;