Translation url (#797)

naveed-ahmad · ahmedre · commit 68f4acdbfb22 · 2017-05-23T01:56:42.000-07:00
* added translation id in share url

* added routes for surah with translation

* split translations if its string

* added translation aware routes in sitemap! SEO
diff --git a/src/components/Share/index.js b/src/components/Share/index.js
@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import { ShareButtons, generateShareIcon } from 'react-share';
 import * as customPropTypes from 'customPropTypes';
 
@@ -8,12 +8,24 @@ const { FacebookShareButton, TwitterShareButton } = ShareButtons;
 const FacebookIcon = generateShareIcon('facebook');
 const TwitterIcon = generateShareIcon('twitter');
 
-const Share = ({ chapter, verseKey }) => {
+const Share = ({ chapter, verse }) => {
   // Fallback to Surah Id
-  const path = verseKey ? verseKey.replace(':', '/') : chapter.chapterNumber;
+  let path;
+
+  if (verse) {
+    const translations = (verse.translations || [])
+      .map(translation => translation.resourceId)
+      .join(',');
+    path = `${verse.chapterId}/${verse.verseNumber}?translations=${translations}`;
+  } else {
+    path = chapter.chapterNumber;
+  }
+
   const shareUrl = `https://quran.com/${path}`;
-  const title = verseKey ? `Surah ${chapter.nameSimple} [${verseKey}]` : `Surah ${chapter.nameSimple}`;
-  const iconProps = verseKey ? { iconBgStyle: { fill: '#d1d0d0' } } : {};
+  const title = verse
+    ? `Surah ${chapter.nameSimple} [${verse.verseKey}]`
+    : `Surah ${chapter.nameSimple}`;
+  const iconProps = verse ? { iconBgStyle: { fill: '#d1d0d0' } } : {};
 
   return (
     <div className={`${styles.shareContainer}`}>
@@ -38,8 +50,8 @@ const Share = ({ chapter, verseKey }) => {
 };
 
 Share.propTypes = {
-  verseKey: PropTypes.string,
-  chapter: customPropTypes.surahType.isRequired
+  chapter: customPropTypes.surahType.isRequired,
+  verse: customPropTypes.verseType
 };
 
 export default Share;
diff --git a/src/components/Verse/index.js b/src/components/Verse/index.js
@@ -251,8 +251,11 @@ class Verse extends Component {
     );
   }
 
-  renderAyahBadge() {
+  renderBadge() {
     const { isSearched, verse } = this.props;
+    const translations = (verse.translations || [])
+      .map(translation => translation.resourceId)
+      .join(',');
     let metric;
 
     const content = (
@@ -271,7 +274,7 @@ class Verse extends Component {
 
     return (
       <Link
-        to={`/${verse.chapterId}/${verse.verseNumber}`}
+        to={`/${verse.chapterId}/${verse.verseNumber}?translations=${translations}`}
         data-metrics-event-name={metric}
       >
         {content}
@@ -284,15 +287,15 @@ class Verse extends Component {
 
     if (isSearched) return false;
 
-    return <Share chapter={chapter} verseKey={verse.verseKey} />;
+    return <Share chapter={chapter} verse={verse} />;
   }
 
   renderControls() {
     const { isPdf } = this.props;
 
     return (
       <div className={`col-md-1 col-sm-1 ${styles.controls}`}>
-        {this.renderAyahBadge()}
+        {this.renderBadge()}
         {this.renderPlayLink()}
         {this.renderCopyLink()}
         {this.renderBookmark()}
diff --git a/src/containers/Surah/connect.js b/src/containers/Surah/connect.js
@@ -10,7 +10,7 @@ import {
   clearCurrent,
   load as loadVerses,
   isLoaded
-  } from 'redux/actions/verses.js';
+} from 'redux/actions/verses.js';
 
 import { debug } from 'helpers';
 
@@ -57,7 +57,10 @@ export const chaptersConnect = ({ store: { getState, dispatch } }) => {
   return dispatch(loadAll());
 };
 
-export const chapterInfoConnect = ({ store: { dispatch, getState }, params }) => {
+export const chapterInfoConnect = ({
+  store: { dispatch, getState },
+  params
+}) => {
   if (isInfoLoaded(getState(), params.chapterId)) return false;
 
   if (__CLIENT__) {
@@ -68,11 +71,16 @@ export const chapterInfoConnect = ({ store: { dispatch, getState }, params }) =>
   return dispatch(loadInfo(params));
 };
 
-export const versesConnect = ({ store: { dispatch, getState }, params }) => {
+export const versesConnect = ({
+  store: { dispatch, getState },
+  params,
+  location
+}) => {
   debug('component:Surah:versesConnect', 'Init');
 
   const chapterId = parseInt(params.chapterId, 10);
   const paging = determinePage(params.range);
+  const translations = params.translations || location.query.translations;
 
   if (chapterId !== getState().chapters.current) {
     dispatch(setCurrentSurah(chapterId));
@@ -84,11 +92,15 @@ export const versesConnect = ({ store: { dispatch, getState }, params }) => {
     dispatch(clearCurrent(chapterId)); // In the case where you go to same surah but later ayahs.
 
     if (__CLIENT__) {
-      dispatch(loadVerses(chapterId, paging, getState().options));
+      dispatch(
+        loadVerses(chapterId, paging, { translations }, getState().options)
+      );
       return true;
     }
 
-    return dispatch(loadVerses(chapterId, paging, getState().options));
+    return dispatch(
+      loadVerses(chapterId, paging, { translations }, getState().options)
+    );
   }
 
   return true;
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
@@ -203,7 +203,17 @@ class Surah extends Component {
   }
 
   renderPagination() {
-    const { isSingleAyah, isLoading, isEndOfSurah, chapter } = this.props;
+    const {
+      isSingleAyah,
+      isLoading,
+      isEndOfSurah,
+      chapter,
+      verses,
+      currentVerse
+    } = this.props;
+    const translations = (verses[currentVerse].translations || [])
+      .map(translation => translation.resourceId)
+      .join(',');
 
     // If single verse, eh. /2/30
     if (isSingleAyah) {
@@ -214,7 +224,9 @@ class Surah extends Component {
       return (
         <ul className="pager">
           <li className="text-center">
-            <Link to={`/${chapter.chapterNumber}/${this.getFirst()}-${to}`}>
+            <Link
+              to={`/${chapter.chapterNumber}/${this.getFirst()}-${to}?translations=${translations}`}
+            >
               <LocaleFormattedMessage
                 id="chapter.index.continue"
                 defaultMessage="Continue"
@@ -234,7 +246,9 @@ class Surah extends Component {
           <ul className="pager">
             {chapter.chapterNumber > 1 &&
               <li className="previous">
-                <Link to={`/${chapter.chapterNumber * 1 - 1}`}>
+                <Link
+                  to={`/${chapter.chapterNumber * 1 - 1}?translations=${translations}`}
+                >
                   ←
                   <LocaleFormattedMessage
                     id="chapter.previous"
@@ -243,7 +257,9 @@ class Surah extends Component {
                 </Link>
               </li>}
             <li className="text-center">
-              <Link to={`/${chapter.chapterNumber}`}>
+              <Link
+                to={`/${chapter.chapterNumber}?translations=${translations}`}
+              >
                 <LocaleFormattedMessage
                   id="chapter.goToBeginning"
                   defaultMessage="Beginning of Surah"
@@ -252,7 +268,9 @@ class Surah extends Component {
             </li>
             {chapter.chapterNumber < 114 &&
               <li className="next">
-                <Link to={`/${chapter.chapterNumber * 1 + 1}`}>
+                <Link
+                  to={`/${chapter.chapterNumber * 1 + 1}?translations=${translations}`}
+                >
                   <LocaleFormattedMessage
                     id="chapter.next"
                     defaultMessage="Next Surah"
diff --git a/src/redux/actions/verses.js b/src/redux/actions/verses.js
@@ -18,8 +18,23 @@ const defaultOptions = {
 // NOTE: From the API!
 const perPage = 10;
 
-export function load(id, paging, options = defaultOptions) {
-  const { translations } = options;
+function prepareParams(params, options) {
+  // NOTE: first priority to options in URL, second to options and lastly fallback to defaultOptions
+  let translations;
+
+  if (params.translations && params.translations.length) {
+    translations = typeof params.translations === 'string'
+      ? params.translations.split(',')
+      : params.translations;
+  } else {
+    translations = options.translations || defaultOptions.translations;
+  }
+
+  return { translations };
+}
+
+export function load(id, paging, params, options = defaultOptions) {
+  const apiOptions = prepareParams(params, options);
 
   // TODO: move this to module/verses
   // cookie.save('lastVisit', JSON.stringify({ chapterId: id, verseId: from }));
@@ -31,7 +46,7 @@ export function load(id, paging, options = defaultOptions) {
       client.get(`/api/v3/chapters/${id}/verses`, {
         params: {
           ...paging,
-          translations
+          ...apiOptions
         }
       }),
     chapterId: id
diff --git a/src/routes.js b/src/routes.js
@@ -153,6 +153,20 @@ export default (store) => {
             .catch(err => console.trace(err))}
       />
 
+      <Route
+        path="/:chapterId/:range/:translations"
+        getComponents={(nextState, cb) =>
+          Promise.all([
+            import('./containers/Surah'),
+            import('./components/GlobalNav/Surah')
+          ])
+            .then(modules =>
+              cb(null, { main: modules[0].default, nav: modules[1].default })
+            )
+            .catch(err => console.trace(err))}
+        onEnter={checkValidSurah}
+      />
+
       <Redirect from="/:chapterId:(:range)" to="/:chapterId(/:range)" />
       <Redirect from="/:chapterId/:from::to" to="/:chapterId/:from-:to" />
 
diff --git a/src/server/config/sitemap.js b/src/server/config/sitemap.js
@@ -8,78 +8,81 @@ export default (server) => {
     const urls = [];
 
     client
-      .get('/api/v3/chapters')
-      .then((response) => {
-        response.chapters.forEach((chapter) => {
-          Array(chapter.verses_count).fill().forEach((_, index) => {
-            const verseId = index + 1;
+      .get('/api/v3/options/translations')
+      .then((r) => {
+        const translations = r.translations;
+        client.get('/api/v3/chapters').then((response) => {
+          response.chapters.forEach((chapter) => {
+            Array(chapter.verses_count).fill().forEach((_, index) => {
+              const verseId = index + 1;
 
-            urls.push({
-              url: `/${chapter.id}/${verseId}`,
-              changefreq: 'weekly',
-              priority: 1
+              urls.push({
+                url: `/${chapter.id}/${verseId}`,
+                changefreq: 'weekly',
+                priority: 1
+              });
+
+              urls.push({
+                url: `/${chapter.id}/${verseId}-${verseId + 9}`,
+                changefreq: 'weekly',
+                priority: 1
+              });
+
+              // Add verse url with translations
+              translations.forEach((translation) => {
+                urls.push({
+                  url: `/${chapter.id}/${verseId}/${translation.slug || translation.id}`,
+                  changefreq: 'weekly',
+                  priority: 1
+                });
+
+                urls.push({
+                  url: `/${chapter.id}/${verseId + 9}/${translation.slug || translation.id}`,
+                  changefreq: 'weekly',
+                  priority: 1
+                });
+              });
             });
 
             urls.push({
-              url: `/${chapter.id}/${verseId}-${verseId + 9}`,
+              url: `/${chapter.id}`,
               changefreq: 'weekly',
               priority: 1
             });
-          });
-
-          urls.push({
-            url: `/${chapter.id}`,
-            changefreq: 'weekly',
-            priority: 1
-          });
-
-          urls.push({
-            url: `/${chapter.id}/info/ur`,
-            changefreq: 'weekly',
-            priority: 1
-          });
 
-          urls.push({
-            url: `/${chapter.id}/info/ml`,
-            changefreq: 'weekly',
-            priority: 1
+            // add chapter info for available languages
+            ['en', 'ur', 'ml', 'ta'].forEach((lang) => {
+              urls.push({
+                url: `/${chapter.id}/info/${lang}`,
+                changefreq: 'weekly',
+                priority: 1
+              });
+            });
           });
 
           urls.push({
-            url: `/${chapter.id}/info/ta`,
+            url: '/ayatul-kursi',
             changefreq: 'weekly',
             priority: 1
           });
 
-          urls.push({
-            url: `/${chapter.id}/info/en`,
-            changefreq: 'weekly',
-            priority: 1
+          const xml = sitemap.createSitemap({
+            hostname: 'https://quran.com',
+            cacheTime: 600000, // 600 sec cache period
+            urls: [
+              ...urls,
+              { url: '/about', changefreq: 'monthly', priority: 0.3 },
+              { url: '/contactus', changefreq: 'monthly', priority: 0.3 },
+              { url: '/contact', changefreq: 'monthly', priority: 0.3 },
+              { url: '/donations', changefreq: 'monthly', priority: 0.3 },
+              { url: '/contributions', changefreq: 'monthly', priority: 0.3 },
+              { url: '/search', changefreq: 'weekly', priority: 0.8 }
+            ]
           });
-        });
 
-        urls.push({
-          url: '/ayatul-kursi',
-          changefreq: 'weekly',
-          priority: 1
+          res.header('Content-Type', 'application/xml');
+          res.send(xml.toString());
         });
-
-        const xml = sitemap.createSitemap({
-          hostname: 'https://quran.com',
-          cacheTime: 600000, // 600 sec cache period
-          urls: [
-            ...urls,
-            { url: '/about', changefreq: 'monthly', priority: 0.3 },
-            { url: '/contactus', changefreq: 'monthly', priority: 0.3 },
-            { url: '/contact', changefreq: 'monthly', priority: 0.3 },
-            { url: '/donations', changefreq: 'monthly', priority: 0.3 },
-            { url: '/contributions', changefreq: 'monthly', priority: 0.3 },
-            { url: '/search', changefreq: 'weekly', priority: 0.8 }
-          ]
-        });
-
-        res.header('Content-Type', 'application/xml');
-        res.send(xml.toString());
       })
       .catch(err => console.trace(err)); // eslint-disable-line
   });
