clean code

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

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useRef } from 'react';
 
 import assert from 'assert';
 
-import { returnPagePathForURL } from '^/../core/src/utils/page-path-utils';
+import { pathUtils } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 
@@ -28,6 +28,8 @@ export const GlobalSearch = (props: GlobalSearchProps): JSX.Element => {
 
   const { dropup } = props;
 
+  const { returnPathForURL } = pathUtils;
+
   const router = useRouter();
 
   const globalSearchFormRef = useRef<IFocusable>(null);
@@ -50,9 +52,9 @@ export const GlobalSearch = (props: GlobalSearchProps): JSX.Element => {
 
     // navigate to page
     if (page != null) {
-      router.push(returnPagePathForURL(page.path, page._id));
+      router.push(returnPathForURL(page.path, page._id));
     }
-  }, [router]);
+  }, [returnPathForURL, router]);
 
   const search = useCallback(() => {
     const url = new URL(window.location.href);

packages/app/src/components/PageAlert/OldRevisionAlert.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { returnPagePathForURL } from '^/../core/src/utils/page-path-utils';
+import { pathUtils } from '@growi/core';
 import Link from 'next/link';
 import { useTranslation } from 'react-i18next';
 
@@ -13,15 +13,17 @@ export const OldRevisionAlert = (): JSX.Element => {
   const { data: isLatestRevision } = useIsLatestRevision();
   const { data: page } = useSWRxCurrentPage();
 
+  const { returnPathForURL } = pathUtils;
+
   if (page == null || isLatestRevision == null || isLatestRevision) {
     return <></>;
   }
 
   return (
     <div className="alert alert-warning">
-      <strong>{ t('Warning') }: </strong> { t('page_page.notice.version') }
-      <Link href={returnPagePathForURL(page.path, page._id)}>
-        <a><i className="icon-fw icon-arrow-right-circle"></i>{ t('Show latest') }</a>
+      <strong>{t('Warning')}: </strong> {t('page_page.notice.version')}
+      <Link href={returnPathForURL(page.path, page._id)}>
+        <a><i className="icon-fw icon-arrow-right-circle"></i>{t('Show latest')}</a>
       </Link>
     </div>
   );

packages/app/src/components/PageHistory.tsx

@@ -64,8 +64,8 @@ export const PageHistory: React.FC<{ onClose: () => void }> = ({ onClose }) => {
         pagingLimit={pagingLimit}
         sourceRevision={sourceRevision}
         targetRevision={targetRevision}
-        pageId={currentPageId}
-        pagePath={currentPagePath}
+        currentPageId={currentPageId}
+        currentPagePath={currentPagePath}
         onChangeSourceInvoked={setSourceRevision}
         onChangeTargetInvoked={setTargetRevision}
         onClose={onClose}
@@ -77,6 +77,7 @@ export const PageHistory: React.FC<{ onClose: () => void }> = ({ onClose }) => {
         sourceRevision={sourceRevision}
         targetRevision={targetRevision}
         currentPageId={currentPageId}
+        currentPagePath={currentPagePath}
         onClose={onClose}
       />
     </div>

packages/app/src/components/PageHistory/PageRevisionTable.tsx

@@ -12,8 +12,8 @@ type PageRevisionTAble = {
   pagingLimit: number,
   sourceRevision: IRevisionHasId,
   targetRevision: IRevisionHasId,
-  pageId: string,
-  pagePath: string,
+  currentPageId: string,
+  currentPagePath: string,
   onChangeSourceInvoked: React.Dispatch<React.SetStateAction<IRevisionHasId | undefined>>,
   onChangeTargetInvoked: React.Dispatch<React.SetStateAction<IRevisionHasId | undefined>>,
   onClose: () => void,
@@ -23,7 +23,7 @@ export const PageRevisionTable = (props: PageRevisionTAble): JSX.Element => {
   const { t } = useTranslation();
 
   const {
-    revisions, pagingLimit, sourceRevision, targetRevision, pageId, pagePath,
+    revisions, pagingLimit, sourceRevision, targetRevision, currentPageId, currentPagePath,
     onChangeSourceInvoked, onChangeTargetInvoked, onClose,
   } = props;
 
@@ -52,8 +52,8 @@ export const PageRevisionTable = (props: PageRevisionTAble): JSX.Element => {
           <div className="d-lg-flex">
             <Revision
               revision={revision}
-              pageId={pageId}
-              pagePath={pagePath}
+              pageId={currentPageId}
+              pagePath={currentPagePath}
               isLatestRevision={revision === latestRevision}
               hasDiff={hasDiff}
               key={`revision-history-rev-${revisionId}`}

packages/app/src/components/PageHistory/Revision.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { IRevisionHasId } from '@growi/core';
+import { IRevisionHasId, pathUtils } from '@growi/core';
 import { UserPicture } from '@growi/ui';
-import { returnPagePathForURL } from '^/../core/src/utils/page-path-utils';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
+import urljoin from 'url-join';
 
 import UserDate from '../User/UserDate';
 import { Username } from '../User/Username';
@@ -27,6 +27,8 @@ export const Revision = (props: RevisionProps): JSX.Element => {
     revision, pageId, pagePath, isLatestRevision, hasDiff, onClose,
   } = props;
 
+  const { returnPathForURL } = pathUtils;
+
   const renderSimplifiedNodiff = (revision: IRevisionHasId) => {
 
     const author = revision.author;
@@ -67,7 +69,7 @@ export const Revision = (props: RevisionProps): JSX.Element => {
           <div className="mb-1">
             <UserDate dateTime={revision.createdAt} />
             <br className="d-xl-none d-block" />
-            <Link href={`${returnPagePathForURL(pagePath, pageId)}?revisionId=${revision._id}`} prefetch={false}>
+            <Link href={urljoin(returnPathForURL(pagePath, pageId), `?revisionId=${revision._id}`)} prefetch={false}>
               <a className="ml-xl-3" onClick={onClose}>
                 <i className="icon-login"></i> {t('Go to this version')}
               </a>

packages/app/src/components/PageHistory/RevisionDiff.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { IRevisionHasPageId } from '@growi/core';
+import { IRevisionHasPageId, pathUtils } from '@growi/core';
 import { createPatch } from 'diff';
 import { html, Diff2HtmlConfig } from 'diff2html';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
+import urljoin from 'url-join';
 
 import UserDate from '../User/UserDate';
 
@@ -16,6 +17,8 @@ type RevisioinDiffProps = {
   currentRevision: IRevisionHasPageId,
   previousRevision: IRevisionHasPageId,
   revisionDiffOpened: boolean,
+  currentPageId: string,
+  currentPagePath: string,
   onClose: () => void,
 }
 
@@ -23,9 +26,11 @@ export const RevisionDiff = (props: RevisioinDiffProps): JSX.Element => {
   const { t } = useTranslation();
 
   const {
-    currentRevision, previousRevision, revisionDiffOpened, onClose,
+    currentRevision, previousRevision, revisionDiffOpened, currentPageId, currentPagePath, onClose,
   } = props;
 
+  const { returnPathForURL } = pathUtils;
+
   const previousText = (currentRevision._id === previousRevision._id) ? '' : previousRevision.body;
 
   const patch = createPatch(
@@ -50,7 +55,7 @@ export const RevisionDiff = (props: RevisioinDiffProps): JSX.Element => {
           <div className="row">
             <div className="col comparison-source-wrapper pt-1 px-0">
               <span className="comparison-source pr-3">{t('page_history.comparing_source')}</span><UserDate dateTime={previousRevision.createdAt} />
-              <Link href={`?revisionId=${previousRevision._id}`}>
+              <Link href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${previousRevision._id}`)}>
                 <a className="ml-3" onClick={onClose}>
                   <i className="icon-login"></i>
                 </a>
@@ -58,7 +63,7 @@ export const RevisionDiff = (props: RevisioinDiffProps): JSX.Element => {
             </div>
             <div className="col comparison-target-wrapper pt-1">
               <span className="comparison-target pr-3">{t('page_history.comparing_target')}</span><UserDate dateTime={currentRevision.createdAt} />
-              <Link href={`?revisionId=${currentRevision._id}`}>
+              <Link href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${currentRevision._id}`)}>
                 <a className="ml-3" onClick={onClose}>
                   <i className="icon-login"></i>
                 </a>

packages/app/src/components/PageList/PageListItemL.tsx

@@ -4,7 +4,7 @@ import React, {
 } from 'react';
 
 
-import { DevidedPagePath } from '@growi/core';
+import { DevidedPagePath, pathUtils } from '@growi/core';
 import { UserPicture, PageListMeta } from '@growi/ui';
 import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
@@ -55,6 +55,8 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
     onClickItem, onCheckboxChanged, onPageDuplicated, onPageRenamed, onPageDeleted, onPagePutBacked,
   } = props;
 
+  const { returnPathForURL } = pathUtils;
+
   const [likerCount, setLikerCount] = useState(pageData.liker.length);
   const [bookmarkCount, setBookmarkCount] = useState(pageMeta && pageMeta.bookmarkCount ? pageMeta.bookmarkCount : 0);
 
@@ -203,7 +205,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
                 <span className="h5 mb-0">
                   {/* Use permanent links to care for pages with the same name (Cannot use page path url) */}
                   <span className="grw-page-path-hierarchical-link text-break">
-                    <Link href={encodeURI(urljoin('/', pageData._id))} prefetch={false}>
+                    <Link href={encodeURI(returnPathForURL(pageData.path, pageData._id))} prefetch={false}>
                       {shouldDangerouslySetInnerHTMLForPaths
                         ? (
                           <a

packages/app/src/components/RevisionComparer/RevisionComparer.tsx

@@ -7,8 +7,6 @@ import {
   Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
 
-import { useCurrentPagePath } from '~/stores/page';
-
 import { RevisionDiff } from '../PageHistory/RevisionDiff';
 
 import styles from './RevisionComparer.module.scss';
@@ -26,6 +24,7 @@ type RevisionComparerProps = {
   sourceRevision: IRevisionHasPageId
   targetRevision: IRevisionHasPageId
   currentPageId?: string
+  currentPagePath: string
   onClose: () => void
 }
 
@@ -33,10 +32,9 @@ export const RevisionComparer = (props: RevisionComparerProps): JSX.Element => {
   const { t } = useTranslation(['translation', 'commons']);
 
   const {
-    sourceRevision, targetRevision, currentPageId, onClose,
+    sourceRevision, targetRevision, currentPageId, currentPagePath, onClose,
   } = props;
 
-  const { data: currentPagePath } = useCurrentPagePath();
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
   const toggleDropdown = () => {
@@ -105,6 +103,8 @@ export const RevisionComparer = (props: RevisionComparerProps): JSX.Element => {
               revisionDiffOpened
               previousRevision={sourceRevision}
               currentRevision={targetRevision}
+              currentPageId={currentPageId}
+              currentPagePath={currentPagePath}
               onClose={onClose}
             />
           )

packages/core/src/utils/page-path-utils.ts

@@ -305,10 +305,3 @@ export const generateChildrenRegExp = (path: string): RegExp => {
   // ex. /parent/any_child OR /any_level1
   return new RegExp(`^${path}(\\/[^/]+)\\/?$`);
 };
-
-/**
- * In the href, if the page path is '/', eliminate the pageId from the url path.
- */
-export const returnPagePathForURL = (pagePath: string, pageId: string): string => {
-  return pagePath === '/' ? '/' : `/${pageId}`;
-};

packages/core/src/utils/path-utils.js

@@ -133,3 +133,14 @@ export function normalizePath(path) {
 export function attachTitleHeader(path) {
   return `# ${path}`;
 }
+
+/**
+ * If the pagePath is top page path, eliminate the pageId from the url path.
+ * @param {string} pagePath
+ * @param {string} pageId
+ * @returns {string}
+ * @memberof pathUtils
+ */
+export const returnPathForURL = (pagePath, pageId) => {
+  return pagePath === '/' ? pagePath : addHeadingSlash(pageId);
+};