78782 PagePathNav to tsx component

packages/app/src/components/Navbar/GrowiSubNavigation.jsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import NavigationContainer from '~/client/services/NavigationContainer';
 import PageContainer from '~/client/services/PageContainer';
 
-import PagePathNav from './PagePathNav';
 import TagLabels from '../Page/TagLabels';
 import SubnavButtons from './SubNavButtons';
 import PageEditorModeManager from './PageEditorModeManager';
@@ -15,33 +13,16 @@ import PageEditorModeManager from './PageEditorModeManager';
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
 
+import PagePathNav from '../PagePathNav';
+
 const GrowiSubNavigation = (props) => {
   const {
-    appContainer,
-    navigationContainer,
-    isCompactMode,
-    isSearchPageMode,
+    appContainer, navigationContainer, pageContainer, isCompactMode,
   } = props;
   const { isDrawerMode, editorMode, isDeviceSmallerThanMd } = navigationContainer.state;
-
-  let {
-    isPageExist, isAbleToShowTagLabel, isAbleToShowPageEditorModeManager, isAbleToShowPageAuthors,
-  } = false;
-  let {
-    pageId,
-    path,
-  } = props;
-
-  if (props.pageContainer != null) {
-    ({
-      pageId,
-      path,
-    } = props.pageContainer.state);
-    isPageExist = props.pageContainer.isPageExist;
-    isAbleToShowTagLabel = props.pageContainer.isAbleToShowTagLabel;
-    isAbleToShowPageEditorModeManager = props.pageContainer.isAbleToShowPageEditorModeManager;
-    isAbleToShowPageAuthors = props.pageContainer.isAbleToShowPageAuthors;
-  }
+  const {
+    pageId, path, createdAt, creator, updatedAt, revisionAuthor, isPageExist,
+  } = pageContainer.state;
 
   const { isGuestUser } = appContainer;
   const isEditorMode = editorMode !== 'view';
@@ -64,11 +45,11 @@ const GrowiSubNavigation = (props) => {
         ) }
 
         <div className="grw-path-nav-container">
-          { isAbleToShowTagLabel && !isCompactMode && !isTagLabelHidden && (
+          {pageContainer.isAbleToShowTagLabel && !isCompactMode && !isTagLabelHidden && (
             <div className="grw-taglabels-container">
               <TagLabels editorMode={editorMode} />
             </div>
-          ) }
+          )}
           <PagePathNav pageId={pageId} pagePath={path} isEditorMode={isEditorMode} isCompactMode={isCompactMode} />
         </div>
       </div>
