Fixing surah loading

quran · mmahalwy · Jan 5, 2016 · Jan 5, 2016 · Jan 5, 2016 · Jan 5, 2016
commit b64f056f7896a8dba8b6216ca164e4be26c47426
diff --git a/src/client.js b/src/client.js
@@ -4,7 +4,7 @@
 import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import useScroll from 'scroll-behavior/lib/useSimpleScroll';
+import useScroll from 'scroll-behavior/lib/useStandardScroll';
 import createStore from './redux/create';
 import ApiClient from './helpers/ApiClient';
 import debug from 'debug';

diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
@@ -36,7 +36,7 @@ const style = require('./style.scss');
     }
 
     const files = stateProps.files[stateProps.surahId];
-    const ayahIds = Object.keys(files);
+    const ayahIds = files ? Object.keys(files) : [];
 
     return {
       ...stateProps, ...dispatchProps, ...ownProps,
@@ -270,6 +270,14 @@ export default class Audioplayer extends Component {
       </div>
     );
 
+    if (!currentFile) {
+      return (
+        <li className={`${style.container}`}>
+          Loading...
+        </li>
+      );
+    }
+
     return (
       <li className={`${style.container}`}>
         <div className={style.verse}>{currentFile.split(':')[1]}</div>

diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 import React, { Component, PropTypes } from 'react';
 import copy from 'copy-to-clipboard';
-import { DropdownButton, MenuItem, Col } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
 import { Element } from 'react-scroll';
 
 import debug from 'helpers/debug';
@@ -29,16 +29,8 @@ export default class Ayah extends Component {
     // });
   }
 
-  onCopy(text, key) {
-    const { ayah } = this.props;
-
-    if (key === 'with') {
-      return false;
-    } else if (key === 'without') {
-      return copy(ayah.text);
-    } else {
-      return copy(ayah.content.find(translation => translation.id === key).text);
-    }
+  onCopy(text) {
+    return copy(text);
   }
 
   translations() {
@@ -63,7 +55,13 @@ export default class Ayah extends Component {
 
         return (
           <div className={style.translation} key={index}>
-            <h4>{content.name}</h4>
+            <h4>
+              {content.name}
+              <a onClick={this.onCopy.bind(this, content.text)}
+                 className="text-muted">
+                Copy
+              </a>
+            </h4>
             <h2 className="text-left">
               <small dangerouslySetInnerHTML={{__html: content.text}} />
             </h2>
@@ -79,7 +77,13 @@ export default class Ayah extends Component {
     return ayah.content.map((content, index) => {
       return (
         <div className={style.translation} key={index}>
-          <h4>{content.name}</h4>
+          <h4>
+            {content.name}
+          </h4>
+          <a onClick={this.onCopy.bind(this, content.text)}
+             className="text-muted pointer">
+            Copy
+          </a>
           <h2 className="text-left">
             <small style={{fontSize: 19.5}}>{content.text}</small>
           </h2>
@@ -134,27 +138,10 @@ export default class Ayah extends Component {
            className="text-muted">
           <i className="ss-icon ss-play" /> Play
         </a>
-        <DropdownButton
-          noCaret
-          bsStyle={"link"}
-          title={<span><i className="ss-icon ss-attach" /> Copy</span>}
-          id={`dropdown-copy`}
-          onSelect={this.onCopy.bind(this)}
-        >
-          <MenuItem eventKey="without">Without Tashkeel</MenuItem>
-          {/*<MenuItem eventKey="with">With Tashkeel</MenuItem>*/}
-          <MenuItem divider />
-          <MenuItem header>Translations</MenuItem>
-          {
-            ayah.content.map(content => {
-              return <MenuItem key={content.id} eventKey={content.id}>{content.name}</MenuItem>
-            })
-          }
-        </DropdownButton>
-        {/*<a onClick={this.onCopy.bind(this, ayah.text)}
+        <a onClick={this.onCopy.bind(this, ayah.text)}
            className="text-muted">
-
-        </a>*/}
+          <i className="ss-icon ss-attach" /> Copy
+        </a>
       </Col>
     );
   }

diff --git a/src/components/Ayah/style.scss b/src/components/Ayah/style.scss
@@ -35,6 +35,8 @@
       text-transform: uppercase;
       font-size: 14px;
       font-weight: 400;
+      display: inline-block;
+      margin-right: 10px;
     }
     small{
       @extend .times-new;

diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js
@@ -31,7 +31,10 @@ export default class SearchInput extends Component {
 
         this.props.push(`/${surah}/${ayah}-${ayah + 10}`);
       } else {
-        this.props.push(`/search`, {q: searchValue});
+        this.props.push({
+          pathname: `/search`,
+          query: {q: searchValue}
+        });
       }
     }
 

diff --git a/src/containers/Search/index.js b/src/containers/Search/index.js
@@ -60,7 +60,10 @@ export default class Search extends Component {
     const { push, query, page } = this.props; // eslint-disable-line no-shadow
 
     if (page !== payload.selected + 1) {
-      return push('/search', {p: payload.selected + 1, q: query});
+      return push({
+        pathname: '/search',
+        query: {p: payload.selected + 1, q: query}
+      });
     }
 
     return true;

diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
@@ -35,7 +35,6 @@ import SurahNavBar from './SurahNavBar';
       isLoaded: state.ayahs.loaded,
       lines: state.lines.lines,
       options: state.options,
-      isChangingSurah: state.surahs.current !== ownProps.params.surahId
     };
   },
   {
@@ -48,7 +47,7 @@ export default class Surah extends Component {
   static propTypes = {
     ayahs: PropTypes.object,
     lines: PropTypes.array,
-    isChangingSurah: PropTypes.bool,
+    params: PropTypes.object,
     isEndOfSurah: PropTypes.bool,
     isLoading: PropTypes.bool,
     isLoaded: PropTypes.bool,
@@ -62,24 +61,45 @@ export default class Surah extends Component {
     location: PropTypes.object
   };
 
+  constructor() {
+    super(...arguments);
+
+    this.onScroll = this.onScroll.bind(this);
+  }
+
   state = {
     lazyLoading: false
   };
 
+  componentDidMount() {
+    if (__CLIENT__) {
+      window.removeEventListener('scroll', this.onScroll, true);
+      window.addEventListener('scroll', this.onScroll, true);
+    }
+  }
+
   shouldComponentUpdate(nextProps) {
-    const routingToSameComponent = !this.props.isChangingSurah && nextProps.isChangingSurah;
-    const routingToSameComponentFinished = this.props.isChangingSurah && !nextProps.isChangingSurah;
-    const lazyLoadFinished = !routingToSameComponent && (!this.props.isLoaded && nextProps.isLoaded);
+    const sameSurahIdRouting = this.props.params.surahId === nextProps.params.surahId;
+    const lazyLoadFinished = sameSurahIdRouting && (!this.props.isLoaded && nextProps.isLoaded);
     const readingModeTriggered = this.props.options.isReadingMode !== nextProps.options.isReadingMode;
-
+    console.log(
+      !sameSurahIdRouting,
+      lazyLoadFinished,
+      readingModeTriggered
+    );
     return (
-      routingToSameComponent ||
-      routingToSameComponentFinished ||
+      !sameSurahIdRouting ||
       lazyLoadFinished ||
       readingModeTriggered
     );
   }
 
+  componentWillUnmount() {
+    if (__CLIENT__) {
+      window.removeEventListener('scroll', this.onScroll, true);
+    }
+  }
+
   onVerseDropdownClick(ayahNum) {
     const { ayahIds, push, surah } = this.props; // eslint-disable-line no-shadow
 
@@ -91,6 +111,23 @@ export default class Surah extends Component {
     this.lazyLoadAyahs();
   }
 
+  onScroll() {
+    const { isLoading, isEndOfSurah } = this.props;
+
+    if (isEndOfSurah) {
+      return false;
+    }
+
+    if (!isLoading && !this.state.lazyLoading && window.pageYOffset > (document.body.scrollHeight - window.innerHeight - 1000)) {
+      // Reached the end.
+      this.setState({
+        lazyLoading: true
+      });
+
+      this.lazyLoadAyahs();
+    }
+  }
+
   static reduxAsyncConnect(params, store) {
     const { dispatch, getState } = store;
     const { range, surahId } = params;
@@ -143,40 +180,16 @@ export default class Surah extends Component {
     }
   }
 
-  initScroll() {
-    if (__CLIENT__) {
-      const onScroll = () => {
-        const { isLoading, isEndOfSurah } = this.props;
-
-        if (isEndOfSurah) {
-          return false;
-        }
-
-        if (!isLoading && !this.state.lazyLoading && window.pageYOffset > (document.body.scrollHeight - window.innerHeight - 1000)) {
-          // Reached the end.
-          this.setState({
-            lazyLoading: true
-          });
-
-          this.lazyLoadAyahs();
-        }
-      };
-
-      window.removeEventListener('scroll', onScroll.bind(this), false);
-      window.addEventListener('scroll', onScroll.bind(this), false);
-    }
-  }
-
   renderAyahs() {
-    const { ayahKeys, ayahs, isChangingSurah } = this.props;
-
-    if (isChangingSurah) {
-      return (
-        <div style={{paddingTop: '15%'}}>
-          <CoreLoader minHeight={125}>Loading...</CoreLoader>
-        </div>
-      );
-    }
+    const { ayahKeys, ayahs } = this.props;
+
+    // if (isChangingSurah) {
+    //   return (
+    //     <div style={{paddingTop: '15%'}}>
+    //       <CoreLoader minHeight={125}>Loading...</CoreLoader>
+    //     </div>
+    //   );
+    // }
 
     return ayahKeys.map(key => (
       <Ayah ayah={ayahs[key]} key={key} />
@@ -190,7 +203,7 @@ export default class Surah extends Component {
   }
 
   renderFooter() {
-    const { isLoading, isEndOfSurah, isChangingSurah, surah } = this.props;
+    const { isLoading, isEndOfSurah, surah } = this.props;
 
     const adjacentSurahs = (
       <ul className="pager">
@@ -215,7 +228,7 @@ export default class Surah extends Component {
     return (
       <Row>
         <Col xs={12} className="text-center">
-          {isLoading && !isChangingSurah ? <CoreLoader/> : null}
+          {isLoading ? <CoreLoader/> : null}
           {isEndOfSurah ? adjacentSurahs : null}
         </Col>
       </Row>
@@ -227,8 +240,6 @@ export default class Surah extends Component {
 
     const { surah, ayahIds, options } = this.props; // eslint-disable-line no-shadow
 
-    this.initScroll();
-
     return (
       <div>
         <DocumentMeta title={`${surah.name.simple} - The Noble Qur'an - القرآن الكريم`} extend />