Fixes #654 Verses dropdown

src/components/Audioplayer/index.js

@@ -249,6 +249,9 @@ export class Audioplayer extends Component {
   }
 
   handleAddFileListeners(file) {
+    // NOTE: if no file, just wait.
+    if (!file) return false;
+
     const { update, currentTime } = this.props; // eslint-disable-line no-shadow
     debug('component:Audioplayer', `Attaching listeners to ${file.src}`);
 

src/components/GlobalNav/Surah/index.js

@@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react';
 import * as customPropTypes from 'customPropTypes';
 import * as OptionsActions from 'redux/actions/options.js';
 import { connect } from 'react-redux';
+import { replace } from 'react-router-redux';
 import Link from 'react-router/lib/Link';
 import Drawer from 'quran-components/lib/Drawer';
 import Menu from 'quran-components/lib/Menu';
@@ -15,16 +16,15 @@ import ReciterDropdown from 'components/ReciterDropdown';
 import ContentDropdown from 'components/ContentDropdown';
 import TooltipDropdown from 'components/TooltipDropdown';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-// TODO: import VersesDropdown from 'components/VersesDropdown';
+import VersesDropdown from 'components/VersesDropdown';
 
-import { load } from 'redux/actions/verses.js';
+import { load, setCurrentVerse } from 'redux/actions/verses.js';
 
 import GlobalNav from '../index';
 
 const styles = require('../style.scss');
 
 class GlobalNavSurah extends Component {
-
   state = {
     drawerOpen: false
   }
@@ -42,6 +42,18 @@ class GlobalNavSurah extends Component {
     }
   };
 
+  handleVerseDropdownClick = (verseNum) => {
+    const { versesIds, chapter } = this.props; // eslint-disable-line no-shadow
+
+    this.props.setCurrentVerse(`${chapter.chapterNumber}:${verseNum}`);
+
+    if (versesIds.has(verseNum)) {
+      return false;
+    }
+
+    return this.props.replace(`/${chapter.chapterNumber}/${verseNum}-${verseNum + 10}`);
+  }
+
   handleDrawerToggle = (open) => {
     this.setState({ drawerOpen: open });
   }
@@ -62,13 +74,19 @@ class GlobalNavSurah extends Component {
   }
 
   render() {
-    const { chapter, chapters, setOption, options, ...props } = this.props;
+    const { chapter, chapters, setOption, versesIds, options, ...props } = this.props;
 
     return (
       <GlobalNav
         {...props}
         leftControls={[
-          <SurahsDropdown title={chapter.nameSimple} chapters={chapters} />,
+          <SurahsDropdown chapter={chapter} chapters={chapters} />,
+          <VersesDropdown
+            chapter={chapter}
+            isReadingMode={options.isReadingMode}
+            loadedVerses={versesIds}
+            onClick={this.handleVerseDropdownClick}
+          />,
           <div className="navbar-form navbar-left hidden-xs hidden-sm">
             <SearchInput className="search-input" />
           </div>,
@@ -152,7 +170,12 @@ GlobalNavSurah.propTypes = {
   options: customPropTypes.optionsType.isRequired,
   setOption: PropTypes.func.isRequired,
   versesIds: PropTypes.instanceOf(Set),
-  load: PropTypes.func.isRequired
+  load: PropTypes.func.isRequired,
+  setCurrentVerse: PropTypes.func.isRequired,
+  replace: PropTypes.func.isRequired
 };
 
-export default connect(mapStateToProps, { ...OptionsActions, load })(GlobalNavSurah);
+export default connect(
+  mapStateToProps,
+  { ...OptionsActions, load, replace, setCurrentVerse }
+)(GlobalNavSurah);

src/components/SurahsDropdown/index.js

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import * as customPropTypes from 'customPropTypes';
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 import NavDropdown from 'react-bootstrap/lib/NavDropdown';
@@ -8,7 +8,6 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 const styles = require('./style.scss');
 
 class SurahsDropdown extends Component {
-
   shouldComponentUpdate(nextProps) {
     return this.props.chapters !== nextProps.chapters;
   }
@@ -40,14 +39,14 @@ class SurahsDropdown extends Component {
   }
 
   render() {
-    const { title } = this.props;
+    const { chapter } = this.props;
 
     return (
       <NavDropdown
         link
         className={styles.dropdown}
         id="chapters-dropdown"
-        title={title || <LocaleFormattedMessage id="setting.chapters" defaultMessage="Surahs" />}
+        title={chapter.nameSimple || <LocaleFormattedMessage id="setting.chapters" defaultMessage="Surahs" />}
       >
         {this.renderList()}
       </NavDropdown>
@@ -57,7 +56,7 @@ class SurahsDropdown extends Component {
 
 SurahsDropdown.propTypes = {
   chapters: customPropTypes.chapters.isRequired,
-  title: PropTypes.string,
+  chapter: customPropTypes.chapters.isRequired,
 };
 
 export default SurahsDropdown;

src/components/VersesDropdown/index.js

@@ -1,43 +1,46 @@
 import React, { Component, PropTypes } from 'react';
 import * as customPropTypes from 'customPropTypes';
-import DropdownButton from 'react-bootstrap/lib/DropdownButton';
+import NavDropdown from 'react-bootstrap/lib/NavDropdown';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import { Link } from 'react-scroll';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('./style.scss');
 
 class VersesDropdown extends Component {
-
   renderItem = (ayah, index) => {
-    const { chapter, loadedAyahs, isReadingMode, onClick } = this.props;
-    const ayahNum = index + 1;
+    const { chapter, loadedVerses, isReadingMode, onClick } = this.props;
+    const number = index + 1;
 
-    if (loadedAyahs.has(ayahNum) && !isReadingMode) {
+    if (loadedVerses.has(number) && !isReadingMode) {
       return (
         <li key={index}>
           <Link
-            onClick={() => onClick(ayahNum)}
-            to={`ayah:${chapter.chapterNumber}:${ayahNum}`}
+            onClick={() => onClick(number)}
+            to={`verse:${chapter.chapterNumber}:${number}`}
             smooth
             spy
             offset={-120}
             activeClass="active"
             duration={500}
             className="pointer"
           >
-            {ayahNum}
+            {number}
           </Link>
         </li>
       );
     }
 
-    return <MenuItem key={index} onClick={() => onClick(ayahNum)}>{ayahNum}</MenuItem>;
+    return (
+      <MenuItem key={index} onClick={() => onClick(number)}>
+        {number}
+      </MenuItem>
+    );
   }
 
   renderMenu() {
-    const { ayat } = this.props;
-    const array = Array(ayat).join().split(',');
+    const { chapter } = this.props;
+    const array = Array(chapter.versesCount).join().split(',');
 
     return array.map((ayah, index) => this.renderItem(ayah, index));
   }
@@ -50,28 +53,28 @@ class VersesDropdown extends Component {
     );
 
     return (
-      <DropdownButton
+      <NavDropdown
+        link
         className={`dropdown ${className} ${style.dropdown}`}
-        title={title}
         id="verses-dropdown"
+        title={title}
       >
         {this.renderMenu()}
-      </DropdownButton>
+      </NavDropdown>
     );
   }
 }
 
 VersesDropdown.propTypes = {
-  ayat: PropTypes.number.isRequired,
-  loadedAyahs: PropTypes.instanceOf(Set).isRequired,
+  loadedVerses: PropTypes.instanceOf(Set).isRequired,
   chapter: customPropTypes.surahType.isRequired, // Set
   onClick: PropTypes.func.isRequired,
   isReadingMode: PropTypes.bool,
   className: PropTypes.string
 };
 
 VersesDropdown.defaultProps = {
-  className: 'col-md-3'
+  className: ''
 };
 
 export default VersesDropdown;

src/components/VersesDropdown/style.scss

@@ -1,5 +1,5 @@
 .dropdown{
-  & + :global(.dropdown-menu){
+  :global(.dropdown-menu){
     max-height: 400px;
     max-height: 60vh;
     overflow-y: scroll;

src/containers/Surah/index.js

@@ -19,9 +19,6 @@ import ComponentLoader from 'components/ComponentLoader';
 import Bismillah from 'components/Bismillah';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-// utils
-import scroller from 'utils/scroller';
-
 // Helpers
 import makeHeadTags from 'helpers/makeHeadTags';
 import debug from 'helpers/debug';
@@ -114,27 +111,6 @@ class Surah extends Component {
     return Object.keys(this.props.verses).length;
   }
 
-  handleVerseDropdownClick = (verseNum) => {
-    const { verseIds, chapter, actions } = this.props; // eslint-disable-line no-shadow
-
-    actions.verse.setcurrentVerse(`${chapter.chapterNumber}:${verseNum}`);
-
-    if (verseIds.has(verseNum)) {
-      return false;
-    }
-
-    if (verseNum > (this.getLast() + 10) || verseNum < this.getFirst()) {
-      // This is beyond lazy loading next page.
-      if (actions.push) {
-        return actions.push.push(`/${chapter.chapterNumber}/${verseNum}-${verseNum + 10}`);
-      }
-    }
-
-    return this.handleLazyLoadAyahs(() => setTimeout(() =>
-      scroller.scrollTo(`verse:${chapter.chapterNumber}:${verseNum}`),
-    1000)); // then scroll to it
-  }
-
   handleLazyLoadAyahs = (callback) => {
     const { verseIds, chapter, isEndOfSurah, options, actions } = this.props; // eslint-disable-line no-shadow, max-len
     const range = [this.getFirst(), this.getLast()];

src/redux/actions/spec.js

@@ -25,7 +25,7 @@ describe('action tests', () => {
     expect(ayahsActions.load(1, 2, 4).types.length).to.equal(3);
     expect(ayahsActions.clearCurrent().type).to.equal(ayahsConstants.CLEAR_CURRENT);
     expect(ayahsActions.clearCurrentWord(1).type).to.equal(ayahsConstants.CLEAR_CURRENT_WORD);
-    expect(ayahsActions.setcurrentVerse(1).type).to.equal(ayahsConstants.SET_CURRENT_VERSE);
+    expect(ayahsActions.setCurrentVerse(1).type).to.equal(ayahsConstants.SET_CURRENT_VERSE);
     expect(ayahsActions.setCurrentWord(1).type).to.equal(ayahsConstants.SET_CURRENT_WORD);
   });
 

src/redux/actions/verses.js

@@ -50,7 +50,7 @@ export function clearCurrentWord() {
   };
 }
 
-export function setcurrentVerse(id) {
+export function setCurrentVerse(id) {
   return {
     type: SET_CURRENT_VERSE,
     id

src/styles/partials/_dropdown.scss

@@ -36,13 +36,4 @@
     white-space: nowrap;
     margin-bottom: 0px;
   }
-
-  & > li > a {
-    &:hover,
-    &.active{
-      background: $beige;
-      color: $olive;
-      cursor: pointer;
-    }
-  }
 }

src/styles/partials/_search-input.scss

@@ -1,7 +1,7 @@
 .right-inner-addon.search-input{
   padding: 0px;
   margin-bottom: 0px;
-  width: 50vw;
+  width: auto;
 
   input{
     padding: 10px 15px;