- {
- lastVisit &&
-
- }
+ {lastVisit &&
+
}
-
+
-
-
-
+
+
+
@@ -50,14 +60,18 @@ Home.propTypes = {
chapters: customPropTypes.chapters.isRequired
};
-const AsyncHome = asyncConnect([{
- promise({ store: { getState, dispatch } }) {
- if (!isAllLoaded(getState())) {
- return dispatch(loadAll());
- }
+const AsyncHome = asyncConnect([
+ {
+ promise({ store: { getState, dispatch } }) {
+ if (!isAllLoaded(getState())) {
+ return dispatch(loadAll());
+ }
- return true;
+ return true;
+ }
}
-}])(Home);
+])(Home);
-export default connect(state => ({ chapters: state.chapters.entities }))(AsyncHome);
+export default connect(state => ({ chapters: state.chapters.entities }))(
+ AsyncHome
+);
diff --git a/src/containers/Pdf/index.js b/src/containers/Pdf/index.js
new file mode 100644
index 000000000..8e6af7005
--- /dev/null
+++ b/src/containers/Pdf/index.js
@@ -0,0 +1,135 @@
+import React, { PropTypes, Component } from 'react';
+
+import * as customPropTypes from 'customPropTypes';
+// redux
+import { connect } from 'react-redux';
+import { asyncConnect } from 'redux-connect';
+
+import Helmet from 'react-helmet';
+
+// components
+import Verse from 'components/Verse';
+import Bismillah from 'components/Bismillah';
+
+// Helpers
+import debug from 'helpers/debug';
+
+import { chaptersConnect, versesConnect } from '../Surah/connect';
+
+const style = require('../Surah/style.scss');
+
+class Pdf extends Component {
+ hasVerses() {
+ return Object.keys(this.props.verses).length;
+ }
+
+ renderVerses() {
+ const {
+ chapter,
+ verses,
+ options,
+ isPlaying,
+ isAuthenticated,
+ currentVerse
+ } = this.props; // eslint-disable-line no-shadow
+
+ return Object.values(verses).map(verse => (
+
+ ));
+ }
+
+ render() {
+ const { chapter, options } = this.props; // eslint-disable-line no-shadow
+ debug('component:Surah', 'Render');
+
+ if (!this.hasVerses()) {
+ return (
+
+ {this.renderNoAyah()}
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ {options.isReadingMode ? this.renderLines() : this.renderVerses()}
+
+
+
+
+ );
+ }
+}
+
+Pdf.propTypes = {
+ chapter: customPropTypes.surahType.isRequired,
+ lines: PropTypes.object.isRequired, // eslint-disable-line
+ currentVerse: PropTypes.string,
+ isAuthenticated: PropTypes.bool.isRequired,
+ options: PropTypes.object.isRequired, // eslint-disable-line
+ verses: customPropTypes.verses,
+ isPlaying: PropTypes.bool
+};
+
+const AsyncPdf = asyncConnect([
+ { promise: chaptersConnect },
+ { promise: versesConnect }
+])(Pdf);
+
+function mapStateToProps(state, ownProps) {
+ const chapterId = parseInt(ownProps.params.chapterId, 10);
+ const chapter: Object = state.chapters.entities[chapterId];
+ const verses: Object = state.verses.entities[chapterId];
+ const verseArray = verses
+ ? Object.keys(verses).map(key => parseInt(key.split(':')[1], 10))
+ : [];
+ const verseIds = new Set(verseArray);
+ const lastAyahInArray = verseArray.slice(-1)[0];
+ const isSingleAyah =
+ !!ownProps.params.range && !ownProps.params.range.includes('-');
+ const currentVerse = state.audioplayer.currentVerse || Object.keys(verses)[0];
+
+ return {
+ chapter,
+ verses,
+ verseIds,
+ isSingleAyah,
+ currentVerse,
+ info: state.chapters.infos[ownProps.params.chapterId],
+ isStarted: state.audioplayer.isStarted,
+ isPlaying: state.audioplayer.isPlaying,
+ isAuthenticated: state.auth.loaded,
+ currentWord: state.verses.currentWord,
+ isEndOfSurah: lastAyahInArray === chapter.versesCount,
+ chapters: state.chapters.entities,
+ isLoading: state.verses.loading,
+ isLoaded: state.verses.loaded,
+ lines: state.lines.lines,
+ options: state.options
+ };
+}
+
+export default connect(mapStateToProps)(AsyncPdf);
diff --git a/src/containers/Surah/connect.js b/src/containers/Surah/connect.js
index 4754b0057..324f48317 100644
--- a/src/containers/Surah/connect.js
+++ b/src/containers/Surah/connect.js
@@ -9,8 +9,10 @@ import {
import {
clearCurrent,
load as loadVerses,
- isLoaded
- } from 'redux/actions/verses.js';
+ isLoaded,
+ loadTafsir,
+ isTafsirLoaded
+} from 'redux/actions/verses.js';
import { debug } from 'helpers';
@@ -57,7 +59,10 @@ export const chaptersConnect = ({ store: { getState, dispatch } }) => {
return dispatch(loadAll());
};
-export const chapterInfoConnect = ({ store: { dispatch, getState }, params }) => {
+export const chapterInfoConnect = ({
+ store: { dispatch, getState },
+ params
+}) => {
if (isInfoLoaded(getState(), params.chapterId)) return false;
if (__CLIENT__) {
@@ -68,6 +73,28 @@ export const chapterInfoConnect = ({ store: { dispatch, getState }, params }) =>
return dispatch(loadInfo(params));
};
+export const tafsirConnect = ({ store: { dispatch, getState }, params }) => {
+ if (
+ isTafsirLoaded(
+ getState(),
+ params.chapterId,
+ params.verseId,
+ params.tafsirId
+ )
+ ) {
+ return false;
+ }
+
+ if (__CLIENT__) {
+ dispatch(loadTafsir(params.chapterId, params.verseId, params.tafsirId));
+ return true;
+ }
+
+ return dispatch(
+ loadTafsir(params.chapterId, params.verseId, params.tafsirId)
+ );
+};
+
export const versesConnect = ({ store: { dispatch, getState }, params }) => {
debug('component:Surah:versesConnect', 'Init');
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index 8cf81268b..789792b7e 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -54,7 +54,6 @@ const TopOptions = Loadable({
});
class Surah extends Component {
-
state = {
lazyLoading: false,
sidebarOpen: false
@@ -89,7 +88,7 @@ class Surah extends Component {
this.props.isLoaded !== nextProps.isLoaded,
this.props.options !== nextProps.options,
this.props.currentVerse !== nextProps.currentVerse,
- this.props.isPlaying !== nextProps.isPlaying,
+ this.props.isPlaying !== nextProps.isPlaying
];
return conditions.some(condition => condition);
@@ -107,7 +106,7 @@ class Surah extends Component {
return [...verseIds][0];
}
- hasAyahs() {
+ hasVerses() {
return Object.keys(this.props.verses).length;
}
@@ -117,7 +116,7 @@ class Surah extends Component {
const size = 10;
const from = range[1];
- const to = (from + size);
+ const to = from + size;
const paging = { offset: from, limit: to - from };
if (!isEndOfSurah && !verseIds.has(to)) {
@@ -128,13 +127,13 @@ class Surah extends Component {
}
return false;
- }
+ };
handleSurahInfoToggle = (payload) => {
const { actions } = this.props; // eslint-disable-line no-shadow
return actions.options.setOption(payload);
- }
+ };
title() {
const { params, chapter } = this.props;
@@ -151,7 +150,9 @@ class Surah extends Component {
if (params.range) {
if (params.range.includes('-')) {
- const [from, to] = params.range.split('-').map(num => parseInt(num, 10));
+ 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 verse = verses[`${chapter.chapterNumber}:${fromAyah + index}`];
@@ -183,9 +184,15 @@ class Surah extends Component {
renderNoAyah() {
const { isLoading } = this.props;
- const noAyah = (
-
-
+ const noAyah = (
+
+
+
+
+
);
return isLoading ?
: noAyah;
@@ -196,15 +203,18 @@ class Surah extends Component {
// If single verse, eh. /2/30
if (isSingleAyah) {
- const to = this.getFirst() + 10 > chapter.versesCount ?
- chapter.versesCount :
- this.getFirst() + 10;
+ const to = this.getFirst() + 10 > chapter.versesCount
+ ? chapter.versesCount
+ : this.getFirst() + 10;
return (
@@ -218,18 +228,16 @@ class Surah extends Component {
isLoading={isLoading}
endComponent={
- {
- chapter.chapterNumber > 1 &&
- -
-
- ←
-
-
-
- }
+ {chapter.chapterNumber > 1 &&
+ -
+
+ ←
+
+
+
}
-
- {
- chapter.chapterNumber < 114 &&
- -
-
-
- →
-
-
- }
+ {chapter.chapterNumber < 114 &&
+ -
+
+
+ →
+
+
}
}
loadingComponent={
}
@@ -257,7 +263,7 @@ class Surah extends Component {
);
}
- renderAyahs() {
+ renderVerses() {
const {
chapter,
verses,
@@ -266,7 +272,7 @@ class Surah extends Component {
bookmarks,
isPlaying,
isAuthenticated,
- currentVerse,
+ currentVerse
} = this.props; // eslint-disable-line no-shadow
return Object.values(verses).map(verse => (
@@ -309,7 +315,13 @@ class Surah extends Component {
const { chapter, verses, options, info, actions } = this.props; // eslint-disable-line no-shadow
debug('component:Surah', 'Render');
- if (!this.hasAyahs()) return
{this.renderNoAyah()}
;
+ if (!this.hasVerses()) {
+ return (
+
+ {this.renderNoAyah()}
+
+ );
+ }
return (
@@ -318,9 +330,10 @@ class Surah extends Component {
title: this.title(),
description: this.description()
})}
- script={[{
- type: 'application/ld+json',
- innerHTML: `{
+ script={[
+ {
+ type: 'application/ld+json',
+ innerHTML: `{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
@@ -339,7 +352,8 @@ class Surah extends Component {
}
}]
}`
- }]}
+ }
+ ]}
style={[
{
cssText: `.text-arabic{font-size: ${options.fontSize.arabic}rem;} .text-translation{font-size: ${options.fontSize.translation}rem;}` // eslint-disable-line max-len
@@ -356,20 +370,21 @@ class Surah extends Component {
onClose={this.handleSurahInfoToggle}
/>
-
+ {__CLIENT__ && }
- {options.isReadingMode ? this.renderLines() : this.renderAyahs()}
+ {options.isReadingMode ? this.renderLines() : this.renderVerses()}
{this.renderPagination()}
-