info server render

src/components/SurahInfo/index.js

@@ -1,14 +1,14 @@
 import React, { PropTypes } from 'react';
 
-import { surahType } from 'types';
+import { surahType, infoType } from 'types';
 import Loader from 'quran-components/lib/Loader';
 
 const style = require('./style.scss');
 
-const SurahInfo = ({ chapter, isShowingSurahInfo, onClose }) => {
+const SurahInfo = ({ chapter, info, isShowingSurahInfo, onClose }) => {
   // So we don't need to load images and files unless needed
   if (!isShowingSurahInfo) return <noscript />;
-  if (!chapter.info) {
+  if (!info) {
     return <Loader isActive />;
   }
 
@@ -34,12 +34,12 @@ const SurahInfo = ({ chapter, isShowingSurahInfo, onClose }) => {
             <dd className="text-uppercase">{chapter.pages.join('-')}</dd>
           </dl>
         </div>
-        <div className={`${style.info} ${chapter.info.languageName} times-new col-md-8`}>
-          <div dangerouslySetInnerHTML={{ __html: chapter.info.text }} />
+        <div className={`${style.info} ${info.languageName} times-new col-md-8`}>
+          <div dangerouslySetInnerHTML={{ __html: info.text }} />
           <div>
             <p>
               <em>
-                Source: {chapter.info.source}
+                Source: {info.source}
               </em>
             </p>
           </div>
@@ -52,7 +52,8 @@ const SurahInfo = ({ chapter, isShowingSurahInfo, onClose }) => {
 SurahInfo.propTypes = {
   onClose: PropTypes.func,
   isShowingSurahInfo: PropTypes.bool,
-  chapter: surahType
+  chapter: surahType,
+  info: infoType
 };
 
 export default SurahInfo;

src/containers/ChapterInfo/index.js

@@ -8,7 +8,7 @@ import Loadable from 'react-loadable';
 import Button from 'quran-components/lib/Button';
 import ComponentLoader from 'components/ComponentLoader';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import { chapterType } from 'types';
+import { surahType, infoType } from 'types';
 import makeHeadTags from 'helpers/makeHeadTags';
 
 import { chaptersConnect, chapterInfoConnect } from '../Surah/connect';
@@ -18,12 +18,12 @@ const SurahInfo = Loadable({
   LoadingComponent: ComponentLoader
 });
 
-const ChapterInfo = ({ chapter }) => (
+const ChapterInfo = ({ chapter, info }) => (
   <div className="row" style={{ marginTop: 20 }}>
     <Helmet
       {...makeHeadTags({
         title: `Surah ${chapter.nameSimple} [${chapter.chapterNumber}]`,
-        description: `${chapter.info ? chapter.info.shortText : ''} This Surah has ${chapter.versesCount} verses and resides between pages ${chapter.pages[0]} to ${chapter.pages[1]} in the Quran.` // eslint-disable-line max-len
+        description: `${info ? info.shortText : ''} This Surah has ${chapter.versesCount} verses and resides between pages ${chapter.pages[0]} to ${chapter.pages[1]} in the Quran.` // eslint-disable-line max-len
       })}
       script={[{
         type: 'application/ld+json',
@@ -50,6 +50,7 @@ const ChapterInfo = ({ chapter }) => (
     />
     <SurahInfo
       chapter={chapter}
+      info={info}
       isShowingSurahInfo
     />
     <div className="text-center">
@@ -61,7 +62,8 @@ const ChapterInfo = ({ chapter }) => (
 );
 
 ChapterInfo.propTypes = {
-  chapter: chapterType
+  chapter: surahType,
+  info: infoType
 };
 
 const AsyncChapterInfo = asyncConnect([
@@ -74,7 +76,8 @@ function mapStateToProps(state, ownProps) {
   const chapter: Object = state.chapters.entities[chapterId];
 
   return {
-    chapter
+    chapter,
+    info: state.chapters.infos[chapterId]
   };
 }
 

src/containers/Surah/connect.js

@@ -2,7 +2,8 @@ import {
   isAllLoaded,
   loadAll,
   loadInfo,
-  setCurrent as setCurrentSurah
+  setCurrent as setCurrentSurah,
+  isInfoLoaded
 } from 'redux/actions/chapters.js';
 
 import {
@@ -44,28 +45,27 @@ const determinePage = (range) => {
 
 export const chaptersConnect = ({ store: { getState, dispatch } }) => {
   debug('component:Surah:chaptersConnect', 'Init');
+  if (isAllLoaded(getState())) return false;
 
-  if (!isAllLoaded(getState())) {
-    debug('component:Surah:chaptersConnect', 'Surahs not loaded');
+  debug('component:Surah:chaptersConnect', 'Surahs not loaded');
 
-    if (__CLIENT__) {
-      dispatch(loadAll());
-      return true;
-    }
-
-    return dispatch(loadAll());
+  if (__CLIENT__) {
+    dispatch(loadAll());
+    return true;
   }
 
-  return true;
+  return dispatch(loadAll());
 };
 
-export const chapterInfoConnect = ({ store: { dispatch }, params }) => {
+export const chapterInfoConnect = ({ store: { dispatch, getState }, params }) => {
+  if (isInfoLoaded(getState(), params.chapterId)) return false;
+
   if (__CLIENT__) {
-    dispatch(loadInfo(params.chapterId));
+    dispatch(loadInfo(params));
     return true;
   }
 
-  return dispatch(loadInfo(params.chapterId));
+  return dispatch(loadInfo(params));
 };
 
 export const versesConnect = ({ store: { dispatch, getState }, params }) => {

src/containers/Surah/index.js

@@ -25,7 +25,7 @@ import scroller from 'utils/scroller';
 import makeHeadTags from 'helpers/makeHeadTags';
 import debug from 'helpers/debug';
 
-import { surahType, verseType } from 'types';
+import { surahType, verseType, infoType } from 'types';
 
 import * as AudioActions from 'redux/actions/audioplayer.js';
 import * as AyahActions from 'redux/actions/verses.js';
@@ -66,6 +66,7 @@ class Surah extends Component {
     isEndOfSurah: PropTypes.bool.isRequired,
     verseIds: PropTypes.instanceOf(Set),
     currentVerse: PropTypes.string,
+    info: infoType,
     bookmarks: PropTypes.object.isRequired, // eslint-disable-line
     isLoading: PropTypes.bool.isRequired,
     isLoaded: PropTypes.bool.isRequired,
@@ -192,7 +193,7 @@ class Surah extends Component {
   }
 
   description() {
-    const { params, verses, chapter } = this.props;
+    const { params, verses, chapter, info } = this.props;
 
     if (params.range) {
       if (params.range.includes('-')) {
@@ -222,7 +223,7 @@ class Surah extends Component {
       return `Surat ${chapter.nameSimple} [verse ${params.range}]`;
     }
 
-    return `${chapter.info ? chapter.info.shortText : ''} This Surah has ${chapter.versesCount} verses and resides between pages ${chapter.pages[0]} to ${chapter.pages[1]} in the Quran.`; // eslint-disable-line max-len
+    return `${info ? info.shortText : ''} This Surah has ${chapter.versesCount} verses and resides between pages ${chapter.pages[0]} to ${chapter.pages[1]} in the Quran.`; // eslint-disable-line max-len
   }
 
   renderNoAyah() {
@@ -351,7 +352,7 @@ class Surah extends Component {
   }
 
   render() {
-    const { chapter, verses, options, actions } = this.props; // eslint-disable-line no-shadow
+    const { chapter, verses, options, info, actions } = this.props; // eslint-disable-line no-shadow
     debug('component:Surah', 'Render');
 
     if (!this.hasAyahs()) return <div className={style.container} style={{ margin: '50px auto' }}>{this.renderNoAyah()}</div>;
@@ -395,6 +396,7 @@ class Surah extends Component {
           <div className="row">
             <SurahInfo
               chapter={chapter}
+              info={info}
               loadInfo={actions.loadInfo}
               isShowingSurahInfo={options.isShowingSurahInfo}
               onClose={this.handleSurahInfoToggle}
@@ -440,6 +442,7 @@ function mapStateToProps(state, ownProps) {
     verses,
     verseIds,
     isSingleAyah,
+    info: state.chapters.infos[ownProps.params.chapterId],
     isStarted: state.audioplayer.isStarted,
     isPlaying: state.audioplayer.isPlaying,
     currentVerse: state.audioplayer.currentVerse,

src/helpers/ApiClient.js

@@ -38,7 +38,7 @@ export default class {
 
         params = params || {}; // eslint-disable-line no-param-reassign
 
-        params.language = contentLanguage(); // eslint-disable-line no-param-reassign
+        params.language = params.language || contentLanguage(); // eslint-disable-line
 
         request.query(qs.stringify(decamelizeKeys(params), {
           arrayFormat: arrayFormat || 'brackets'

src/redux/actions/chapters.js

@@ -25,10 +25,14 @@ export function load(id) {
   };
 }
 
-export const loadInfo = id => ({
+export const loadInfo = params => ({
   types: [LOAD_INFO, LOAD_INFO_SUCCESS, LOAD_INFO_FAIL],
-  promise: client => client.get(`/api/v3/chapters/${id}/info`),
-  id
+  promise: client => client.get(`/api/v3/chapters/${params.chapterId}/info`, {
+    params: {
+      language: params.language || 'en'
+    }
+  }),
+  id: params.chapterId
 });
 
 export const setCurrent = id => ({
@@ -43,3 +47,7 @@ export function isSingleLoaded(globalState, id) {
 export function isAllLoaded(globalState) {
   return Object.keys(globalState.chapters.entities).length === 114;
 }
+
+export function isInfoLoaded(globalState, id) {
+  return globalState.chapters.entities[id] && globalState.chapters.infos[id];
+}

src/redux/modules/chapters.js

@@ -12,7 +12,8 @@ const initialState = {
   loading: false,
   infoLoading: false,
   current: null,
-  entities: {}
+  entities: {},
+  infos: {}
 };
 
 export default function reducer(state = initialState, action = {}) {
@@ -45,12 +46,9 @@ export default function reducer(state = initialState, action = {}) {
     case LOAD_INFO_SUCCESS:
       return {
         ...state,
-        entities: {
+        infos: {
           ...state.entities,
-          [action.id]: {
-            ...state.entities[action.id],
-            info: action.result.chapterInfo
-          }
+          [action.id]: action.result.chapterInfo
         }
       };
     default:

src/routes.js

@@ -61,7 +61,7 @@ export default (store) => {
       </Route>
 
       <Route
-        path="/:chapterId/info"
+        path="/:chapterId/info(/:language)"
         getComponents={
           (nextState, cb) => import('./containers/ChapterInfo').then(module => cb(null, module.default)).catch(err => console.trace(err))
         }

src/types/index.js

@@ -10,3 +10,4 @@ export { default as recitationType } from './recitationType';
 export { default as translationType } from './translationType';
 export { default as contentType } from './contentType';
 export { default as footNoteType } from './footNoteType';
+export { default as infoType } from './infoType';

src/types/infoType.js

@@ -0,0 +1,9 @@
+import { PropTypes } from 'react';
+
+export default PropTypes.shape({
+  chapterId: PropTypes.number.isRequired,
+  text: PropTypes.string.isRequired,
+  source: PropTypes.string.isRequired,
+  shortText: PropTypes.string.isRequired,
+  languageName: PropTypes.string.isRequired
+});