quran · mmahalwy · Apr 8, 2017 · Apr 8, 2017 · Apr 8, 2017 · Apr 8, 2017
diff --git a/src/components/SurahInfo/index.js b/src/components/SurahInfo/index.js
@@ -1,24 +1,27 @@
 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 />;
   }
 
   return (
     <div className={`col-xs-12 ${style.container} chapter-info ${style.show}`}>
-      <button
-        tabIndex="-1"
-        className={`${style.close} ss-delete`}
-        onClick={() => onClose({ isShowingSurahInfo: !isShowingSurahInfo })}
-      />
+      {
+        onClose &&
+        <button
+          tabIndex="-1"
+          className={`${style.close} ss-delete`}
+          onClick={() => onClose({ isShowingSurahInfo: !isShowingSurahInfo })}
+        />
+      }
       <div className={`${style.row} row`}>
         <div
           className={`col-md-3 col-xs-6 ${style.bg} ${style[chapter.revelationPlace]}`}
@@ -31,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>
@@ -49,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;
diff --git a/src/containers/ChapterInfo/index.js b/src/containers/ChapterInfo/index.js
@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { connect } from 'react-redux';
+import { asyncConnect } from 'redux-connect';
+
+import Helmet from 'react-helmet';
+import Loadable from 'react-loadable';
+import Button from 'quran-components/lib/Button';
+import ComponentLoader from 'components/ComponentLoader';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import { surahType, infoType } from 'types';
+import makeHeadTags from 'helpers/makeHeadTags';
+
+import { chaptersConnect, chapterInfoConnect } from '../Surah/connect';
+
+const SurahInfo = Loadable({
+  loader: () => import('components/SurahInfo'),
+  LoadingComponent: ComponentLoader
+});
+
+const ChapterInfo = ({ chapter, info }) => (
+  <div className="row" style={{ marginTop: 20 }}>
+    <Helmet
+      {...makeHeadTags({
+        title: `Surah ${chapter.nameSimple} [${chapter.chapterNumber}]`,
+        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',
+        innerHTML: `{
+          "@context": "http://schema.org",
+          "@type": "BreadcrumbList",
+          "itemListElement": [{
+            "@type": "ListItem",
+            "position": 1,
+            "item": {
+              "@id": "https://quran.com/",
+              "name": "Quran"
+            }
+          },{
+            "@type": "ListItem",
+            "position": 2,
+            "item": {
+              "@id": "https://quran.com/${chapter.chapterNumber}",
+              "name": "${chapter.nameSimple}"
+            }
+          }]
+        }`
+      }]}
+    />
+    <SurahInfo
+      chapter={chapter}
+      info={info}
+      isShowingSurahInfo
+    />
+    <div className="text-center">
+      <Button href={`/${chapter.id}`}>
+        <LocaleFormattedMessage id="surah.read" defaultMessage="Read full Surah" />
+      </Button>
+    </div>
+  </div>
+);
+
+ChapterInfo.propTypes = {
+  chapter: surahType,
+  info: infoType
+};
+
+const AsyncChapterInfo = asyncConnect([
+  { promise: chaptersConnect },
+  { promise: chapterInfoConnect }
+])(ChapterInfo);
+
+function mapStateToProps(state, ownProps) {
+  const chapterId = parseInt(ownProps.params.chapterId, 10);
+  const chapter: Object = state.chapters.entities[chapterId];
+
+  return {
+    chapter,
+    info: state.chapters.infos[chapterId]
+  };
+}
+
+export default connect(mapStateToProps)(AsyncChapterInfo);
diff --git a/src/containers/Surah/connect.js b/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 }) => {

diff --git a/src/containers/Surah/index.js b/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.shortDescription : ''} 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,

diff --git a/src/helpers/ApiClient.js b/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'

