From 2505b45c6785404a7f441690eae143f0bb835ddc Mon Sep 17 00:00:00 2001 From: Mohamed El Mahallawy Date: Sat, 18 Mar 2017 02:03:30 -0700 Subject: [PATCH 1/2] Fixes #693 Rerendering on the client --- src/components/Verse/index.js | 4 +- src/containers/Surah/connect.js | 66 +++++++++++++++++---------------- src/containers/Surah/index.js | 3 +- src/helpers/index.js | 7 ---- src/redux/actions/verses.js | 22 ++++++++--- 5 files changed, 55 insertions(+), 47 deletions(-) diff --git a/src/components/Verse/index.js b/src/components/Verse/index.js index 9264b77fe..c5edf0a4a 100644 --- a/src/components/Verse/index.js +++ b/src/components/Verse/index.js @@ -85,7 +85,7 @@ class Verse extends Component { const array = match || verse.translations || []; return array.map((translation, index) => ( - + )); } @@ -274,7 +274,7 @@ class Verse extends Component { render() { const { verse, iscurrentVerse } = this.props; - debug('component:Verse', `Render ${this.props.verse.ayahNum}`); + debug('component:Verse', `Render ${this.props.verse.verseKey}`); return ( { + let from; + let to; + + if (range) { + if (range.includes('-')) { + [from, to] = range.split('-').map(value => parseInt(value, 10)); + + if (isNaN(from) || isNaN(to)) return {}; + + return { + offset: from - 1, + limit: to - from + }; + } + + const offset = parseInt(range, 10); + + if (isNaN(offset)) return {}; + + return { + offset: offset - 1, + limit: 1 + }; + } + + return {}; +}; export const chaptersConnect = ({ store: { getState, dispatch } }) => { debug('component:Surah:chaptersConnect', 'Init'); @@ -43,48 +71,24 @@ export const chapterInfoConnect = ({ store: { dispatch }, params }) => { export const versesConnect = ({ store: { dispatch, getState }, params }) => { debug('component:Surah:versesConnect', 'Init'); - const range = params.range; const chapterId = parseInt(params.chapterId, 10); - - let from; - let to; - - if (range) { - if (range.includes('-')) { - [from, to] = range.split('-'); - } else { - // Single ayah. For example /2/30 - from = range; - to = range; - } - - if (isNaN(from) || isNaN(to)) { - // Something wrong happened like /2/SOMETHING - // going to rescue by giving beginning of surah. - [from, to] = [1, ayahRangeSize]; - } - } else { - [from, to] = [1, ayahRangeSize]; - } - - from = parseInt(from, 10); - to = parseInt(to, 10); + const paging = determinePage(params.range); if (chapterId !== getState().chapters.current) { dispatch(setCurrentSurah(chapterId)); } - if (!isLoaded(getState(), chapterId, from, to)) { + if (!isLoaded(getState(), chapterId, paging)) { debug('component:Surah:versesConnect', 'Not loaded'); dispatch(clearCurrent(chapterId)); // In the case where you go to same surah but later ayahs. if (__CLIENT__) { - dispatch(loadAyahs(chapterId, from, to, getState().options)); + dispatch(loadAyahs(chapterId, paging, getState().options)); return true; } - return dispatch(loadAyahs(chapterId, from, to, getState().options)); + return dispatch(loadAyahs(chapterId, paging, getState().options)); } return true; diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js index 9ee82668e..7e83e1ef0 100644 --- a/src/containers/Surah/index.js +++ b/src/containers/Surah/index.js @@ -148,9 +148,10 @@ class Surah extends Component { const size = 10; const from = range[1]; const to = (from + size); + const paging = { offset: from, limit: to - from }; if (!isEndOfSurah && !verseIds.has(to)) { - actions.verse.load(chapter.chapterNumber, from, to, options).then(() => { + actions.verse.load(chapter.chapterNumber, paging, options).then(() => { this.setState({ lazyLoading: false }); return callback && callback(); }); diff --git a/src/helpers/index.js b/src/helpers/index.js index 5bdf452be..a88efba4a 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -1,8 +1 @@ -export function isLoaded(globalState, chapterId, from, to) { - return ( - globalState.verses.entities[chapterId] && - globalState.verses.entities[chapterId][`${chapterId}:${from}`] && - globalState.verses.entities[chapterId][`${chapterId}:${to}`] - ); -} export { default as debug } from './debug'; diff --git a/src/redux/actions/verses.js b/src/redux/actions/verses.js index 6d80a5291..2e98f98b2 100644 --- a/src/redux/actions/verses.js +++ b/src/redux/actions/verses.js @@ -1,4 +1,3 @@ -import cookie from 'react-cookie'; import { versesSchema } from 'redux/schemas'; import { @@ -11,24 +10,27 @@ import { CLEAR_CURRENT_WORD } from 'redux/constants/verses.js'; -// For safe measure +// NOTE: For safe measure const defaultOptions = { audio: 8, translations: [20] }; -export function load(id, from, to, options = defaultOptions) { +// NOTE: From the API! +const perPage = 10; + +export function load(id, paging, options = defaultOptions) { const { audio, translations } = options; - cookie.save('lastVisit', JSON.stringify({ chapterId: id, verseId: from })); + // TODO: move this to module/verses + // cookie.save('lastVisit', JSON.stringify({ chapterId: id, verseId: from })); return { types: [LOAD, LOAD_SUCCESS, LOAD_FAIL], schema: { verses: [versesSchema] }, promise: client => client.get(`/api/v3/chapters/${id}/verses`, { params: { - from, - to, + ...paging, recitation: audio, translations } @@ -63,3 +65,11 @@ export function setCurrentWord(id) { id }; } + +export function isLoaded(globalState, chapterId, paging) { + return ( + globalState.verses.entities[chapterId] && + globalState.verses.entities[chapterId][`${chapterId}:${paging.offset || 1}`] && + globalState.verses.entities[chapterId][`${chapterId}:${paging.offset + paging.limit || perPage}`] + ); +} From 9a20b80cdfa89d974a861d271ebe8d15f36cb2f9 Mon Sep 17 00:00:00 2001 From: Mohamed El Mahallawy Date: Sun, 19 Mar 2017 01:44:32 -0700 Subject: [PATCH 2/2] ESlint --- src/helpers/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/index.js b/src/helpers/index.js index a88efba4a..6c6601c07 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -1 +1 @@ -export { default as debug } from './debug'; +export { default as debug } from './debug'; // eslint-disable-line