wip : 77833 components placement done

packages/app/src/components/SearchPage.jsx

@@ -10,6 +10,11 @@ import AppContainer from '~/client/services/AppContainer';
 import { toastError } from '~/client/util/apiNotification';
 import SearchResult from './SearchPage/SearchResult';
 import SearchPageForm from './SearchPage/SearchPageForm';
+// TODO: change locatin
+import SearchPageLayout from './SearchPageNew/SearchPageLayout';
+import SearchResultContent from './SearchPageNew/SearchResultContent';
+import SearchResultList from './SearchPageNew/SearchResultList';
+import SearchControl from './SearchPageNew/SearchControl';
 
 class SearchPage extends React.Component {
 
@@ -21,11 +26,12 @@ class SearchPage extends React.Component {
       searchedKeyword: '',
       searchedPages: [],
       searchResultMeta: {},
-      // selectedPage: null,
+      selectedPage: {},
     };
 
     this.search = this.search.bind(this);
     this.changeURL = this.changeURL.bind(this);
+    this.selectPage = this.selectPage.bind(this);
   }
 
   componentDidMount() {
@@ -88,7 +94,7 @@ class SearchPage extends React.Component {
           searchedKeyword: keyword,
           searchedPages: res.data,
           searchResultMeta: res.meta,
-          // selectedPage: res.data[0],
+          selectedPage: res.data[0],
         });
       })
       .catch((err) => {
@@ -96,10 +102,67 @@ class SearchPage extends React.Component {
       });
   }
 
+  selectPage = (pageId) => {
+    // TODO : fix this part . Iteration and comparison seems not working fine.
+    let index;
+    for (let i = 0; i < this.state.searchedPages; i++) {
+      if (this.state.searchedPages[i]._id === pageId) { index = i }
+    }
+    this.setState({
+      selectedPage: this.state.searchedPages[index],
+    });
+  }
+
+  renderSearchResultContent = () => {
+    return (
+      <SearchResultContent
+        appContainer={this.props.appContainer}
+        searchingKeyword={this.state.searchingKeyword}
+        selectedPage={this.state.selectedPage}
+      >
+      </SearchResultContent>
+    );
+  }
+
+  renderSearchResultList = () => {
+    return (
+      <SearchResultList
+        pages={this.state.searchedPages}
+        deletionMode={false}
+        selectedPage={this.state.selectedPage}
+        handleChange={}
+        clickHandler={this.selectPage}
+      >
+      </SearchResultList>
+    );
+  }
+
+  renderSearchControl = () => {
+    return (
+      <SearchControl
+        t={this.props.t}
+        searchingKeyword={this.state.searchingKeyword}
+        appContainer={this.props.appContainer}
+        search={this.search}
+      >
+      </SearchControl>
+    );
+  }
+
   render() {
     return (
       <div>
-        <SearchResult
+        <SearchPageLayout
+          SearchControlComponent={this.renderSearchControl()}
+          SearchResultList={this.renderSearchResultList()}
+          SearchResultContent={this.renderSearchResultContent()}
+          searchResultMeta={this.state.searchResultMeta}
+          searchingKeyword={this.state.searchedKeyword}
+        >
+        </SearchPageLayout>
+
+
+        {/* <SearchResult
           pages={this.state.searchedPages}
           searchingKeyword={this.state.searchingKeyword}
           searchResultMeta={this.state.searchResultMeta}
@@ -110,7 +173,7 @@ class SearchPage extends React.Component {
             appContainer={this.props.appContainer}
             onSearchFormChanged={this.search}
           />
-        </SearchResult>
+        </SearchResult> */}
       </div>
     );
   }

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SearchControl from './SearchControl';
 import SearchResultList from './SearchResultList';
+import SearchResultContent from './SearchResultContent';
 
 // TODO: SearchPageNew to SearchPage
 // deletion functionality
@@ -11,29 +12,26 @@ const SearchPageLayout = (props) => {
   return (
     <div className="content-main">
       <div className="search-result row" id="search-result">
-        <nav>
-          {props.SearchControlComponent}
-        </nav>
-        <div className="d-flex align-items-start justify-content-between mt-1">
-          <div className="search-result-meta">
-            <i className="icon-magnifier" /> Found {} pages with &quot;{}&quot;
+        <div className="col-lg-6 d-none d-lg-block page-list search-result-list pr-0" id="search-result-list">
+          <nav>{props.SearchControlComponent}</nav>
+          <div className="d-flex align-items-start justify-content-between mt-1">
+            <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="text-nowrap">
-            {}
-            {}
+
+          <div className="page-list">
+            <ul className="page-list-ul page-list-ul-flat nav nav-pills">{props.SearchResultList}</ul>
           </div>
         </div>
-
-        <div className="page-list">
-          <ul className="page-list-ul page-list-ul-flat nav nav-pills">
-            {props.SearchResultList}
-          </ul>
+        <div className="col-lg-6 search-result-content">
+          {props.SearchResultContent}
         </div>
       </div>
-
-      <div className="col-lg-6 search-result-content">
-        {props.SearchResultContent}
-      </div>
       {/* DeletePageListModal */}
     </div>
   );
@@ -41,9 +39,10 @@ const SearchPageLayout = (props) => {
 
 SearchPageLayout.propTypes = {
   SearchControlComponent: PropTypes.instanceOf(SearchControl).isRequired,
-  SearchResultList: PropTypes.element.instanceOf(SearchResultList).isRequired,
-  SearchResultContent: PropTypes.element,
-  selectedPage: PropTypes.object.isRequired,
+  SearchResultList: PropTypes.instanceOf(SearchResultList).isRequired,
+  SearchResultContent: PropTypes.instanceOf(SearchResultContent).isRequired,
+  searchResultMeta: PropTypes.object.isRequired,
+  searchingKeyword: PropTypes.string.isRequired,
 };
 
 export default SearchPageLayout;

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

@@ -7,34 +7,38 @@ import AppContainer from '~/client/services/AppContainer';
 // TODO : move to serachPage dir
 const SearchResultContent = (props) => {
   const renderPage = (page) => {
-    const growiRenderer = props.appContainer.getRenderer('searchresult');
-    const 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;
+    // 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 content = renderPage(props.selectedPage);
+  const content = props.selectedPage.path;
   return (
-    { content }
+    // <div
+    //   dangerouslySetInnerHTML={{ __html: content }}
+    // />
+    <div>{content}</div>
   );
 };
 

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

@@ -13,7 +13,7 @@ class SearchResultList extends React.Component {
       const pageId = `#id_${page._id}`;
       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}>
+          <a className="nav-link page-list-link d-flex align-items-baseline" href={pageId} onClick={() => { this.props.clickHandler(pageId) }}>
             <div className="form-check my-auto">
               <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
             </div>
@@ -63,7 +63,7 @@ SearchResultList.propTypes = {
   deletionMode: PropTypes.bool.isRequired,
   selectedPages: PropTypes.array.isRequired,
   handleChange: PropTypes.func.isRequired,
-
+  clickHandler: PropTypes.func.isRequired,
 };