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..6c6601c07 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';
+export { default as debug } from './debug'; // eslint-disable-line
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}`]
+ );
+}