diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
index 9f480babb..3b7aca6dd 100644
--- a/src/components/Ayah/index.js
+++ b/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 (
{this.renderAyahBadge()}
{this.renderPlayLink()}
{this.renderCopyLink()}
{this.renderBookmark()}
+
);
}
diff --git a/src/components/FacebookButton/index.js b/src/components/FacebookButton/index.js
deleted file mode 100644
index 3e98c291a..000000000
--- a/src/components/FacebookButton/index.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/* global window */
-import React, { Component, PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { push } from 'react-router-redux';
-import { facebook } from 'redux/actions/auth';
-
-import config from 'config';
-
-@connect(
- null,
- { facebook, push }
-)
-export default class FacebookLogin extends Component {
- static propTypes = {
- callback: PropTypes.func.isRequired,
- appId: PropTypes.string.isRequired,
- xfbml: PropTypes.bool,
- cookie: PropTypes.bool,
- scope: PropTypes.string,
- textButton: PropTypes.string,
- autoLoad: PropTypes.bool,
- size: PropTypes.string,
- fields: PropTypes.string,
- cssClass: PropTypes.string,
- version: PropTypes.string,
- icon: PropTypes.string,
- push: PropTypes.func,
- facebook: PropTypes.func
- };
-
- static defaultProps = {
- callback: () => {},
- appId: config.facebookAppId,
- textButton: 'Connect with Facebook',
- icon: 'fa-facebook',
- scope: 'email,public_profile,user_location',
- xfbml: true,
- cookie: true,
- autoLoad: false,
- size: 'md',
- fields: 'first_name,name,picture',
- cssClass: 'btn btn-facebook btn-',
- version: '2.7'
- };
-
- componentDidMount() {
- window.fbAsyncInit = () => {
- FB.init({
- appId: this.props.appId,
- xfbml: this.props.xfbml,
- cookie: this.props.cookie,
- version: `v${this.props.version}`,
- });
-
- if (this.props.autoLoad) {
- FB.getLoginStatus(this.checkLoginState);
- }
- };
-
- // Load the SDK asynchronously
- (function(d, s, id) { // eslint-disable-line
- const element = d.getElementsByTagName(s)[0];
- const fjs = element;
- let js = element;
- if (d.getElementById(id)) { return; }
- js = d.createElement(s); js.id = id;
- js.src = '//connect.facebook.net/en_US/sdk.js';
- fjs.parentNode.insertBefore(js, fjs);
- }(window.document, 'script', 'facebook-jssdk')); // eslint-disable-line
- }
-
- responseApi = (authResponse) => {
- const { callback, facebook, push } = this.props; // eslint-disable-line no-shadow
-
- return FB.api('/me', { fields: this.props.fields }, (me) => {
- me.accessToken = authResponse.accessToken; // eslint-disable-line
- callback(me);
-
- return facebook(authResponse.accessToken).then(action => !action.error && push('/'));
- });
- };
-
- checkLoginState = (response) => {
- if (response.authResponse) {
- this.responseApi(response.authResponse);
- } else if (this.props.callback) {
- this.props.callback({ status: response.status });
- }
- };
-
- handleClick = () => {
- FB.login(this.checkLoginState, { scope: this.props.scope });
- };
-
- render() {
- return (
-
-
-
-
+
+
+
+
+
+
+
+ );
+};
- render() {
- const { surahId, name } = this.props.surah;
- const surahUrl = `https://quran.com/${surahId}`;
+Share.propTypes = {
+ ayahKey: PropTypes.string,
+ surah: surahType.isRequired
+};
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
+export default Share;
diff --git a/src/components/Share/style.scss b/src/components/Share/style.scss
index 11025dba5..92b6684bb 100644
--- a/src/components/Share/style.scss
+++ b/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;
diff --git a/src/containers/Surah/connect.js b/src/containers/Surah/connect.js
index 220c9d382..ae9bee19c 100644
--- a/src/containers/Surah/connect.js
+++ b/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)) {
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index 82b1fad2d..d2bdddb51 100644
--- a/src/containers/Surah/index.js
+++ b/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 (
+
+ );
+ }
return (
(
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,
diff --git a/src/helpers/Html.js b/src/helpers/Html.js
index 2b5ecbdff..d781eede1 100644
--- a/src/helpers/Html.js
+++ b/src/helpers/Html.js
@@ -79,9 +79,6 @@ const Html = ({ store, component, assets }) => {
{Object.keys(assets.javascript).map((script, i) =>
)}
- {
-
- }