fixed translations

.env

@@ -1,6 +1,6 @@
 NODE_ENV=development
 PORT=8000
-API_URL=http://staging.quran.com:3000
+API_URL=http://localhost:3000
 ONE_QURAN_URL=http://localhost:3030
 SEGMENTS_KEY=
 SENTRY_KEY_CLIENT=

src/components/Translation/index.js

@@ -0,0 +1,31 @@
+import React, { PropTypes } from 'react';
+
+import { translationType } from 'types';
+
+const styles = require('./style.scss');
+
+export default class Translation extends React.Component {
+  static propTypes = {
+    translation: translationType.isRequired
+  };
+
+  render() {
+    const { translation } = this.props;
+    const lang = translation.languageName;
+    const isArabic = lang === 'arabic';
+
+    return (
+      <div
+        className={`${styles.translation} ${isArabic && 'arabic'} translation`}
+      >
+        <h4 className="montserrat">{translation.resourceName}</h4>
+        <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
+          <small
+            dangerouslySetInnerHTML={{ __html: translation.text }}
+            className={`${lang || 'times-new'}`}
+          />
+        </h2>
+      </div>
+    );
+  }
+}

src/components/Translation/style.scss

@@ -0,0 +1,29 @@
+@import '../../styles/variables';
+
+.translation{
+  &.arabic{
+    text-align: right;
+  }
+
+  h4{
+    color: $light-green;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+    font-size: 14px;
+    font-weight: 400;
+
+    @media(max-width: $screen-sm-max) {
+      font-size: 12px;
+    }
+  }
+
+  h2{
+    margin-top: 5px;
+    margin-bottom: 25px;
+  }
+
+  sup{
+    color: $light-green;
+    cursor: pointer;
+  }
+}

src/components/Verse/index.js

@@ -7,6 +7,7 @@ import Share from 'components/Share';
 import Copy from 'components/Copy';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import Word from 'components/Word';
+import Translation from 'components/Translation';
 
 import debug from 'helpers/debug';
 
@@ -79,27 +80,11 @@ export default class Verse extends Component {
   renderTranslations() {
     const { verse, match } = this.props;
 
-    const array = match || verse.content || [];
+    const array = match || verse.translations || [];
 
-    return array.map((content, index) => {
-      const arabic = new RegExp(/[\u0600-\u06FF]/);
-      const character = content.text;
-      const isArabic = arabic.test(character);
-      const lang = (content.name || content.resource.name).replace(/\s+/g, '-').toLowerCase();
-
-      return (
-        <div
-          className={`${styles.translation} ${isArabic && 'arabic'} translation`}
-          key={index}
-        >
-          <h4 className="montserrat">{content.name || content.resource.name}</h4>
-          <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
-            <small
-              dangerouslySetInnerHTML={{ __html: content.text }}
-              className={`${lang || 'times-new'}`}
-            />
-          </h2>
-        </div>
+    return array.map((translation, index) => {
+      return(
+        <Translation translation={translation} />
       );
     });
   }

src/components/Verse/style.scss

@@ -23,29 +23,6 @@
     visibility: hidden;
   }
 
-  .translation{
-    &.arabic{
-      text-align: right;
-    }
-
-    h4{
-      color: $light-green;
-      margin-bottom: 5px;
-      text-transform: uppercase;
-      font-size: 14px;
-      font-weight: 400;
-
-      @media(max-width: $screen-sm-max) {
-        font-size: 12px;
-      }
-    }
-
-    h2{
-      margin-top: 5px;
-      margin-bottom: 25px;
-    }
-  }
-
   .controls{
     a{
       margin-bottom: 15px;

src/redux/actions/verses.js

@@ -14,12 +14,11 @@ import {
 // For safe measure
 const defaultOptions = {
   audio: 8,
-  quran: 1,
-  content: [19]
+  translations: [20]
 };
 
 export function load(id, from, to, options = defaultOptions) {
-  const { audio, quran, content } = options;
+  const { audio, translations } = options;
 
   cookie.save('lastVisit', JSON.stringify({ chapterId: id, verseId: from }));
 
@@ -31,8 +30,7 @@ export function load(id, from, to, options = defaultOptions) {
         from,
         to,
         recitation: audio,
-        quran,
-        translations: content
+        translations: translations
       }
     }),
     chapterId: id

src/redux/modules/options.js

@@ -9,8 +9,7 @@ const initialState = {
   isShowingSurahInfo: false,
   loadingRecitations: false,
   audio: 8,
-  quran: 1,
-  content: [19],
+  translations: [20],
   tooltip: 'translation',
   options: {
     recitations: []

src/types/index.js

@@ -7,3 +7,4 @@ export { default as segmentType } from './segmentType';
 export { default as wordType } from './wordType';
 export { default as matchType } from './matchType';
 export { default as recitationType } from './recitationType';
+export { default as translationType } from './translationType';

src/types/translationType.js

@@ -0,0 +1,7 @@
+import { PropTypes } from 'react';
+
+export default PropTypes.shape({
+ languageName:PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired,
+ resourceName: PropTypes.string.isRequired
+});

src/types/verseType.js

@@ -1,5 +1,6 @@
 import { PropTypes } from 'react';
 import wordType from './wordType';
+import translationType from './translationType';
 
 export default PropTypes.shape({
   id: PropTypes.number.isRequired,
@@ -13,6 +14,6 @@ export default PropTypes.shape({
   words: PropTypes.arrayOf(wordType).isRequired,
   textMadani: PropTypes.string.isRequired,
   textSimple: PropTypes.string.isRequired,
-  content: PropTypes.array, // NOTE: In search, it is not required.
+  translations: PropTypes.arrayOf(translationType), // NOTE: In search, it is not required.
   audio: PropTypes.object // NOTE: In search, it is not required.
 });