78577 refactoring front

packages/app/src/components/SearchPage/SearchResultList.jsx

@@ -9,71 +9,12 @@ class SearchResultList extends React.Component {
       // TODO : send cetain  length of body (revisionBody) from elastisearch by adding some settings to the query and
       //         when keyword is not in page content, display revisionBody.
       // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
-      let snippet = '';
-      snippet = page.elasticSearchResultInfo.snippet;
+      const snippet = page.elasticSearchResult.snippet;
       return (
-        <li key={page._id} className="nav-item page-list-li w-100 m-0 border-bottom">
-          <a
-            className="nav-link page-list-link d-flex align-items-baseline"
-            href={pageId}
-            onClick={() => {
-              try {
-                if (this.props.onClickInvoked == null) { throw new Error('onClickInvoked is null') }
-                this.props.onClickInvoked(page._id);
-              }
-              catch (error) {
-                logger.error(error);
-              }
-            }}
-          >
-            <div className="form-check my-auto">
-              <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
-            </div>
-            <div className="d-block">
-              {/* TODO  task : 77750 place component here that takes page.elasticSearchResultInfo.matchedPath here */}
-              <Page page={page} noLink />
-              <div className="border-gray mt-5" dangerouslySetInnerHTML={{ __html: snippet }}></div>
-            </div>
-            <div className="ml-auto d-flex">
-              {this.props.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.props.selectedPages.has(page)}
-                    onChange={() => {
-                      try {
-                        if (this.props.onChangeInvoked == null) { throw new Error('onChnageInvoked is null') }
-                        return this.props.onChangeInvoked(page);
-                      }
-                      catch (error) {
-                        logger.error(error);
-                      }
-                    }}
-                  />
-                  <label className="custom-control-label" htmlFor={`page-delete-check-${page._id}`}></label>
-                </div>
-              )}
-              <div className="page-list-option">
-                <button
-                  type="button"
-                  className="btn btn-link p-0"
-                  value={page.path}
-                  onClick={(e) => {
-                    window.location.href = e.currentTarget.value;
-                  }}
-                >
-                  <i className="icon-login" />
-                </button>
-              </div>
-            </div>
-          </a>
-        </li>
         <SearchResultListItem
           page={page}
           onClickInvoked={this.props.onClickInvoked}
+          snippet={snippet}
           noLink
         />
       );

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

@@ -10,17 +10,17 @@ const logger = loggerFactory('growi:searchResultList');
 type Props ={
   page: {
     _id: string,
-    snippet: string,
     path: string,
     noLink: boolean,
     lastUpdateUser: any
   },
+  snippet: string,
   onClickInvoked: (data: string) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
-  const { page, onClickInvoked } = props;
+  const { page, snippet, onClickInvoked } = props;
 
   // 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 = `#${page._id}`;
@@ -28,6 +28,10 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   const dPagePath = new DevidedPagePath(page.path, false, true);
   const pagePathElem = <PagePathLabel page={page} isFormerOnly />;
 
+  // TODO : send cetain  length of body (revisionBody) from elastisearch by adding some settings to the query and
+  //         when keyword is not in page content, display revisionBody.
+  // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
+
   return (
     <li key={page._id} className="page-list-li w-100 border-bottom pr-4">
       <a
@@ -82,7 +86,8 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
               </button> */}
 
             </div>
-            <div className="mt-1">{page.snippet}</div>
+            {/* eslint-disable-next-line react/no-danger */}
+            <div className="mt-1" dangerouslySetInnerHTML={{ __html: snippet }}></div>
           </div>
         </div>
       </a>