V3 API (#633)

* changes

* work homepage

* fix surah

* Fix linting

* chapter for repeat dropdown

Author: mmahalwy

src/components/Audioplayer/RepeatDropdown/index.js

@@ -15,7 +15,7 @@ const style = require('../style.scss');
 
 class RepeatButton extends Component {
   static propTypes = {
-    surah: surahType,
+    chapter: surahType,
     repeat: PropTypes.shape({
       from: PropTypes.number,
       to: PropTypes.number,
@@ -57,8 +57,8 @@ class RepeatButton extends Component {
   }
 
   renderRangeAyahs() {
-    const { surah, repeat, setRepeat } = this.props;
-    const array = Array(surah.ayat).join().split(',');
+    const { chapter, repeat, setRepeat } = this.props;
+    const array = Array(chapter.versesCount).join().split(',');
 
     return (
       <div className="col-md-12" style={{ paddingTop: 15 }}>
@@ -74,7 +74,7 @@ class RepeatButton extends Component {
               value={repeat.from}
               onChange={(event) => {
                 let to = parseInt(event.target.value, 10) + 3;
-                to = to < surah.ayat ? to : surah.ayat;
+                to = to < chapter.ayat ? to : chapter.ayat;
                 setRepeat({
                   ...repeat,
                   from: parseInt(event.target.value, 10),
@@ -84,7 +84,7 @@ class RepeatButton extends Component {
             >
               {
                 array.reduce((options, ayah, index) => {
-                  if (index + 1 < surah.ayat) { // Exclude last verse
+                  if (index + 1 < chapter.ayat) { // Exclude last verse
                     options.push(
                       <option key={index} value={index + 1}>
                         {index + 1}
@@ -110,7 +110,7 @@ class RepeatButton extends Component {
             >
               {
                 array.reduce((options, ayah, index) => {
-                  if ((repeat.from ? repeat.from : 1) < index + 1 && index + 1 <= surah.ayat) {
+                  if ((repeat.from ? repeat.from : 1) < index + 1 && index + 1 <= chapter.ayat) {
                     options.push(
                       <option key={index} value={index + 1}>
                         {index + 1}
@@ -128,13 +128,13 @@ class RepeatButton extends Component {
   }
 
   renderSingleAyah() {
-    const { repeat, setRepeat, surah } = this.props;
-    const array = Array(surah.ayat).join().split(',');
+    const { repeat, setRepeat, chapter } = this.props;
+    const array = Array(chapter.versesCount).join().split(',');
 
     return (
       <div className="col-md-12" style={{ paddingTop: 15 }}>
         <LocaleFormattedMessage
-          id="player.currentAyah"
+          id="player.currentVerse"
           defaultMessage="Ayah"
         />{' '}: <br />
         <FormControl

src/components/Audioplayer/RepeatDropdown/spec.js

@@ -6,7 +6,7 @@ import RepeatDropdown from './index';
 let component;
 let overlay;
 let setRepeat;
-const surah = {
+const chapter = {
   ayat: 10
 };
 
@@ -18,7 +18,7 @@ const makeComponent = (repeat) => {
       repeat={repeat}
       setRepeat={setRepeat}
       current={1}
-      surah={surah}
+      chapter={chapter}
     />
   );
 

src/components/Audioplayer/Segments/index.js

@@ -7,19 +7,19 @@ import debug from 'helpers/debug';
 export default class Segments extends Component {
   static propTypes = {
     segments: PropTypes.objectOf(segmentType).isRequired,
-    currentAyah: PropTypes.string,
+    currentVerse: PropTypes.string,
     currentTime: PropTypes.number
   };
 
   shouldComponentUpdate(nextProps) {
     return [
-      this.props.currentAyah !== nextProps.currentAyah,
+      this.props.currentVerse !== nextProps.currentVerse,
       this.props.currentTime !== nextProps.currentTime,
     ].some(test => test);
   }
 
   render() {
-    const { segments, currentAyah, currentTime } = this.props;
+    const { segments, currentVerse, currentTime } = this.props;
     const style = [];
     let currentWord = null;
 
@@ -29,7 +29,7 @@ export default class Segments extends Component {
       const word = segments.words[wordIndex];
 
       if (currentTime >= word.startTime && currentTime < word.endTime) {
-        currentWord = `${currentAyah}:${wordIndex}`;
+        currentWord = `${currentVerse}:${wordIndex}`;
       }
     });
 

src/components/Audioplayer/Segments/spec.js

@@ -29,7 +29,7 @@ describe('<Segments />', () => {
         <Segments
           segments={{ words: { 0: { startTime: 0, endTime: 1 }, 1: { startTime: 1, endTime: 2 } } }}
           currentTime={1.5}
-          currentAyah="1:1"
+          currentVerse="1:1"
         />
       );
     });
@@ -64,7 +64,7 @@ describe('<Segments />', () => {
             }
           }}
           currentTime={1.5}
-          currentAyah="1:1"
+          currentVerse="1:1"
         />
       );
     });