WIP: refactor PagePath

src/client/js/components/PageList/Page.jsx

@@ -3,24 +3,24 @@ import PropTypes from 'prop-types';
 
 import UserPicture from '../User/UserPicture';
 import PageListMeta from './PageListMeta';
-import PagePath from './PagePath';
+import PagePathLabel from './PagePathLabel';
 
 export default class Page extends React.Component {
 
   render() {
     const {
-      page, noLink, excludePathString,
+      page, noLink,
     } = this.props;
 
-    let pagePath = <PagePath page={page} excludePathString={excludePathString} />;
+    let pagePathElem = <PagePathLabel page={page} />;
     if (!noLink != null) {
-      pagePath = <a className="text-break" href={page.path}>{pagePath}</a>;
+      pagePathElem = <a className="text-break" href={page.path}>{pagePathElem}</a>;
     }
 
     return (
       <>
         <UserPicture user={page.lastUpdateUser} noLink={noLink} />
-        {pagePath}
+        {pagePathElem}
         <PageListMeta page={page} />
       </>
     );
@@ -30,11 +30,9 @@ export default class Page extends React.Component {
 
 Page.propTypes = {
   page: PropTypes.object.isRequired,
-  excludePathString: PropTypes.string,
   noLink: PropTypes.bool,
 };
 
 Page.defaultProps = {
-  excludePathString: '',
   noLink: false,
 };

src/client/js/components/PageList/PagePath.jsx

@@ -1,59 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import escapeStringRegexp from 'escape-string-regexp';
+import PagePathLabel from './PagePathLabel';
 
-export default class PagePath extends React.Component {
-
-  getShortPath(path) {
-    const name = path.replace(/(\/)$/, '');
-
-    // /.../hoge/YYYY/MM/DD 形式のページ
-    if (name.match(/.+\/([^/]+\/\d{4}\/\d{2}\/\d{2})$/)) {
-      return name.replace(/.+\/([^/]+\/\d{4}\/\d{2}\/\d{2})$/, '$1');
-    }
-
-    // /.../hoge/YYYY/MM 形式のページ
-    if (name.match(/.+\/([^/]+\/\d{4}\/\d{2})$/)) {
-      return name.replace(/.+\/([^/]+\/\d{4}\/\d{2})$/, '$1');
-    }
-
-    // /.../hoge/YYYY 形式のページ
-    if (name.match(/.+\/([^/]+\/\d{4})$/)) {
-      return name.replace(/.+\/([^/]+\/\d{4})$/, '$1');
-    }
-
-    // ページの末尾を拾う
-    return name.replace(/.+\/(.+)?$/, '$1');
-  }
-
-  render() {
-    const page = this.props.page;
-    const isShortPathOnly = this.props.isShortPathOnly;
-    const pagePath = decodeURIComponent(page.path);
-    const shortPath = this.getShortPath(pagePath);
-
-    const shortPathEscaped = escapeStringRegexp(shortPath);
-    const pathPrefix = pagePath.replace(new RegExp(`${shortPathEscaped}(/)?$`), '');
-
-    let classNames = ['page-path'];
-    classNames = classNames.concat(this.props.additionalClassNames);
-
-    if (isShortPathOnly) {
-      return <span className={classNames.join(' ')}>{shortPath}</span>;
-    }
-
-    return <span className={classNames.join(' ')}>{pathPrefix}<strong>{shortPath}</strong></span>;
-  }
-
-}
+/**
+ * !!DEPRECATED!!
+ *
+ * maintained for backward compatibility for growi-lsx-plugin(<= 3.1.1)
+ */
+const PagePath = props => (
+  <PagePathLabel isLatterOnly={props.isShortPathOnly} {...props} />
+);
 
 PagePath.propTypes = {
-  page: PropTypes.object.isRequired,
   isShortPathOnly: PropTypes.bool,
-  additionalClassNames: PropTypes.array,
+  ...PagePathLabel.propTypes,
 };
 
 PagePath.defaultProps = {
-  additionalClassNames: [],
+  ...PagePathLabel.defaultProps,
 };
+
+export default PagePath;

src/client/js/components/PageList/PagePath2.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-// import escapeStringRegexp from 'escape-string-regexp';
-
-import PagePathModel from '../../models/PagePath';
-
-const PagePath2 = (props) => {
-
-  const model = new PagePathModel(props.page.path, true);
-
-  // const pagePath = decodeURIComponent(page.path);
-  // const shortPath = this.getShortPath(pagePath);
-
-  // const shortPathEscaped = escapeStringRegexp(shortPath);
-  // const pathPrefix = pagePath.replace(new RegExp(`${shortPathEscaped}(/)?$`), '');
-
-  let classNames = ['page-path'];
-  classNames = classNames.concat(props.additionalClassNames);
-
-  // if (isShortPathOnly) {
-  //   return <span className={classNames.join(' ')}>{shortPath}</span>;
-  // }
-
-  // return <span className={classNames.join(' ')}>{pathPrefix}<strong>{shortPath}</strong></span>;
-
-  return <span className={classNames.join(' ')}>{model.former} /// {model.latter}</span>;
-};
-
-PagePath2.propTypes = {
-  page: PropTypes.object.isRequired,
-  isShortPathOnly: PropTypes.bool,
-  additionalClassNames: PropTypes.array,
-};
-
-PagePath2.defaultProps = {
-  additionalClassNames: [],
-};
-
-export default PagePath2;

src/client/js/components/PageList/PagePathLabel.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PagePathModel from '../../models/PagePath';
+
+const PagePathLabel = (props) => {
+
+  const model = new PagePathModel(props.page.path, true);
+
+  let classNames = ['page-path'];
+  classNames = classNames.concat(props.additionalClassNames);
+
+  if (props.isLatterOnly) {
+    return <span className={classNames.join(' ')}>{model.latter}</span>;
+  }
+
+  const textElem = (model.former == null && model.latter == null)
+    ? <><strong>/</strong></>
+    : <>{model.former}/<strong>{model.latter}</strong></>;
+
+  return <span className={classNames.join(' ')}>{textElem}</span>;
+};
+
+PagePathLabel.propTypes = {
+  page: PropTypes.object.isRequired,
+  isLatterOnly: PropTypes.bool,
+  additionalClassNames: PropTypes.array,
+};
+
+PagePathLabel.defaultProps = {
+  additionalClassNames: [],
+};
+
+export default PagePathLabel;

src/client/js/components/SearchTypeahead.jsx

@@ -6,7 +6,7 @@ import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 
 import UserPicture from './User/UserPicture';
 import PageListMeta from './PageList/PageListMeta';
-import PagePath from './PageList/PagePath';
+import PagePathLabel from './PageList/PagePathLabel';
 import AppContainer from '../services/AppContainer';
 import { createSubscribedElement } from './UnstatedUtils';
 
@@ -164,7 +164,7 @@ class SearchTypeahead extends React.Component {
     return (
       <span>
         <UserPicture user={page.lastUpdateUser} size="sm" noLink />
-        <PagePath page={page} />
+        <PagePathLabel page={page} />
         <PageListMeta page={page} />
       </span>
     );

src/client/js/models/PagePath.js

@@ -1,3 +1,5 @@
+import { pathUtils } from 'growi-commons';
+
 // https://regex101.com/r/BahpKX/2
 const PATTERN_INCLUDE_DATE = /^(.+\/[^/]+)\/(\d{4}|\d{4}\/\d{2}|\d{4}\/\d{2}\/\d{2})$/;
 // https://regex101.com/r/WVpPpY/1
@@ -5,9 +7,12 @@ const PATTERN_DEFAULT = /^((.*)\/)?([^/]+)$/;
 
 export default class PagePath {
 
-  constructor(pagePath, evalDatePath = false) {
+  constructor(path, evalDatePath = false) {
+
+    const pagePath = pathUtils.normalizePath(path);
+
     this.former = null;
-    this.latter = null;
+    this.latter = pagePath;
 
     // root
     if (pagePath === '/') {
@@ -25,8 +30,10 @@ export default class PagePath {
     }
 
     const matchDefault = pagePath.match(PATTERN_DEFAULT);
-    this.former = matchDefault[2];
-    this.latter = matchDefault[3];
+    if (matchDefault != null) {
+      this.former = matchDefault[2];
+      this.latter = matchDefault[3];
+    }
   }
 
 }