search improvement (#712)

* search improvement

* lint breaks

Author: naveed-ahmad

src/components/Translation/index.js

@@ -25,13 +25,14 @@ class Translation extends Component {
   }
 
   componentWillUnmount() {
-    const { index } = this.props;
-    let trans;
+    // TODO: this is breaking for search! Need to figure out why
+    // const { index } = this.props;
+    // let trans;
 
-    if (__CLIENT__) {
-      trans = document.getElementById(`trans${index}`).children[1]; // eslint-disable-line no-undef
-      trans.removeEventListener('click', this.fetchFootNote, true);
-    }
+    // if (__CLIENT__) {
+      // trans = document.getElementById(`trans${index}`).children[1]; // eslint-disable-line
+      // trans.removeEventListener('click', this.fetchFootNote, true);
+    // }
   }
 
   fetchFootNote = (event) => {

src/components/Verse/index.js

@@ -244,13 +244,13 @@ class Verse extends Component {
   }
 
   renderAyahBadge() {
-    const { isSearched } = this.props;
+    const { isSearched, verse } = this.props;
     let metric;
 
     const content = (
       <h4>
         <span className={`label label-default ${styles.label}`}>
-          {this.props.verse.verseKey}
+          {verse.verseKey}
         </span>
       </h4>
     );
@@ -263,31 +263,37 @@ class Verse extends Component {
 
     return (
       <Link
-        to={`/${this.props.verse.chapterId}/${this.props.verse.verseNumber}`}
+        to={`/${verse.chapterId}/${verse.verseNumber}`}
         data-metrics-event-name={metric}
       >
         {content}
       </Link>
     );
   }
 
-  renderControls() {
-    const { chapter, verse } = this.props;
+  renderShare() {
+    const { isSearched, verse, chapter } = this.props;
+
+    if (isSearched) return false;
 
+    return <Share chapter={chapter} verseKey={verse.verseKey} />;
+  }
+
+  renderControls() {
     return (
       <div className={`col-md-1 col-sm-1 ${styles.controls}`}>
         {this.renderAyahBadge()}
         {this.renderPlayLink()}
         {this.renderCopyLink()}
         {this.renderBookmark()}
-        <Share chapter={chapter} verseKey={verse.verseKey} />
+        {this.renderShare()}
       </div>
     );
   }
 
   render() {
     const { verse, iscurrentVerse } = this.props;
-    debug('component:Verse', `Render ${this.props.verse.verseKey}`);
+    debug('component:Verse', `Render ${verse.verseKey}`);
 
     return (
       <Element

src/containers/Search/Header/index.js

@@ -7,6 +7,7 @@ import { push } from 'react-router-redux';
 import Helmet from 'react-helmet';
 import ReactPaginate from 'react-paginate';
 import { FormattedHTMLMessage } from 'react-intl';
+import IndexHeader from 'components/IndexHeader';
 
 import Verse from 'components/Verse';
 import Loader from 'quran-components/lib/Loader';
@@ -17,23 +18,20 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 import { verseType, optionsType } from 'types';
 
-import Header from './Header';
-
 const style = require('./style.scss');
 
 class Search extends Component {
   static propTypes = {
     isErrored: PropTypes.bool,
     isLoading: PropTypes.bool,
-    total: PropTypes.number,
-    page: PropTypes.number,
-    size: PropTypes.number,
-    from: PropTypes.number,
+    totalCount: PropTypes.number,
+    totalPages: PropTypes.number,
+    currentPage: PropTypes.number,
+    perPage: PropTypes.number,
     query: PropTypes.string,
-    results: PropTypes.array, // eslint-disable-line
-    verses: PropTypes.objectOf(verseType),
+    results: PropTypes.arrayOf(verseType), // eslint-disable-line
     push: PropTypes.func.isRequired,
-    location: PropTypes.shape({
+    location: PropTypes.shape({ // eslint-disable-line
       q: PropTypes.string,
       p: PropTypes.string
     }),
@@ -49,10 +47,10 @@ class Search extends Component {
   };
 
   handlePageChange = (payload) => {
-    const { push, query, page } = this.props; // eslint-disable-line no-shadow
+    const { push, query, currentPage } = this.props; // eslint-disable-line no-shadow
     const selectedPage = payload.selected + 1;
 
-    if (page !== selectedPage) {
+    if (currentPage !== selectedPage) {
       this.context.metrics.track(
         'Search',
         { action: 'paginate', label: `${query} - ${selectedPage}` }
@@ -68,13 +66,12 @@ class Search extends Component {
   }
 
   renderStatsBar() {
-    const { total, size, page, from, query } = this.props;
-    const values = { from: 2, to: (from + size) - 1, total: 10, query };
-
-
-    if (total) {
-      const pageNum = Math.ceil(total / size);
+    const { totalCount, totalPages, currentPage, query, perPage } = this.props;
+    const from = Math.max(...[(currentPage - 1) * perPage, 1]);
+    const to = Math.min(...[currentPage * perPage, totalCount]);
+    const values = { from, to, query, total: totalCount };
 
+    if (totalPages) {
       return (
         <div className={style.header}>
           <div className="container">
@@ -99,16 +96,17 @@ class Search extends Component {
                     </span>
                   }
                   breakLabel={<a href="">...</a>}
-                  pageNum={pageNum}
+                  pageNum={currentPage}
                   marginPagesDisplayed={2}
                   pageRangeDisplayed={5}
-                  initialSelected={page - 1}
-                  forceSelected={page - 1}
+                  initialSelected={currentPage}
+                  forceSelected={currentPage}
                   onPageChange={this.handlePageChange}
                   containerClassName="pagination"
                   subContainerClassName="pages pagination"
-                  pageLinkClassName="pointer:"
+                  pageLinkClassName="pointer"
                   activeClass={style.active}
+                  pageCount={totalPages}
                 />
               </div>
             </div>
@@ -121,9 +119,9 @@ class Search extends Component {
   }
 
   renderBody() {
-    const { location, isErrored, isLoading, results, options, verses } = this.props;
+    const { isErrored, isLoading, results, options, query } = this.props;
 
-    if (!location.q) {
+    if (!query) {
       return (
         <h3 className="text-center" style={{ padding: '15%' }}>
           <LocaleFormattedMessage id="search.nothing" defaultMessage="No search query." />
@@ -153,9 +151,9 @@ class Search extends Component {
 
     return results.map(result => (
       <Verse
-        verse={verses[result.verse]}
+        verse={result}
         match={result.match}
-        key={result.verse}
+        key={result.verseKey}
         tooltip={options.tooltip}
         isSearched
       />
@@ -174,7 +172,7 @@ class Search extends Component {
             .text-translation{font-size: ${options.fontSize.translation}rem;}`
           }]}
         />
-        <Header />
+        <IndexHeader />
         {this.renderStatsBar()}
         <div className="container surah-list">
           <div className="row">
@@ -191,26 +189,25 @@ class Search extends Component {
 const AsyncSearch = asyncConnect([{
   promise({ store: { dispatch }, location }) {
     if (__CLIENT__) {
-      dispatch(search(location.query));
+      dispatch(search(location.query || location.q));
       return false;
     }
 
-    return dispatch(search(location.query));
+    return dispatch(search(location.query || location.q));
   }
 }])(Search);
 
 function mapStateToProps(state) {
   return {
     isErrored: state.searchResults.errored,
     isLoading: state.searchResults.loading,
-    total: state.searchResults.total,
-    page: state.searchResults.page,
-    size: state.searchResults.size,
-    from: state.searchResults.from,
+    totalCount: state.searchResults.totalCount,
+    currentPage: state.searchResults.currentPage,
+    totalPages: state.searchResults.totalPages,
+    perPage: state.searchResults.perPage,
     took: state.searchResults.took,
     query: state.searchResults.query,
     results: state.searchResults.results,
-    verses: state.searchResults.entities,
     options: state.options
   };
 }

src/containers/Search/index.js

@@ -9,7 +9,7 @@ import {
 export function search(params) {
   return {
     types: [SEARCH, SEARCH_SUCCESS, SEARCH_FAIL],
-    schema: { results: [{ ayah: versesSchema }] },
+    schema: { results: [versesSchema] },
     // TODO: We are doing this because of a weird obj.hasOwnProperty method missing on `params`
     promise: client => client.get('/api/v3/search', { params: { q: params.q, p: params.p } }),
     params

src/redux/actions/search.js

@@ -7,7 +7,6 @@ import {
 const initialState = {
   errored: false,
   loaded: false,
-  entities: {},
   results: []
 };
 
@@ -27,14 +26,13 @@ export default function reducer(state = initialState, action = {}) {
         loaded: true,
         loading: false,
         errored: false,
-        total: action.result.result.total,
-        page: action.result.result.page,
-        size: action.result.result.size,
-        from: action.result.result.from,
+        totalCount: action.result.result.totalCount,
+        totalPages: action.result.result.totalPages,
+        currentPage: action.result.result.currentPage,
+        perPage: action.result.result.perPage,
         took: action.result.result.took,
         query: action.result.result.query,
-        results: action.result.result.results,
-        entities: Object.assign({}, state.entities, action.result.entities.verses)
+        results: action.result.result.results
       };
     case SEARCH_FAIL:
       return {