-
-
-
-
-
-
THE NOBLE QUR'AN
-
-
-
+export default () => (
+
+
+
+
+
+
+
+
THE NOBLE QUR'AN
+
- );
- }
-}
-
-export default Header;
+
+
+);
diff --git a/src/containers/Search/index.js b/src/containers/Search/index.js
index 192b5acf7..32a09f376 100644
--- a/src/containers/Search/index.js
+++ b/src/containers/Search/index.js
@@ -1,8 +1,7 @@
import React, { Component, PropTypes } from 'react';
-import { PropTypes as MetricsPropTypes } from "react-metrics";
+import { PropTypes as MetricsPropTypes } from 'react-metrics';
import { asyncConnect } from 'redux-connect';
import { connect } from 'react-redux';
-import Link from 'react-router/lib/Link';
import { push } from 'react-router-redux';
import Helmet from 'react-helmet';
import ReactPaginate from 'react-paginate';
@@ -41,7 +40,7 @@ const style = require('./style.scss');
}),
{ push }
)
-class Search extends Component {
+export default class Search extends Component {
static propTypes = {
isErrored: PropTypes.bool,
isLoading: PropTypes.bool,
@@ -61,12 +60,15 @@ class Search extends Component {
metrics: MetricsPropTypes.metrics
};
- handlePageChange(payload) {
+ handlePageChange = (payload) => {
const { push, query, page } = this.props; // eslint-disable-line no-shadow
const selectedPage = payload.selected + 1;
if (page !== selectedPage) {
- this.context.metrics.track('Search', {action: 'paginate', label: `${query} - ${selectedPage}`});
+ this.context.metrics.track(
+ 'Search',
+ {action: 'paginate', label: `${query} - ${selectedPage}`}
+ );
return push({
pathname: '/search',
@@ -78,88 +80,100 @@ class Search extends Component {
}
renderStatsBar() {
- const { total, size, page, from, query } = this.props;
-
- if (total) {
- const pageNum = Math.ceil(total / size);
-
- return (
-
-
-
-
- {from}-{from + size - 1} OF
- {total}
- SEARCH RESULTS FOR:
- {query}
-
-
- }
- nextLabel={}
- breakLabel={...}
- pageNum={pageNum}
- marginPagesDisplayed={2}
- pageRangeDisplayed={5}
- initialSelected={page - 1}
- forceSelected={page - 1}
- clickCallback={this.handlePageChange.bind(this)}
- containerClassName={"pagination"}
- subContainerClassName={"pages pagination"}
- activeClass={style.active}
- />
-
-
-
-
- );
- }
-
- return false;
- }
-
-
-
- renderBody() {
- const { isErrored, isLoading, total, results, ayahs } = this.props;
-
- if (isErrored) {
- return
Sorry, there was an error with your search.
;
- }
-
- if (!total) {
- return
No results found.
;
- }
-
- if (isLoading) {
- return
;
- }
-
- return results.map(result =>
);
- }
+ const { total, size, page, from, query } = this.props;
+
+ if (total) {
+ const pageNum = Math.ceil(total / size);
+
+ return (
+
+
+
+
+ {from}-{from + size - 1} OF
+ {total}
+ SEARCH RESULTS FOR:
+ {query}
+
+
+
+
+
+ }
+ nextLabel={
+
+
+
+ }
+ breakLabel={...}
+ pageNum={pageNum}
+ marginPagesDisplayed={2}
+ pageRangeDisplayed={5}
+ initialSelected={page - 1}
+ forceSelected={page - 1}
+ clickCallback={this.handlePageChange}
+ containerClassName={"pagination"}
+ subContainerClassName={"pages pagination"}
+ activeClass={style.active}
+ />
+
+
+
+
+ );
+ }
+
+ return false;
+ }
+
+ renderBody() {
+ const { isErrored, isLoading, total, results, ayahs } = this.props;
+
+ if (isErrored) {
+ return (
+
+ Sorry, there was an error with your search.
+
+ );
+ }
+
+ if (!total) {
+ return
No results found.
;
+ }
+
+ if (isLoading) {
+ return
;
+ }
+
+ return results.map(result => (
+
+ ));
+ }
render() {
const { query, options } = this.props;
return (
-
-
{this.renderStatsBar()}
-
-
+
+
{this.renderBody()}
-
-
+
+
);
}
}
-
-export default Search;
diff --git a/src/containers/Surah/Header/index.js b/src/containers/Surah/Header/index.js
index 2c37660e0..86a4184dd 100644
--- a/src/containers/Surah/Header/index.js
+++ b/src/containers/Surah/Header/index.js
@@ -1,6 +1,6 @@
-import React, { Component, PropTypes } from 'react';
-import Link from 'react-router/lib/Link';
+import React, { PropTypes } from 'react';
+import Grid from 'react-bootstrap/lib/Grid';
import Navbar from 'react-bootstrap/lib/Navbar';
import debug from '../../../helpers/debug';
@@ -18,16 +18,17 @@ const Header = ({ surah, children }) => {
-
- {children}
-
+
+ {children}
+
);
};
Header.propTypes = {
- surah: PropTypes.object.isRequired
+ surah: PropTypes.object.isRequired,
+ children: PropTypes.any
};
export default Header;
diff --git a/src/containers/Surah/Title/index.js b/src/containers/Surah/Title/index.js
index 72b5677a0..cef83c594 100644
--- a/src/containers/Surah/Title/index.js
+++ b/src/containers/Surah/Title/index.js
@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
import Link from 'react-router/lib/Link';
const styles = require('./style.scss');
@@ -6,51 +6,78 @@ const ornamentLeft = require('../../../../static/images/ornament-left.png');
const ornamentRight = require('../../../../static/images/ornament-right.png');
const zeroPad = (num, places) => {
- var zero = places - num.toString().length + 1;
+ const zero = places - num.toString().length + 1;
+
return Array(+(zero > 0 && zero)).join('0') + num;
};
const Title = ({ surah }) => {
- const title = require('../../../../static/images/titles/' + zeroPad(surah.id, 3) + '.svg');
+ const title = require(`../../../../static/images/titles/${zeroPad(surah.id, 3)}.svg`); // eslint-disable-line global-require,max-len
return (
-
+
{
surah.id >= 1 &&
-
-
-
PREVIOUS SURAH
-
+
+
+
PREVIOUS SURAH
+
}
{
surah &&
-
+
}
{
surah &&
-
- {surah.name.simple} ({surah.name.english}) - سورة {surah.name.arabic}
-
+
+ {surah.name.simple} ({surah.name.english}) - سورة {surah.name.arabic}
+
}
{
surah.id <= 114 &&
-
-
NEXT SURAH
-
-
+
+
NEXT SURAH
+
+
}
-
+
);
-}
+};
+Title.propTypes = {
+ surah: PropTypes.object.isRequired
+};
export default Title;
diff --git a/src/containers/Surah/connect.js b/src/containers/Surah/connect.js
new file mode 100644
index 000000000..0dbe6a322
--- /dev/null
+++ b/src/containers/Surah/connect.js
@@ -0,0 +1,63 @@
+import { isAllLoaded, loadAll, setCurrent as setCurrentSurah } from '../../redux/modules/surahs';
+import { clearCurrent, isLoaded, load as loadAyahs } from '../../redux/modules/ayahs';
+
+import debug from 'helpers/debug';
+
+const ayahRangeSize = 30;
+
+export const surahsConnect = ({ store: { getState, dispatch } }) => {
+ debug('component:Surah:surahsConnect', 'Init');
+
+ if (!isAllLoaded(getState())) {
+ debug('component:Surah:surahsConnect', 'Surahs not loaded');
+
+ return dispatch(loadAll());
+ }
+
+ return true;
+;}
+
+export const ayahsConnect = ({ store: { dispatch, getState }, params }) => {
+ debug('component:Surah:ayahsConnect', 'Init');
+
+ const range = params.range;
+ const surahId = parseInt(params.surahId, 10);
+
+ let from;
+ let to;
+
+ if (range) {
+ if (range.includes('-')) {
+ [from, to] = range.split('-');
+ } else {
+ // Single ayah. For example /2/30
+ from = range;
+ to = parseInt(range, 10) + ayahRangeSize;
+ }
+
+ if (isNaN(from) || isNaN(to)) {
+ // Something wrong happened like /2/SOMETHING
+ // going to rescue by giving beginning of surah.
+ [from, to] = [1, ayahRangeSize];
+ }
+ } else {
+ [from, to] = [1, ayahRangeSize];
+ }
+
+ from = parseInt(from, 10);
+ to = parseInt(to, 10);
+
+ if (surahId !== getState().surahs.current) {
+ dispatch(setCurrentSurah(surahId));
+ }
+
+ if (!isLoaded(getState(), surahId, from, to)) {
+ debug('component:Surah:ayahsConnect', 'Not loaded');
+
+ dispatch(clearCurrent(surahId)); // In the case where you go to same surah but later ayahs.
+
+ return dispatch(loadAyahs(surahId, from, to, getState().options));
+ }
+
+ return true;
+};
diff --git a/src/containers/Surah/descriptions.js b/src/containers/Surah/descriptions.js
index 8293f7e50..7174ec9e6 100644
--- a/src/containers/Surah/descriptions.js
+++ b/src/containers/Surah/descriptions.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
export default {
1: 'This Surah is named Al-Fatihah because of its subject-matter. Fatihah is that which opens a subject or a book or any other thing. In other words, Al-Fatihah is a sort of preface.',
2: 'Al-Baqarah (the Cow) has been so named from the story of the Cow occurring in this Surah (vv. 67-73). It has not, however, been used as a title to indicate the subject of the Surah. It will, therefore, be as wrong to translate the name Al-Baqarah into "The Cow" or "The Heifer" as to translate any English name, say Mr. Baker, Mr. Rice, Mr. Wolf etc., into their equivalents in other languages or vice versa, because this would imply that the Surah dealt with the subject of "The Cow". Many more Surahs of the Quran have been named in the same way because no comprehensive words exist in Arabic (in spite of its richness) to denote the wide scope of the subject discussed in them. As a matter of fact all human languages suffer from the same limitation.',
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index 0dc47b4d0..7e01fc4ef 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
import Link from 'react-router/lib/Link';
import { connect } from 'react-redux';
import { asyncConnect } from 'redux-connect';
@@ -36,73 +36,26 @@ import descriptions from './descriptions';
const style = require('./style.scss');
-import { clearCurrent, isLoaded, load as loadAyahs, setCurrentAyah, setCurrentWord, clearCurrentWord } from '../../redux/modules/ayahs';
-import { isAllLoaded, loadAll, setCurrent as setCurrentSurah } from '../../redux/modules/surahs';
+
+import { surahsConnect, ayahsConnect } from './connect';
+
+import {
+ load as loadAyahs,
+ setCurrentAyah,
+ setCurrentWord,
+ clearCurrentWord
+} from '../../redux/modules/ayahs';
+
import { setOption, toggleReadingMode } from '../../redux/modules/options';
let lastScroll = 0;
-const ayahRangeSize = 30;
@asyncConnect([
{
- promise({ store: { getState, dispatch } }) {
- debug('component:Surah', 'All Surahs Promise');
- if (!isAllLoaded(getState())) {
- debug('component:Surah', 'All Surahs Promise, Surahs not loaded');
- return dispatch(loadAll());
- }
-
- return true;
- }
+ promise: surahsConnect,
},
{
- promise({ store: { dispatch, getState }, params }) {
- debug('component:Surah', 'Ayahs Promise');
- const range = params.range;
- const surahId = parseInt(params.surahId, 10);
- const { options } = getState();
- let from;
- let to;
-
- if (range) {
- if (range.includes('-')) {
- [from, to] = range.split('-');
- } else {
- // Single ayah. For example /2/30
- from = range;
- to = parseInt(range, 10) + ayahRangeSize;
- }
-
- if (isNaN(from) || isNaN(to)) {
- // Something wrong happened like /2/SOMETHING
- // going to rescue by giving beginning of surah.
- [from, to] = [1, ayahRangeSize];
- }
- } else {
- [from, to] = [1, ayahRangeSize];
- }
-
- if (isNaN(surahId)) {
- // Should have an alert or something to tell user there is an error.
- return dispatch(push('/'));
- }
-
- from = parseInt(from, 10);
- to = parseInt(to, 10);
-
- if (surahId !== getState().surahs.current) {
- dispatch(setCurrentSurah(surahId));
- }
-
- if (!isLoaded(getState(), surahId, from, to)) {
- debug('component:Surah', 'Ayahs Promise, Ayahs not loaded');
- dispatch(clearCurrent(surahId)); // In the case where you go to same surah but later ayahs.
-
- return dispatch(loadAyahs(surahId, from, to, options));
- }
-
- return true;
- }
+ promise: ayahsConnect
}
])
@connect(
@@ -111,22 +64,15 @@ const ayahRangeSize = 30;
const surah: Object = state.surahs.entities[surahId];
const ayahs: Object = state.ayahs.entities[surahId];
const ayahIds = new Set(Object.keys(ayahs).map(key => parseInt(key.split(':')[1], 10)));
- ayahIds.first = function() {return [...this][0];};
- ayahIds.last = function() {return [...this][[...this].length - 1];};
-
- const currentWord = state.ayahs.currentWord;
- const currentAyah = state.ayahs.currentAyah;
- const isStarted = state.audioplayer.isStarted;
- const isEndOfSurah = ayahIds.last() === surah.ayat;
return {
- isStarted,
- currentWord,
- currentAyah,
surah,
ayahs,
- isEndOfSurah,
ayahIds,
+ isStarted: state.audioplayer.isStarted,
+ currentWord: state.ayahs.currentWord,
+ currentAyah: state.ayahs.currentAyah,
+ isEndOfSurah: ayahIds.length === surah.ayat,
surahs: state.surahs.entities,
isLoading: state.ayahs.loading,
isLoaded: state.ayahs.loaded,
@@ -135,51 +81,59 @@ const ayahRangeSize = 30;
};
},
{
- loadAyahsDispatch: loadAyahs,
- setOptionDispatch: setOption,
- toggleReadingModeDispatch: toggleReadingMode,
- setCurrentAyah: setCurrentAyah,
- setCurrentWord: setCurrentWord,
- clearCurrentWord: clearCurrentWord,
+ loadAyahs,
+ setOption,
+ toggleReadingMode,
+ setCurrentAyah,
+ setCurrentWord,
+ clearCurrentWord,
push
}
)
export default class Surah extends Component {
- shouldComponentUpdate(nextProps, nextState) {
- const conditions = [
- this.state.lazyLoading != nextState.lazyLoading,
- this.props.surah != nextProps.surah,
- this.props.currentAyah != nextProps.currentAyah,
- this.props.isEndOfSurah != nextProps.isEndOfSurah,
- this.props.ayahIds != nextProps.ayahIds,
- this.props.surahs != nextProps.surahs,
- this.props.isLoading != nextProps.isLoading,
- this.props.isLoaded != nextProps.isLoaded,
- this.props.options != nextProps.options
- ];
-
- return conditions.some(condition => condition);
- }
- // If shouldComponentUpdate returns false, then __render() will be completely skipped__ until the next state change.
- // In addition, __componentWillUpdate and componentDidUpdate will not be called__.
-
- constructor() {
- super(...arguments);
- }
+ static propTypes = {
+ surah: PropTypes.object.isRequired,
+ lines: PropTypes.object.isRequired,
+ currentAyah: PropTypes.any,
+ isEndOfSurah: PropTypes.bool.isRequired,
+ ayahIds: PropTypes.any,
+ currentWord: PropTypes.any,
+ surahs: PropTypes.object.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ isLoaded: PropTypes.bool.isRequired,
+ options: PropTypes.object.isRequired,
+ push: PropTypes.func.isRequired,
+ params: PropTypes.object.isRequired,
+ ayahs: PropTypes.object.isRequired,
+ loadAyahs: PropTypes.func.isRequired,
+ setOption: PropTypes.func.isRequired,
+ toggleReadingMode: PropTypes.func.isRequired,
+ setCurrentAyah: PropTypes.func.isRequired,
+ setCurrentWord: PropTypes.func.isRequired,
+ clearCurrentWord: PropTypes.func.isRequired,
+ isStarted: PropTypes.bool
+ };
state = {
lazyLoading: false
};
+
componentWillMount() {
- const {params, surah, push } = this.props;
- if(!params.range){
- return;
- }
- let start = parseInt(params.range.split('-')[0], 10);
- if(start > surah.ayat || isNaN(start)){
- return push('/error/invalid-ayah-range');
+ const { params, surah, push } = this.props; // eslint-disable-line no-shadow
+
+ if (params.range && params.range.includes('-')) {
+ const start = parseInt(params.range.split('-')[0], 10);
+
+ if (start > surah.ayat || isNaN(start)) {
+ return push('/error/invalid-ayah-range');
}
+
+ return false;
+ }
+
+ return false;
}
+
componentDidMount() {
if (__CLIENT__) {
window.removeEventListener('scroll', this.handleNavbar, true);
@@ -188,70 +142,78 @@ export default class Surah extends Component {
}
}
+ shouldComponentUpdate(nextProps, nextState) {
+ const conditions = [
+ this.state.lazyLoading !== nextState.lazyLoading,
+ this.props.surah !== nextProps.surah,
+ this.props.currentAyah !== nextProps.currentAyah,
+ this.props.isEndOfSurah !== nextProps.isEndOfSurah,
+ this.props.ayahIds !== nextProps.ayahIds,
+ this.props.surahs !== nextProps.surahs,
+ this.props.isLoading !== nextProps.isLoading,
+ this.props.isLoaded !== nextProps.isLoaded,
+ this.props.options !== nextProps.options
+ ];
+
+ return conditions.some(condition => condition);
+ }
+
componentWillUnmount() {
if (__CLIENT__) {
window.removeEventListener('scroll', this.handleNavbar, true);
}
+
+ return false;
}
- title() {
- const { params, surah } = this.props;
+ onWordClick = (id) => {
+ const {
+ setCurrentWord, // eslint-disable-line no-shadow
+ clearCurrentWord, // eslint-disable-line no-shadow
+ currentWord,
+ isStarted
+ } = this.props;
- if (params.range) {
- return `Surah ${surah.name.simple} [${surah.id}:${params.range}]`;
+ if (id === currentWord && !isStarted) {
+ clearCurrentWord();
+ } else {
+ setCurrentWord(id);
}
-
- return `Surah ${surah.name.simple} [${surah.id}]`;
}
- description() {
- const { params, ayahs, surah } = this.props;
-
- if (params.range) {
- if (params.range.includes('-')) {
- const [from, to] = params.range.split('-').map(num => parseInt(num, 10));
- const array = Array(to - from).fill(from);
- const translations = array.map((fromAyah, index) => {
- const ayah = ayahs[`${surah.id}:${fromAyah + index}`];
- if (ayah && ayah.content && ayah.content[0]) {
- return ayah.content[0].text;
- }
- });
- const content = translations.join(' - ').slice(0, 250);
+ onWordFocus = (id) => {
+ const {
+ setCurrentWord, // eslint-disable-line no-shadow
+ currentWord,
+ isStarted
+ } = this.props;
- return `Surat ${surah.name.simple} [verse ${params.range}] - ${content}`;
- } else {
- const ayah = ayahs[`${surah.id}:${params.range}`];
- if (ayah && ayah.content && ayah.content[0]) {
- return `Surat ${surah.name.simple} [verse ${params.range}] - ${ayah.content[0].text}`;
- } else {
- return `Surat ${surah.name.simple} [verse ${params.range}]`;
- }
- }
+ if (id !== currentWord && isStarted) {
+ // let tabbing around while playing trigger seek to word action
+ setCurrentWord(id);
}
-
- return `${descriptions[surah.id]} This Surah has ${surah.ayat} ayahs and resides between pages ${surah.page[0]} to ${surah.page[1]} in the Quran.`;
}
- handleOptionChange(payload) {
- const { setOptionDispatch, loadAyahsDispatch, surah, ayahIds, options } = this.props;
+ handleOptionChange = (payload) => {
+ const { setOption, loadAyahs, surah, ayahIds, options } = this.props; // eslint-disable-line no-shadow max-len
const from = ayahIds.first();
const to = ayahIds.last();
- setOptionDispatch(payload);
- loadAyahsDispatch(surah.id, from, to, Object.assign({}, options, payload));
+ setOption(payload);
+
+ return loadAyahs(surah.id, from, to, Object.assign({}, options, payload));
}
handleFontSizeChange = (payload) => {
- const { setOptionDispatch } = this.props;
+ const { setOption } = this.props; // eslint-disable-line no-shadow
- return setOptionDispatch(payload);
+ return setOption(payload);
}
handleSurahInfoToggle = (payload) => {
- const { setOptionDispatch } = this.props;
+ const { setOption } = this.props; // eslint-disable-line no-shadow
- return setOptionDispatch(payload);
+ return setOption(payload);
}
handleNavbar = () => {
@@ -263,32 +225,33 @@ export default class Surah extends Component {
}
lastScroll = window.pageYOffset;
+
+ return false;
}
- handleVerseDropdownClick(ayahNum) {
+ handleVerseDropdownClick = (ayahNum) => {
const { ayahIds, push, surah, setCurrentAyah } = this.props; // eslint-disable-line no-shadow
- setCurrentAyah(surah.id +':'+ ayahNum);
+ setCurrentAyah(`${surah.id}:${ayahNum}`);
if (ayahIds.has(ayahNum)) {
- return;
+ return false;
}
- if (ayahNum > (ayahIds.last() + 10) || ayahNum < ayahIds.first()) {
+ if (ayahNum > (this.getLast() + 10) || ayahNum < this.getFirst()) {
// This is beyond lazy loading next page.
return push(`/${surah.id}/${ayahNum}-${ayahNum + 10}`);
}
- this.lazyLoadAyahs(() => setTimeout(() => {
- scroller.scrollTo('ayah:'+ ayahNum);
- }, 1000)); // then scroll to it
+ return this.handleLazyLoadAyahs(() => setTimeout(() =>
+ scroller.scrollTo(`ayah:${ayahNum}`),
+ 1000)); // then scroll to it
}
-
- lazyLoadAyahs(callback) {
- const { loadAyahsDispatch, ayahIds, surah, isEndOfSurah, options } = this.props;
-
+ handleLazyLoadAyahs = (callback) => {
+ const { loadAyahs, ayahIds, surah, isEndOfSurah, options } = this.props; // eslint-disable-line no-shadow max-len
const range = [ayahIds.first(), ayahIds.last()];
+
let size = 10;
if ((range[1] - range[0] + 1) < 10) {
@@ -299,13 +262,71 @@ export default class Surah extends Component {
const to = (from + size);
if (!isEndOfSurah && !ayahIds.has(to)) {
- loadAyahsDispatch(surah.id, from, to, options).then(() => {
+ loadAyahs(surah.id, from, to, options).then(() => {
this.setState({lazyLoading: false});
if (callback) {
callback();
}
});
}
+
+ return false;
+ }
+
+ getLast() {
+ const { ayahIds } = this.props;
+
+ return [...ayahIds][[...ayahIds].length - 1];
+ }
+
+ getFirst() {
+ const { ayahIds } = this.props;
+
+ return [...ayahIds][0];
+ }
+
+ title() {
+ const { params, surah } = this.props;
+
+ if (params.range) {
+ return `Surah ${surah.name.simple} [${surah.id}:${params.range}]`;
+ }
+
+ return `Surah ${surah.name.simple} [${surah.id}]`;
+ }
+
+ description() {
+ const { params, ayahs, surah } = this.props;
+
+ if (params.range) {
+ if (params.range.includes('-')) {
+ const [from, to] = params.range.split('-').map(num => parseInt(num, 10));
+ const array = Array(to - from).fill(from);
+ const translations = array.map((fromAyah, index) => {
+ const ayah = ayahs[`${surah.id}:${fromAyah + index}`];
+
+ if (ayah && ayah.content && ayah.content[0]) {
+ return ayah.content[0].text;
+ }
+
+ return '';
+ });
+
+ const content = translations.join(' - ').slice(0, 250);
+
+ return `Surat ${surah.name.simple} [verse ${params.range}] - ${content}`;
+ }
+
+ const ayah = ayahs[`${surah.id}:${params.range}`];
+
+ if (ayah && ayah.content && ayah.content[0]) {
+ return `Surat ${surah.name.simple} [verse ${params.range}] - ${ayah.content[0].text}`;
+ }
+
+ return `Surat ${surah.name.simple} [verse ${params.range}]`;
+ }
+
+ return `${descriptions[surah.id]} This Surah has ${surah.ayat} ayahs and resides between pages ${surah.page[0]} to ${surah.page[1]} in the Quran.`; // eslint-disable-line max-len
}
renderPagination() {
@@ -313,18 +334,18 @@ export default class Surah extends Component {
return (
{
surah.id > 1 &&
-
-
- ← Previous Surah
-
-
+
+
+ ← Previous Surah
+
+
}
@@ -333,11 +354,11 @@ export default class Surah extends Component {
{
surah.id < 114 &&
-
-
- Next Surah →
-
-
+
+
+ Next Surah →
+
+
}
}
@@ -346,31 +367,20 @@ export default class Surah extends Component {
);
}
- onWordClick(id) {
- const { setCurrentWord, clearCurrentWord, currentWord, isStarted } = this.props;
- if (id == currentWord && !isStarted) {
- clearCurrentWord();
- } else {
- setCurrentWord(id);
- }
- }
-
- onWordFocus(id, elem) {
- const { setCurrentWord, clearCurrentWord, currentWord, isStarted } = this.props;
- if (id != currentWord && isStarted) {
- setCurrentWord(id); // let tabbing around while playing trigger seek to word action
- }
- }
-
renderAyahs() {
const { ayahs, currentWord } = this.props;
return Object.values(ayahs).map(ayah => (
));
@@ -397,7 +407,7 @@ export default class Surah extends Component {
}
renderTopOptions() {
- const { toggleReadingModeDispatch, options } = this.props;
+ const { toggleReadingMode, options } = this.props; // eslint-disable-line no-shadow
return (
@@ -420,7 +430,8 @@ export default class Surah extends Component {
+ onReadingModeToggle={toggleReadingMode}
+ />
@@ -440,8 +451,8 @@ export default class Surah extends Component {
description: this.description()
})}
script={[{
- "type": "application/ld+json",
- "innerHTML": `{
+ type: 'application/ld+json',
+ innerHTML: `{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
@@ -462,7 +473,7 @@ export default class Surah extends Component {
}`
}]}
style={[{
- "cssText": `.text-arabic{font-size: ${options.fontSize.arabic}rem;} .text-translation{font-size: ${options.fontSize.translation}rem;}`
+ cssText: `.text-arabic{font-size: ${options.fontSize.arabic}rem;} .text-translation{font-size: ${options.fontSize.translation}rem;}` // eslint-disable-line max-len
}]}
/>
@@ -477,21 +488,21 @@ export default class Surah extends Component {
ayat={surah.ayat}
loadedAyahs={ayahIds}
isReadingMode={options.isReadingMode}
- onClick={this.handleVerseDropdownClick.bind(this)}
+ onClick={this.handleVerseDropdownClick}
className={`col-md-1 ${style.rightborder} ${style.dropdown}`}
/>
@@ -500,7 +511,7 @@ export default class Surah extends Component {
diff --git a/src/helpers/ApiClient.js b/src/helpers/ApiClient.js
index 97af67ecb..acb153027 100644
--- a/src/helpers/ApiClient.js
+++ b/src/helpers/ApiClient.js
@@ -6,7 +6,7 @@ import config from '../config';
const methods = ['get', 'post', 'put', 'patch', 'del'];
function formatUrl(path) {
- const adjustedPath = path[0] !== '/' ? '/' + path : path;
+ const adjustedPath = path[0] !== '/' ? `/${path}` : path;
if (__SERVER__) {
return `${config.api}${adjustedPath}`;
@@ -17,8 +17,9 @@ function formatUrl(path) {
export default class {
constructor(req) {
- methods.forEach((method) =>
- this[method] = (path, { params, data, arrayFormat } = {}) => new Promise((resolve, reject) => {
+ methods.forEach(method => {
+ this[method] = (path, { params, data, arrayFormat } = {}) =>
+ new Promise((resolve, reject) => {
const request = superagent[method](formatUrl(path));
if (params) {
@@ -33,8 +34,14 @@ export default class {
request.send(data);
}
- request.end((err, { body } = {}) => err ? reject(body || err) : resolve(body));
- })
- );
+ request.end((err, { body } = {}) => {
+ if (err) {
+ return reject(body || err);
+ }
+
+ return resolve(body);
+ });
+ });
+ });
}
}
diff --git a/src/helpers/Html.js b/src/helpers/Html.js
index 065531601..f2dc1b551 100644
--- a/src/helpers/Html.js
+++ b/src/helpers/Html.js
@@ -1,63 +1,68 @@
-import React from 'react';
+/* eslint-disable global-require */
+import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom/server';
import Helmet from 'react-helmet';
import serialize from 'serialize-javascript';
-class Html extends React.Component {
- render() {
- const { store, component, assets } = this.props;
- const content = component ? ReactDOM.renderToString(component) : '';
- const head = Helmet.rewind();
+const Html = ({ store, component, assets }) => {
+ const content = component ? ReactDOM.renderToString(component) : '';
+ const head = Helmet.rewind();
- return (
-
-
- {head.base.toComponent()}
- {head.title.toComponent()}
- {head.meta.toComponent()}
- {head.link.toComponent()}
- {head.script.toComponent()}
+ return (
+
+
+ {head.base.toComponent()}
+ {head.title.toComponent()}
+ {head.meta.toComponent()}
+ {head.link.toComponent()}
+ {head.script.toComponent()}
+ {head.style.toComponent()}
- {Object.keys(assets.styles).map((style, i) => (
-
- ))}
- {
- Object.keys(assets.styles).length === 0 ?
+ {Object.keys(assets.styles).map((style, i) => (
+
+ ))}
+ {
+ Object.keys(assets.styles).length === 0 ?
:
- null
- }
-
-
-
-
+ null
+ }
+
+
+
+
+
+
+ {Object.keys(assets.javascript).map((script, i) =>
+
+ )}
+
+
+ );
+};
- ga('create', 'UA-8496014-1', 'auto');
- `
- }}
- charSet="UTF-8"
- />
-
-
- {Object.keys(assets.javascript).map((script, i) =>
-