77833 wip: created SearchResutlList

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

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import SearchPageForm from '../SearchPage/SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
 
-
+// TODO: move to serachPage dir
+// now in tmp location
 const SearchControl = (props) => {
 
   return (
@@ -16,7 +17,7 @@ const SearchControl = (props) => {
           onSearchFormChanged={props.search}
         />
       </div>
-      {/* place deleteAll button , relevance button , include specificPath button */}
+      {/* TODO: place deleteAll button , relevance button , include specificPath button */}
     </div>
   );
 };

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import SearchControl from './SearchControl';
+import SearchResultList from './SearchResultList';
 
 // TODO: SearchPageNew to SearchPage
 // deletion functionality
 
+// create render function that will prepare Components wuth props.s
 const SearchPageLayout = (props) => {
   return (
     <div className="content-main">
@@ -37,8 +40,8 @@ const SearchPageLayout = (props) => {
 };
 
 SearchPageLayout.propTypes = {
-  SearchControlComponent: PropTypes.element,
-  SearchResultList: PropTypes.element,
+  SearchControlComponent: PropTypes.instanceOf(SearchControl).isRequired,
+  SearchResultList: PropTypes.element.instanceOf(SearchResultList).isRequired,
   SearchResultContent: PropTypes.element,
 };
 

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Page from '../PageList/Page';
+
+class SearchResultList extends React.Component {
+
+  // changed SearchResultListView to SearchResultLIst
+  // TODO : move to searchPage dir
+
+  render() {
+    return 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 (
+        <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}>
+            <div className="form-check my-auto">
+              <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
+            </div>
+            {/* TODO: remove dummy snippet and adjust style */}
+            <div className="d-block">
+              <Page page={page} noLink />
+              <div className="border-gray mt-5">{page.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={() => { return this.props.handleChange(page) }}
+                  />
+                  <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>
+      );
+    });
+  }
+
+}
+
+
+SearchResultList.propTypes = {
+  pages: PropTypes.array.isRequired,
+  deletionMode: PropTypes.bool.isRequired,
+  selectedPages: PropTypes.array.isRequired,
+  handleChange: PropTypes.func.isRequired,
+
+};
+
+
+export default SearchResultList;