From c2c81c33df20f5f0ec8f07118e982edaa28580e7 Mon Sep 17 00:00:00 2001 From: Naveed Ahmad Date: Thu, 30 Mar 2017 09:44:49 +0500 Subject: [PATCH 1/2] search improvement --- src/components/Translation/index.js | 4 +- src/components/Verse/index.js | 20 +++++++--- src/containers/Search/Header/index.js | 21 ---------- src/containers/Search/index.js | 55 +++++++++++++-------------- src/redux/modules/searchResults.js | 12 +++--- 5 files changed, 47 insertions(+), 65 deletions(-) delete mode 100644 src/containers/Search/Header/index.js diff --git a/src/components/Translation/index.js b/src/components/Translation/index.js index 172f85baf..8d65a8964 100644 --- a/src/components/Translation/index.js +++ b/src/components/Translation/index.js @@ -29,8 +29,8 @@ class Translation extends Component { let trans; if (__CLIENT__) { - trans = document.getElementById(`trans${index}`).children[1]; // eslint-disable-line no-undef - trans.removeEventListener('click', this.fetchFootNote, true); + // trans = document.getElementById(`trans${index}`).children[1]; // eslint-disable-line no-undef + // trans.removeEventListener('click', this.fetchFootNote, true); } } diff --git a/src/components/Verse/index.js b/src/components/Verse/index.js index dcca09fc3..bf81c2061 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,8 +271,16 @@ class Verse extends Component { ); } + renderShare() { + const { isSearched, verse, chapter } = this.props; + + if (isSearched) return false; + + return + } + renderControls() { - const { chapter, verse } = this.props; + const { verse } = this.props; return (
@@ -280,14 +288,14 @@ class Verse extends Component { {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..b9f1f1e6e 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,21 +18,18 @@ 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), push: PropTypes.func.isRequired, location: PropTypes.shape({ q: PropTypes.string, @@ -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: from, to: to, total: totalCount, query: query }; + 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/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 { From 80bee95ee63f0fabc82a0b2990e5d054c2e63537 Mon Sep 17 00:00:00 2001 From: Naveed Ahmad Date: Thu, 30 Mar 2017 11:00:33 +0500 Subject: [PATCH 2/2] lint breaks --- src/components/Translation/index.js | 11 ++++++----- src/components/Verse/index.js | 4 +--- src/containers/Search/index.js | 12 ++++++------ src/redux/actions/search.js | 2 +- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/src/components/Translation/index.js b/src/components/Translation/index.js index 8d65a8964..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 + // 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 bf81c2061..90ef215b1 100644 --- a/src/components/Verse/index.js +++ b/src/components/Verse/index.js @@ -276,12 +276,10 @@ class Verse extends Component { if (isSearched) return false; - return + return ; } renderControls() { - const { verse } = this.props; - return (
{this.renderAyahBadge()} diff --git a/src/containers/Search/index.js b/src/containers/Search/index.js index b9f1f1e6e..2dcf3d239 100644 --- a/src/containers/Search/index.js +++ b/src/containers/Search/index.js @@ -29,9 +29,9 @@ class Search extends Component { currentPage: PropTypes.number, perPage: PropTypes.number, query: PropTypes.string, - results: PropTypes.array, // eslint-disable-line + 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 }), @@ -47,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}` } @@ -67,9 +67,9 @@ class Search extends Component { renderStatsBar() { const { totalCount, totalPages, currentPage, query, perPage } = this.props; - const from = Math.max(...[(currentPage - 1)*perPage, 1]); + const from = Math.max(...[(currentPage - 1) * perPage, 1]); const to = Math.min(...[currentPage * perPage, totalCount]); - const values = { from: from, to: to, total: totalCount, query: query }; + const values = { from, to, query, total: totalCount }; if (totalPages) { return ( 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