77833 clean up deletion related stuffs

packages/app/src/components/SearchPage.jsx

@@ -20,18 +20,22 @@ class SearchPage extends React.Component {
 
   constructor(props) {
     super(props);
-
+    // NOTE : selectedPages is deletion related state, will be used later in story 77535, 77565.
+    // deletionModal, deletion related functions are all removed, add them back when necessary.
+    // i.e ) in story 77525 or any tasks implementing deletion functionalities
     this.state = {
       searchingKeyword: decodeURI(this.props.query.q) || '',
       searchedKeyword: '',
       searchedPages: [],
       searchResultMeta: {},
       selectedPage: {},
+      selectedPages: new Set(),
     };
 
     this.search = this.search.bind(this);
     this.changeURL = this.changeURL.bind(this);
-    this.selectPage = this.selectPage.bind(this);
+    this.selectPageToShow = this.selectPageToShow.bind(this);
+    this.toggleCheckBox = this.toggleCheckBox.bind(this);
   }
 
   componentDidMount() {
@@ -102,17 +106,30 @@ class SearchPage extends React.Component {
       });
   }
 
-  selectPage = (pageId) => {
-    // TODO : fix this part . Iteration and comparison seems not working fine.
+  selectPageToShow= (pageId) => {
+    // TODO : this part can be improved.
+    // pageId is this form: #id_613eda3717b2d80c4874dfb9
     let index;
-    for (let i = 0; i < this.state.searchedPages; i++) {
-      if (this.state.searchedPages[i]._id === pageId) { index = i }
-    }
+    let i = 0;
+    const pId = pageId.slice(4);
+    this.state.searchedPages.forEach((page) => {
+      if (pId === page._id) { index = i }
+      i++;
+    });
     this.setState({
       selectedPage: this.state.searchedPages[index],
     });
   }
 
+  toggleCheckBox = (page) => {
+    if (this.state.selectedPages.has(page)) {
+      this.state.selectedPages.delete(page);
+    }
+    else {
+      this.state.selectedPages.add(page);
+    }
+  }
+
   renderSearchResultContent = () => {
     return (
       <SearchResultContent
@@ -130,8 +147,9 @@ class SearchPage extends React.Component {
         pages={this.state.searchedPages}
         deletionMode={false}
         selectedPage={this.state.selectedPage}
-        handleChange={}
-        clickHandler={this.selectPage}
+        selectedPages={this.state.selectedPages}
+        handleChange={this.toggleCheckBox}
+        clickHandler={this.selectPageToShow}
       >
       </SearchResultList>
     );

packages/app/src/components/SearchPageNew/SearchPageLayout.jsx

@@ -18,10 +18,6 @@ const SearchPageLayout = (props) => {
             <div className="search-result-meta">
               <i className="icon-magnifier" /> Found {props.searchResultMeta.total} pages with &quot;{props.searchingKeyword}&quot;
             </div>
-            <div className="text-nowrap">
-              {}
-              {}
-            </div>
           </div>
 
           <div className="page-list">

packages/app/src/components/SearchPageNew/SearchResultContent.jsx

@@ -7,37 +7,35 @@ import AppContainer from '~/client/services/AppContainer';
 // TODO : move to serachPage dir
 const SearchResultContent = (props) => {
   const renderPage = (page) => {
-    // const growiRenderer = props.appContainer.getRenderer('searchresult');
-    // let showTags;
-    // if (page.tags != null) { showTags = page != null && page.tags.length > 0 }
-    // return (
-    //   // Add prefix 'id_' in id attr, because scrollspy of bootstrap doesn't work when the first letter of id of target component is numeral.
-    //   <div id={`id_${page._id}`} key={page._id} className="search-result-page mb-5">
-    //     <h2>
-    //       <a href={page.path} className="text-break">
-    //         {page.path}
-    //       </a>
-    //       {showTags && (
-    //         <div className="mt-1 small">
-    //           <i className="tag-icon icon-tag"></i> {page.tags.join(', ')}
-    //         </div>
-    //       )}
-    //     </h2>
-    //     <RevisionLoader
-    //       growiRenderer={growiRenderer}
-    //       pageId={page._id}
-    //       pagePath={page.path}
-    //       revisionId={page.revision}
-    //       highlightKeywords={props.searchingKeyword}
-    //     />
-    //   </div>
-    // );
+    const growiRenderer = props.appContainer.getRenderer('searchresult');
+    let showTags = false;
+    if (page.tags != null && page.tags.length > 0) { showTags = true }
+    return (
+      // Add prefix 'id_' in id attr, because scrollspy of bootstrap doesn't work when the first letter of id of target component is numeral.
+      <div id={`id_${page._id}`} key={page._id} className="search-result-page mb-5">
+        <h2>
+          <a href={page.path} className="text-break">
+            {page.path}
+          </a>
+          {showTags && (
+            <div className="mt-1 small">
+              <i className="tag-icon icon-tag"></i> {page.tags.join(', ')}
+            </div>
+          )}
+        </h2>
+        <RevisionLoader
+          growiRenderer={growiRenderer}
+          pageId={page._id}
+          pagePath={page.path}
+          revisionId={page.revision}
+          highlightKeywords={props.searchingKeyword}
+        />
+      </div>
+    );
   };
-  const content = props.selectedPage.path;
+  const content = renderPage(props.selectedPage);
   return (
-    // <div
-    //   dangerouslySetInnerHTML={{ __html: content }}
-    // />
+
     <div>{content}</div>
   );
 };