@@ -79,12 +60,9 @@ const GrowiSubNavigation = (props) => {
         <div className="d-flex flex-column align-items-end">
           <div className="d-flex">
             <SubnavButtons isCompactMode={isCompactMode} />
-            {/* TODO: refactor SubNavButtons in a way that it can be used independently from pageContainer
-              TASK : #80481 https://estoc.weseek.co.jp/redmine/issues/80481
-             */}
           </div>
           <div className="mt-2">
-            {isAbleToShowPageEditorModeManager && !isSearchPageMode && (
+            {pageContainer.isAbleToShowPageEditorModeManager && (
               <PageEditorModeManager
                 onPageEditorModeButtonClicked={onPageEditorModeButtonClicked}
                 isBtnDisabled={isGuestUser}
@@ -96,13 +74,13 @@ const GrowiSubNavigation = (props) => {
         </div>
 
         {/* Page Authors */}
-        { (isAbleToShowPageAuthors && !isCompactMode && isSearchPageMode) && (
+        {pageContainer.isAbleToShowPageAuthors && !isCompactMode && (
           <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none py-2 pl-4 mb-0 ml-3">
             <li className="pb-1">
-              <AuthorInfo user={props.pageContainer.state.creator} date={props.pageContainer.state.createdAt} locate="subnav" />
+              <AuthorInfo user={creator} date={createdAt} locate="subnav" />
             </li>
             <li className="mt-1 pt-1 border-top">
-              <AuthorInfo user={props.pageContainer.state.revisionAuthor} date={props.pageContainer.updatedAt} mode="update" locate="subnav" />
+              <AuthorInfo user={revisionAuthor} date={updatedAt} mode="update" locate="subnav" />
             </li>
           </ul>
         )}
@@ -111,32 +89,17 @@ const GrowiSubNavigation = (props) => {
   );
 };
 
+/**
+ * Wrapper component for using unstated
+ */
+const GrowiSubNavigationWrapper = withUnstatedContainers(GrowiSubNavigation, [AppContainer, NavigationContainer, PageContainer]);
+
 GrowiSubNavigation.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer),
-  isCompactMode: PropTypes.bool,
-  // Props for searchResultContent
-  pageId: PropTypes.string,
-  path: PropTypes.string,
-  isSearchPageMode: PropTypes.bool,
-};
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
-
-const GrowiSubNavigationWrapper = (props) => {
-  let GrowiSubNavigationUnstatedWrapper = <></>;
-  if (props.isSearchPageMode) {
-    GrowiSubNavigationUnstatedWrapper = withUnstatedContainers(GrowiSubNavigation, [AppContainer, NavigationContainer]);
-    return <GrowiSubNavigationUnstatedWrapper isSearchPageMode pageId={props.pageId} path={props.path}></GrowiSubNavigationUnstatedWrapper>;
-  }
-  GrowiSubNavigationUnstatedWrapper = withUnstatedContainers(GrowiSubNavigation, [AppContainer, NavigationContainer, PageContainer]);
-  return <GrowiSubNavigationUnstatedWrapper></GrowiSubNavigationUnstatedWrapper>;
-};
-
-GrowiSubNavigationWrapper.propTypes = {
-  isSearchPageMode: PropTypes.bool,
-  pageId: PropTypes.string,
-  path: PropTypes.string,
+  isCompactMode: PropTypes.bool,
 };
 
 export default GrowiSubNavigationWrapper;

packages/app/src/components/Navbar/PagePathNav.tsx → packages/app/src/components/PagePathNav.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { DevidedPagePath } from '@growi/core';
-import PagePathHierarchicalLink from '../PagePathHierarchicalLink';
-import CopyDropdown from '../Page/CopyDropdown';
+import PagePathHierarchicalLink from './PagePathHierarchicalLink';
+import CopyDropdown from './Page/CopyDropdown';
 
-import LinkedPagePath from '../../models/linked-page-path';
+import LinkedPagePath from '../models/linked-page-path';
 
 
 type Props = {

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

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 
 import RevisionLoader from '../Page/RevisionLoader';
 import AppContainer from '../../client/services/AppContainer';
-import SearchResultContentSubNavigation from './SearchResultContentSubNavigation';
+import PagePathNav from '../PagePathNav';
 
 type Props ={
   appContainer: AppContainer,
@@ -15,13 +15,13 @@ const SearchResultContent: FC<Props> = (props: Props) => {
   // Temporaly workaround for lint error
   // later needs to be fixed: RevisoinRender to typescriptcomponet
   const RevisionLoaderTypeAny: any = RevisionLoader;
-  const SearchResultContentSubNavigationTypeAny : any = SearchResultContentSubNavigation;
+  const PagePathNavTypeAny: any = PagePathNav;
   const growiRenderer = props.appContainer.getRenderer('searchresult');
   let showTags = false;
   if (page.tags != null && page.tags.length > 0) { showTags = true }
   return (
     <div key={page._id} className="search-result-page mb-5">
-      <SearchResultContentSubNavigationTypeAny isSearchPageMode pageId={page._id} path={page.path}></SearchResultContentSubNavigationTypeAny>
+      <PagePathNavTypeAny pageId={page._id} pagePath={page.path}></PagePathNavTypeAny>
       <RevisionLoaderTypeAny
         growiRenderer={growiRenderer}
         pageId={page._id}

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

@@ -4,6 +4,7 @@ import PagePathNav from '../Navbar/PagePathNav';
 type Props = {
   pageId: string,
   path: string,
+  isEditorMode: boolean,
   isCompactMode: boolean,
 }
 
@@ -17,6 +18,7 @@ const SearchResultContentSubNavigation: FC<Props> = (props : Props) => {
       <div className="grw-path-nav-container">
         {/* TODO : refactor TagLabels in a way that it can be used independently from pageContainenr
               TASK: #80623 https://estoc.weseek.co.jp/redmine/issues/80623
+              CONDITION reference : https://dev.growi.org/5fabddf8bbeb1a0048bcb9e9
           */}
         {/* {isAbleToShowTagLabel && !isCompactMode && !isTagLabelHidden && (
           <div className="grw-taglabels-container">