Share on every ayah + ayah level url (#618)

src/components/Ayah/index.js

@@ -2,7 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import Link from 'react-router/lib/Link';
 import { Element } from 'react-scroll';
 
-import { ayahType, matchType } from 'types';
+import { ayahType, matchType, surahType } from 'types';
+import Share from 'components/Share';
 import Copy from 'components/Copy';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import Word from 'components/Word';
@@ -15,6 +16,7 @@ export default class Ayah extends Component {
   static propTypes = {
     isSearched: PropTypes.bool,
     ayah: ayahType.isRequired,
+    surah: surahType.isRequired,
     bookmarked: PropTypes.bool, // TODO: Add this for search
     bookmarkActions: PropTypes.shape({
       isLoaded: PropTypes.func.isRequired,
@@ -277,12 +279,15 @@ export default class Ayah extends Component {
   }
 
   renderControls() {
+    const { surah, ayah } = this.props;
+
     return (
       <div className={`col-md-1 col-sm-1 ${styles.controls}`}>
         {this.renderAyahBadge()}
         {this.renderPlayLink()}
         {this.renderCopyLink()}
         {this.renderBookmark()}
+        <Share surah={surah} ayahKey={ayah.ayahKey} />
       </div>
     );
   }

src/components/FacebookTokenButton/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { connect } from 'react-redux';
-
+import { generateShareIcon } from 'react-share';
 import { save } from 'redux/actions/auth';
 import { push } from 'react-router-redux';
 
 const styles = require('./style.scss');
 
+const FacebookIcon = generateShareIcon('facebook');
+
 const FacebookTokenButton = ({ save, push }) => { // eslint-disable-line
   let popup = null;
   let interval = null;
@@ -26,7 +28,8 @@ const FacebookTokenButton = ({ save, push }) => { // eslint-disable-line
 
   return (
     <button onClick={handleClick} className={`${styles.button} btn btn-default btn-block btn-lg`}>
-      <i className="fa fa-facebook" /> Continue with Facebook
+      <FacebookIcon size={24} iconBgStyle={{ fill: 'transparent' }} logoFillColor="white" />{' '}
+      Continue with Facebook
     </button>
   );
 };

src/components/FacebookTokenButton/style.scss

@@ -3,4 +3,9 @@
   border-color: #3B5998;
   color: #fff;
   font-weight: 300;
+
+  & > :global(div){
+    display: inline-block;
+    vertical-align: text-top;
+  }
 }

src/components/Share/index.js

@@ -1,5 +1,4 @@
-/* global window */
-import React, { Component } from 'react';
+import React, { PropTypes } from 'react';
 import { ShareButtons, generateShareIcon } from 'react-share';
 import { surahType } from 'types';
 
@@ -9,38 +8,38 @@ const { FacebookShareButton, TwitterShareButton } = ShareButtons;
 const FacebookIcon = generateShareIcon('facebook');
 const TwitterIcon = generateShareIcon('twitter');
 
-export default class Share extends Component {
-  static propTypes = {
-    surah: surahType.isRequired
-  };
+const Share = ({ surah, ayahKey }) => {
+  // Fallback to Surah Id
+  const path = ayahKey ? ayahKey.replace(':', '/') : surah.id;
+  const shareUrl = `https://quran.com/${path}`;
+  const title = ayahKey ? `Surah ${surah.name.simple} [${ayahKey}]` : `Surah ${surah.name.simple}`;
+  const iconProps = ayahKey ? { iconBgStyle: { fill: '#d1d0d0' } } : {};
 
-  onClickPopup = (url, title) => {
-    window.open(url, title, 'width=670,height=540,scrollbars=no,toolbar=0');
-  }
+  return (
+    <div className={`${styles.shareContainer}`}>
+      <FacebookShareButton
+        url={shareUrl}
+        title={title}
+        windowWidth={670}
+        windowHeight={540}
+        className={`${styles.iconContainer}`}
+      >
+        <FacebookIcon size={24} round {...iconProps} />
+      </FacebookShareButton>
+      <TwitterShareButton
+        url={shareUrl}
+        title={title}
+        className={`${styles.iconContainer}`}
+      >
+        <TwitterIcon size={24} round {...iconProps} />
+      </TwitterShareButton>
+    </div>
+  );
+};
 
-  render() {
-    const { surahId, name } = this.props.surah;
-    const surahUrl = `https://quran.com/${surahId}`;
+Share.propTypes = {
+  ayahKey: PropTypes.string,
+  surah: surahType.isRequired
+};
 
-    return (
-      <div className={`${styles.shareContainer} hidden-xs`}>
-        <FacebookShareButton
-          url={surahUrl}
-          title="Facebook"
-          windowWidth={670}
-          windowHeight={540}
-          className={`${styles.iconContainer}`}
-        >
-          <FacebookIcon size={24} round />
-        </FacebookShareButton>
-        <TwitterShareButton
-          url={surahUrl}
-          title={`Surat ${name.simple}`}
-          className={`${styles.iconContainer}`}
-        >
-          <TwitterIcon size={24} round />
-        </TwitterShareButton>
-      </div>
-    );
-  }
-}
+export default Share;

src/components/Share/style.scss

@@ -3,13 +3,14 @@
 .shareContainer {
   position: relative;
   top: 7px;
-  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
-  display: -ms-flexbox;  /* TWEENER - IE 10 */
-  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
-  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
+  display: inline-block;
 
   .iconContainer {
-    padding: 0 5px;
+    display: inline-block;
+
+    &:last-child{
+      padding-left: 5px;
+    }
 
     &:hover {
       cursor: pointer;

src/containers/Surah/connect.js

@@ -55,7 +55,7 @@ export const ayahsConnect = ({ store: { dispatch, getState }, params }) => {
     } else {
       // Single ayah. For example /2/30
       from = range;
-      to = parseInt(range, 10) + ayahRangeSize;
+      to = range;
     }
 
     if (isNaN(from) || isNaN(to)) {

src/containers/Surah/index.js

@@ -52,6 +52,7 @@ class Surah extends Component {
     bookmarks: PropTypes.object.isRequired, // eslint-disable-line
     isLoading: PropTypes.bool.isRequired,
     isLoaded: PropTypes.bool.isRequired,
+    isSingleAyah: PropTypes.bool.isRequired,
     isAuthenticated: PropTypes.bool.isRequired,
     options: PropTypes.object.isRequired, // eslint-disable-line
     params: PropTypes.shape({
@@ -142,21 +143,14 @@ class Surah extends Component {
     const { ayahIds, surah, isEndOfSurah, options, actions } = this.props; // eslint-disable-line no-shadow, max-len
     const range = [this.getFirst(), this.getLast()];
 
-    let size = 10;
-
-    if (((range[1] - range[0]) + 1) < 10) {
-      size = (range[1] - range[0]) + 1;
-    }
-
+    const size = 10;
     const from = range[1];
     const to = (from + size);
 
     if (!isEndOfSurah && !ayahIds.has(to)) {
       actions.ayah.load(surah.id, from, to, options).then(() => {
         this.setState({ lazyLoading: false });
-        if (callback) {
-          callback();
-        }
+        return callback && callback();
       });
     }
 
@@ -214,7 +208,22 @@ class Surah extends Component {
   }
 
   renderPagination() {
-    const { isLoading, isEndOfSurah, surah } = this.props;
+    const { isSingleAyah, isLoading, isEndOfSurah, surah } = this.props;
+
+    // If single ayah, eh. /2/30
+    if (isSingleAyah) {
+      const to = this.getFirst() + 10 > surah.ayat ? surah.ayat : this.getFirst() + 10;
+
+      return (
+        <ul className="pager">
+          <li className="text-center">
+            <Link to={`/${surah.id}/${this.getFirst()}-${to}`}>
+              <LocaleFormattedMessage id="surah.index.continue" defaultMessage="Continue" />
+            </Link>
+          </li>
+        </ul>
+      );
+    }
 
     return (
       <LazyLoad
@@ -264,6 +273,7 @@ class Surah extends Component {
 
   renderAyahs() {
     const {
+      surah,
       ayahs,
       actions,
       options,
@@ -276,6 +286,7 @@ class Surah extends Component {
     return Object.values(ayahs).map(ayah => (
       <Ayah
         ayah={ayah}
+        surah={surah}
         currentAyah={currentAyah}
         isCurrentAyah={isPlaying && ayah.ayahKey === currentAyah}
         bookmarked={!!bookmarks[ayah.ayahKey]}
@@ -412,11 +423,14 @@ function mapStateToProps(state, ownProps) {
   const ayahArray = ayahs ? Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10)) : [];
   const ayahIds = new Set(ayahArray);
   const lastAyahInArray = ayahArray.slice(-1)[0];
+  const isSingleAyah = !ownProps.params.range.includes('-');
+
 
   return {
     surah,
     ayahs,
     ayahIds,
+    isSingleAyah,
     isStarted: state.audioplayer.isStarted,
     isPlaying: state.audioplayer.isPlaying,
     currentAyah: state.audioplayer.currentAyah,

src/helpers/Html.js

@@ -79,9 +79,6 @@ const Html = ({ store, component, assets }) => {
         {Object.keys(assets.javascript).map((script, i) =>
           <script src={assets.javascript[script]} key={i} />
         )}
-        {
-          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
-        }
       </body>
     </html>
   );