diff --git a/src/locale/ar.js b/src/locale/ar.js
@@ -42,6 +42,7 @@ export default {
     'surah.index.continue': 'استءنف',
     'surah.index.quickLinks': 'روابط سريعة',
     'surah.goToBeginning': 'ابتداء من سورة',
+    'surah.read': 'قراءة سورة كاملة',
 
     'player.currentVerse': 'آية',
     'player.nextAyah': 'آية القادمة',

diff --git a/src/locale/en.js b/src/locale/en.js
@@ -43,6 +43,7 @@ export default {
     'surah.index.continue': 'Continue',
     'surah.index.quickLinks': 'Quick links',
     'surah.goToBeginning': 'Beginning of Surah',
+    'surah.read': 'Read full Surah',
 
     'player.currentVerse': 'Ayah',
     'player.nextAyah': 'Next Ayah',

diff --git a/src/locale/fr.js b/src/locale/fr.js
@@ -43,6 +43,7 @@ export default {
     'surah.index.continue': 'Continuer',
     'surah.index.quickLinks': 'Liens rapides',
     'surah.goToBeginning': 'Début de la Sourate',
+    'surah.read': 'Lire la sourate complète',
 
     'player.currentVerse': 'Verset',
     'player.nextAyah': 'Prochain Verset',
@@ -80,4 +81,3 @@ export default {
     'login.message': 'Identifiez-vous sur Quran.com pour enregistrer tous vos favoris, notes et activités. '
   }
 };
-
diff --git a/src/locale/id.js b/src/locale/id.js
@@ -43,6 +43,7 @@ export default {
     'surah.index.continue': 'Lanjutkan',
     'surah.index.quickLinks': 'Tautan cepat',
     'surah.goToBeginning': 'Awal Surat',
+    'surah.read': 'Baca lengkap Surah',
 
     'player.currentVerse': 'Ayat',
     'player.nextAyah': 'Ayat Berikutnya',

diff --git a/src/locale/tr.js b/src/locale/tr.js
@@ -43,6 +43,7 @@ export default {
     'surah.index.continue': 'Devam',
     'surah.index.quickLinks': 'Hızlı bağlantılar',
     'surah.goToBeginning': 'Sure Başlangıcı',
+    'surah.read': 'Tam suratı oku',
 
     'player.currentAyah': 'Ayet',
     'player.nextAyah': 'Sonraki Ayet',

diff --git a/src/locale/ur.js b/src/locale/ur.js
@@ -43,6 +43,7 @@ export default {
     'surah.index.continue': 'جاری رہے',
     'surah.index.quickLinks': 'فوری لنک',
     'surah.goToBeginning': 'سورہ کے شروع میں جائیں',
+    'surah.read': 'مکمل سورت پڑھیں',
 
     'player.currentVerse': 'آیت',
     'player.nextAyah': 'اگلی آیت',

diff --git a/src/redux/actions/chapters.js b/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];
+}
diff --git a/src/redux/modules/chapters.js b/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:

diff --git a/src/routes.js b/src/routes.js
@@ -60,6 +60,13 @@ export default (store) => {
         <Route path="/profile" getComponent={(nextState, cb) => import('./containers/Profile').then(module => cb(null, module.default)).catch(err => console.trace(err))} />
       </Route>
 
+      <Route
+        path="/:chapterId/info(/:language)"
+        getComponents={
+          (nextState, cb) => import('./containers/ChapterInfo').then(module => cb(null, module.default)).catch(err => console.trace(err))
+        }
+      />
+
       <Redirect from="/:chapterId:(:range)" to="/:chapterId(/:range)" />
 
       <Route

diff --git a/src/server/config/sitemap.js b/src/server/config/sitemap.js
@@ -30,6 +30,12 @@ export default (server) => {
           changefreq: 'weekly',
           priority: 1
         });
+
+        urls.push({
+          url: `/${chapter.chapterNumber}/info`,
+          changefreq: 'weekly',
+          priority: 1
+        });
       });