Fixes #693 rerendering (#695)

* Fixes #693 Rerendering on the client

* ESlint

Author: mmahalwy

src/components/Verse/index.js

@@ -85,7 +85,7 @@ class Verse extends Component {
     const array = match || verse.translations || [];
 
     return array.map((translation, index) => (
-      <Translation translation={translation} index={index} />
+      <Translation translation={translation} index={index} key={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 (
       <Element

src/containers/Surah/connect.js

@@ -7,12 +7,40 @@ import {
 
 import {
   clearCurrent,
-  load as loadAyahs
+  load as loadAyahs,
+  isLoaded
   } from 'redux/actions/verses.js';
 
-import { debug, isLoaded } from 'helpers';
+import { debug } from 'helpers';
 
-const ayahRangeSize = 30;
+const determinePage = (range) => {
+  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;

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();
       });

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

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}`]
+  );
+}