diff --git a/src/components/Translation/index.js b/src/components/Translation/index.js index 172f85baf..5526ec3a8 100644 --- a/src/components/Translation/index.js +++ b/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) => { diff --git a/src/components/Verse/index.js b/src/components/Verse/index.js index dcca09fc3..90ef215b1 100644 --- a/src/components/Verse/index.js +++ b/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 = (

- {this.props.verse.verseKey} + {verse.verseKey}

); @@ -263,7 +263,7 @@ class Verse extends Component { return ( {content} @@ -271,23 +271,29 @@ class Verse extends Component { ); } - renderControls() { - const { chapter, verse } = this.props; + renderShare() { + const { isSearched, verse, chapter } = this.props; + + if (isSearched) return false; + return ; + } + + renderControls() { return (
{this.renderAyahBadge()} {this.renderPlayLink()} {this.renderCopyLink()} {this.renderBookmark()} - + {this.renderShare()}
); } render() { const { verse, iscurrentVerse } = this.props; - debug('component:Verse', `Render ${this.props.verse.verseKey}`); + debug('component:Verse', `Render ${verse.verseKey}`); return ( ( -
-
-
-
- - logo - -

THE NOBLE QURAN

- -
-
-
-
-); diff --git a/src/containers/Search/index.js b/src/containers/Search/index.js index a096d09fb..2dcf3d239 100644 --- a/src/containers/Search/index.js +++ b/src/containers/Search/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 (
@@ -99,16 +96,17 @@ class Search extends Component { } breakLabel={...} - 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} />
@@ -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 (

@@ -153,9 +151,9 @@ class Search extends Component { return results.map(result => ( @@ -174,7 +172,7 @@ class Search extends Component { .text-translation{font-size: ${options.fontSize.translation}rem;}` }]} /> -
+ {this.renderStatsBar()}
@@ -191,11 +189,11 @@ 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); @@ -203,14 +201,13 @@ 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 }; } diff --git a/src/redux/actions/search.js b/src/redux/actions/search.js index 2efdf3fd5..475d7a45c 100644 --- a/src/redux/actions/search.js +++ b/src/redux/actions/search.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 diff --git a/src/redux/modules/searchResults.js b/src/redux/modules/searchResults.js index 7451f8d51..9935987c2 100644 --- a/src/redux/modules/searchResults.js +++ b/src/redux/modules/searchResults.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 {