refactor Page for SearchResult

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

@@ -8,47 +8,33 @@ import PagePath from './PagePath';
 export default class Page extends React.Component {
 
   render() {
-    const page = this.props.page;
-    let link = this.props.linkTo;
-    if (link === '') {
-      link = page.path;
+    const {
+      page, noLink, excludePathString,
+    } = this.props;
+
+    let pagePath = <PagePath page={page} excludePathString={excludePathString} />;
+    if (!noLink != null) {
+      pagePath = <a className="text-break" href={page.pagePath}>{pagePath}</a>;
     }
 
     return (
       <>
-        <UserPicture user={page.lastUpdateUser} />
-        <a className="text-break" href={link}>
-          <PagePath page={page} excludePathString={this.props.excludePathString} />
-        </a>
+        <UserPicture user={page.lastUpdateUser} noLink={noLink} />
+        {pagePath}
         <PageListMeta page={page} />
       </>
     );
-    // return (
-    //   <li className="nav-item page-list-li w-100">
-    //     <a className="nav-link page-list-link d-flex align-items-center" href={link}>
-    //       <UserPicture user={page.lastUpdateUser} />
-    //       <PagePath page={page} excludePathString={this.props.excludePathString} />
-    //       <PageListMeta page={page} />
-    //       { hasChildren && (
-    //         <React.Fragment>
-    //           {this.props.children}
-    //         </React.Fragment>
-    //       )}
-    //     </a>
-    //   </li>
-    // );
   }
 
 }
 
 Page.propTypes = {
   page: PropTypes.object.isRequired,
-  linkTo: PropTypes.string,
   excludePathString: PropTypes.string,
-  children: PropTypes.array,
+  noLink: PropTypes.bool,
 };
 
 Page.defaultProps = {
-  linkTo: '',
   excludePathString: '',
+  noLink: false,
 };

src/client/js/components/SearchPage/SearchResult.jsx

@@ -170,6 +170,40 @@ class SearchResult extends React.Component {
     });
   }
 
+  renderListView(pages) {
+    return pages.map((page) => {
+      // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
+      const pageId = `#id_${page._id}`;
+      return (
+        <li key={page._id} className="nav-item page-list-li w-100">
+          <a className="nav-link page-list-link d-flex align-items-center" href={pageId}>
+            <Page page={page} noLink />
+            <div className="ml-auto d-flex">
+              { this.state.deletionMode
+                && (
+                  <div className="custom-control custom-checkbox custom-checkbox-danger">
+                    <input
+                      type="checkbox"
+                      id={`page-delete-check-${page._id}`}
+                      className="custom-control-input search-result-list-delete-checkbox"
+                      value={pageId}
+                      checked={this.state.selectedPages.has(page)}
+                      onChange={() => { return this.toggleCheckbox(page) }}
+                    />
+                    <label className="custom-control-label" htmlFor={`page-delete-check-${page._id}`}></label>
+                  </div>
+                )
+              }
+              <div className="page-list-option">
+                <a href={page.path}><i className="icon-login" /></a>
+              </div>
+            </div>
+          </a>
+        </li>
+      );
+    });
+  }
+
   render() {
     if (this.isError()) {
       return (
@@ -238,38 +272,7 @@ class SearchResult extends React.Component {
       );
     }
 
-    const listView = this.props.pages.map((page) => {
-      // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
-      const pageId = `#id_${page._id}`;
-      return (
-        <Page
-          page={page}
-          linkTo={pageId}
-          key={page._id}
-        >
-          <div className="ml-auto d-flex">
-            { this.state.deletionMode
-              && (
-                <div className="custom-control custom-checkbox custom-checkbox-danger">
-                  <input
-                    type="checkbox"
-                    id={`page-delete-check-${page._id}`}
-                    className="custom-control-input search-result-list-delete-checkbox"
-                    value={pageId}
-                    checked={this.state.selectedPages.has(page)}
-                    onChange={() => { return this.toggleCheckbox(page) }}
-                  />
-                  <label className="custom-control-label" htmlFor={`page-delete-check-${page._id}`}></label>
-                </div>
-              )
-            }
-            <div className="page-list-option">
-              <a href={page.path}><i className="icon-login" /></a>
-            </div>
-          </div>
-        </Page>
-      );
-    });
+    const listView = this.renderListView(this.props.pages);
 
     /*
     UI あとで考える