+
+
+
+);
+
+export default About;
diff --git a/src/components/App.tsx b/src/components/App.tsx
new file mode 100644
index 000000000..9459aac9f
--- /dev/null
+++ b/src/components/App.tsx
@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react';
+import { asyncComponent } from 'react-async-component';
+import { metrics } from 'react-metrics';
+import cookie from 'react-cookie';
+import metricsConfig from '../metrics';
+import Navbars from './Navbars';
+import Routes from './Routes';
+import Footer from './Footer';
+import NoScript from './NoScript';
+import AppHelmet from './AppHelmet';
+
+const SmartBanner = asyncComponent({
+ resolve: () => import(/* webpackChunkName: "SmartBanner" */ './SmartBanner'),
+});
+
+const App = () => {
+ const { isNightMode } = cookie.load('options');
+ if (__CLIENT__) if (isNightMode) document.body.classList.add('night-mode');
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The Noble Qur’an is the central religious text of Islam. Muslims
+ believe the Qur’an is the book of Divine guidance and direction
+ for mankind, and consider the original Arabic text the final
+ revelation of Allah (God).[
+ 1
+ ] All translations of the original Arabic text are thus
+ interpretations of the original meanings and should be embraced
+ as such. For more information about the Noble Qur’an, you may
+ visit its{' '}
+
+ Wikipedia article.
+
+
+
+
+
+
+
+ MECCAN SURAHS
+
+
+ The Meccan Surahs are the chronologically earlier chapters
+ (Surahs) of the Qur’an that were, according to Islamic
+ tradition, revealed anytime before the migration of the Islamic
+ prophet Muhammed and his followers from Mecca to Medina (Hijra).
+ The Medinan Surahs are those revelations that occurred after the
+ move to the city of that name.
+
+
+
+
+
+
+ MEDINAN SURAHS
+
+
+ The Medinan Surahs or Medinan Chapters of the Qur’an are the
+ latest 24 Surahs that, according to Islamic tradition, were
+ revealed at Medina after Muhammad’s Hijra from Mecca. These
+ Surahs were revealed by Allah when the Muslim community was
+ larger and more developed, as opposed to their minority position
+ in Mecca.
+
+
+
+
+
+
+ BROWSING SURAHS ON THIS WEBSITE
+
+
+ We have redesigned the website with a user friendly approach in
+ mind. To browse through the Surahs, click on the button (shown
+ left) in the READ & LISTEN page and navigate Surah by title or
+ by page. In future iterations, we will be integrating more
+ search and audio features, ان شاء الله. If you have any
+ suggestions on how we can make the website a better experience
+ please do not hesitate to{' '}
+ contact us
+ .
+
+
+
+
+
+
+ CREDITS
+
+
+ This website was created by a few volunteers and was made
+ possible with the will of Allah (Glory be unto Him) and with the
+ help of the open source Muslim community online. Data sources
+ include Tanzil,
+ Qur‘anComplex,
+
+ {' '}
+ Colin Fair’s work on audio segments
+
+ ,
+ Zekr and
+ Online Qur’an Project.
+ Special thanks to the
+ Elmohafez team for word by
+ word timing files. If you have any questions, you may visit the{' '}
+ Contact page.
+
+
+ -
+
-
- );
- }
-
- renderSingleAyah() {
- const { repeat, setRepeat, chapter } = this.props;
- const array = Array(chapter.versesCount).join().split(',');
-
- return (
- -
-
-
-
- {' '} - : -
-{ - let to = parseInt(event.target.value, 10) + 3; - to = to < chapter.versesCount ? to : chapter.versesCount; - setRepeat({ - ...repeat, - from: parseInt(event.target.value, 10), - to - }); - }} - > - { - array.reduce((options, ayah, index) => { - if (index + 1 < chapter.versesCount) { // Exclude last verse - options.push( - - ); - } - return options; - }, []) - } - -
- - - -
-
-
- {' '} - : -
-- setRepeat({ ...repeat, to: parseInt(event.target.value, 10) })} - > - { - array.reduce((options, ayah, index) => { - if ((repeat.from ? repeat.from : 1) < index + 1 && index + 1 <= chapter.versesCount) { // eslint-disable-line max-len - options.push( - - ); - } - return options; - }, []) - } - -
-
-
-
- setRepeat({
- ...repeat,
- from: parseInt(event.target.value, 10),
- to: parseInt(event.target.value, 10)
- })}
- >
- {array.map((ayah, index) => (
-
- ))}
-
-
- );
- }
-
- renderNav() {
- const { repeat } = this.props;
-
- return (
- -
-
- );
- }
-
- renderOptions() {
- const { repeat } = this.props;
-
- return (
-
-
-
-
- {repeat.from === repeat.to
- ? this.renderSingleAyah()
- : this.renderRangeAyahs()}
-
- );
- }
-
- renderTimes() {
- const { repeat, setRepeat, intl } = this.props;
- const times = Array(10).join().split(',');
-
- return (
-
-
- );
- }
-
- render() {
- const { repeat } = this.props;
-
- const popover = (
-
-
-
- setRepeat({
- ...repeat,
- times: parseInt(event.target.value, 10)
- })}
- >
-
- {times.map((ayah, index) => (
-
- ))}
-
-
- -
-
-
- }
- >
- {this.renderNav()}
- {this.renderOptions()}
- {this.renderTimes()}
-
-
-
-
-
- );
- }
-}
-
-RepeatButton.propTypes = {
- chapter: customPropTypes.surahType,
- repeat: customPropTypes.timeInterval,
- setRepeat: PropTypes.func.isRequired,
- current: PropTypes.number.isRequired,
- intl: intlShape.isRequired
-};
-
-export default injectIntl(RepeatButton);
diff --git a/src/components/Audioplayer/RepeatDropdown/spec.js b/src/components/Audioplayer/RepeatDropdown/spec.js
deleted file mode 100644
index 578bed164..000000000
--- a/src/components/Audioplayer/RepeatDropdown/spec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import { mountWithIntl } from '../../../../tests/helpers/intl-enzyme-test-helper.js';
-
-import RepeatDropdown from './index';
-
-let component;
-let overlay;
-let setRepeat;
-const chapter = {
- ayat: 10
-};
-
-const makeComponent = (repeat) => {
- setRepeat = sinon.stub();
-
- component = mountWithIntl(
-
-
-
-
-
-
-
- );
-};
-
-ScrollButton.propTypes = {
- shouldScroll: PropTypes.bool.isRequired,
- onScrollToggle: PropTypes.func.isRequired
-};
-
-export default ScrollButton;
diff --git a/src/components/Audioplayer/ScrollButton/spec.js b/src/components/Audioplayer/ScrollButton/spec.js
deleted file mode 100644
index 11974d241..000000000
--- a/src/components/Audioplayer/ScrollButton/spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import ScrollButton from './index';
-
-let makeComponent;
-let component;
-let onScrollToggle;
-
-describe(' { this.container = container; }}
- className={styles.container}
- onClick={this.handleClick}
- >
-
-
- );
- }
-}
diff --git a/src/components/Audioplayer/Track/spec.js b/src/components/Audioplayer/Track/spec.js
deleted file mode 100644
index a7395b23e..000000000
--- a/src/components/Audioplayer/Track/spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import Track from './index';
-
-let component;
-let onTrackChange;
-
-describe('', () => {
- beforeEach(() => {
- onTrackChange = sinon.stub();
- component = mount(
-
- );
- });
-
- it('should show the progress to be 50%', () => {
- expect(component.children().first().props().style.width).to.eql('50%');
- });
-
- it('should return click progress', () => {
- component.simulate('click', { nativeEvent: { offsetX: 1 } });
-
- expect(onTrackChange).to.have.been.called; // eslint-disable-line
- expect(onTrackChange).to.have.been.calledWith(Infinity); // because the bounding box is 0!
- });
-});
diff --git a/src/components/Audioplayer/Track/style.scss b/src/components/Audioplayer/Track/style.scss
deleted file mode 100644
index 621e934b5..000000000
--- a/src/components/Audioplayer/Track/style.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import '../../../styles/variables.scss';
-
-.container{
- height: 6px;
- width: 100%;
- background-color: #f7f7f7;
- cursor: pointer;
- margin-bottom: 5px;
-}
-
-.progress{
- height: 100%;
- background-color: $brand-primary;
- position: relative;
- padding-left: 12px;
-
-
- &:after{
- content: '';
- height: 12px;
- width: 12px;
- border-radius: 10px;
- position: absolute;
- right: 0px;
- display: block;
- background: #fff;
- top: -3px;
- box-shadow: 0 1px 2px rgba(0,0,0,0.45);
- transition: height 0.5s;
- }
-}
diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
deleted file mode 100644
index 44620c0f4..000000000
--- a/src/components/Audioplayer/index.js
+++ /dev/null
@@ -1,513 +0,0 @@
-/* global document */
-// TODO: This file is too too large.
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import { connect } from 'react-redux';
-import { camelize } from 'humps';
-import Loadable from 'react-loadable';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-// Helpers
-import debug from 'helpers/debug';
-import scroller from 'utils/scroller';
-
-// Redux
-import * as AudioActions from 'redux/actions/audioplayer';
-
-import ComponentLoader from 'components/ComponentLoader';
-import Track from './Track';
-import Segments from './Segments';
-import ScrollButton from './ScrollButton';
-
-const style = require('./style.scss');
-
-const RepeatDropdown = Loadable({
- loader: () =>
- import(/* webpackChunkName: "repeatdropdown" */ './RepeatDropdown'),
- LoadingComponent: ComponentLoader
-});
-
-export class Audioplayer extends Component {
- componentDidMount() {
- const { currentFile } = this.props; // eslint-disable-line no-shadow, max-len
-
- debug('component:Audioplayer', 'componentDidMount');
-
- if (currentFile) {
- return this.handleAddFileListeners(currentFile);
- }
-
- console.error('Audioplayer mounted but no file available');
-
- return false;
- }
-
- componentWillReceiveProps(nextProps) {
- // Make sure we have a current ayah to mount it to Audio
- if (!this.props.currentVerse && !nextProps.currentFile) {
- return false;
- }
-
- // First load
- if (this.props.currentFile !== nextProps.currentFile) {
- if (this.props.currentFile) {
- this.handleRemoveFileListeners(this.props.currentFile);
- }
-
- return this.handleAddFileListeners(nextProps.currentFile);
- }
-
- // Change verse
- if (this.props.currentVerse !== nextProps.currentVerse) {
- if (this.props.currentFile) {
- this.handleRemoveFileListeners(this.props.currentFile);
- }
-
- return this.handleAddFileListeners(nextProps.currentFile);
- }
-
- return false;
- }
-
- componentDidUpdate() {
- const { currentFile, isPlaying } = this.props;
-
- if (!currentFile) return false;
-
- if (isPlaying) {
- currentFile.play();
- } else {
- currentFile.pause();
- }
-
- return false;
- }
-
- componentWillUnmount() {
- const { files, currentFile } = this.props;
- debug('component:Audioplayer', 'componentWillUnmount');
-
- if (files[currentFile]) {
- return this.handleRemoveFileListeners(files[currentFile]);
- }
-
- return false;
- }
-
- getPrevious() {
- const { currentVerse, files } = this.props;
- const ayahIds = Object.keys(files);
- const index = ayahIds.findIndex(id => id === currentVerse);
-
- return ayahIds[index - 1];
- }
-
- getNext() {
- const { currentVerse, chapter, files, onLoadAyahs } = this.props;
- const ayahIds = Object.keys(files);
- const ayahNum = currentVerse.split(':')[1];
- const index = ayahIds.findIndex(id => id === currentVerse);
-
- if (chapter.versesCount === ayahNum + 1) {
- // We are at the end of the chapter!
- return false;
- }
-
- if (ayahIds.length - 3 <= index + 1) {
- // Need to load the next set of ayahs!
- onLoadAyahs();
- }
-
- return ayahIds[index + 1];
- }
-
- handleAyahChange = (direction = 'next') => {
- const { isPlaying, play, pause, currentVerse } = this.props; // eslint-disable-line no-shadow, max-len
- const previouslyPlaying = isPlaying;
-
- if (isPlaying) pause();
-
- const nextVerse = this[camelize(`get_${direction}`)]();
- if (!nextVerse) return pause();
-
- this.props[direction](currentVerse);
-
- this.handleScrollTo(nextVerse);
-
- this.preloadNext();
-
- if (previouslyPlaying) play();
-
- return false;
- };
-
- scrollToVerse = (ayahNum = this.props.currentVerse) => {
- scroller.scrollTo(`verse:${ayahNum}`, -45);
- };
-
- handleScrollTo = (ayahNum) => {
- const { shouldScroll } = this.props;
-
- if (shouldScroll) {
- this.scrollToVerse(ayahNum);
- }
- };
-
- play = () => {
- this.handleScrollTo();
-
- this.props.play();
- this.preloadNext();
- };
-
- preloadNext() {
- const { currentVerse, files } = this.props;
- const ayahIds = Object.keys(files);
- const index = ayahIds.findIndex(id => id === currentVerse) + 1;
-
- for (let id = index; id <= index + 2; id += 1) {
- if (ayahIds[id]) {
- const verseKey = ayahIds[id];
-
- if (files[verseKey]) {
- files[verseKey].setAttribute('preload', 'auto');
- }
- }
- }
- }
-
- handleRepeat = (file) => {
- const {
- repeat,
- currentVerse,
- setRepeat, // eslint-disable-line no-shadow
- setAyah // eslint-disable-line no-shadow
- } = this.props;
- const [chapter, ayah] = currentVerse
- .split(':')
- .map(val => parseInt(val, 10));
-
- file.pause();
-
- if (repeat.from > ayah && repeat.to < ayah) {
- // user selected a range where current ayah is outside
- return this.handleAyahChange();
- }
-
- if (repeat.from === repeat.to) {
- // user selected single ayah repeat
- if (ayah !== repeat.from) return this.handleAyahChange();
-
- if (repeat.times === 1) {
- // end of times
- setRepeat({});
-
- return this.handleAyahChange();
- }
-
- setRepeat({ ...repeat, times: repeat.times - 1 });
- file.currentTime = 0; // eslint-disable-line no-param-reassign
-
- return file.play();
- }
-
- if (repeat.from !== repeat.to) {
- // user selected a range
- if (ayah < repeat.to) {
- // still in range
- return this.handleAyahChange();
- }
-
- if (ayah === repeat.to) {
- // end of range
- if (repeat.times === 1) {
- // end of times
- setRepeat({});
-
- return this.handleAyahChange();
- }
-
- setRepeat({ ...repeat, times: repeat.times - 1 });
- setAyah(`${chapter}:${repeat.from}`);
-
- return this.play();
- }
- }
-
- return false;
- };
-
- handleScrollToggle = (event) => {
- event.preventDefault();
-
- const { shouldScroll, currentVerse } = this.props;
-
- if (!shouldScroll) {
- // we use the inverse (!) here because we're toggling, so false is true
- this.scrollToVerse(currentVerse);
- }
-
- this.props.toggleScroll();
- };
-
- handleAddFileListeners(file) {
- // NOTE: if no file, just wait.
- if (!file) return false;
-
- const { update, currentTime } = this.props; // eslint-disable-line no-shadow
- debug('component:Audioplayer', `Attaching listeners to ${file.src}`);
-
- // Preload file
- file.setAttribute('preload', 'auto');
-
- const onLoadeddata = () => {
- // Default current time to zero. This will change
- file.currentTime = // eslint-disable-line no-param-reassign
- file.currentTime || currentTime || 0;
-
- return update({
- duration: file.duration,
- isLoading: false
- });
- };
-
- const onTimeupdate = () =>
- update({
- currentTime: file.currentTime,
- duration: file.duration
- });
-
- const onEnded = () => {
- const { repeat } = this.props;
-
- if (repeat.from) {
- return this.handleRepeat(file);
- }
-
- if (file.readyState >= 3 && file.paused) {
- file.pause();
- }
-
- return this.handleAyahChange();
- };
-
- const onPlay = () => {
- file.ontimeupdate = onTimeupdate; // eslint-disable-line no-param-reassign
- };
-
- const onPause = () => {
- file.ontimeupdate = null; // eslint-disable-line no-param-reassign
- };
-
- file.onloadeddata = onLoadeddata; // eslint-disable-line no-param-reassign
- file.onpause = onPause; // eslint-disable-line no-param-reassign
- file.onplay = onPlay; // eslint-disable-line no-param-reassign
- file.onended = onEnded; // eslint-disable-line no-param-reassign
-
- return file;
- }
-
- handleRemoveFileListeners = (file) => {
- file.pause();
- file.currentTime = 0; // eslint-disable-line no-param-reassign
- file.onloadeddata = null; // eslint-disable-line no-param-reassign
- file.ontimeupdate = null; // eslint-disable-line no-param-reassign
- file.onplay = null; // eslint-disable-line no-param-reassign
- file.onPause = null; // eslint-disable-line no-param-reassign
- file.onended = null; // eslint-disable-line no-param-reassign
- file.onprogress = null; // eslint-disable-line no-param-reassign
- };
-
- handleTrackChange = (fraction) => {
- const { currentFile, update } = this.props; // eslint-disable-line no-shadow
-
- update({
- currentTime: fraction * currentFile.duration
- });
-
- currentFile.currentTime = fraction * currentFile.duration;
- };
-
- renderPlayStopButtons() {
- const { isPlaying, pause } = this.props; // eslint-disable-line no-shadow
-
- return (
-
-
-
- );
- }
-
- renderPreviousButton() {
- const { currentVerse, files } = this.props;
- if (!files) return false;
- const index = Object.keys(files).findIndex(id => id === currentVerse);
-
- return (
- index && this.handleAyahChange('previous')}
- >
-
-
- );
- }
-
- renderNextButton() {
- const { chapter, currentVerse } = this.props;
- if (!chapter) return false;
- const isEnd =
- chapter.versesCount === parseInt(currentVerse.split(':')[1], 10);
-
- return (
- !isEnd && this.handleAyahChange()}
- >
-
-
- );
- }
-
- render() {
- debug('component:Audioplayer', 'render');
-
- const {
- className,
- segments,
- isLoading,
- currentVerse,
- currentFile,
- currentTime,
- duration,
- chapter,
- isPlaying,
- repeat, // eslint-disable-line no-shadow
- shouldScroll, // eslint-disable-line no-shadow
- setRepeat // eslint-disable-line no-shadow
- } = this.props;
-
- if (isLoading || !currentFile) {
- return (
-
-
-
-
- );
- }
-}
-
-const mapStateToProps = (state, ownProps) => {
- const currentVerse =
- state.audioplayer.currentVerse || ownProps.startVerse.verseKey;
- const files = state.audioplayer.files[ownProps.chapter.id];
-
- return {
- files,
- currentVerse,
- segments: state.audioplayer.segments[ownProps.chapter.id],
- currentFile: files[currentVerse],
- chapterId: ownProps.chapter.id,
- isPlaying: state.audioplayer.isPlaying,
- isLoading: state.audioplayer.isLoading,
- repeat: state.audioplayer.repeat,
- shouldScroll: state.audioplayer.shouldScroll,
- duration: state.audioplayer.duration,
- currentTime: state.audioplayer.currentTime
- };
-};
-
-Audioplayer.propTypes = {
- className: PropTypes.string,
- chapter: customPropTypes.surahType,
- onLoadAyahs: PropTypes.func.isRequired,
- segments: customPropTypes.segments,
- // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
- files: PropTypes.object, // eslint-disable-line
- currentVerse: PropTypes.string,
- isLoading: PropTypes.bool.isRequired,
- play: PropTypes.func.isRequired,
- pause: PropTypes.func.isRequired,
- next: PropTypes.func.isRequired, // eslint-disable-line
- previous: PropTypes.func.isRequired, // eslint-disable-line
- update: PropTypes.func.isRequired,
- repeat: customPropTypes.timeInterval.isRequired,
- shouldScroll: PropTypes.bool.isRequired,
- setRepeat: PropTypes.func.isRequired,
- setAyah: PropTypes.func.isRequired,
- toggleScroll: PropTypes.func.isRequired,
- isPlaying: PropTypes.bool,
- currentTime: PropTypes.number,
- duration: PropTypes.number,
- // NOTE: should be PropTypes.instanceOf(Audio) but not on server.
- currentFile: PropTypes.any, // eslint-disable-line
- startVerse: customPropTypes.verseType // eslint-disable-line
-};
-
-export default connect(mapStateToProps, AudioActions)(Audioplayer);
diff --git a/src/components/Audioplayer/spec.js b/src/components/Audioplayer/spec.js
deleted file mode 100644
index 7eb52ba6d..000000000
--- a/src/components/Audioplayer/spec.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { Audioplayer } from './index';
-
-let makeComponent;
-let component;
-let setRepeat;
-let setAyah;
-let file;
-
-describe('
- {currentFile &&
- }
- {segments &&
- segments[currentVerse] &&
-
- -
-
-
-
- : - {' '} - {currentVerse.split(':')[1]} -
- - - {this.renderPreviousButton()} - -
- - {this.renderPlayStopButtons()} - -
- - {this.renderNextButton()} - -
-
-
-
- -
-
-
-
+
+
+ {__CLIENT__ &&
+
+
+
+ ﷽
+
+);
+
+export default Bismillah;
diff --git a/src/components/Bismillah/index.js b/src/components/Bismillah/index.js
deleted file mode 100644
index 235a2d2fb..000000000
--- a/src/components/Bismillah/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import * as customPropTypes from 'customPropTypes';
-
-const Bismillah = ({ chapter }) => {
- if (chapter && chapter.bismillahPre) {
- return (
-
- ﷽
-
- );
- }
-
- return ;
-};
-
-Bismillah.propTypes = {
- chapter: customPropTypes.surahType.isRequired
-};
-
-export default Bismillah;
diff --git a/src/components/Chapter.tsx b/src/components/Chapter.tsx
new file mode 100644
index 000000000..a9b5b0980
--- /dev/null
+++ b/src/components/Chapter.tsx
@@ -0,0 +1,282 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import qs from 'qs';
+import last from 'lodash/last';
+import isEmpty from 'lodash/isEmpty';
+import { match as MatchType } from 'react-router';
+import Loader from 'quran-components/lib/Loader';
+import { Location } from 'history';
+import {
+ ChapterShape,
+ VerseShape,
+ LineShape,
+ ChapterInfoShape,
+ SettingsShape,
+} from '../shapes';
+import { determinePage } from '../helpers/determinePage';
+import PageContainer from './dls/PageContainer';
+import Bismillah from './Bismillah';
+import ListView from './chapter/ListView';
+import TopOptions from './chapter/TopOptions';
+import PageView from './chapter/PageView';
+import ChapterPagination from './chapter/ChapterPagination';
+import { FetchVerses } from '../redux/actions/verses';
+import { FetchChapters } from '../redux/actions/chapters';
+import { FetchChapterInfo } from '../redux/actions/chapterInfos';
+import { NUMBER_OF_CHAPTERS } from '../constants';
+import AudioplayerContainer from '../containers/AudioplayerContainer';
+import ChapterInfoPanelContainer from '../containers/ChapterInfoPanelContainer';
+import ChapterHelmet from './chapter/ChapterHelmet';
+import { ResetAudioPlayer } from '../redux/actions/audioplayer';
+
+const propTypes = {
+ chapter: ChapterShape.isRequired,
+ chapters: PropTypes.objectOf(ChapterShape).isRequired,
+ fetchVerses: PropTypes.func.isRequired,
+ fetchChapters: PropTypes.func.isRequired,
+ fetchChapterInfo: PropTypes.func.isRequired,
+ setCurrentVerseKey: PropTypes.func.isRequired,
+ lines: PropTypes.object.isRequired,
+ chapterInfo: ChapterInfoShape.isRequired,
+ isVersesLoading: PropTypes.bool.isRequired,
+ settings: SettingsShape.isRequired,
+ match: PropTypes.shape({
+ params: PropTypes.shape({
+ chapterId: PropTypes.string.isRequired,
+ }),
+ }).isRequired,
+ verses: PropTypes.objectOf(VerseShape),
+ isEndOfChapter: PropTypes.bool.isRequired,
+ location: PropTypes.object.isRequired,
+ resetAudioPlayer: PropTypes.func.isRequired,
+};
+
+const defaultProps = {
+ verses: {},
+};
+
+type Props = {
+ fetchVerses: FetchVerses;
+ fetchChapters: FetchChapters;
+ fetchChapterInfo: FetchChapterInfo;
+ match: MatchType<$TsFixMe>;
+ chapter: ChapterShape;
+ verses: { [verseKey: string]: VerseShape };
+ chapters: { [chapterId: string]: ChapterShape };
+ lines: { [key: string]: LineShape };
+ chapterInfo: ChapterInfoShape;
+ settings: SettingsShape;
+ isVersesLoading: boolean;
+ location: Location;
+ resetAudioPlayer: ResetAudioPlayer;
+};
+
+class Chapter extends Component
+
+
+ {__CLIENT__ &&
+
+
+
+
+);
+
+ChapterInfo.propTypes = propTypes;
+
+export default ChapterInfo;
diff --git a/src/components/ChapterInfoPanel.tsx b/src/components/ChapterInfoPanel.tsx
new file mode 100644
index 000000000..e38fe4491
--- /dev/null
+++ b/src/components/ChapterInfoPanel.tsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { lighten } from 'polished';
+import Loader from 'quran-components/lib/Loader';
+
+import T, { KEYS } from './T';
+
+import madinah from '../../static/images/madinah.jpg';
+import makkah from '../../static/images/makkah.jpg';
+import { SetSetting } from '../redux/actions/settings';
+import { ChapterShape, ChapterInfoShape } from '../shapes';
+
+const IMAGES: { madinah: string; makkah: string; [key: string]: string } = {
+ madinah,
+ makkah,
+};
+
+const List = styled.dl`
+ padding-top: 8px;
+ text-align: right;
+
+ dt {
+ font-size: 10px;
+ font-weight: 500;
+ padding-top: 25px;
+ padding-bottom: 5px;
+ }
+
+ dd {
+ color: $brand-primary;
+ font-weight: 300;
+ }
+`;
+
+const Close = styled.button`
+ position: absolute;
+ right: 15px;
+ top: 15px;
+ height: 26px;
+ width: 26px;
+ padding: 7px 8px;
+ font-size: 10px;
+ border-radius: 16px;
+ color: ${({ theme }) => theme.textMuted};
+ z-index: 20;
+ cursor: pointer;
+ border: none;
+ &:hover {
+ opacity: 0.8;
+ }
+`;
+
+const Info = styled.div`
+ height: 100%;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ font-size: 16px;
+ background: ${({ theme }) => lighten(0.1, theme.textMuted)};
+ h2 {
+ font-size: 22px;
+ font-family: ${({ theme }) => theme.fonts.montserrat};
+ font-weight: bold;
+ }
+ h3 {
+ font-size: 20px;
+ font-family: ${({ theme }) => theme.fonts.montserrat};
+ font-weight: bold;
+ }
+ p {
+ font-size: 16px;
+ }
+`;
+
+const Container = styled.div`
+ overflow-y: auto;
+ margin-bottom: 30px;
+ position: relative;
+ height: 0;
+ max-height: 0;
+ min-height: 0;
+ transition: max-height 0.75s, height 0.75s;
+ margin-top: -20px;
+ max-height: 600px;
+ max-height: 70vh;
+ height: 1000px;
+ padding: 0;
+
+ @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+ margin-bottom: 0;
+ }
+`;
+
+const Image = styled.div<{ background: string }>`
+ height: 100%;
+ background-size: cover !important;
+ background-position: center center;
+ background-repeat: no-repeat;
+
+ background: url(${({ background }) => IMAGES[background]});
+ @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+ height: 30%;
+ }
+`;
+
+const ListContainer = styled.div`
+ background: ${({ theme }) => theme.textMuted};
+ height: 100%;
+
+ @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+ height: 30%;
+ }
+`;
+
+const propTypes = {
+ setSetting: PropTypes.func.isRequired,
+ isShowingChapterInfo: PropTypes.bool.isRequired,
+ chapter: ChapterShape,
+ chapterInfo: ChapterInfoShape,
+};
+
+const defaultProps: { chapter: undefined; chapterInfo: undefined } = {
+ chapter: undefined,
+ chapterInfo: undefined,
+};
+
+type Props = {
+ setSetting: SetSetting;
+ chapter?: ChapterShape;
+ chapterInfo?: ChapterInfoShape;
+ isShowingChapterInfo: boolean;
+};
+
+const ChapterInfo: React.SFC
+
+
+
+ {chapter && (
+
+
+
+
+
+
+ -
+
+
+ + Source: {chapterInfo.source} +
+
+
+ {currentChapter.nameArabic}
+
+
+
+
+
+ {currentChapter.chapterNumber}
+
+
+
+ {currentChapter.nameSimple}
+
+ + {currentChapter.translatedName.name} + +
+ + + {currentChapter.translatedName.name} + +
-
+ {chapters.map(chapter => (
+
Error! Component failed to load
;
+ }
+
+ return null;
+};
+
+ComponentLoader.propTypes = {
+ isLoading: PropTypes.bool,
+ error: PropTypes.any, // eslint-disable-line
+ pastDelay: PropTypes.bool,
+};
+
+ComponentLoader.defaultProps = {
+ error: null,
+ isLoading: false,
+ pastDelay: false,
+};
+
+export default ComponentLoader;
diff --git a/src/components/ComponentLoader/index.js b/src/components/ComponentLoader/index.js
deleted file mode 100644
index 8adb23c1b..000000000
--- a/src/components/ComponentLoader/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { PropTypes } from 'react';
-
-const ComponentLoader = ({ isLoading, error, pastDelay }) => {
- if (isLoading) {
- return pastDelay ? : null;
- } else if (error) {
- return Error! Component failed to load
;
- }
-
- return null;
-};
-
-ComponentLoader.propTypes = {
- isLoading: PropTypes.bool,
- error: PropTypes.any, // eslint-disable-line
- pastDelay: PropTypes.bool
-};
-
-export default ComponentLoader;
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
new file mode 100644
index 000000000..7e0bd11a0
--- /dev/null
+++ b/src/components/Contact.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Padding } from 'styled-components-spacing';
+import Jumbotron from './Jumbotron';
+import Title from './dls/Title';
+
+// TODO: Translations
+const Contact: React.SFC = () => (
+
+
+
+
+);
+
+export default Contact;
diff --git a/src/components/ContentDropdown/index.js b/src/components/ContentDropdown/index.js
deleted file mode 100644
index 04472f855..000000000
--- a/src/components/ContentDropdown/index.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import { connect } from 'react-redux';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import { loadTranslations } from 'redux/actions/options';
-import Menu, { MenuItem } from 'quran-components/lib/Menu';
-import Checkbox from 'quran-components/lib/Checkbox';
-import Loader from 'quran-components/lib/Loader';
-import Icon from 'quran-components/lib/Icon';
-
-const style = require('./style.scss');
-
-const compareAlphabetically = property =>
- (previous, next) => {
- const previousText = previous[property].toUpperCase();
- const nextText = next[property].toUpperCase();
-
- if (previousText < nextText) {
- return -1;
- }
-
- if (previousText > nextText) {
- return 1;
- }
-
- return 0;
- };
-
-
-class ContentDropdown extends Component {
-
- componentDidMount() {
- if (!this.props.translationOptions.length) {
- return this.props.loadTranslations();
- }
-
- return false;
- }
-
- handleRemoveContent = () => {
- const { onOptionChange } = this.props;
-
- onOptionChange({ translations: [] });
- }
-
- handleOptionSelected(id) {
- const { onOptionChange, translations } = this.props;
-
- if (translations.find(option => option === id)) {
- onOptionChange({ translations: translations.filter(option => option !== id) });
- } else {
- onOptionChange({ translations: [...translations, id] });
- }
- }
-
- renderItems(items, render) {
- const { translations } = this.props;
-
- return items.map((translation) => {
- const checked = translations.find(option => option === translation.id);
-
- return (
-
- );
- });
- }
-
- renderEnglishList() {
- const list = this.props.translationOptions
- .filter(translation => translation.languageName === 'English')
- .sort(compareAlphabetically('authorName'));
-
- return this.renderItems(list, translation => translation.authorName);
- }
-
- renderLanguagesList() {
- const list = this.props.translationOptions
- .filter(translation => translation.languageName !== 'English')
- .sort(compareAlphabetically('languageName'));
-
- return this.renderItems(list, translation => `${translation.languageName} - ${translation.authorName}`);
- }
-
- render() {
- const { translations, translationOptions } = this.props;
-
- return (
- }
- menu={
- translationOptions.length ?
- :
-
+
+
+
+
+
+ Contacting us - please use the widget on the bottom right corner
+ to contact us.
+ <br />
+ <br />
+ Thank you
+
+
+
- = ({ match: { params } }: Props) => (
+
- {this.renderPopup()}
-
- );
- }
-}
-
-FontSizeDropdown.propTypes = {
- onOptionChange: PropTypes.func,
- fontSize: customPropTypes.fontSize.isRequired
-};
-
-export default FontSizeDropdown;
diff --git a/src/components/FontSizeDropdown/style.scss b/src/components/FontSizeDropdown/style.scss
deleted file mode 100644
index eedffe1ab..000000000
--- a/src/components/FontSizeDropdown/style.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import '../../styles/variables.scss';
-
-.list{
- display: table;
- width: 100%;
- padding: 15px 0px;
-}
-
-.item{
- list-style-type: none;
- display: table-cell;
- width: 33%;
-}
-
-.link{
- position: relative;
- display: block;
- cursor: pointer;
- color: #777;
-}
diff --git a/src/components/FontStyles/index.js b/src/components/FontStyles/index.js
deleted file mode 100644
index c97646357..000000000
--- a/src/components/FontStyles/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { fontFaceStyle, fontFaceStyleLoaded } from 'helpers/buildFontFaces';
-import load from 'redux/actions/fontFace.js';
-
-import debug from 'helpers/debug';
-import selector from './selector';
-
-class FontStyles extends Component {
- shouldComponentUpdate(nextProps) {
- return (
- JSON.stringify(this.props.fontFaces) !==
- JSON.stringify(nextProps.fontFaces)
- );
- }
-
- render() {
- const { fontFaces, load } = this.props; // eslint-disable-line no-shadow
- debug('component:FontStyles', 'render');
-
- if (__CLIENT__) {
- const FontFaceObserver = require('fontfaceobserver'); // eslint-disable-line global-require
-
- Object.keys(fontFaces)
- .filter(className => !fontFaces[className])
- .forEach((className) => {
- const font = new FontFaceObserver(className);
-
- font.load().then(() => load(className), () => load(className));
- });
- }
-
- return (
- = ({ footNote }: Props) => (
+
+
+
+
+
+
+);
+
+FootNote.propTypes = propTypes;
+
+export default FootNote;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 000000000..5be0c6793
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,215 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+import T, { KEYS } from './T';
+import { FOOTER_EVENTS } from '../events';
+
+const Container = styled.footer`
+ background-color: ${({ theme }) => theme.colors.tuatara};
+ padding: 3% 0 5% 0;
+ font-size: 14px;
+ margin-top: 50px;
+
+ @media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
+ padding-bottom: 7%;
+ }
+
+ @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+ padding-bottom: 9%;
+ }
+`;
+
+const Section = styled.div`
+ padding-top: 30px;
+ text-transform: uppercase;
+`;
+
+const Header = styled.p`
+ line-height: 30px;
+ color: ${({ theme }) => theme.colors.white};
+`;
+
+const List = styled.ul`
+ padding-left: 0;
+
+ li {
+ list-style: none;
+ padding: 5px 0;
+ }
+`;
+
+const linkCss = css`
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.5);
+ transition: color 0.15s ease-in-out;
+
+ &:hover {
+ color: #fff;
+ }
+`;
+
+const StyledLink = styled.a`
+ ${linkCss};
+`;
+
+const StyledRouterLink = styled(Link)`
+ ${linkCss};
+`;
+
+const Footer = () => (
+
+
+);
+
+export default Footer;
diff --git a/src/components/Footer/PdfFooter/index.js b/src/components/Footer/PdfFooter/index.js
deleted file mode 100644
index 80a07901c..000000000
--- a/src/components/Footer/PdfFooter/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import Link from 'react-router/lib/Link';
-
-const PdfFooter = () => (
-
-);
-
-export default PdfFooter;
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
deleted file mode 100644
index 0b88d2e9d..000000000
--- a/src/components/Footer/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import Link from 'react-router/lib/Link';
-
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const styles = require('./style.scss');
-
-const Footer = () => (
-
-);
-
-export default Footer;
diff --git a/src/components/Footer/style.scss b/src/components/Footer/style.scss
deleted file mode 100644
index 52c030b4e..000000000
--- a/src/components/Footer/style.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
-.footer{
- background-color: #32312C;
- padding: 3% 0% 5% 0%;
- font-size: 14px;
- margin-top: 50px;
-
- .about, .links{
- padding-top: 30px;
- text-transform: uppercase;
-
- .header{
- line-height: 30px;
- color: #fff;
- }
-
- .list{
- padding-left: 0px;
- :global(li){
- list-style: none;
- padding: 5px 0;
- }
- }
-
- a{
- font-size: 13px;
- color: rgba(#fff, 0.5);
- }
-
- a:hover{
- color: #fff;
- }
- }
-
- @media(max-width: $screen-sm-max){
- padding-bottom: 7%;
- }
-
- @media(max-width: $screen-sm){
- padding-bottom: 9%;
- }
-
- :global(a){
- -webkit-transition: color .15s ease-in-out;
- -moz-transition: color .15s ease-in-out;
- -o-transition: color .15s ease-in-out;
- -ms-transition: color .15s ease-in-out;
- transition: color .15s ease-in-out;
- }
-}
diff --git a/src/components/GlobalNav/Surah/index.js b/src/components/GlobalNav/Surah/index.js
deleted file mode 100644
index 74708501a..000000000
--- a/src/components/GlobalNav/Surah/index.js
+++ /dev/null
@@ -1,205 +0,0 @@
-import React, { PropTypes, Component } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import * as OptionsActions from 'redux/actions/options.js';
-import { connect } from 'react-redux';
-import { replace } from 'react-router-redux';
-import Link from 'react-router/lib/Link';
-import Drawer from 'quran-components/lib/Drawer';
-import Menu from 'quran-components/lib/Menu';
-import SearchInput from 'components/SearchInput';
-import SurahsDropdown from 'components/SurahsDropdown';
-import ReadingModeToggle from 'components/ReadingModeToggle';
-import NightModeToggle from 'components/NightModeToggle';
-import InformationToggle from 'components/InformationToggle';
-import FontSizeDropdown from 'components/FontSizeDropdown';
-import ReciterDropdown from 'components/ReciterDropdown';
-import ContentDropdown from 'components/ContentDropdown';
-import TooltipDropdown from 'components/TooltipDropdown';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import VersesDropdown from 'components/VersesDropdown';
-
-import { load, setCurrentVerse } from 'redux/actions/verses.js';
-
-import GlobalNav from '../index';
-
-const styles = require('../style.scss');
-
-class GlobalNavSurah extends Component {
- state = {
- drawerOpen: false
- };
-
- handleOptionChange = (payload) => {
- const { chapter, setOption, options, versesIds } = this.props;
-
- setOption(payload);
-
- if (chapter) {
- const from = [...versesIds][0];
- const to = [...versesIds][[...versesIds].length - 1];
- const paging = { offset: from - 1, limit: to - from + 1 };
- this.props.load(chapter.chapterNumber, paging, {
- ...options,
- ...payload
- });
- }
- };
-
- handleVerseDropdownClick = (verseNum) => {
- const { versesIds, chapter } = this.props; // eslint-disable-line no-shadow
-
- this.props.setCurrentVerse(`${chapter.chapterNumber}:${verseNum}`);
-
- if (versesIds.has(verseNum)) {
- return false;
- }
-
- return this.props.replace(
- `/${chapter.chapterNumber}/${verseNum}-${verseNum + 10}`
- );
- };
-
- handleDrawerToggle = (open) => {
- this.setState({ drawerOpen: open });
- };
-
- renderDrawerToggle(visibleXs) {
- return (
-
- this.handleDrawerToggle(true)}
- >
-
-
- );
- }
-
- render() {
- const {
- chapter,
- chapters,
- setOption,
- versesIds,
- options,
- ...props
- } = this.props;
-
- return (
-
-
-
-
- ,
- this.renderDrawerToggle(true),
-
-
- }
- >
-
-
- ]}
- rightControls={[this.renderDrawerToggle()]}
- />
- );
- }
-}
-
-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 versesArray = verses
- ? Object.keys(verses).map(key => parseInt(key.split(':')[1], 10))
- : [];
- const versesIds = new Set(versesArray);
-
- return {
- chapter,
- chapters: state.chapters.entities,
- options: state.options,
- versesIds
- };
-}
-
-GlobalNavSurah.propTypes = {
- chapter: customPropTypes.surahType.isRequired,
- chapters: customPropTypes.chapters.isRequired,
- options: customPropTypes.optionsType.isRequired,
- setOption: PropTypes.func.isRequired,
- versesIds: PropTypes.instanceOf(Set),
- load: PropTypes.func.isRequired,
- setCurrentVerse: PropTypes.func.isRequired,
- replace: PropTypes.func.isRequired
-};
-
-export default connect(mapStateToProps, {
- ...OptionsActions,
- load,
- replace,
- setCurrentVerse
-})(GlobalNavSurah);
diff --git a/src/components/GlobalNav/index.js b/src/components/GlobalNav/index.js
deleted file mode 100644
index ab4216be1..000000000
--- a/src/components/GlobalNav/index.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/* global window */
-import React, { PropTypes, Component } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import { connect } from 'react-redux';
-import Link from 'react-router/lib/Link';
-import Navbar from 'react-bootstrap/lib/Navbar';
-import Nav from 'react-bootstrap/lib/Nav';
-
-import LocaleSwitcher from 'components/LocaleSwitcher';
-
-import debug from 'helpers/debug';
-
-const styles = require('./style.scss');
-
-class GlobalNav extends Component {
- state = {
- scrolled: false
- };
-
- componentDidMount() {
- window.addEventListener('scroll', this.handleNavbar, true);
- }
-
- componentWillUnmount() {
- window.removeEventListener('scroll', this.handleNavbar, true);
- }
-
- handleNavbar = () => {
- const { isStatic } = this.props;
- const { scrolled } = this.state;
-
- if (window.pageYOffset > 50) {
- if (!scrolled && !isStatic) {
- this.setState({ scrolled: true });
- }
- } else if (scrolled) {
- this.setState({ scrolled: false });
- }
-
- return false;
- };
-
- isHome() {
- return this.props.location.pathname === '/';
- }
-
- renderRightControls() {
- const { user, rightControls } = this.props;
-
- return (
- rightControls || [
-
-
- Audio
-
- ,
-
-
- Salah
-
- ,
-
-
- Sunnah
-
- ,
-
-
- {user.firstName || user.name}
-
-
- :
- ]
- );
- }
-
- render() {
- const { leftControls, handleSidebarToggle, isStatic } = this.props;
- debug('component:GlobalNav', 'Render');
-
- return (
-
-
-
-
-
- );
- }
-}
-
-GlobalNav.propTypes = {
- // handleToggleSidebar: PropTypes.func.isRequired,
- leftControls: PropTypes.arrayOf(PropTypes.element),
- rightControls: PropTypes.arrayOf(PropTypes.element),
- handleSidebarToggle: PropTypes.func.isRequired,
- isStatic: PropTypes.bool.isRequired,
- user: customPropTypes.userType,
- location: customPropTypes.location
-};
-
-GlobalNav.defaultProps = {
- isStatic: false
-};
-
-export default connect(state => ({
- user: state.auth.user
-}))(GlobalNav);
diff --git a/src/components/GlobalNav/style.scss b/src/components/GlobalNav/style.scss
deleted file mode 100644
index 1edb57884..000000000
--- a/src/components/GlobalNav/style.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '../../styles/variables.scss';
-
-.scrolled{
- box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
-}
-
-.nav{
- @media(max-width: $screen-sm){
- // display: inline-block;
- :global(& > li){
- display: inline-block;
- }
- }
-}
-
-.optionsDropdown{
- :global(.ss-icon){
- margin-right: 5px;
- }
-}
-
-.title{
- padding: 10px 15px;
-}
diff --git a/src/components/GlobalSidebar/index.js b/src/components/GlobalSidebar/index.js
deleted file mode 100644
index a282a79a4..000000000
--- a/src/components/GlobalSidebar/index.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/* global document */
-import React, { PropTypes, Component } from 'react';
-import Link from 'react-router/lib/Link';
-import Navbar from 'react-bootstrap/lib/Navbar';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const styles = require('./style.scss');
-
-const NavbarHeader = Navbar.Header;
-
-class GlobalSidebar extends Component {
- state = {
- settingsModalOpen: false
- };
-
- componentDidMount() {
- document.body.addEventListener('click', this.onBodyClick.bind(this), true);
- }
-
- componentWillUnmount() {
- document.body.removeEventListener(
- 'click',
- this.onBodyClick.bind(this),
- true
- );
- }
-
- onBodyClick = () => {
- const { open, handleOpen } = this.props;
-
- if (open) {
- return handleOpen(false);
- }
-
- return false;
- };
-
- render() {
- const { open, handleOpen, children } = this.props;
-
- return (
- {
+ fetchChapters = () => {
+ const { fetchChapters, chapters } = this.props;
+
+ if (Object.keys(chapters).length === NUMBER_OF_CHAPTERS) return null;
+
+ if (__CLIENT__) {
+ fetchChapters();
+
+ return null;
+ }
+
+ return fetchChapters();
+ };
+
+ fetchJuzs = () => {
+ const { fetchJuzs, juzs } = this.props;
+
+ if (Object.keys(juzs).length === NUMBER_OF_JUZS) return null;
+
+ if (__CLIENT__) {
+ fetchJuzs();
+
+ return null;
+ }
+
+ return fetchJuzs();
+ };
+
+ bootstrap() {
+ const promises = [this.fetchChapters(), this.fetchJuzs()];
+
+ return Promise.all(promises);
+ }
+
+ render() {
+ const { chapters, juzs, loadingJuzs, loadingChapters } = this.props;
+
+ const chapterTitle = (
+
+ <T id={KEYS.CHAPTER_INDEX_HEADING} />
+
+ );
+
+ const juzTitle = (
+
+ <T id={KEYS.JUZ_INDEX_HEADING} />
+
+ );
+
+ let juzsTab = (
+
-
-
- );
- }
-}
-
-IndexHeader.propTypes = {
- noSearch: PropTypes.bool
-};
-
-export default IndexHeader;
diff --git a/src/components/IndexHeader/style.scss b/src/components/IndexHeader/style.scss
deleted file mode 100644
index 2211ac9df..000000000
--- a/src/components/IndexHeader/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import '../../styles/variables.scss';
-
-.link{
- display: inline-block;
- width: 30%;
- margin-top: 35px;
-}
-.logo{
- padding-top: 10px;
- padding-bottom: 10px;
- height: auto;
- width: 100%;
-}
-.title{
- color: lighten($brand-primary, 30%);
- font-size: 160%;
- padding-bottom: 3.5%;
-}
diff --git a/src/components/InformationToggle/index.js b/src/components/InformationToggle/index.js
deleted file mode 100644
index 74438fa9d..000000000
--- a/src/components/InformationToggle/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { PropTypes } from 'react';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import { MenuItem } from 'quran-components/lib/Menu';
-
-const InformationToggle = ({ isToggled, onToggle }) => (
- }
- onClick={() => onToggle({ isShowingSurahInfo: !isToggled })}
- >
- = ({ noSearch }: Props) => (
+
+
+);
+
+Jumbotron.propTypes = {
+ noSearch: PropTypes.bool,
+};
+
+Jumbotron.defaultProps = {
+ noSearch: false,
+};
+
+export default Jumbotron;
diff --git a/src/components/JuzDecoration.tsx b/src/components/JuzDecoration.tsx
new file mode 100644
index 000000000..271b05433
--- /dev/null
+++ b/src/components/JuzDecoration.tsx
@@ -0,0 +1,60 @@
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { JUZ_AND_HIZB_ARABIC_NUMBERS } from '../constants';
+
+const juzMarkTop = require('../../static/images/juzTopArt.svg');
+const juzMarkBottom = require('../../static/images/juzBottomArt.svg');
+
+const StyledContainer = styled.div`
+ padding: 1px;
+ border: solid 1px #2CA4AB;
+ width: 31px;
+ margin-left: calc((100% - 31px) / 2);
+ margin-top: 0.6px;
+ margin-bottom: 1.4px;
+}
+`;
+
+const StyledJuzArt = styled.img`
+ height: 30px;
+ width: 31px;
+ margin-left: calc((100% - 31px) / 2);
+ display: block;
+`;
+
+const StyledJuzNumber = styled.div`
+ font-size: 10px;
+ width: 100%;
+ text-align: center;
+ display: block;
+`;
+
+const propTypes = {
+ juzNumber: PropTypes.number.isRequired,
+};
+
+type Props = {
+ juzNumber: number;
+};
+
+const JuzDecoration: React.SFC = ({ juzNumber }: Props) => (
+
+
+ جزء
+
+ {JUZ_AND_HIZB_ARABIC_NUMBERS[juzNumber]}
+
+ حزب
+
+ {JUZ_AND_HIZB_ARABIC_NUMBERS[juzNumber * 2 - 1]}
+
+
+
+);
+
+JuzDecoration.propTypes = propTypes;
+
+export default JuzDecoration;
diff --git a/src/components/JuzLink.tsx b/src/components/JuzLink.tsx
new file mode 100644
index 000000000..05c97a83c
--- /dev/null
+++ b/src/components/JuzLink.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link as RouterLink } from 'react-router-dom';
+import { JUZ_LIST_EVENTS } from '../events';
+import { ChapterShape } from '../shapes';
+import JuzShape from '../shapes/JuzShape';
+import ChapterIcon from './ChapterIcon';
+
+const Name = styled.span`
+ margin-right: 5px;
+ font-size: 14px;
+`;
+
+const Arabic = styled.div`
+ font-size: 14px;
+`;
+
+const Translated = styled.div`
+ font-size: 10px;
+`;
+
+const Link = styled(RouterLink)`
+ display: block;
+ padding: 10px 10px;
+
+ &:hover {
+ background: #f1f1f1;
+ }
+`;
+
+const Table = styled.div`
+ display: table;
+ width: 100%;
+`;
+
+const TableItem = styled.div<{ width: number }>`
+ display: table-cell;
+ vertical-align: middle;
+ width: ${({ width }) => `${width * 100}%`};
+`;
+
+type Props = {
+ juz: JuzShape;
+ chapters: { [id: string]: ChapterShape };
+};
+
+const JuzLink: React.SFC = ({ juz, chapters }: Props) => {
+ const juzzChapters = Object.keys(juz.verseMapping);
+
+ const list = juzzChapters.map(chapterId => (
+
+
+
+
+
+
+
+ {chapters[chapterId].translatedName.name}
+
+
+
+
+ ));
+
+ return (
+ = ({ juzs, chapters }: Props) => {
+ return (
+ = ({
+ verse: { chapterId, verseNumber, juzNumber },
+ text,
+}: Props) => {
+ if (JUZ_START[chapterId] && JUZ_START[chapterId].includes(verseNumber)) {
+ return (
+
+
+
+ {text}
+
+
+ );
+ }
+
+ return {text};
+};
+
+JuzMarker.propTypes = propTypes;
+
+export default JuzMarker;
diff --git a/src/components/LazyLoad.tsx b/src/components/LazyLoad.tsx
new file mode 100644
index 000000000..4aa28412c
--- /dev/null
+++ b/src/components/LazyLoad.tsx
@@ -0,0 +1,57 @@
+/* global window */
+import React, { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import Waypoint from 'react-waypoint';
+
+type Props = {
+ isEnd: boolean;
+ isLoading: boolean;
+ onLazyLoad(): void;
+ loadingComponent: ReactNode;
+ endComponent: ReactNode;
+};
+
+class LazyLoad extends Component {
+ public static propTypes = {
+ isLoading: PropTypes.bool.isRequired,
+ isEnd: PropTypes.bool.isRequired,
+ onLazyLoad: PropTypes.func.isRequired,
+ loadingComponent: PropTypes.element,
+ endComponent: PropTypes.element,
+ };
+
+ public static defaultProps = {
+ loadingComponent: 'Loading...',
+ endComponent: 'End.',
+ };
+
+ handleWaypointEnter = () => {
+ const { isLoading, isEnd, onLazyLoad } = this.props;
+
+ if (!isLoading && !isEnd) {
+ return onLazyLoad();
+ }
+
+ return false;
+ };
+
+ render() {
+ const { isEnd, isLoading, loadingComponent, endComponent } = this.props;
+
+ if (isEnd) {
+ return endComponent;
+ }
+
+ if (isLoading) {
+ return loadingComponent;
+ }
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default LazyLoad;
diff --git a/src/components/LazyLoad/index.js b/src/components/LazyLoad/index.js
deleted file mode 100644
index 028c0d55c..000000000
--- a/src/components/LazyLoad/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/* global window */
-import { Component, PropTypes } from 'react';
-import ReactDOM from 'react-dom';
-
-import debug from 'helpers/debug';
-
-class LazyLoad extends Component {
-
- componentDidMount() {
- if (__CLIENT__) {
- window.removeEventListener('scroll', this.onScroll, true);
- window.addEventListener('scroll', this.onScroll, true);
- }
- }
-
- componentWillUnmount() {
- if (__CLIENT__) {
- window.removeEventListener('scroll', this.onScroll, true);
- }
- }
-
- onScroll = () => {
- const { isLoading, isEnd, offset, onLazyLoad } = this.props;
- // TODO: Remove ReactDOM!
- const dom = ReactDOM.findDOMNode(this); // eslint-disable-line
- const componentOffset = (dom.offsetParent || dom).offsetTop - (window.pageYOffset + window.innerHeight); // eslint-disable-line max-len
-
- if ((!isLoading && !isEnd) && componentOffset < offset) {
- debug('component:LazyLoad', 'onLazyLoad called');
- return onLazyLoad();
- }
-
- return false;
- }
-
- render() {
- const { isEnd, loadingComponent, endComponent } = this.props;
-
- if (isEnd) {
- return endComponent;
- }
-
- return loadingComponent;
- }
-}
-
-LazyLoad.propTypes = {
- isLoading: PropTypes.bool.isRequired,
- isEnd: PropTypes.bool.isRequired,
- onLazyLoad: PropTypes.func.isRequired,
- loadingComponent: PropTypes.element,
- endComponent: PropTypes.element,
- offset: PropTypes.number
-};
-
-LazyLoad.defaultProps = {
- loadingComponent: 'Loading...',
- endComponent: 'End.',
- offset: 1000
-};
-
-export default LazyLoad;
diff --git a/src/components/LazyLoad/spec.js b/src/components/LazyLoad/spec.js
deleted file mode 100644
index 14436ff74..000000000
--- a/src/components/LazyLoad/spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import LazyLoad from './index';
-
-let wrapper;
-let onLazyLoad;
-let makeComponent;
-
-describe('End}
- loadingComponent={ = ({ line, useTextFont }: Props) => {
+ let wordAudioPosition = -1;
+
+ const text = line.map(word => {
+ const audioPosition =
+ word.charType === 'word' ? (wordAudioPosition += 1) : null;
+
+ return (
+
+
+ );
+};
+
+Line.propTypes = propTypes;
+Line.defaultProps = defaultProps;
+
+export default Line;
diff --git a/src/components/Line/index.js b/src/components/Line/index.js
deleted file mode 100644
index 861de1cf7..000000000
--- a/src/components/Line/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import debug from 'helpers/debug';
-import Word from 'components/Word';
-
-const styles = require('../Verse/style.scss');
-
-class Line extends Component {
- // NOTE: this is commented out as it caused problems with 55:31 with missing text.
- // shouldComponentUpdate(nextProps) {
- // const conditions = [
- // this.props.currentVerse !== nextProps.currentVerse,
- // this.props.line !== nextProps.line,
- // this.props.isPlaying !== nextProps.isPlaying
- // ];
- //
- // console.log(conditions, conditions.some(condition => condition));
- //
- // return conditions.some(condition => condition);
- // }
-
- renderText() {
- const {
- tooltip,
- currentVerse,
- audioActions,
- isPlaying,
- line,
- useTextFont
- } = this.props;
-
- // NOTE: Some 'word's are glyphs (jeem). Not words and should not be clicked for audio
- let wordAudioPosition = -1;
-
- const text = line.map((word) => ( // eslint-disable-line
- {
+ public static propTypes = propTypes;
+ public static defaultProps = defaultProps;
+
+ readonly state: State = {
+ currentLocale: config('defaultLocale'),
+ };
+
+ componentDidMount() {
+ if (__CLIENT__) {
+ // TODO: This should be passed in as a prop!
+ this.setState({
+ currentLocale: cookie.load('currentLocale') || config('defaultLocale'),
+ });
+ }
+ }
+
+ handleLocaleClick(locale: string) {
+ const expireDate = new Date();
+
+ expireDate.setFullYear(expireDate.getFullYear() + 1);
+
+ this.setState({ currentLocale: locale });
+
+ cookie.save('currentLocale', locale, {
+ path: '/',
+ expires: new Date(expireDate),
+ });
+
+ window.location.reload();
+ }
+
+ renderList() {
+ const { currentLocale } = this.state;
+ const keys = Object.keys(config('locales'));
+
+ return keys.map(key => (
+
+ ));
+ }
+
+ renderAsDropdown() {
+ const { className } = this.props;
+ const { currentLocale } = this.state;
+
+ return (
+
+ {this.renderList()}
+
+ );
+ }
+
+ renderAsMenu() {
+ return (
+ }
+ menu={}
+ >
+
- {this.renderList()}
-
- );
- }
-}
-
-LocaleSwitcher.propTypes = {
- className: PropTypes.string
-};
-
-export default LocaleSwitcher;
diff --git a/src/components/LocaleSwitcher/style.scss b/src/components/LocaleSwitcher/style.scss
deleted file mode 100644
index bcaf01b53..000000000
--- a/src/components/LocaleSwitcher/style.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.local-switcher{
- color: red;
-}
-
-.local-switch-link-active{
- color: #2CA4AB;
-}
diff --git a/src/components/MobileLanding.tsx b/src/components/MobileLanding.tsx
new file mode 100644
index 000000000..deade7453
--- /dev/null
+++ b/src/components/MobileLanding.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import Button from 'react-bootstrap/lib/Button';
+import styled from 'styled-components';
+import Title from './dls/Title';
+
+import makeHeadTags from '../helpers/makeHelmetTags';
+
+const apple = require('../../static/images/apple-white.svg');
+const play = require('../../static/images/play-store.svg');
+const phones = require('../../static/images/mockup-desktop@2x.png');
+
+const title = 'Quran Android and iOS apps by Quran.com';
+const description =
+ 'From the makers of Quran.com comes Quran ' +
+ 'for iOS and Android, a beautiful, and ad-free mushaf app';
+
+const Container = styled.div`
+ min-height: 500px;
+ min-height: 100vh;
+ padding-top: 15%;
+
+ & + footer {
+ margin-top: 0;
+ }
+`;
+
+const StyledButton = styled(Button)`
+ border-radius: 50px;
+
+ @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+ &:last-child {
+ margin-top: 15px;
+ }
+ }
+`;
+
+// TODO: Translations
+const MobileLanding: React.SFC = () => (
+
+
+);
+
+export default MobileLanding;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 000000000..666ae4f2a
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,126 @@
+/* global window */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import DlsNavbar from './dls/navbar/Navbar';
+import Nav from './dls/navbar/Nav';
+import LocaleSwitcher from './LocaleSwitcher';
+import { NAVBAR_EVENTS } from '../events';
+import NavLogo from '../../static/images/logo-nav.png';
+import nightNavLogo from '../../static/images/logo-lg-w.png';
+
+type Props = {
+ isStatic?: boolean;
+ isNightMode: boolean;
+ location: $TsFixMe;
+};
+
+class Navbar extends Component {
+ public static propTypes = {
+ isStatic: PropTypes.bool,
+ location: PropTypes.object.isRequired,
+ isNightMode: PropTypes.bool,
+ };
+
+ public static defaultProps = {
+ isStatic: true,
+ };
+
+ state = {
+ scrolled: false,
+ };
+
+ componentDidMount() {
+ window.addEventListener('scroll', this.handleNavbar, true);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('scroll', this.handleNavbar, true);
+ }
+
+ isHome() {
+ const { location } = this.props;
+
+ if (location) {
+ return location.pathname === '/';
+ }
+
+ return true;
+ }
+
+ handleNavbar = () => {
+ const { isStatic } = this.props;
+ const { scrolled } = this.state;
+
+ if (window.pageYOffset > 50) {
+ if (!scrolled && !isStatic) {
+ this.setState({ scrolled: true });
+ }
+ } else if (scrolled) {
+ this.setState({ scrolled: false });
+ }
+
+ return false;
+ };
+
+ render() {
+ const { isStatic, isNightMode } = this.props;
+ const { scrolled } = this.state;
+
+ return (
+
+
+ );
+ }
+}
+
+export default Navbar;
diff --git a/src/components/Navbars.tsx b/src/components/Navbars.tsx
new file mode 100644
index 000000000..a6c22c6f5
--- /dev/null
+++ b/src/components/Navbars.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Switch, Route } from 'react-router';
+
+import navbars from '../navbars';
+import Navbar from '../containers/NavbarContainer';
+
+const Navbars: React.SFC = () => (
+
+ {navbars.map(({ component: Component, ...route }: $TsFixMe) => (
+
+);
+
+export default Navbars;
diff --git a/src/components/NoScript.tsx b/src/components/NoScript.tsx
new file mode 100644
index 000000000..c547f33e9
--- /dev/null
+++ b/src/components/NoScript.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import T, { KEYS } from './T';
+
+const NoScriptWarning = styled.div`
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 1201;
+ text-align: center;
+ color: #fff;
+ background-color: #ae0000;
+ padding: 5px 0 5px 0;
+`;
+
+const NoScript: React.SFC = () => (
+
+);
+
+export default NoScript;
diff --git a/src/components/NoScript/index.js b/src/components/NoScript/index.js
deleted file mode 100644
index 54754e966..000000000
--- a/src/components/NoScript/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom/server';
-
-const NoScript = (props) => {
- const staticMarkup = ReactDOM.renderToStaticMarkup(props.children);
- return ;
-};
-
-NoScript.propTypes = {
- children: PropTypes.element
-};
-
-export default NoScript;
diff --git a/src/components/NoScript/style.scss b/src/components/NoScript/style.scss
deleted file mode 100644
index edd0d5113..000000000
--- a/src/components/NoScript/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.noscript_warning {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 1201;
- text-align: center;
- color: #FFF;
- background-color: #AE0000;
- padding: 5px 0 5px 0;
-}
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 000000000..15a047ee2
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import RouterStatus from './RouterStatus';
+import T, { KEYS } from './T';
+import Jumbotron from './Jumbotron';
+
+const Container = styled.div`
+ padding: 20vh 0;
+`;
+
+const NotFound = () => (
+
+
+);
+
+export default NotFound;
diff --git a/src/components/PageBreak/index.js b/src/components/PageBreak.tsx
similarity index 57%
rename from src/components/PageBreak/index.js
rename to src/components/PageBreak.tsx
index 634dde62f..d175ec0c3 100644
--- a/src/components/PageBreak/index.js
+++ b/src/components/PageBreak.tsx
@@ -1,6 +1,11 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
-const PageBreak = ({ pageNum }) => (
+type Props = {
+ pageNum: number | string,
+};
+
+const PageBreak: React.SFC = ({ pageNum }: Props) => (
@@ -10,7 +15,7 @@ const PageBreak = ({ pageNum }) => ( ); PageBreak.propTypes = { - pageNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired + pageNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, }; export default PageBreak; diff --git a/src/components/PageBreak/spec.js b/src/components/PageBreak/spec.js deleted file mode 100644 index d69664e46..000000000 --- a/src/components/PageBreak/spec.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import PageBreak from './index'; - -let wrapper; -const pageNum = 15; - -describe(' = ({ code, children }: Props) => (
+ {
+ if (staticContext) {
+ // eslint-disable-next-line
+ staticContext.status = code;
+ }
+
+ return children;
+ }}
+ />
+);
+
+Status.propTypes = propTypes;
+
+export default Status;
diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx
new file mode 100644
index 000000000..20d304275
--- /dev/null
+++ b/src/components/Routes.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Switch, Route } from 'react-router';
+
+import routes from '../routes';
+import NotFound from './NotFound';
+
+const defaultSetContext = (context: any) => ({
+ ...context,
+ status: 200,
+});
+
+const Routes: React.SFC = () => (
+
+ {routes.map(({ component: Component, setContext, ...route }: $TsFixMe) => (
+ {
+ if (staticContext) {
+ const contextFunction = setContext || defaultSetContext;
+
+ Object.assign(staticContext, contextFunction(staticContext));
+ }
+
+ return
+);
+
+export default Routes;
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
new file mode 100644
index 000000000..2b5184b9a
--- /dev/null
+++ b/src/components/Search.tsx
@@ -0,0 +1,275 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import qs from 'qs';
+import { PropTypes as MetricsPropTypes } from 'react-metrics';
+import Helmet from 'react-helmet';
+import ReactPaginate from 'react-paginate';
+import Loader from 'quran-components/lib/Loader';
+import { FormattedHTMLMessage } from 'react-intl';
+import { History, Location } from 'history';
+import Jumbotron from './Jumbotron';
+import VerseContainer from '../containers/VerseContainer';
+import T, { KEYS } from './T';
+import { VerseShape } from '../shapes';
+import SettingsShape from '../shapes/SettingsShape';
+import { FetchSearch } from '../redux/actions/search';
+
+const Header = styled.div`
+ background-color: #e7e6e6;
+ min-height: 50px;
+ padding: 15px 0;
+ color: #414141;
+ font-weight: 400;
+
+ .pagination {
+ margin: 0;
+
+ & > li:first-child > a,
+ & > li:last-child > a {
+ font-size: 14px;
+
+ &.disabled {
+ opacity: 0.5;
+ }
+ }
+
+ & > li {
+ &.active {
+ a {
+ color: $brand-primary;
+ }
+ }
+
+ &.disabled {
+ opacity: 0.5;
+ }
+ }
+
+ & > li > a {
+ background: transparent;
+ border: none;
+ color: #414141;
+ float: initial;
+ padding: 6px 18px;
+ font-weight: 300;
+ font-size: 14px;
+
+ &:hover,
+ &:focus {
+ background: initial;
+ }
+
+ i {
+ font-size: 12px;
+ }
+ }
+
+ .selected a {
+ color: ${({ theme }) => theme.brandPrimary};
+ }
+
+ @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+ padding-top: 5px;
+ }
+ }
+`;
+
+const propTypes = {
+ isErrored: PropTypes.bool.isRequired,
+ isLoading: PropTypes.bool.isRequired,
+ totalCount: PropTypes.number.isRequired,
+ totalPages: PropTypes.number.isRequired,
+ currentPage: PropTypes.number.isRequired,
+ perPage: PropTypes.number.isRequired,
+ query: PropTypes.string.isRequired,
+ entities: PropTypes.arrayOf(VerseShape),
+ history: PropTypes.object.isRequired,
+ location: PropTypes.shape({
+ search: PropTypes.string.isRequired,
+ }).isRequired,
+ settings: SettingsShape.isRequired,
+ fetchSearch: PropTypes.func.isRequired,
+};
+
+const defaultProps: { entities: Array } = {
+ entities: [],
+};
+
+const contextTypes = {
+ metrics: MetricsPropTypes.metrics,
+};
+
+type Props = {
+ isErrored: boolean;
+ isLoading: boolean;
+ totalCount: number;
+ totalPages: number;
+ currentPage: number;
+ perPage: number;
+ query: string;
+ entities: Array;
+ location: Location;
+ settings: SettingsShape;
+ fetchSearch: FetchSearch;
+ history: History;
+};
+
+class Search extends Component {
+ static propTypes = propTypes;
+
+ static defaultProps = defaultProps;
+
+ static contextTypes = contextTypes;
+
+ bootstrap() {
+ const { fetchSearch, location } = this.props;
+
+ const query = qs.parse(location.search);
+
+ return fetchSearch(query.query || query.q);
+ }
+
+ handlePageChange = (payload: $TsFixMe) => {
+ const {
+ history: { push },
+ query,
+ currentPage,
+ } = this.props;
+ const { metrics } = this.context;
+
+ const selectedPage = payload.selected + 1;
+
+ if (currentPage !== selectedPage) {
+ metrics.track('Search', {
+ action: 'paginate',
+ label: `${query} - ${selectedPage}`,
+ });
+
+ return push({
+ pathname: '/search',
+ search: '{ p: selectedPage, q: query }',
+ });
+ }
+
+ return true;
+ };
+
+ renderStatsBar() {
+ const { totalCount, totalPages, currentPage, query, perPage } = this.props;
+ const from = Math.max(...[(currentPage - 1) * perPage, 1]);
+ const to = Math.min(...[currentPage * perPage, totalCount]);
+ const values = { from, to, query, total: totalCount };
+
+ if (totalPages) {
+ return (
+
+
+ );
+ }
+
+ return false;
+ }
+
+ renderBody() {
+ const {
+ isErrored,
+ isLoading,
+ entities,
+ location: { search },
+ } = this.props;
+
+ const query = qs.parse(search);
+
+ if (!query || !query.q) {
+ return (
+
+
+ );
+ }
+
+ if (isErrored) {
+ return (
+
+
+ );
+ }
+
+ if (isLoading) {
+ return
+
+ );
+ }
+
+ return entities.map(verse => (
+ ;
+ lang?: string;
+};
+
+class SearchAutocomplete extends Component {
+ static propTypes = propTypes;
+ static defaultProps = defaultProps;
+
+ componentDidUpdate(prevProps: Props) {
+ const { value } = this.props;
+
+ if (value !== prevProps.value) {
+ return this.fetchSuggest();
+ }
+
+ return null;
+ }
+
+ fetchSuggest = debounce(() => {
+ const { fetchSuggest, value, lang } = this.props;
+
+ if (!value || verseRegex.test(value)) return null;
+
+ return fetchSuggest(value, lang);
+ }, 500);
+
+ getSuggestions() {
+ const { value, suggestions } = this.props;
+
+ const chapterSuggestions = this.getChapterSuggestions(value);
+
+ if (chapterSuggestions) {
+ return [...suggestions, ...chapterSuggestions];
+ }
+
+ return suggestions;
+ }
+
+ getChapterSuggestions = (value: string) => {
+ const { chapters } = this.props;
+
+ const matches: $TsFixMe = [];
+
+ if (!value) return matches;
+
+ const isVerseKeySearch = verseRegex.test(value);
+
+ if (isVerseKeySearch) {
+ const captures = value.match(verseRegex);
+
+ if (captures) {
+ const chapterId = captures[1];
+ const ayahNum = captures[2];
+ const chapter = chapters[chapterId];
+
+ matches.push([
+ chapter.nameSimple,
+ chapter.chapterNumber + (ayahNum ? `/${ayahNum}` : ''),
+ ]);
+ }
+ } else if (value.length >= 2) {
+ const escaped = value.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
+
+ Object.keys(chapters).forEach(chapterId => {
+ const chapter = chapters[chapterId];
+
+ if (
+ RegExp(escaped, 'i').test(chapter.nameSimple.replace(/['-]/g, ''))
+ ) {
+ matches.push([chapter.nameSimple, chapter.chapterNumber]);
+ } else if (RegExp(escaped, 'i').test(chapter.nameArabic)) {
+ matches.push([chapter.nameArabic, chapter.chapterNumber]);
+ }
+ });
+ }
+
+ return matches
+ .map((match: Array) => ({
+ text: `${match[0]}`,
+ href: `/${match[1]}`,
+ }))
+ .slice(0, 5);
+ };
+
+ render() {
+ const suggestions = this.getSuggestions();
+ const hasSuggestions = !!suggestions.length;
+
+ return (
+
+
+ );
+ }
+}
+
+export default SearchAutocomplete;
diff --git a/src/components/SearchAutocomplete/index.js b/src/components/SearchAutocomplete/index.js
deleted file mode 100644
index 1392cf8b1..000000000
--- a/src/components/SearchAutocomplete/index.js
+++ /dev/null
@@ -1,219 +0,0 @@
-// TODO: Should be handled by redux and not component states.
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import { connect } from 'react-redux';
-import { push } from 'react-router-redux';
-import { suggest } from 'redux/actions/suggest';
-
-const styles = require('./style.scss');
-
-const ayahRegex = /^(\d+)(?::(\d+))?$/;
-
-class SearchAutocomplete extends Component {
-
- componentDidMount() {
- this.props.input.addEventListener('keydown', this.handleInputKeyDown.bind(this));
- }
-
- componentWillReceiveProps(nextProps) {
- if (this.props.value !== nextProps.value) {
- if (this.timer) {
- clearTimeout(this.timer);
- }
-
- this.timer = setTimeout(() => {
- this.suggest(nextProps.value);
- }, this.props.delay);
- }
-
- return false;
- }
-
- getSuggestions() {
- let suggestions = this.getSurahSuggestions(this.props.value);
-
- if (this.props.suggestions) {
- suggestions = suggestions.concat(this.props.suggestions);
- }
-
- return suggestions;
- }
-
- getSurahSuggestions = (value) => {
- const matches = [];
-
- if (!value) return matches;
-
- const isverseKeySearch = ayahRegex.test(value);
-
- if (isverseKeySearch) {
- const captures = value.match(ayahRegex);
- const chapterId = captures[1];
- const ayahNum = captures[2];
- const chapter = this.props.chapters[chapterId];
- matches.push([chapter.nameSimple, chapter.chapterNumber + (ayahNum ? `/${ayahNum}` : '')]);
- } else if (value.length >= 2) {
- const escaped = value.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-
- Object.keys(this.props.chapters).forEach((chapterId) => {
- const chapter = this.props.chapters[chapterId];
- if (RegExp(escaped, 'i').test(chapter.nameSimple.replace(/['-]/g, ''))) {
- matches.push([chapter.nameSimple, chapter.chapterNumber]);
- } else if (RegExp(escaped, 'i').test(chapter.nameArabic)) {
- matches.push([chapter.nameArabic, chapter.chapterNumber]);
- }
- });
- }
-
- return matches.map(match => ({
- text: `${match[0]}`,
- href: `/${match[1]}`
- })).slice(0, 5);
- }
-
- suggest = (query) => {
- const { lang } = this.props;
-
- if (!query || ayahRegex.test(query)) return false;
-
- return this.props.suggest(query, lang);
- }
-
- handleInputKeyDown = (event) => {
- if (!(event.keyCode === 9 || event.keyCode === 40 || event.keyCode === 27)) {
- return;
- }
-
- const items = this.menu.getElementsByTagName('li');
-
- if (!items.length) {
- return;
- }
-
- switch (event.keyCode) {
- case 9: // tab
- items[0].focus();
- break;
- case 27: // escape
- // TODO if open closeMenu()
- break;
- case 40: // down
- items[0].focus();
- break;
- default:
- return;
- }
- event.preventDefault();
- }
-
- handleItemKeyDown(event, item) {
- const items = this.menu.getElementsByTagName('li');
-
- if (!items.length) {
- return;
- }
-
- switch (event.keyCode) {
- case 9: // tab
- return;
- case 13: // enter
- this.props.push(item.href); // change url
- break;
- case 27: // escape
- // TODO if open closeMenu()
- break;
- case 38: // up
- if (event.target === items[0]) { // we're on the first item, so focus the input
- this.props.input.focus();
- } else {
- event.target.previousSibling.focus();
- }
- break;
- case 40: // down
- if (event.target === items[items.length - 1]) {
- items[0].focus();
- } else {
- event.target.nextSibling.focus();
- }
- break;
- default:
- return;
- }
- event.preventDefault();
- }
-
- renderList() {
- if (!this.getSuggestions().length) {
- return false;
- }
-
- return this.getSuggestions().map(item => (
- this.handleItemKeyDown(event, item)}
- >
-
- ));
- }
-
- render() {
- return (
- {
+ static propTypes = propTypes;
+ static defaultProps = defaultProps;
+ static contextTypes = contextTypes;
+
+ readonly state: State = {
+ value: '',
+ showAutocomplete: false,
+ };
+
+ handleSearch = (value: string) => {
+ const {
+ history: { push },
+ } = this.props;
+ const { metrics } = this.context;
+
+ let verse;
+ let chapter;
+ const pattern = new RegExp(shortcutSearch);
+
+ if (pattern.test(value)) {
+ chapter = toNumber(value.split(splitSearch)[0]);
+ verse = toNumber(value.split(splitSearch)[1]);
+
+ if (isNaN(verse)) {
+ verse = 1;
+ }
+
+ metrics.track('Search', {
+ action: 'chapter',
+ label: `/${chapter}/${verse}-${verse + 10}`,
+ });
+
+ return push(`/${chapter}/${verse}-${verse + 10}`);
+ }
+
+ metrics.track('Search', {
+ action: 'query',
+ label: value,
+ });
+
+ this.handleHideAutocomplete();
+
+ return push(`/search?q=${value}`);
+ };
+
+ handleKeyUp = (event: $TsFixMe) => {
+ if (
+ event.key === 'Enter' ||
+ event.keyCode === 13 ||
+ event.type === 'click'
+ ) {
+ const value = event.target.value.trim();
+
+ this.handleSearch(value);
+ }
+
+ this.setState({ value: event.target.value.trim() });
+
+ return null;
+ };
+
+ handleButtonClick = () => {
+ const { value } = this.state;
+
+ this.handleSearch(value);
+ };
+
+ handleInputFocus = () => this.setState({ showAutocomplete: true });
+
+ handleHideAutocomplete = () => this.setState({ showAutocomplete: false });
+
+ render() {
+ const { showAutocomplete, value } = this.state;
+ const { className } = this.props;
+
+ return (
+
+
+ );
+ }
+}
+
+export default withRouter(SearchInput);
diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js
deleted file mode 100644
index df9885d4a..000000000
--- a/src/components/SearchInput/index.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import { PropTypes as MetricsPropTypes } from 'react-metrics';
-import { push } from 'react-router-redux';
-import { connect } from 'react-redux';
-import { intlShape, injectIntl } from 'react-intl';
-
-import SearchAutocomplete from 'components/SearchAutocomplete';
-
-import debug from 'helpers/debug';
-
-class SearchInput extends Component {
-
- static contextTypes = {
- metrics: MetricsPropTypes.metrics
- };
-
- state = {
- value: '',
- showAutocomplete: false
- };
-
- search = (event) => {
- const arabic = new RegExp(/[\u0600-\u06FF]/);
- const shortcutSearch = /\d[\.,\:,\,,\\,//]/g; // eslint-disable-line no-useless-escape
- const splitSearch = /[\.,\:,\,,\\,//]/g; // eslint-disable-line no-useless-escape
-
- if (event.key === 'Enter' || event.keyCode === 13 || event.type === 'click') {
- const inputEl = this.input;
- const searching = inputEl.value.trim();
- let ayah;
- let surah;
-
- // prevent search function while search input field is empty
- if (searching === '') {
- // reset input to display "Search" placeholder text
- inputEl.value = '';
- return false;
- }
-
- const pattern = new RegExp(shortcutSearch);
-
- if (pattern.test(searching)) {
- surah = parseInt(
- searching.split(splitSearch)[0],
- 10
- );
- ayah = parseInt(
- searching.split(splitSearch)[1],
- 10
- );
-
- if (isNaN(ayah)) {
- ayah = 1;
- }
-
- this.context.metrics.track('Search', {
- action: 'surah',
- label: `/${surah}/${ayah}-${(ayah + 10)}`
- });
-
- return this.props.push(`/${surah}/${ayah}-${(ayah + 10)}`);
- }
-
- this.context.metrics.track('Search', {
- action: 'query',
- label: searching
- });
-
- return this.props.push(`/search?q=${searching}`);
- }
-
- // This checks to see if the user is typing Arabic
- // and adjusts the text-align.
- if (arabic.test(event.target.value)) {
- event.target.style.textAlign = 'right'; // eslint-disable-line no-param-reassign
- } else {
- event.target.style.textAlign = 'left'; // eslint-disable-line no-param-reassign
- }
-
- if (this.input) {
- this.setState({ value: this.input.value.trim() });
- }
-
- return false;
- }
-
- render() {
- const { showAutocomplete } = this.state;
- const { className, intl } = this.props;
- const placeholder = intl.formatMessage({ id: 'search.placeholder', defaultMessage: 'Search' });
-
- debug('component:SearchInput', 'Render');
-
- return (
- {
+ static propTypes = propTypes;
+
+ handleSettingChange = (payload: $TsFixMe) => {
+ const { chapter, setSetting, settings, fetchVerses, verses } = this.props;
+
+ setSetting(payload);
+
+ if (chapter) {
+ const from = Object.values(verses)[0].verseNumber;
+ const lastVerse: VerseShape | undefined = last(Object.values(verses));
+ const to = lastVerse && lastVerse.verseNumber;
+ const paging = { offset: from - 1, limit: to ? to - from + 1 : 10 };
+
+ fetchVerses(
+ chapter.chapterNumber,
+ paging,
+ {
+ ...settings,
+ ...payload,
+ },
+ settings
+ );
+ }
+ };
+
+ render() {
+ const { setSetting, settings } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+export default Settings;
diff --git a/src/components/SettingsModal/index.js b/src/components/SettingsModal/index.js
deleted file mode 100644
index 2b8114410..000000000
--- a/src/components/SettingsModal/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { PropTypes } from 'react';
-import * as customProptypes from 'customPropTypes';
-import { connect } from 'react-redux';
-import Modal from 'react-bootstrap/lib/Modal';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import ReciterDropdown from 'components/ReciterDropdown';
-import ContentDropdown from 'components/ContentDropdown';
-import TooltipDropdown from 'components/TooltipDropdown';
-import { setOption } from 'redux/actions/options.js';
-import { load } from 'redux/actions/verses.js';
-
-const ModalHeader = Modal.Header;
-const ModalTitle = Modal.Title;
-const ModalBody = Modal.Body;
-
-const SettingsModal = ({
- chapter,
- ayahIds,
- open,
- handleHide,
- options,
- setOption, // eslint-disable-line no-shadow
- load // eslint-disable-line no-shadow
-}) => {
- const handleOptionChange = (payload) => {
- setOption(payload);
-
- if (chapter) {
- const first = [...ayahIds][0];
- const last = [...ayahIds][[...ayahIds].length - 1];
- load(chapter.chapterNumber, first, last, { ...options, ...payload });
- }
- };
-
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-SettingsModal.propTypes = {
- chapter: customProptypes.surahType,
- ayahIds: PropTypes.instanceOf(Set),
- open: PropTypes.bool,
- handleHide: PropTypes.func.isRequired,
- options: customProptypes.optionsType,
- setOption: PropTypes.func.isRequired,
- load: PropTypes.func.isRequired,
-};
-
-SettingsModal.defaultProps = {
- open: false
-};
-
-export default connect(state => ({
- options: state.options
-}), { setOption, load })(SettingsModal);
diff --git a/src/components/Share.tsx b/src/components/Share.tsx
new file mode 100644
index 000000000..8b7586c6c
--- /dev/null
+++ b/src/components/Share.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import {
+ FacebookShareButton,
+ FacebookIcon,
+ TwitterShareButton,
+ TwitterIcon,
+} from 'react-share';
+import styled, { css } from 'styled-components';
+import PropTypes from 'prop-types';
+import { ChapterShape, VerseShape } from '../shapes';
+
+const inlineStyle = css`
+ display: inline-flex;
+`;
+
+const Container = styled.div<{ inline?: boolean }>`
+ position: relative;
+ top: 7px;
+ display: block;
+
+ ${prop => prop.inline && inlineStyle} .social-icon {
+ &:hover {
+ cursor: pointer;
+ opacity: 0.8;
+ }
+ }
+`;
+
+const FacebookButton = styled(FacebookShareButton)`
+ background-repeat: no-repeat;
+ background-size: 12px;
+ padding-top: 1px;
+ display: inline-block;
+ padding-right: 8px;
+`;
+
+const TwitterButton = styled(TwitterShareButton)`
+ background-repeat: no-repeat;
+ background-size: 21px;
+ display: inline-block;
+`;
+
+type Props = {
+ chapter: ChapterShape;
+ verse?: VerseShape;
+ inline?: boolean;
+};
+
+const Share: React.SFC = ({ chapter, verse, inline }: Props) => {
+ // Fallback to Surah Id
+ let path;
+
+ if (verse) {
+ const translations = (verse.translations || [])
+ .map(translation => translation.resourceId)
+ .join(',');
+ path = `${verse.chapterId}/${
+ verse.verseNumber
+ }?translations=${translations}`;
+ } else {
+ path = chapter.chapterNumber;
+ }
+
+ const shareUrl = `https://quran.com/${path}`;
+ const title = verse
+ ? `Surah ${chapter.nameSimple} [${verse.verseKey}]`
+ : `Surah ${chapter.nameSimple}`;
+ const iconProps = verse ? { iconBgStyle: { fill: '#d1d0d0' } } : {};
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+Share.propTypes = {
+ chapter: ChapterShape.isRequired,
+ verse: VerseShape.isRequired,
+ inline: PropTypes.bool,
+};
+
+Share.defaultProps = {
+ inline: false,
+};
+
+export default Share;
diff --git a/src/components/Share/index.js b/src/components/Share/index.js
deleted file mode 100644
index aefd5f1a7..000000000
--- a/src/components/Share/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { ShareButtons, generateShareIcon } from 'react-share';
-import * as customPropTypes from 'customPropTypes';
-
-const styles = require('./style.scss');
-
-const { FacebookShareButton, TwitterShareButton } = ShareButtons;
-const FacebookIcon = generateShareIcon('facebook');
-const TwitterIcon = generateShareIcon('twitter');
-
-const Share = ({ chapter, verse }) => {
- // Fallback to Surah Id
- let path;
-
- if (verse) {
- const translations = (verse.translations || [])
- .map(translation => translation.resourceId)
- .join(',');
- path = `${verse.chapterId}/${verse.verseNumber}?translations=${translations}`;
- } else {
- path = chapter.chapterNumber;
- }
-
- const shareUrl = `https://quran.com/${path}`;
- const title = verse
- ? `Surah ${chapter.nameSimple} [${verse.verseKey}]`
- : `Surah ${chapter.nameSimple}`;
- const iconProps = verse ? { iconBgStyle: { fill: '#d1d0d0' } } : {};
-
- return (
- {
+ static propTypes = propTypes;
+ static defaultProps = defaultProps;
+
+ state = {
+ settings: {},
+ deviceType: '',
+ appId: '',
+ };
+
+ componentDidMount() {
+ const { force } = this.props;
+
+ if (__CLIENT__ && force) {
+ this.setSettings(force);
+ }
+ }
+
+ setSettings(forceDeviceType: string) {
+ const agent = useragent.parse(window.navigator.userAgent);
+ const osVersion = toNumber(agent.version);
+ let deviceType = '';
+
+ if (forceDeviceType) {
+ deviceType = forceDeviceType;
+ } else if (
+ (agent.isAndroid || agent.isAndroidTablet) &&
+ (agent.isChrome ? osVersion < 44 : true)
+ ) {
+ deviceType = 'android';
+ } else if (
+ (agent.isiPad || agent.isiPhone) &&
+ (agent.isSafari ? osVersion < 6 : true)
+ ) {
+ deviceType = 'ios';
+ }
+
+ this.setState({ deviceType });
+ if (deviceType) {
+ this.setSettingsForDevice(deviceType);
+ }
+ }
+
+ setSettingsForDevice(deviceType: string) {
+ const mixins: { [key: string]: { [key: string]: string | $TsFixMe } } = {
+ ios: {
+ icon: 'app-banner-ios.jpg',
+ appMeta: 'apple-itunes-app',
+ getStoreLink: () => {
+ const { appStoreLanguage } = this.props;
+
+ return `https://itunes.apple.com/${appStoreLanguage}/app/id`;
+ },
+ },
+ android: {
+ icon: 'app-banner-android.png',
+ appMeta: 'google-play-app',
+ getStoreLink: () => 'http://play.google.com/store/apps/details?id=',
+ },
+ };
+
+ if (mixins[deviceType]) {
+ this.setState({
+ settings: mixins[deviceType],
+ appId: this.parseAppId(mixins[deviceType].appMeta),
+ });
+ }
+ }
+
+ parseAppId = (metaName: string) => {
+ const meta = window.document.querySelector(`meta[name="${metaName}"]`);
+
+ if (meta && meta.getAttribute('content')) {
+ const content: $TsFixMe = meta.getAttribute('content');
+
+ return (/app-id=([^\s,]+)/ as $TsFixMe).exec(content)[1];
+ }
+
+ return null;
+ };
+
+ hide = () => {
+ if (window.document && window.document.querySelector('html')) {
+ (window.document.querySelector('html') as Element).classList.remove(
+ 'smartbanner-show'
+ );
+ }
+ };
+
+ show = () => {
+ if (window.document && window.document.querySelector('html')) {
+ (window.document.querySelector('html') as Element).classList.add(
+ 'smartbanner-show'
+ );
+ }
+ };
+
+ close() {
+ const { daysHidden } = this.props;
+
+ if (!daysHidden) return null;
+
+ this.hide();
+
+ let expireDate = new Date();
+ expireDate = new Date(
+ expireDate.setDate(expireDate.getDate() + daysHidden)
+ );
+
+ cookie.save('smartbanner-closed', 'true', {
+ path: '/',
+ expires: expireDate,
+ });
+
+ return null;
+ }
+
+ install() {
+ const { daysReminder } = this.props;
+
+ if (!daysReminder) return null;
+
+ let expireDate = new Date();
+ expireDate = new Date(
+ expireDate.setDate(expireDate.getDate() + daysReminder)
+ );
+
+ this.hide();
+ cookie.save('smartbanner-installed', 'true', {
+ path: '/',
+ expires: expireDate,
+ });
+
+ return null;
+ }
+
+ retrieveInfo() {
+ const { price, storeText } = this.props;
+ const { deviceType, settings, appId } = this.state;
+
+ const link = (settings as $TsFixMe).getStoreLink() + appId;
+ const inStore = `
+ ${(price as StoreTextShape & { [key: string]: string })[deviceType]} - ${
+ (storeText as StoreTextShape & { [key: string]: string })[deviceType]
+ }`;
+ const icon = ICONS[deviceType];
+
+ return {
+ icon,
+ link,
+ inStore,
+ };
+ }
+
+ render() {
+ const { author, title, button } = this.props;
+ const { deviceType, appId } = this.state;
+ // Don't show banner when:
+ // 1) if device isn't iOS or Android
+ // 2) website is loaded in app,
+ // 3) user dismissed banner,
+ // 4) or we have no app id in meta
+
+ if (
+ !deviceType ||
+ cookie.load('smartbanner-closed') ||
+ cookie.load('smartbanner-installed')
+ ) {
+ return null;
+ }
+
+ if (!appId) {
+ return null;
+ }
+
+ this.show();
+
+ const { icon, link, inStore } = this.retrieveInfo();
+ const wrapperClassName = `smartbanner smartbanner-${deviceType}`;
+ const iconStyle = {
+ backgroundImage: `url(${icon})`,
+ };
+
+ return (
+
-
-
- ));
- }
-
- render() {
- const { chapter } = this.props;
-
- return (
- ) => ReactNode;
+};
+
+const { en } = config('localeMessages');
+
+const T: React.SFC = ({
+ id,
+ values,
+ children,
+ intl,
+}: Props & InjectedIntlProps) => (
+
+
+ {children}
+
+
+);
+
+T.propTypes = {
+ id: PropTypes.string.isRequired,
+ intl: intlShape.isRequired,
+ values: PropTypes.object, // eslint-disable-line
+ children: PropTypes.node, // eslint-disable-line
+};
+
+export const KEYS = LOCALE_KEYS;
+
+export default injectIntl(T);
diff --git a/src/components/Tafsir.tsx b/src/components/Tafsir.tsx
new file mode 100644
index 000000000..d5bdfb8b2
--- /dev/null
+++ b/src/components/Tafsir.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import Loader from 'quran-components/lib/Loader';
+import { TafsirShape, VerseShape } from '../shapes';
+
+const propTypes = {
+ tafsir: TafsirShape,
+ verse: VerseShape.isRequired,
+};
+
+const defaultProps = {
+ tafsir: null,
+};
+
+type Props = {
+ tafsir?: TafsirShape | null;
+ verse: VerseShape;
+};
+
+const Tafsir: React.SFC = ({ tafsir, verse }: Props) => {
+ if (!tafsir) {
+ return {
+ public static propTypes = propTypes;
+
+ handleNodeClick = (event: $TsFixMe) => {
+ const { fetchFootNote, verseKey } = this.props;
+
+ if (
+ event.target.nodeName === 'SUP' &&
+ event.target.attributes.foot_note &&
+ fetchFootNote
+ ) {
+ event.preventDefault();
+
+ fetchFootNote({
+ footNoteId: event.target.attributes.foot_note.value,
+ verseKey,
+ });
+ }
+ };
+
+ render() {
+ const { translation, isNightMode } = this.props;
+ const lang = translation.languageName;
+ const isArabic = lang === 'arabic';
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+export default Translation;
diff --git a/src/components/Translation/index.js b/src/components/Translation/index.js
deleted file mode 100644
index 7d948be3f..000000000
--- a/src/components/Translation/index.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable react/prefer-stateless-function */
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import { connect } from 'react-redux';
-import { loadFootNote } from 'redux/actions/footNote';
-
-const styles = require('./style.scss');
-
-class Translation extends Component {
-
- componentDidMount() {
- const { index } = this.props;
- let trans;
-
- if (__CLIENT__) {
- trans = document.getElementById(`trans${index}`).children[1]; // eslint-disable-line no-undef
- trans.addEventListener('click', this.fetchFootNote, true);
- }
- }
-
- componentWillUnmount() {
- // TODO: this is breaking for search! Need to figure out why
- // const { index } = this.props;
- // let trans;
-
- // if (__CLIENT__) {
- // trans = document.getElementById(`trans${index}`).children[1]; // eslint-disable-line
- // trans.removeEventListener('click', this.fetchFootNote, true);
- // }
- }
-
- fetchFootNote = (event) => {
- const { loadFootNote } = this.props; // eslint-disable-line no-shadow
-
- if (event.target.nodeName === 'SUP' && event.target.attributes.foot_note) {
- event.preventDefault();
- loadFootNote(event.target.attributes.foot_note.value);
- }
- }
-
- render() {
- const { translation, index } = this.props;
- const lang = translation.languageName;
- const isArabic = lang === 'arabic';
-
- return (
- {
+ public static propTypes = propTypes;
+
+ public static defaultProps = defaultProps;
+
+ handlePlay = () => {
+ const {
+ isCurrentVersePlaying,
+ verse,
+ pause,
+ setCurrentVerseKey,
+ } = this.props;
+
+ if (isCurrentVersePlaying) {
+ pause();
+ } else {
+ // automatically plays verse (again if paused)
+ setCurrentVerseKey(verse.verseKey, true);
+ }
+ };
+
+ handleTafsirsClick = () => {
+ const { verse, fetchTafsirs } = this.props;
+ // TODO: Fix this
+
+ return fetchTafsirs(verse.chapterId, verse.id, 1);
+ };
+
+ render() {
+ const {
+ verse,
+ footNote,
+ isCurrentVersePlaying,
+ isSearched,
+ chapter,
+ isPdf,
+ fetchFootNote,
+ isNightMode,
+ } = this.props;
+
+ const translations: Array<$TsFixMe> = verse.translations || [];
+
+ return (
+
+
+ );
+ }
+}
+
+export default Verse;
diff --git a/src/components/Verse/index.js b/src/components/Verse/index.js
deleted file mode 100644
index de3d77c60..000000000
--- a/src/components/Verse/index.js
+++ /dev/null
@@ -1,322 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import Link from 'react-router/lib/Link';
-import Element from 'react-scroll/lib/components/Element';
-import Loadable from 'react-loadable';
-import ComponentLoader from 'components/ComponentLoader';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import Word from 'components/Word';
-import Translation from 'components/Translation';
-import debug from 'helpers/debug';
-
-const styles = require('./style.scss');
-
-const Copy = Loadable({
- loader: () => import('components/Copy'),
- LoadingComponent: ComponentLoader
-});
-
-const Share = Loadable({
- loader: () => import('components/Share'),
- LoadingComponent: ComponentLoader
-});
-
-class Verse extends Component {
- shouldComponentUpdate(nextProps) {
- const conditions = [
- this.props.verse !== nextProps.verse,
- this.props.bookmarked !== nextProps.bookmarked,
- this.props.tooltip !== nextProps.tooltip,
- this.props.currentWord !== nextProps.currentWord,
- this.props.iscurrentVerse !== nextProps.iscurrentVerse
- ];
-
- if (this.props.match) {
- conditions.push(this.props.match.length !== nextProps.match.length);
- }
-
- return conditions.some(condition => condition);
- }
-
- handlePlay(verse) {
- const { isPlaying, audioActions, iscurrentVerse } = this.props;
- const { pause, setAyah, play } = audioActions;
-
- if (isPlaying) {
- pause();
- }
-
- if (iscurrentVerse) {
- return;
- }
-
- setAyah(verse.verseKey);
- play();
- }
-
- renderTranslations() {
- const { verse, match } = this.props;
- const array = match || verse.translations || [];
-
- return array.map(translation => (
-
- {this.renderControls()}
-
- );
- }
-}
-
-Verse.propTypes = {
- isSearched: PropTypes.bool,
- verse: customPropTypes.verseType.isRequired,
- chapter: customPropTypes.surahType.isRequired,
- bookmarked: PropTypes.bool, // TODO: Add this for search
- bookmarkActions: customPropTypes.bookmarkActions,
- mediaActions: customPropTypes.mediaActions,
- audioActions: customPropTypes.audioActions,
- match: customPropTypes.match,
- isPlaying: PropTypes.bool,
- isAuthenticated: PropTypes.bool,
- tooltip: PropTypes.string,
- currentWord: PropTypes.number, // gets passed in an integer, null by default
- iscurrentVerse: PropTypes.bool,
- currentVerse: PropTypes.string,
- userAgent: PropTypes.object, // eslint-disable-line
- isPdf: PropTypes.bool
-};
-
-Verse.defaultProps = {
- currentWord: null,
- isSearched: false,
- isPdf: false
-};
-
-export default Verse;
diff --git a/src/components/Verse/spec.js b/src/components/Verse/spec.js
deleted file mode 100644
index 765bd7db8..000000000
--- a/src/components/Verse/spec.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import Ayah from './index';
-import ayah from '../../../tests/fixtures/ayah';
-
-let wrapper;
-
-describe(' {} }} />);
- });
-
- it('should render', () => {
- expect(wrapper).to.be.ok; // eslint-disable-line
- });
-
- it('should have correct ayah number', () => {
- expect(wrapper.find('.label').text()).to.eql(ayah.verseKey);
- });
-
- it('should contain translations', () => {
- expect(wrapper.find('.translation').text()).to.eql(ayah.content[0].resource.name);
- });
-});
diff --git a/src/components/Verse/style.scss b/src/components/Verse/style.scss
deleted file mode 100644
index 505d22c7b..000000000
--- a/src/components/Verse/style.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@import '../../styles/variables';
-@import '../../styles/partials/_tooltip';
-
-.container{
- padding: 2.5% 0%;
- border-bottom: 1px solid rgba($text-muted, 0.5);
-
- .text-info{
- color: $brand-info;
- &:hover{
- color: $brand-primary;
- }
- }
-
- &:hover{
- // background-color: rgba($brand-info, 0.25);
- .toggle-copy{
- visibility: visible;
- }
- }
-
- .toggle-copy{
- visibility: hidden;
- }
-
- .controls{
- a{
- margin-bottom: 15px;
- display: block;
- text-decoration: none;
- font-size: 12px;
- cursor: pointer;
-
- &:focus{
- color: $text-muted;
- }
- }
- .label{
- padding: .65em 1.1em;
- border-radius: 0px;
- display: inline-block;
- margin-bottom: 15px;
- font-weight: 300;
- color: $text-color;
-
- &:hover{
- opacity: 0.7;
- }
- }
-
- @media (max-width: $screen-xs-max) {
- h4,
- a{
- display: inline-block;
- margin: 0px 10px;
- }
-
- h4 {
- margin: 0;
- }
-
- padding: 0;
- }
- }
-}
-
-.font{
- white-space: pre-line;
- color: #000;
- width: 100%;
- overflow-wrap: break-word;
- line-height: 1.5;
- word-break: break-all;
- text-align: right;
- float: left;
-
- b, span{
- border-color: transparent;
- border-width: 0px 0px 1px 0px;
- border-style: solid;
- float: right;
- &.active {
- color: $brand-primary-darker-5;
- border-color: $brand-primary-darker-15;
- }
- }
-
- .line{
- direction: rtl;
- b, span{
- float: none;
- display: inline-block;
- }
- }
-
- b, a{
- font-weight: 100;
- padding: 0px 2px;
- color: #000;
- &:hover{
- color: $brand-primary;
- cursor: help;
- }
- &:focus{
- color: $brand-primary-darker-10;
- outline: none;
- }
- }
-
- p{
- display: block;
- clear: both;
- text-align: right;
- direction: rtl;
- float: right;
- }
-
- @media (max-width: $screen-xs-max) {
- font-size: 300%;
- line-height: 130%;
- }
-}
-
-.translation{
- h4{
- color: $light-green;
- margin-bottom: 5px;
- }
-
- h2{
- margin-top: 5px;
- margin-bottom: 25px;
- }
-}
-
-.word_font{
- line-height: 150%;
-}
-
-.line{
- line-height: 150%;
- display: block;
- width: 100%;
- margin: 0px auto;
-}
diff --git a/src/components/VerseCopy.tsx b/src/components/VerseCopy.tsx
new file mode 100644
index 000000000..de3d34c9c
--- /dev/null
+++ b/src/components/VerseCopy.tsx
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import copyToClipboard from 'copy-to-clipboard';
+import T, { KEYS } from './T';
+
+import { COPY_EVENTS } from '../events';
+import ButtonLink from './dls/ButtonLink';
+
+const propTypes = {
+ text: PropTypes.string.isRequired,
+ verseKey: PropTypes.string.isRequired,
+};
+
+type Props = {
+ text: string;
+ verseKey: string;
+};
+
+type State = {
+ isCopied: boolean;
+};
+
+class VerseCopy extends Component {
+ public static propTypes = propTypes;
+
+ state = {
+ isCopied: false,
+ };
+
+ handleCopy = () => {
+ const { text, verseKey } = this.props;
+
+ copyToClipboard(`${text} - ${verseKey}`);
+ this.setState({ isCopied: true });
+
+ setTimeout(() => this.setState({ isCopied: false }), 1000);
+ };
+
+ render() {
+ const { verseKey } = this.props;
+ const { isCopied } = this.state;
+
+ return (
+
+ {' '}
+
+ );
+ }
+}
+
+export default VerseCopy;
diff --git a/src/components/VersesDropdown.tsx b/src/components/VersesDropdown.tsx
new file mode 100644
index 000000000..96ba009a0
--- /dev/null
+++ b/src/components/VersesDropdown.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import range from 'lodash/range';
+import NavDropdown from 'react-bootstrap/lib/NavDropdown';
+import MenuItem from 'react-bootstrap/lib/MenuItem';
+import { Link } from 'react-scroll';
+import T, { KEYS } from './T';
+import { ChapterShape, VerseShape } from '../shapes';
+
+const StyledDropdown = styled(NavDropdown)`
+ .dropdown-menu {
+ max-height: 400px;
+ max-height: 60vh;
+ overflow-y: scroll;
+ -webkit-overflow-scrolling: touch;
+ overflow-x: hidden;
+ }
+`;
+
+const propTypes = {
+ chapter: ChapterShape.isRequired,
+ onClick: PropTypes.func.isRequired,
+ isReadingMode: PropTypes.bool.isRequired,
+ verses: PropTypes.shape({
+ verseKey: VerseShape,
+ }).isRequired,
+};
+
+type Props = {
+ chapter?: ChapterShape;
+ onClick(verseKey: string): void;
+ isReadingMode: boolean;
+ verses?: { [verseKey: string]: VerseShape };
+};
+
+const VersesDropdown: React.SFC = ({
+ chapter,
+ isReadingMode,
+ onClick,
+ verses,
+}: Props) => {
+ if (!chapter || !verses) return null;
+
+ const title =
+ {array.map(verseKey => {
+ if (verses[verseKey] && !isReadingMode) {
+ return (
+
+ onClick(verseKey)}
+ to={`verse:${verseKey}`}
+ smooth
+ spy
+ offset={-120}
+ activeClass="active"
+ duration={500}
+ className="pointer"
+ >
+ {verseKey}
+
+
+ );
+ }
+
+ return (
+
+ );
+ })}
+
+ );
+};
+
+VersesDropdown.propTypes = propTypes;
+
+export default VersesDropdown;
diff --git a/src/components/VersesDropdown/index.js b/src/components/VersesDropdown/index.js
deleted file mode 100644
index 2c62b61f7..000000000
--- a/src/components/VersesDropdown/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import NavDropdown from 'react-bootstrap/lib/NavDropdown';
-import MenuItem from 'react-bootstrap/lib/MenuItem';
-import { Link } from 'react-scroll';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const style = require('./style.scss');
-
-class VersesDropdown extends Component {
- renderItem = (ayah, index) => {
- const { chapter, loadedVerses, isReadingMode, onClick } = this.props;
- const number = index + 1;
-
- if (loadedVerses.has(number) && !isReadingMode) {
- return (
-
- onClick(number)}
- to={`verse:${chapter.chapterNumber}:${number}`}
- smooth
- spy
- offset={-120}
- activeClass="active"
- duration={500}
- className="pointer"
- >
- {number}
-
-
- );
- }
-
- return (
-
- );
- }
-
- renderMenu() {
- const { chapter } = this.props;
- const array = Array(chapter.versesCount).join().split(',');
-
- return array.map((ayah, index) => this.renderItem(ayah, index));
- }
-
- render() {
- const { className } = this.props;
-
- const title = (
-
- {this.renderMenu()}
-
- );
- }
-}
-
-VersesDropdown.propTypes = {
- loadedVerses: PropTypes.instanceOf(Set).isRequired,
- chapter: customPropTypes.surahType.isRequired, // Set
- onClick: PropTypes.func.isRequired,
- isReadingMode: PropTypes.bool,
- className: PropTypes.string
-};
-
-VersesDropdown.defaultProps = {
- className: ''
-};
-
-export default VersesDropdown;
diff --git a/src/components/VersesDropdown/style.scss b/src/components/VersesDropdown/style.scss
deleted file mode 100644
index f09daeebc..000000000
--- a/src/components/VersesDropdown/style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.dropdown{
- :global(.dropdown-menu){
- max-height: 400px;
- max-height: 60vh;
- overflow-y: scroll;
- -webkit-overflow-scrolling: touch;
- overflow-x: hidden;
- }
-}
diff --git a/src/components/Word.tsx b/src/components/Word.tsx
new file mode 100644
index 000000000..7f8d447ad
--- /dev/null
+++ b/src/components/Word.tsx
@@ -0,0 +1,232 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'react-tippy';
+import pad from 'lodash/pad';
+import styled, { StyledFunction } from 'styled-components';
+import { buildAudioURL } from '../helpers/buildAudio';
+import { WordShape } from '../shapes';
+import { WORD_TYPES } from '../constants';
+import {
+ SetCurrentVerseKey,
+ SetCurrentWord,
+ Pause,
+ PlayCurrentWord,
+} from '../redux/actions/audioplayer';
+
+const WordGlyph = styled.span`
+ -webkit-font-smoothing: antialiased;
+`;
+
+interface WordWrapProps {
+ highlight?: boolean;
+}
+const WordWrapStyled: StyledFunction<
+ WordWrapProps & React.HTMLProps
+> =
+ styled.a;
+const WordWrap = WordWrapStyled`
+ -webkit-font-smoothing: antialiased;
+ float: right;
+ color: ${({ highlight, theme }) =>
+ highlight ? theme.brandPrimary : 'initial'};
+`;
+
+const WordText = styled.i`
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ color: transparent;
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
+`;
+
+const propTypes = {
+ word: WordShape.isRequired,
+ setCurrentWord: PropTypes.func.isRequired,
+ pause: PropTypes.func.isRequired,
+ setCurrentVerseKey: PropTypes.func.isRequired,
+ playCurrentWord: PropTypes.func.isRequired,
+ tooltip: PropTypes.string.isRequired,
+ audioPosition: PropTypes.number,
+ isCurrentVersePlaying: PropTypes.bool.isRequired,
+ isSearched: PropTypes.bool,
+ useTextFont: PropTypes.bool, // tmp change to compare text and code based rendering
+};
+
+type DefaultProps = {
+ audioPosition?: number | undefined;
+ isSearched?: boolean;
+ useTextFont?: boolean;
+ currentVerse?: string | null;
+};
+
+const defaultProps: DefaultProps = {
+ isSearched: false,
+ useTextFont: false,
+ audioPosition: undefined,
+ currentVerse: null,
+};
+
+type Props = {
+ word: WordShape;
+ setCurrentWord: SetCurrentWord;
+ pause: Pause;
+ setCurrentVerseKey: SetCurrentVerseKey;
+ playCurrentWord: PlayCurrentWord;
+ tooltip: 'translation' | 'transliteration';
+ audioPosition?: number;
+ isCurrentVersePlaying: boolean;
+ isSearched?: boolean;
+ useTextFont?: boolean;
+};
+
+class Word extends Component {
+ public static propTypes = propTypes;
+ public static defaultProps = defaultProps;
+
+ timer: number | undefined = undefined;
+
+ getTooltipTitle = () => {
+ const { word, tooltip } = this.props;
+
+ let title = '';
+
+ if (word.charType === WORD_TYPES.CHAR_TYPE_END) {
+ title = `Verse ${word.verseKey.split(':')[1]}`;
+ } else if (word.charType === WORD_TYPES.CHAR_TYPE_WORD) {
+ if (word[tooltip]) {
+ title = (word[tooltip] || {}).text || '';
+ }
+ }
+
+ return title;
+ };
+
+ getLanguageName = () => {
+ const { word, tooltip } = this.props;
+ const content = word[tooltip];
+
+ if (content) {
+ return content.languageName;
+ }
+
+ return '';
+ };
+
+ handleClick = () => {
+ if (this.timer && this.timer < 300) {
+ this.handleSegmentPlay();
+ window.clearTimeout(this.timer);
+ this.timer = undefined;
+ } else {
+ this.timer = window.setTimeout(() => {
+ this.handleWordPlay();
+ window.clearTimeout(this.timer);
+ this.timer = undefined;
+ }, 300);
+ }
+ };
+
+ handleWordPlay = () => {
+ const { word } = this.props;
+
+ if (word.audio) {
+ const audio = new Audio(buildAudioURL(word.audio));
+ audio.play();
+ }
+ };
+
+ handleSegmentPlay = () => {
+ const {
+ word,
+ audioPosition,
+ isSearched,
+ setCurrentWord,
+ pause,
+ setCurrentVerseKey,
+ playCurrentWord,
+ isCurrentVersePlaying,
+ } = this.props;
+
+ if (isSearched || !word.audio) {
+ return;
+ }
+
+ if (isCurrentVersePlaying) {
+ setCurrentWord(word.code);
+ } else {
+ pause();
+ setCurrentVerseKey(word.verseKey);
+ playCurrentWord({ word, position: audioPosition });
+ }
+ };
+
+ render() {
+ const {
+ audioPosition,
+ isCurrentVersePlaying,
+ word,
+ useTextFont,
+ } = this.props;
+
+ let text = '';
+ const { verseKey } = word;
+ const className = `${useTextFont ? 'text-' : ''}${word.className} ${
+ word.charType
+ } ${word.highlight ? word.highlight : ''}`;
+
+ const id = `word-${(verseKey || '').replace(/:/, '-')}-${audioPosition}`;
+
+ if (useTextFont) {
+ if (word.charType === WORD_TYPES.CHAR_TYPE_END) {
+ text = pad(word.verseKey.split(':')[1], 3, '0');
+ } else if (word.textMadani) {
+ text = word.textMadani;
+ }
+ } else {
+ text = word.code;
+ }
+
+ const tooltipText = this.getTooltipTitle();
+ const tooltipHtml = (
+
+
+
+
+ {word.charType === WORD_TYPES.CHAR_TYPE_WORD && (
+
+ )}
+
+ );
+ }
+}
+
+export default Word;
diff --git a/src/components/Word/index.js b/src/components/Word/index.js
deleted file mode 100644
index ed1a36e41..000000000
--- a/src/components/Word/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import bindTooltip from 'utils/bindTooltip';
-import { zeroPad } from 'helpers/StringHelpers';
-
-/* eslint-disable no-unused-vars */
-const CHAR_TYPE_WORD = 'word';
-const CHAR_TYPE_END = 'end';
-const CHAR_TYPE_PAUSE = 'pause';
-const CHAR_TYPE_RUB = 'rub';
-const CHAR_TYPE_SAJDAH = 'sajdah';
-
-class Word extends Component {
- buildTooltip = (word, tooltip) => {
- let title;
-
- if (word.charType === CHAR_TYPE_END) {
- title = `Verse ${word.verseKey.split(':')[1]}`;
- } else if (word.charType === CHAR_TYPE_WORD) {
- title = word[tooltip].text;
- } else {
- title = '';
- }
- return title;
- }
-
- handleWordPlay = () => {
- const { word } = this.props;
-
- if (word.audio) {
- const audio = new Audio(word.audio.url); // eslint-disable-line
-
- audio.play();
- }
- }
-
- handleSegmentPlay = () => {
- const { word, currentVerse, audioActions, audioPosition, isPlaying, isSearched } = this.props;
-
- if (isSearched || !word.audio) {
- return;
- }
-
- if ((currentVerse === word.verseKey) && isPlaying) {
- audioActions.setCurrentWord(word.code);
- } else {
- audioActions.pause();
- audioActions.setAyah(word.verseKey);
- audioActions.playCurrentWord({ word, position: audioPosition });
- }
- }
-
- render() {
- const { tooltip, word, currentVerse, isPlaying, audioPosition, useTextFont } = this.props;
-
- let text;
- let spacer;
- const highlight = currentVerse === word.verseKey && isPlaying ? 'highlight' : '';
- const className = `${useTextFont ? 'text-' : ''}${word.className} ${word.charType} ${highlight} ${word.highlight ? word.highlight : ''}`;
- const id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition}`;
-
- if (useTextFont) {
- if (word.charType === CHAR_TYPE_END) {
- text = zeroPad(word.verseKey.split(':')[1], 3, 0);
- } else {
- text = word.textMadani;
- }
- } else {
- text = word.code;
- }
-
- if (word.charType === CHAR_TYPE_WORD) {
- spacer = ' ';
- }
-
- return (
-
-
-
-
- );
- }
-}
-
-Word.propTypes = {
- word: PropTypes.object.isRequired, // eslint-disable-line
- tooltip: PropTypes.string,
- audioActions: PropTypes.object.isRequired, // eslint-disable-line
- audioPosition: PropTypes.number,
- currentVerse: PropTypes.string,
- isPlaying: PropTypes.bool,
- isSearched: PropTypes.bool,
- useTextFont: PropTypes.bool // tmp change to compare text and code based rendering
-};
-
-export default Word;
diff --git a/src/components/_tests_/About.test.tsx b/src/components/_tests_/About.test.tsx
new file mode 100644
index 000000000..3f06e5e4d
--- /dev/null
+++ b/src/components/_tests_/About.test.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import About from '../About';
+
+describe(' {
+ beforeEach(() => {
+ getFileMock = (overrides = {}) => ({
+ play: jest.fn(),
+ pause: jest.fn(),
+ setAttribute: jest.fn(),
+ src: sampleSize('abcdefg', 3).join(''),
+ duration: 1000,
+ paused: true,
+ ...overrides,
+ });
+
+ getProps = (overrides = {}) => ({
+ chapter,
+ play: jest.fn(),
+ pause: jest.fn(),
+ setCurrentVerseKey: jest.fn(),
+ update: jest.fn(),
+ setRepeat: jest.fn(),
+ fetchAudio: jest.fn(() => Promise.resolve({})),
+ shouldScroll: false,
+ toggleScroll: jest.fn(),
+ isPlaying: false,
+ audioSetting: 7,
+ repeat: {},
+ files: {
+ '1:1': getFileMock(),
+ '1:2': getFileMock(),
+ },
+ verses: {
+ '1:1': verse,
+ '1:2': getVerse(1, 2),
+ '1:3': getVerse(1, 3),
+ },
+ ...overrides,
+ });
+
+ fileMock = getFileMock();
+ });
+
+ it('renders valid', () => {
+ expect(React.isValidElement( = ({
+ onNextClick,
+ chapter,
+ currentVerseKey,
+}: Props) => {
+ let isEnd = true;
+
+ if (currentVerseKey) {
+ isEnd = chapter.versesCount === toNumber(currentVerseKey.split(':')[1]);
+ }
+
+ return (
+ !isEnd && onNextClick()} disabled={isEnd}>
+
+
+ );
+};
+
+NextButton.propTypes = propTypes;
+NextButton.defaultProps = defaultProps;
+
+export default NextButton;
diff --git a/src/components/audioplayer/PlayStopButton.tsx b/src/components/audioplayer/PlayStopButton.tsx
new file mode 100644
index 000000000..8b43ee02b
--- /dev/null
+++ b/src/components/audioplayer/PlayStopButton.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Loader from 'quran-components/lib/Loader';
+import ControlButton from './ControlButton';
+
+const loaderStyle = {
+ position: 'relative',
+ overflow: 'hidden',
+ width: '32px',
+ height: '32px',
+ margin: '-8px',
+ background: '#ffffff',
+};
+
+const propTypes = {
+ isPlaying: PropTypes.bool.isRequired,
+ onPause: PropTypes.func.isRequired,
+ onPlay: PropTypes.func.isRequired,
+ currentVerseKey: PropTypes.string,
+};
+
+const defaultProps = {
+ currentVerseKey: '',
+};
+
+type Props = {
+ isPlaying: boolean;
+ onPause(): void;
+ onPlay(): void;
+ currentVerseKey?: string;
+};
+
+const PlayStopButton: React.SFC = ({
+ isPlaying,
+ onPause,
+ onPlay,
+ currentVerseKey,
+}: Props) => {
+ const icon = (
+
+ );
+
+ const loader =
+ {currentVerseKey ? icon : loader}
+
+ );
+};
+
+PlayStopButton.propTypes = propTypes;
+PlayStopButton.defaultProps = defaultProps;
+
+export default PlayStopButton;
diff --git a/src/components/audioplayer/Popover.tsx b/src/components/audioplayer/Popover.tsx
new file mode 100644
index 000000000..fa237fff9
--- /dev/null
+++ b/src/components/audioplayer/Popover.tsx
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import BootstrapPopover from 'react-bootstrap/lib/Popover';
+
+const Popover = styled(BootstrapPopover)`
+ .popover-title {
+ text-transform: uppercase;
+ color: ${({ theme }) => theme.brandPrimary};
+ padding-top: 15px;
+ padding-bottom: 15px;
+ font-size: 0.75em;
+ }
+ .popover-content {
+ text-align: center;
+ a {
+ font-size: 0.8em;
+ }
+ }
+`;
+
+export default Popover;
diff --git a/src/components/audioplayer/PreviousButton.tsx b/src/components/audioplayer/PreviousButton.tsx
new file mode 100644
index 000000000..3901a054f
--- /dev/null
+++ b/src/components/audioplayer/PreviousButton.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ControlButton from './ControlButton';
+
+const propTypes = {
+ onPreviousClick: PropTypes.func.isRequired,
+ currentVerseKey: PropTypes.string,
+ files: PropTypes.object.isRequired,
+};
+
+const defaultProps = {
+ currentVerseKey: '',
+};
+
+type Props = {
+ onPreviousClick(): void;
+ currentVerseKey?: string;
+ files: { [key: string]: HTMLAudioElement };
+};
+
+const PreviousButton: React.SFC = ({
+ onPreviousClick,
+ files,
+ currentVerseKey,
+}: Props) => {
+ const index = Object.keys(files).findIndex(id => id === currentVerseKey);
+
+ return (
+ index && onPreviousClick()} disabled={!index}>
+
+
+ );
+};
+
+PreviousButton.propTypes = propTypes;
+PreviousButton.defaultProps = defaultProps;
+
+export default PreviousButton;
diff --git a/src/components/audioplayer/RepeatDropdown.tsx b/src/components/audioplayer/RepeatDropdown.tsx
new file mode 100644
index 000000000..1fc743c8b
--- /dev/null
+++ b/src/components/audioplayer/RepeatDropdown.tsx
@@ -0,0 +1,278 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import toNumber from 'lodash/toNumber';
+import range from 'lodash/range';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Nav from 'react-bootstrap/lib/Nav';
+import NavItem from 'react-bootstrap/lib/NavItem';
+import FormControl from 'react-bootstrap/lib/FormControl';
+import SwitchToggle from 'quran-components/lib/Toggle';
+import T, { KEYS } from '../T';
+
+import ControlButton from './ControlButton';
+import Popover from './Popover';
+import { ChapterShape } from '../../shapes';
+import RepeatShape from '../../shapes/RepeatShape';
+import { SetRepeat } from '../../redux/actions/audioplayer';
+
+const Pill = styled(NavItem)`
+ a {
+ padding: 10px 15px;
+ }
+`;
+
+const disabledCss = css`
+ opacity: 0.5;
+ cursor: not-allowed !important;
+ pointer-events: none;
+`;
+
+const Item = styled.div<{ disabled?: boolean }>`
+ ${({ disabled }) => (disabled ? disabledCss : '')};
+`;
+
+const propTypes = {
+ chapter: ChapterShape.isRequired,
+ repeat: RepeatShape.isRequired,
+ setRepeat: PropTypes.func.isRequired,
+ current: PropTypes.number.isRequired,
+};
+
+type Props = {
+ chapter: ChapterShape;
+ repeat: RepeatShape;
+ setRepeat: SetRepeat;
+ current: number;
+};
+
+class RepeatButton extends Component {
+ static propTypes = propTypes;
+
+ handleToggle = () => {
+ const { repeat, setRepeat, current } = this.props;
+
+ if (repeat.from) {
+ return setRepeat({});
+ }
+
+ return setRepeat({
+ from: current,
+ to: current,
+ });
+ };
+
+ handleNavChange = (nav: number) => {
+ const { setRepeat, current } = this.props;
+
+ if (nav === 1) {
+ // Should set single ayah
+ return setRepeat({
+ from: current,
+ to: current,
+ });
+ }
+
+ return setRepeat({
+ from: current,
+ to: current + 3,
+ });
+ };
+
+ // TODO: PLEASE DON'T DO renderXYZ
+ renderRangeAyahs() {
+ const { chapter, repeat, setRepeat } = this.props;
+ const array = range(chapter.versesCount);
+
+ return (
+
+
+ }
+ >
+ -
+
+ -
+ {repeat.from === repeat.to
+ ? this.renderSingleAyah()
+ : this.renderRangeAyahs()}
+
+ -
+
+
+ );
+
+ return (
+ = ({
+ shouldScroll,
+ onScrollToggle,
+}: Props) => {
+ const tooltip = (
+ = ({
+ segments,
+ currentVerseKey,
+ currentTime,
+}: Props) => {
+ if (!Object.keys(segments).length || !currentTime) return null;
+
+ const style = [];
+ let currentWord: string | null = null;
+
+ Object.keys(segments.words).forEach(wordIndex => {
+ const word = segments.words[wordIndex];
+
+ if (currentTime >= word.startTime && currentTime < word.endTime) {
+ currentWord = `${currentVerseKey}:${wordIndex}`;
+ }
+ });
+
+ if (currentWord) {
+ style.push({
+ cssText: `#word-${(currentWord as string).replace(/:/g, '-')}{
+ color: #279197;
+ border-color: #279197;
+ }`,
+ });
+ } else {
+ console.log('component:Segments', 'render without currentWord');
+ }
+
+ return {
+ public static propTypes = propTypes;
+
+ public container: $TsFixMe = null;
+
+ setContainerRef = (container: $TsFixMe) => {
+ this.container = container;
+ };
+
+ handleClick = (event: React.MouseEvent) => {
+ const { onTrackChange } = this.props;
+
+ const fraction =
+ event.nativeEvent.offsetX / this.container.getBoundingClientRect().width;
+
+ return onTrackChange(fraction);
+ };
+
+ render() {
+ const { progress } = this.props;
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default Track;
diff --git a/src/components/audioplayer/Wrapper.tsx b/src/components/audioplayer/Wrapper.tsx
new file mode 100644
index 000000000..ad7a3c056
--- /dev/null
+++ b/src/components/audioplayer/Wrapper.tsx
@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div<{ isNightMode?: boolean }>`
+ position: fixed;
+ bottom: 0;
+ display: block;
+ user-select: none;
+ height: auto;
+ z-index: 1;
+ padding: 1rem 1rem 0.5rem;
+ background: ${({ theme, isNightMode }) =>
+ isNightMode ? theme.colors.tuatara : theme.colors.white};
+ box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
+ width: 100%;
+
+ .list-inline {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 5px;
+ }
+
+ @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+ bottom: 0;
+ width: 100%;
+ }
+`;
+
+export default Wrapper;
diff --git a/src/components/audioplayer/_tests_/ControlButton.test.tsx b/src/components/audioplayer/_tests_/ControlButton.test.tsx
new file mode 100644
index 000000000..48ace0834
--- /dev/null
+++ b/src/components/audioplayer/_tests_/ControlButton.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ControlButton from '../ControlButton';
+
+const props = {};
+
+describe(' = ({
+ chapter,
+ settings,
+ chapterInfo,
+ verses,
+ params,
+}: Props) => (
+ = ({
+ isSingleVerse,
+ isLoading,
+ isEndOfChapter,
+ chapter,
+ settings,
+ verses,
+ onLazyLoad,
+}: Props) => {
+ const translations = (settings.translations || []).join(',');
+ const verseIds = Object.values(verses).map(
+ (verse: VerseShape) => verse.verseNumber
+ );
+ const firstVerseId: number = verseIds[0];
+
+ // If single verse, eh. /2/30
+ if (isSingleVerse) {
+ const to =
+ firstVerseId + 10 > chapter.versesCount
+ ? chapter.versesCount
+ : firstVerseId + 10;
+
+ return (
+
+ {chapter.chapterNumber > 1 && (
+
+
+ ←
+
+ )}
+
+
+
+ {chapter.chapterNumber < NUMBER_OF_CHAPTERS && (
+
+
+
+ )}
+
+ }
+ loadingComponent={
+ = ({ chapter, verses }: Props) => (
+
+ {Object.values(verses).map((verse: VerseShape) => (
+
+);
+
+ListView.propTypes = propTypes;
+ListView.defaultProps = defaultProps;
+
+export default ListView;
diff --git a/src/components/chapter/PageView.tsx b/src/components/chapter/PageView.tsx
new file mode 100644
index 000000000..c83180a82
--- /dev/null
+++ b/src/components/chapter/PageView.tsx
@@ -0,0 +1,47 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Line from '../Line';
+import PageBreak from '../PageBreak';
+import { LineShape } from '../../shapes';
+
+const propTypes = {
+ lines: PropTypes.objectOf(LineShape),
+};
+
+type Props = {
+ lines?: { [key: string]: LineShape };
+};
+
+type DefaultProps = {
+ lines: { [key: string]: LineShape };
+};
+
+const defaultProps: DefaultProps = {
+ lines: {},
+};
+
+const PageView: React.SFC = ({ lines = {} }: Props) => {
+ const keys = Object.keys(lines);
+ const elements = keys.map((lineNum, index) => {
+ const nextNum = keys[index + 1];
+ const pageNum = lineNum.split('-')[0];
+ const line = lines[lineNum];
+ const renderText = false; // userAgent.isBot;
+
+ if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
+ return [
+ {elements} ;
+};
+
+PageView.propTypes = propTypes;
+PageView.defaultProps = defaultProps;
+
+export default PageView;
diff --git a/src/components/chapter/TopOptions.tsx b/src/components/chapter/TopOptions.tsx
new file mode 100644
index 000000000..8baa7ade7
--- /dev/null
+++ b/src/components/chapter/TopOptions.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Share from '../Share';
+import Title from '../dls/Title';
+import { ChapterShape } from '../../shapes';
+
+const propTypes = {
+ title: PropTypes.string,
+ chapter: ChapterShape.isRequired,
+};
+
+const defaultProps = {
+ title: '',
+};
+
+type Props = {
+ title?: string;
+ chapter: ChapterShape;
+};
+
+const TopOptions: React.SFC = ({ title, chapter }: Props) => (
+ `
+ ${({ brand }) =>
+ brand && brandToTheme[brand] ? `color: ${[brandToTheme[brand]]};` : ''};
+`;
+
+export const alignStyle = css`
+ ${({ align }) => (align ? `text-align: ${align};` : '')};
+`;
+
+const Text = styled.p`
+ color: ${({ theme }) => theme.textColor};
+ font-family: ${({ theme }) => theme.fonts.sourceSans};
+ font-size: 1rem;
+ ${colorStyle};
+ ${alignStyle};
+`;
+
+export default Text;
diff --git a/src/components/dls/Title.tsx b/src/components/dls/Title.tsx
new file mode 100644
index 000000000..798413272
--- /dev/null
+++ b/src/components/dls/Title.tsx
@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import {
+ colorStyle,
+ alignStyle,
+ // eslint-disable-next-line
+ ColorStyleProps,
+ // eslint-disable-next-line
+ AlignStyleProps,
+} from './Text';
+
+type StyledProps = {
+ white?: boolean;
+};
+
+type Props = {
+ level: number;
+ children: ReactNode;
+};
+
+const LEVELS_TO_TAGS: $TsFixMe = {
+ 1: 'h1',
+ 2: 'h2',
+ 3: 'h3',
+ 4: 'h4',
+};
+
+const StyledTitle = styled.h1`
+ color: ${({ theme }: $TsFixMe) => theme.textColor};
+ color: ${({ white, theme }: $TsFixMe) => white && theme.colors.white};
+ ${colorStyle};
+ ${alignStyle};
+`;
+
+const Title: React.SFC<
+ Props & StyledProps & ColorStyleProps & AlignStyleProps
+> = ({ level, ...props }: Props & StyledProps) => {
+ const Component = StyledTitle.withComponent(LEVELS_TO_TAGS[level]);
+
+ return = ({
+ isToggled,
+ onToggle,
+}: Props) => (
+ }
+ onClick={() => onToggle({ isShowingChapterInfo: !isToggled })}
+ >
+ {
+ static propTypes = propTypes;
+
+ handleFontSizeReset = () => {
+ const { onChange } = this.props;
+
+ return onChange({
+ fontSize: {
+ arabic: 3.5,
+ translation: 2,
+ },
+ });
+ };
+
+ handleOptionSelected = (type: string, direction: number) => {
+ const { onChange, fontSize } = this.props;
+ const changeFactor: { [key: string]: number } = {
+ translation: 0.5,
+ arabic: 0.5,
+ };
+
+ return onChange({
+ fontSize: {
+ ...fontSize,
+ [type]:
+ (fontSize as FontSizeSettingShape & { [key: string]: number })[type] +
+ changeFactor[type] * direction,
+ },
+ });
+ };
+
+ render() {
+ return (
+ {
+ static propTypes = propTypes;
- toggleNightMode = () => {
+ handleToggleNightMode = () => {
const { isNightMode, onToggle } = this.props;
if (isNightMode) {
@@ -23,23 +29,18 @@ class NightModeToggle extends Component {
}
onToggle({ isNightMode: !isNightMode });
- }
+ };
render() {
return (
}
- onClick={this.toggleNightMode}
+ onClick={this.handleToggleNightMode}
>
- = ({
+ onToggle,
+ isToggled,
+}: Props) => (
+ }
+ onClick={() => onToggle({ isReadingMode: !isToggled })}
+ >
+ } = {
+ recitationsOptions: [],
+};
+
+type Props = {
+ setSetting: SetSetting;
+ audioSetting: number;
+ fetchReciters: FetchReciters;
+ recitationsOptions: Array;
+};
+
+class ReciterDropdown extends Component {
+ static propTypes = propTypes;
+ static defaultProps = defaultProps;
+
+ componentDidMount() {
+ const { recitationsOptions, fetchReciters } = this.props;
+
+ if (!recitationsOptions.length) {
+ return fetchReciters();
+ }
+
+ return false;
+ }
+
+ render() {
+ const { recitationsOptions, audioSetting, setSetting } = this.props;
+
+ return (
+ }
+ menu={
+
+ }
+ >
+ = ({ tooltip, onChange }: Props) => {
+ const handleOptionChange = (type: 'translation' | 'transliteration') =>
+ onChange({
+ tooltip: type,
+ });
+
+ const list = ['translation', 'transliteration'].map(type => (
+
+ ));
+
+ return (
+ } menu={}>
+ } = {
+ translationOptions: [],
+};
+
+type Props = {
+ setSetting: SetSetting;
+ translationOptions: Array;
+ translationSettings: Array;
+ fetchTranslations: FetchTranslations;
+};
+
+class TranslationsDropdown extends Component {
+ static propTypes = propTypes;
+ static defaultProps = defaultProps;
+
+ componentDidMount() {
+ const { translationOptions, fetchTranslations } = this.props;
+
+ if (!translationOptions.length) {
+ return fetchTranslations();
+ }
+
+ return null;
+ }
+
+ handleRemoveContent = () => {
+ const { setSetting } = this.props;
+
+ setSetting({ translations: [] });
+ };
+
+ handleOptionSelected(id: number) {
+ const { setSetting, translationSettings } = this.props;
+ if (translationSettings.find(option => option === id)) {
+ setSetting({
+ translations: translationSettings.filter(option => option !== id),
+ });
+ } else {
+ setSetting({ translations: [...translationSettings, id] });
+ }
+ }
+
+ renderItems(
+ items: Array,
+ render: (translation: TranslationShape) => string
+ ) {
+ const { translationSettings, translationOptions } = this.props;
+
+ return items.map(translationOption => {
+ const checked = translationSettings.find(
+ translationSetting => translationSetting === translationOption.id
+ );
+ const id = translationOption.id + (translationOption.languageName || '');
+
+ return (
+
+ );
+ });
+ }
+
+ renderEnglishList() {
+ const { translationOptions } = this.props;
+
+ const list = translationOptions
+ .filter(translation => translation.languageName === 'English')
+ .sort(compareAlphabetically('authorName'));
+
+ return this.renderItems(
+ list,
+ (translation: TranslationShape) => translation.authorName || ''
+ );
+ }
+
+ renderLanguagesList() {
+ const { translationOptions } = this.props;
+
+ const list = translationOptions
+ .filter(translation => translation.languageName !== 'English')
+ .sort(compareAlphabetically('languageName'));
+
+ return this.renderItems(
+ list,
+ (translation: TranslationShape) =>
+ `${translation.languageName} - ${translation.authorName}`
+ );
+ }
+
+ render() {
+ return (
+ }
+ menu={
+
+ }
+ >
+ = ({ isSearched, verse }: Props) => {
+ const translations = (verse.translations || [])
+ .map(translation => translation.resourceId)
+ .join(',');
+ let metric;
+
+ const content = (
+ = ({
+ isPdf,
+ isSearched,
+ verse,
+ chapter,
+ isCurrentVersePlaying,
+ onPlayClick,
+ onTafsirsClick,
+}: Props) => (
+
+
+ {' '}
+
+ )}
+ {!isPdf &&
+ !isSearched && (
+
+ {' '}
+
+ {!isSearched && !isPdf &&
+);
+
+Controls.propTypes = propTypes;
+Controls.defaultProps = defaultProps;
+
+export default Controls;
diff --git a/src/components/verse/Text.tsx b/src/components/verse/Text.tsx
new file mode 100644
index 000000000..682f0cbe4
--- /dev/null
+++ b/src/components/verse/Text.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import WordContainer from '../../containers/WordContainer';
+import FontText from '../FontText';
+import JuzMarker from '../JuzMarker';
+import { VerseShape } from '../../shapes';
+import { WORD_TYPES } from '../../constants';
+
+const propTypes = {
+ verse: VerseShape.isRequired,
+ isSearched: PropTypes.bool,
+};
+
+const defaultProps = {
+ isSearched: false,
+};
+
+type Props = {
+ verse: VerseShape;
+ isSearched?: boolean;
+};
+
+const Text: React.SFC = ({ verse, isSearched }: Props) => {
+ // NOTE: Some 'word's are glyphs (jeem). Not words and should not be clicked for audio
+ let wordAudioPosition = -1;
+ const renderText = false; // userAgent.isBot;
+
+ const text = verse.words.map(word => {
+ const audioPosition =
+ word.charType === WORD_TYPES.CHAR_TYPE_WORD
+ ? (wordAudioPosition += 1)
+ : null;
+
+ return (
+
+
+ );
+};
+
+Text.propTypes = propTypes;
+Text.defaultProps = defaultProps;
+
+export default Text;
diff --git a/src/components/verse/_tests_/Badge.test.tsx b/src/components/verse/_tests_/Badge.test.tsx
new file mode 100644
index 000000000..1ef5f221f
--- /dev/null
+++ b/src/components/verse/_tests_/Badge.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Link } from 'react-router-dom';
+import Badge from '../Badge';
+import { getVerse } from '../../../../tests/fixtures/verse';
+
+const verse = getVerse(1, 1);
+
+describe(' } = {
+ /* Find number of juzs in chapters
+ ex. 2:[142, 253] ⇒ in chapter 2 verse 142 is a juz same goes for verse 253
+ Resource obtained from https://wajibad.wordpress.com/2015/11/15/the-30-juz-of-al-quran/ */
+ 1: [1],
+ 2: [142, 253],
+ 3: [92],
+ 4: [24, 148],
+ 5: [82],
+ 6: [111],
+ 7: [88],
+ 8: [41],
+ 9: [93],
+ 11: [6],
+ 12: [53],
+ 15: [1],
+ 17: [1],
+ 18: [75],
+ 21: [1],
+ 23: [1],
+ 25: [22],
+ 27: [56],
+ 29: [46],
+ 33: [31],
+ 36: [28],
+ 39: [32],
+ 41: [47],
+ 46: [1],
+ 51: [31],
+ 58: [1],
+ 67: [1],
+ 78: [1],
+};
+
+export const JUZ_AND_HIZB_ARABIC_NUMBERS = [
+ /* Juz and hizb numbers in arabic ~zero - sixty~ */
+ '٠',
+ '١',
+ '٢',
+ '٣',
+ '٤',
+ '٥',
+ '٦',
+ '٧',
+ '٨',
+ '٩',
+ '١٠',
+ '١١',
+ '١٢',
+ '١٣',
+ '١٤',
+ '١٥',
+ '١٦',
+ '١٧',
+ '١٨',
+ '١٩',
+ '٢٠',
+ '٢١',
+ '٢٢',
+ '٢٣',
+ '٢٤',
+ '٢٥',
+ '٢٦',
+ '٢٧',
+ '٢٨',
+ '٢٩',
+ '٣٠',
+ '٣١',
+ '٣٢',
+ '٣٣',
+ '٣٤',
+ '٣٥',
+ '٣٦',
+ '٣٧',
+ '٣٨',
+ '٣٩',
+ '٤٠',
+ '٤١',
+ '٤٢',
+ '٤٣',
+ '٤٤',
+ '٤٥',
+ '٤٦',
+ '٤٧',
+ '٤٨',
+ '٤٩',
+ '٥٠',
+ '٥١',
+ '٥٢',
+ '٥٣',
+ '٥٤',
+ '٥٥',
+ '٥٦',
+ '٥٧',
+ '٥٨',
+ '٥٩',
+ '٦٠',
+];
+
+export const CHAPTERS_TO_VERSES: { [key: string]: number } = {
+ 1: 7,
+ 2: 286,
+ 3: 200,
+ 4: 176,
+ 5: 120,
+ 6: 165,
+ 7: 206,
+ 8: 75,
+ 9: 129,
+ 10: 109,
+ 11: 123,
+ 12: 111,
+ 13: 43,
+ 14: 52,
+ 15: 99,
+ 16: 128,
+ 17: 111,
+ 18: 110,
+ 19: 98,
+ 20: 135,
+ 21: 112,
+ 22: 78,
+ 23: 118,
+ 24: 64,
+ 25: 77,
+ 26: 227,
+ 27: 93,
+ 28: 88,
+ 29: 69,
+ 30: 60,
+ 31: 34,
+ 32: 30,
+ 33: 73,
+ 34: 54,
+ 35: 45,
+ 36: 83,
+ 37: 182,
+ 38: 88,
+ 39: 75,
+ 40: 85,
+ 41: 54,
+ 42: 53,
+ 43: 89,
+ 44: 59,
+ 45: 37,
+ 46: 35,
+ 47: 38,
+ 48: 29,
+ 49: 18,
+ 50: 45,
+ 51: 60,
+ 52: 49,
+ 53: 62,
+ 54: 55,
+ 55: 78,
+ 56: 96,
+ 57: 29,
+ 58: 22,
+ 59: 24,
+ 60: 13,
+ 61: 14,
+ 62: 11,
+ 63: 11,
+ 64: 18,
+ 65: 12,
+ 66: 12,
+ 67: 30,
+ 68: 52,
+ 69: 52,
+ 70: 44,
+ 71: 28,
+ 72: 28,
+ 73: 20,
+ 74: 56,
+ 75: 40,
+ 76: 31,
+ 77: 50,
+ 78: 40,
+ 79: 46,
+ 80: 42,
+ 81: 29,
+ 82: 19,
+ 83: 36,
+ 84: 25,
+ 85: 22,
+ 86: 17,
+ 87: 19,
+ 88: 26,
+ 89: 30,
+ 90: 20,
+ 91: 15,
+ 92: 21,
+ 93: 11,
+ 94: 8,
+ 95: 8,
+ 96: 19,
+ 97: 5,
+ 98: 8,
+ 99: 8,
+ 100: 11,
+ 101: 11,
+ 102: 8,
+ 103: 3,
+ 104: 9,
+ 105: 5,
+ 106: 4,
+ 107: 7,
+ 108: 3,
+ 109: 6,
+ 110: 3,
+ 111: 5,
+ 112: 4,
+ 113: 5,
+ 114: 6,
+};
+
+export enum WORD_TYPES {
+ CHAR_TYPE_WORD = 'word',
+ CHAR_TYPE_END = 'end',
+ CHAR_TYPE_PAUSE = 'pause',
+ CHAR_TYPE_RUB = 'rub-el-hizb',
+ CHAR_TYPE_SAJDAH = 'sajdah',
+}
+
+export const COOKIE_SETTINGS_KEY = 'options';
+
+export enum HTTP_STATUS_CODES {
+ REDIRECT = 301,
+ BAD_REQUEST = 400,
+}
diff --git a/src/constants/router.ts b/src/constants/router.ts
new file mode 100644
index 000000000..ac258e2c0
--- /dev/null
+++ b/src/constants/router.ts
@@ -0,0 +1,21 @@
+export enum PATHS {
+ HOME = '/',
+ DONATIONS = '/donations',
+ CONTRIBUTIONS = '/contributions',
+ ABOUT = '/about',
+ CONTACT = '/contact',
+ CONTACTUS = '/contactus',
+ MOBILE = '/mobile',
+ APPS = '/apps',
+ SEARCH = '/search',
+ ERROR = '/error/:errorKey',
+ AYATUL_KURSI = '/ayatul-kursi',
+ CHAPTER_INFO = '/:chapterId/info/:language?',
+}
+
+export enum CHAPTER_PATHS {
+ WITH_COLON = '/:chapterId(\\d+):s(:|-)?:range?',
+ WITH_RANGE = '/:chapterId(\\d+)/:range?',
+ WITH_TRANSLATIONS = '/:chapterId(\\d+)/:range/:translations',
+ WITH_TAFSIR = '/:chapterId(\\d+)/:range/tafsirs/:tafsirId',
+}
diff --git a/src/containers/About/index.js b/src/containers/About/index.js
deleted file mode 100644
index 11bb3d86c..000000000
--- a/src/containers/About/index.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import IndexHeader from 'components/IndexHeader';
-import Helmet from 'react-helmet';
-
-export default () => (
-
@@ -12,56 +13,55 @@ export default () => (
Who we are.
- Since 2008, Alhamdulilah Quran.com now serves over 3.1 million
- visits from all corners of the world - and we continue to grow everyday.
-
- This, with the blessing of Allah, is powered by merely 5 volunteers who are
- working hard on their spare time to keep this project as
+ Since 2008, Alhamdulillah Quran.com now serves over 3.1 million
+ visits from all corners of the world - and we continue to grow
+ everyday.
+
+
+ This, with the blessing of Allah, is powered by merely 5 volunteers
+ who are working hard on their spare time to keep this project as
beneficial and useful to people all around the world.
How you can help.
- Quran.com has an incredible amount of potential from a product standpoint - and a team standpoint. - We need to continue innovating the product and the experience to serve you - better. To do so we - have overhead costs which include: + Quran.com has an incredible amount of potential from a product + standpoint and a team standpoint. We need to continue innovating the + product and the experience to serve you better. To do so we have + overhead costs which include:
-
-
- Server costs +
- Server costs.
- - Data analytics and metrics tools to best learn about your - needs (Optimizely, Heap, Keen, etc.) + Data analytics and metrics tools to best learn about your needs + (Optimizely, Heap, Keen, etc.).
- - Design help (we are striving to follow our beautiful religion - by making beautiful products) + Design help (we are striving to follow our beautiful religion by + making beautiful products).
Make a difference.
- Making a difference for Quran.com is as simple as a Tweet, - Facebook share or email us feedback. - For those looking to make a stronger impact, support us by - contributing any monetary amount. + Making a difference for Quran.com is as simple as a Tweet, Facebook + share or emailing us feedback. For those looking to make a stronger + impact, support us by contributing any monetary amount.
-
- - Support Quran.com +
+
+ Coming soon... +
+
+ If you have any questions, please do not hesitate to contact us at{' '} + + support@quran.zendesk.com. -
- If you have any questions, please do not hesitate to contact - us at support@quran.zendesk.com.
- - Support Quran.com +
+
+ Coming soon... +
+
+ If you have any questions, please do not hesitate to contact us at{' '} + + support@quran.zendesk.com. -
- If you have any questions, please do not hesitate to contact - us at support@quran.zendesk.com.
+
+
+
+);
+
+ErrorPage.propTypes = {
+ match: PropTypes.object.isRequired,
+};
+
+export default ErrorPage;
diff --git a/src/components/FacebookTokenButton/index.js b/src/components/FacebookTokenButton/index.js
deleted file mode 100644
index 6bf9c7a8e..000000000
--- a/src/components/FacebookTokenButton/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-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;
-
- const handleClick = () => {
- popup = window.open('/onequran/omniauth/facebook?omniauth_window_type=newWindow&resource_class=User', '_blank'); // eslint-disable-line
- interval = setInterval(() => popup.postMessage('requestCredentials', '*'), 1000);
-
- window.addEventListener('message', (event) => { // eslint-disable-line
- if (event.data.uid) {
- save(event.data);
- clearInterval(interval);
-
- return push('/');
- }
- }, false);
- };
-
- return (
-
- );
-};
-
-export default connect(null, { save, push })(FacebookTokenButton);
diff --git a/src/components/FacebookTokenButton/style.scss b/src/components/FacebookTokenButton/style.scss
deleted file mode 100644
index f4ef01948..000000000
--- a/src/components/FacebookTokenButton/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.button{
- background: #3B5998;
- border-color: #3B5998;
- color: #fff;
- font-weight: 300;
-
- & > :global(div){
- display: inline-block;
- vertical-align: text-top;
- }
-}
diff --git a/src/components/FontSizeDropdown/index.js b/src/components/FontSizeDropdown/index.js
deleted file mode 100644
index 9129ba028..000000000
--- a/src/components/FontSizeDropdown/index.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const style = require('./style.scss');
-
-class FontSizeDropdown extends Component {
-
- handleOptionSelected = (type, direction) => {
- const { onOptionChange, fontSize } = this.props;
- const changeFactor = {
- translation: 0.5,
- arabic: 0.5
- };
-
- return onOptionChange({
- fontSize: {
- ...fontSize,
- [type]: fontSize[type] + (changeFactor[type] * direction)
- }
- });
- }
-
- renderPopup() {
- return (
-
+
+
+
+
+
+ <T id={LOCALE_KEYS[params.errorKey]} />
+
+
+
-
- -
- );
- }
-
- render() {
- return (
- -
-
- - this.handleOptionSelected('arabic', -1)} - className="pointer" - > - - - -
-
-
-
- - - this.handleOptionSelected('arabic', 1)} - className="pointer" - > - - - -
- -
- {Object.keys(fontFaces).map(className => (
-
- ))}
-
- );
- }
-}
-
-FontStyles.propTypes = {
- fontFaces: PropTypes.objectOf(PropTypes.bool).isRequired,
- load: PropTypes.func.isRequired
-};
-
-export default connect(
- state => ({
- fontFaces: selector(state)
- }),
- { load }
-)(FontStyles);
diff --git a/src/components/FontStyles/selector.js b/src/components/FontStyles/selector.js
deleted file mode 100644
index 90be4a1c6..000000000
--- a/src/components/FontStyles/selector.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createSelector } from 'reselect';
-
-export default createSelector(
- state => state.fontFaces,
- fontFaces => fontFaces
-);
diff --git a/src/components/FontText.tsx b/src/components/FontText.tsx
new file mode 100644
index 000000000..d0f20944e
--- /dev/null
+++ b/src/components/FontText.tsx
@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+import { darken } from 'polished';
+
+export default styled.div<{ readingMode?: boolean }>`
+ white-space: pre-line;
+ color: #000;
+ width: 100%;
+ overflow-wrap: break-word;
+ line-height: 1.5;
+ word-break: break-all;
+ text-align: right;
+ float: left;
+ -webkit-font-smoothing: antialiased;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ font-size: 3.5rem;
+ b,
+ span {
+ border-color: transparent;
+ border-width: 0 0 1px 0;
+ border-style: solid;
+ float: ${({ readingMode }) => (readingMode ? 'none' : 'right')};
+ &.active {
+ color: ${({ theme }) => darken(0.05, theme.brandPrimary)};
+ border-color: ${({ theme }) => darken(0.15, theme.brandPrimary)};
+ }
+ }
+ .line {
+ direction: rtl;
+ b,
+ span {
+ float: none;
+ display: inline-block;
+ }
+ }
+ b,
+ a {
+ font-weight: 100;
+ padding: 0 2px;
+ color: #000;
+ &:hover {
+ color: ${({ theme }) => theme.brandPrimary};
+ cursor: help;
+ }
+ &:focus {
+ color: ${({ theme }) => darken(0.1, theme.brandPrimary)};
+ outline: none;
+ }
+ }
+ p {
+ display: block;
+ clear: both;
+ text-align: right;
+ direction: rtl;
+ float: right;
+ }
+ @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+ font-size: 300%;
+ line-height: 130%;
+ }
+}
+`;
diff --git a/src/components/FootNote.tsx b/src/components/FootNote.tsx
new file mode 100644
index 000000000..944c84810
--- /dev/null
+++ b/src/components/FootNote.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FootNoteShape } from '../shapes';
+import T, { KEYS } from './T';
+import TranslationNode from './TranslationNode';
+
+const FootNoteText = styled.small`
+ font-family: ${({ theme }) => theme.fonts.timesNew};
+`;
+
+const propTypes = {
+ footNote: FootNoteShape.isRequired,
+};
+
+type Props = {
+ footNote: FootNoteShape;
+};
+
+const FootNote: React.SFC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
-
+
-
+
+
+ © {new Date().getFullYear()} Quran.com.{' '}
+
-
,
-
-
- }
- >
-
-
- ]}
- rightControls={[this.renderDrawerToggle()]}
- />
- );
- }
-}
-
-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 versesArray = verses
- ? Object.keys(verses).map(key => parseInt(key.split(':')[1], 10))
- : [];
- const versesIds = new Set(versesArray);
-
- return {
- chapter,
- chapters: state.chapters.entities,
- options: state.options,
- versesIds
- };
-}
-
-GlobalNavSurah.propTypes = {
- chapter: customPropTypes.surahType.isRequired,
- chapters: customPropTypes.chapters.isRequired,
- options: customPropTypes.optionsType.isRequired,
- setOption: PropTypes.func.isRequired,
- versesIds: PropTypes.instanceOf(Set),
- load: PropTypes.func.isRequired,
- setCurrentVerse: PropTypes.func.isRequired,
- replace: PropTypes.func.isRequired
-};
-
-export default connect(mapStateToProps, {
- ...OptionsActions,
- load,
- replace,
- setCurrentVerse
-})(GlobalNavSurah);
diff --git a/src/components/GlobalNav/index.js b/src/components/GlobalNav/index.js
deleted file mode 100644
index ab4216be1..000000000
--- a/src/components/GlobalNav/index.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/* global window */
-import React, { PropTypes, Component } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import { connect } from 'react-redux';
-import Link from 'react-router/lib/Link';
-import Navbar from 'react-bootstrap/lib/Navbar';
-import Nav from 'react-bootstrap/lib/Nav';
-
-import LocaleSwitcher from 'components/LocaleSwitcher';
-
-import debug from 'helpers/debug';
-
-const styles = require('./style.scss');
-
-class GlobalNav extends Component {
- state = {
- scrolled: false
- };
-
- componentDidMount() {
- window.addEventListener('scroll', this.handleNavbar, true);
- }
-
- componentWillUnmount() {
- window.removeEventListener('scroll', this.handleNavbar, true);
- }
-
- handleNavbar = () => {
- const { isStatic } = this.props;
- const { scrolled } = this.state;
-
- if (window.pageYOffset > 50) {
- if (!scrolled && !isStatic) {
- this.setState({ scrolled: true });
- }
- } else if (scrolled) {
- this.setState({ scrolled: false });
- }
-
- return false;
- };
-
- isHome() {
- return this.props.location.pathname === '/';
- }
-
- renderRightControls() {
- const { user, rightControls } = this.props;
-
- return (
- rightControls || [
-
-
-
-
-
-
- );
- }
-}
-
-GlobalSidebar.propTypes = {
- open: PropTypes.bool.isRequired,
- handleOpen: PropTypes.func,
- settingsModalProps: PropTypes.object, // eslint-disable-line
- children: PropTypes.node
-};
-
-GlobalSidebar.defaultProps = {
- open: false
-};
-
-export default GlobalSidebar;
diff --git a/src/components/GlobalSidebar/style.scss b/src/components/GlobalSidebar/style.scss
deleted file mode 100644
index 84c586496..000000000
--- a/src/components/GlobalSidebar/style.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import '../../styles/variables.scss';
-
-$width: 280px;
-
-.container{
- position: fixed;
- left: $width * -1;
- top: 0px;
- bottom: 0px;
- background: #fff;
- z-index: 1031;
- box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.2);
- visibility: hidden;
-
- background: #fff;
- width: $width;
- transition: left 0.35s cubic-bezier(0.24,1,0.32,1), visibility 0.2s;
-
- &.open{
- left: 0px;
- visibility: visible;;
- }
-
- :global(.navbar-text){
- margin-left: 0px;
- .backToHome {
- margin-right: 23px;
- font-size: 17px;
- }
- }
-
- @media(max-width: $screen-sm) {
- width: $width;
- left: -1 * $width;
-
- &.open{
- left: 0px;
- }
-
- :global(.navbar-text){
- padding-left: 15px;
- }
- }
-}
-
-.list{
- padding-left: 0px;
-
- :global(li){
- color: #777;
-
- :global(a){
- color: #777;
- padding: 10px 15px;
- display: block;
-
- :global(.ss-icon){
- font-size: 18px;
- margin-right: 20px;
- }
-
- &:hover{
- background: #f5f5f5;
- color: #333;
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
new file mode 100644
index 000000000..f24ac1d13
--- /dev/null
+++ b/src/components/Home.tsx
@@ -0,0 +1,136 @@
+import React, { Component } from 'react';
+import Helmet from 'react-helmet';
+import { asyncComponent } from 'react-async-component';
+import Tabs, { Tab } from 'quran-components/lib/Tabs';
+import Loader from 'quran-components/lib/Loader';
+import Title from './home/Title';
+import ChaptersList from './ChaptersList';
+import QuickChapters from './QuickChapters';
+import T, { KEYS } from './T';
+import Jumbotron from './Jumbotron';
+import { FetchChapters } from '../redux/actions/chapters';
+import { FetchJuzs } from '../redux/actions/juzs';
+import { NUMBER_OF_CHAPTERS, NUMBER_OF_JUZS } from '../constants';
+
+const JuzList = asyncComponent({
+ resolve: () => import(/* webpackChunkName: "JuzList" */ './JuzList'),
+});
+
+type Props = {
+ fetchChapters: FetchChapters;
+ fetchJuzs: FetchJuzs;
+ loadingChapters: boolean;
+ loadingJuzs: boolean;
+ chapters: $TsFixMe;
+ juzs: $TsFixMe;
+};
+
+const loaderStyle = { position: 'relative', overflow: 'hidden' };
+
+class Home extends Component handleOpen(false)}
- >
-
-
-
-
- {children}
-
-
-
- {' '}
-
- -
- -
-
- {' '}
-
- -
- -
-
- {' '}
-
- -
- -
-
- {' '}
-
- -
- -
-
- {' '}
-
- -
- - - - Audio - - -
- - - Salah - - -
- - - Sunnah - - -
-
+
+ );
+
+ let chaptersTab = (
+
+
+ );
+
+ if (!loadingJuzs) {
+ const juzList = Object.values(juzs);
+
+ juzsTab = (
+
+
+ );
+ }
+
+ if (!loadingChapters) {
+ const chaptersList = Object.values(chapters);
+
+ chaptersTab = (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+ }
+}
+
+export default Home;
diff --git a/src/components/Home/LastVisit/index.js b/src/components/Home/LastVisit/index.js
deleted file mode 100644
index c1e74dbb0..000000000
--- a/src/components/Home/LastVisit/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import debug from 'helpers/debug';
-import Link from 'react-router/lib/Link';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const styles = require('containers/Home/style.scss');
-
-const LastVisit = (props) => {
- debug('component:Index', 'LastVisit');
- if (!props.chapter) return false;
-
- return (
-
+
+
+
+
+
+ {chaptersTab}
+ {juzsTab}
+
+
+
-
-
-
- );
-};
-
-LastVisit.propTypes = {
- chapter: customPropTypes.surahType.isRequired,
- verse: PropTypes.number.isRequired
-};
-
-export default LastVisit;
diff --git a/src/components/Home/QuickSurahs/index.js b/src/components/Home/QuickSurahs/index.js
deleted file mode 100644
index 55c555dfe..000000000
--- a/src/components/Home/QuickSurahs/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import debug from 'helpers/debug';
-import Link from 'react-router/lib/Link';
-
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const styles = require('containers/Home/style.scss');
-
-export default () => {
- debug('component:Index', 'QuickSurahs');
-
- const isFriday = new Date().getDay() === 5;
-
- return (
-
-
-
-
-
-
- );
-};
diff --git a/src/components/Home/QuickSurahs/spec.js b/src/components/Home/QuickSurahs/spec.js
deleted file mode 100644
index 5064172d5..000000000
--- a/src/components/Home/QuickSurahs/spec.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import QuickSurahs from './index.js';
-import { mountWithIntl } from '../../../../tests/helpers/intl-enzyme-test-helper.js';
-
-describe('
-
- -
- {props.chapters.map(chapter => (
-
-
-
- - {chapter.chapterNumber} --- {chapter.nameSimple} --- -- -- - {chapter.translatedName.name} - -- -
- ))}
-
-
-
-
-
-
- 
-
-
- THE NOBLE QUR'AN
- {this.renderSearch()} -
+
+
+
+
+
+
+ {/* TODO: Translations */}
+
+ THE NOBLE QURAN
+
+ {noSearch}
+ {!noSearch &&
+
+
+ );
+};
+
+export default JuzLink;
diff --git a/src/components/JuzList.tsx b/src/components/JuzList.tsx
new file mode 100644
index 000000000..915cf45b0
--- /dev/null
+++ b/src/components/JuzList.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import JuzLink from './JuzLink';
+import { ChapterShape, JuzShape } from '../shapes';
+
+type Props = {
+ juzs: $TsFixMe;
+ chapters: $TsFixMe;
+};
+
+const Item = styled.li`
+ color: ${({ theme }) => theme.brandPrimary};
+`;
+
+const JuzList: React.SFC{list}
+ -
+ {juzs.map((juz: JuzShape) => (
+
-
+ {juz.juzNumber}+
+
+ ))}
+
Loading
} - /> - ); - }; - - makeComponent(); - }); - - it('should render', () => { - expect(wrapper).to.be.ok; // eslint-disable-line - }); - - it('should show loading component', () => { - expect(wrapper.text()).to.eql('Loading'); - }); - - it('should show end component when no more lazy loading needed', () => { - makeComponent(true); - expect(wrapper.text()).to.eql('End'); - }); - - it('should call onLazyLoad when not end and not loading', () => { - wrapper.instance().onScroll(); - expect(wrapper.props().onLazyLoad).to.have.been.called; // eslint-disable-line - }); - - it('should not call onLazyLoad when at end', () => { - makeComponent(true); - wrapper.instance().onScroll(); - expect(wrapper.props().onLazyLoad).not.to.have.been.called; // eslint-disable-line - }); - - it('should not call onLazyLoad when loading', () => { - makeComponent(false, true); - wrapper.instance().onScroll(); - expect(wrapper.props().onLazyLoad).not.to.have.been.called; // eslint-disable-line - }); -}); diff --git a/src/components/Line.tsx b/src/components/Line.tsx new file mode 100644 index 000000000..7261aa869 --- /dev/null +++ b/src/components/Line.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import FontText from './FontText'; +import { LineShape } from '../shapes'; +import WordContainer from '../containers/WordContainer'; + +const StyledLine = styled.span` + line-height: 150%; + display: block; + width: 100%; + margin: 0 auto; +`; + +const propTypes = { + line: LineShape.isRequired, + useTextFont: PropTypes.bool, +}; + +const defaultProps = { + useTextFont: false, +}; + +type Props = { + line: LineShape; + useTextFont?: boolean; +}; + +const Line: React.SFC
+ {text}
+
+
-
- );
- }
-}
-
-Line.propTypes = {
- line: customPropTypes.line.isRequired,
- tooltip: PropTypes.string,
- currentVerse: PropTypes.string.isRequired,
- audioActions: customPropTypes.audioActions,
- isPlaying: PropTypes.bool,
- useTextFont: PropTypes.bool
-};
-
-export default Line;
diff --git a/src/components/List.tsx b/src/components/List.tsx
new file mode 100644
index 000000000..3c7abe1c8
--- /dev/null
+++ b/src/components/List.tsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const List = styled.ul`
+ padding-left: 0px;
+`;
+
+export default List;
diff --git a/src/components/LocaleFormattedMessage/index.js b/src/components/LocaleFormattedMessage/index.js
deleted file mode 100644
index d2898c07f..000000000
--- a/src/components/LocaleFormattedMessage/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { PropTypes } from 'react';
-import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
-
-const LocaleFormattedMessage = ({ id, defaultMessage, intl, values, className }) => (
-
-
- {this.renderText()}
-
-
+
+
+
+ <strong>Quran</strong>
+ <br />
+ by quran.com القرآن
+
+
+ + + From the makers of Quran.com comes Quran for iOS, a beautiful, and + ad-free mushaf app. It’s now easier to read the Quran on the go, + memorize it and listen to your favorite reciters. + +
+
+
+
+
+ 
+ Download
+
+
+
+
+ 
+ Download
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @@ -10,7 +15,7 @@ const PageBreak = ({ pageNum }) => ( ); PageBreak.propTypes = { - pageNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired + pageNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, }; export default PageBreak; diff --git a/src/components/PageBreak/spec.js b/src/components/PageBreak/spec.js deleted file mode 100644 index d69664e46..000000000 --- a/src/components/PageBreak/spec.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; - -import PageBreak from './index'; - -let wrapper; -const pageNum = 15; - -describe('
{elements}
- );
-};
-
-PageView.propTypes = {
- keys: PropTypes.array, // eslint-disable-line
- lines: PropTypes.object.isRequired, // eslint-disable-line
- audioActions: customPropTypes.audioActions.isRequired, // eslint-disable-line
- currentVerse: PropTypes.string,
- bookmarks: PropTypes.object.isRequired, // eslint-disable-line
- options: PropTypes.object.isRequired, // eslint-disable-line
- isPlaying: PropTypes.bool,
- userAgent: PropTypes.func
-};
-
-export default connect(state => ({
- userAgent: state.options.userAgent
-}))(PageView);
diff --git a/src/components/QuickChapters.tsx b/src/components/QuickChapters.tsx
new file mode 100644
index 000000000..84e99f79a
--- /dev/null
+++ b/src/components/QuickChapters.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import T, { KEYS } from './T';
+import Title from './home/Title';
+
+import { QUICK_LINKS_EVENTS } from '../events';
+
+const Span = styled.span`
+ &:after {
+ content: '|';
+ }
+ &:first-child,
+ &:last-child {
+ &:after {
+ content: none;
+ }
+ }
+`;
+
+const isFriday = new Date().getDay() === 5;
+
+const QuickChapters: React.SFC<{}> = () => (
+
+
+ <T id={KEYS.CHAPTER_INDEX_QUICKLINKS} />
+ {__CLIENT__ &&
+ isFriday && (
+ <Span>
+ <Link
+ to="/18"
+ {...QUICK_LINKS_EVENTS.CLICK.CHAPTER.PROPS}
+ data-metrics-chapter-id="18"
+ >
+ Surah Al-Kahf
+ </Link>
+ </Span>
+ )}
+ <Span>
+ <Link
+ to="/36"
+ {...QUICK_LINKS_EVENTS.CLICK.CHAPTER.PROPS}
+ data-metrics-chapter-id="36"
+ >
+ Surah Yasin (Yaseen)
+ </Link>
+ </Span>
+ <Span>
+ <Link
+ to="/55"
+ {...QUICK_LINKS_EVENTS.CLICK.CHAPTER.PROPS}
+ data-metrics-chapter-id="55"
+ >
+ Surah Ar-Rahman
+ </Link>
+ </Span>
+ <Span>
+ <Link
+ to="/67"
+ {...QUICK_LINKS_EVENTS.CLICK.CHAPTER.PROPS}
+ data-metrics-chapter-id="67"
+ >
+ Surah Al Mulk
+ </Link>
+ </Span>
+ <Span>
+ <Link
+ to="/ayatul-kursi"
+ {...QUICK_LINKS_EVENTS.CLICK.VERSE.PROPS}
+ data-metrics-verse-key="2:225"
+ >
+ Ayatul Kursi
+ </Link>
+ </Span>
+
+
+);
+
+export default QuickChapters;
diff --git a/src/components/ReadingModeToggle/index.js b/src/components/ReadingModeToggle/index.js
deleted file mode 100644
index 76146bdaa..000000000
--- a/src/components/ReadingModeToggle/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { PropTypes } from 'react';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import { MenuItem } from 'quran-components/lib/Menu';
-
-const ReadingModeToggle = ({ onToggle, isToggled }) => (
- }
- onClick={() => onToggle({ isReadingMode: !isToggled })}
- >
-
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (isErrored) {
+ return (
+
+
+ );
+ }
+
+ if (isLoading) {
+ return
+
+ );
+ }
+
+ return entities.map(verse => (
+
+
+ );
+ }
+}
+
+export default Search;
diff --git a/src/components/SearchAutocomplete.tsx b/src/components/SearchAutocomplete.tsx
new file mode 100644
index 000000000..d9211aade
--- /dev/null
+++ b/src/components/SearchAutocomplete.tsx
@@ -0,0 +1,252 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import debounce from 'lodash/debounce';
+import { Link } from 'react-router-dom';
+import { ChapterShape, SuggestionShape } from '../shapes';
+import { FetchSuggest } from '../redux/actions/suggest';
+
+const verseRegex = /^(\d+)(?::(\d+))?$/;
+
+const Container = styled.div`
+ width: 100%;
+ background-color: #ccc;
+ position: absolute;
+ z-index: 99;
+`;
+
+const List = styled.ul<{ textColor?: string }>`
+ left: 0;
+ z-index: 1;
+ min-width: 100%;
+ box-sizing: border-box;
+ list-style: none;
+ padding: 0;
+ margin: 0.2em 0 0;
+ background: white;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
+ text-shadow: none;
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: -0.23em;
+ left: 1em;
+ width: 0;
+ height: 0;
+ padding: 0.4em;
+ background: white;
+ border: inherit;
+ border-right: 0;
+ border-bottom: 0;
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+
+ & > li {
+ position: relative;
+ cursor: pointer;
+ text-align: left;
+ }
+
+ .text {
+ overflow: hidden;
+ word-wrap: break-word;
+ white-space: nowrap;
+ line-height: 28px;
+ padding-left: 10px;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ a {
+ display: block;
+ }
+ }
+
+ & > li:hover .text,
+ & > li:focus .text {
+ background-color: rgba(${({ theme }) => theme.brandPrimary}, 0.5);
+ color: ${({ textColor }) => textColor};
+ }
+
+ & > li:hover .text a,
+ & > li:focus .text a {
+ color: #444;
+ }
+
+ & > li:hover .link a,
+ & > li:focus .link a {
+ color: #444;
+ }
+
+ & > li[aria-selected='true'] .text {
+ background: hsl(205, 40%, 40%);
+ color: white;
+ }
+
+ & li:hover mark,
+ & li:focus mark {
+ background: hsl(68, 100%, 41%);
+ }
+
+ li[aria-selected='true'] mark {
+ background: hsl(86, 100%, 21%);
+ color: inherit;
+ }
+
+ mark {
+ background: hsl(65, 100%, 50%);
+ }
+`;
+
+const StyledLink = styled.div`
+ position: absolute;
+ right: 0;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ padding-left: 70px;
+ padding-right: 10px;
+ line-height: 28px;
+ background: linear-gradient(
+ to right,
+ rgba(255, 255, 255, 0),
+ white 40%,
+ rgba(255, 255, 255, 1)
+ );
+ z-index: 2;
+ text-align: right;
+`;
+
+const propTypes = {
+ fetchSuggest: PropTypes.func.isRequired,
+ chapters: PropTypes.shape({
+ chapterId: ChapterShape,
+ }),
+ value: PropTypes.string,
+ suggestions: PropTypes.arrayOf(SuggestionShape),
+ lang: PropTypes.string,
+};
+
+const defaultProps = {
+ lang: '',
+ value: '',
+ chapters: {},
+ suggestions: [],
+};
+
+type Props = {
+ fetchSuggest: FetchSuggest;
+ chapters?: { [chapterId: string]: ChapterShape };
+ value?: string;
+ suggestions?: Array
+
+
+
+ {this.renderBody()}
+ -
+ {hasSuggestions &&
+ suggestions.map((item: SuggestionShape) => (
+
+
+
+
- {item.ayah}
-
-
-
-
- );
- }
-}
-
-function mapStateToProps(state, ownProps) {
- const chapters = state.chapters.entities;
- const chapterId = state.chapters.current;
- const suggestions = state.suggestResults.results[ownProps.value];
- let lang = 'en';
-
- if (state.verses && state.verses.entities && state.verses.entities[chapterId]) {
- const ayahs = state.verses.entities[chapterId];
- const verseKey = Object.keys(ayahs)[0];
-
- if (verseKey) {
- const ayah = ayahs[verseKey];
-
- if (ayah.content && ayah.content[0] && ayah.content[0].lang) {
- lang = ayah.content[0].lang;
- }
- }
- }
-
- return {
- chapters,
- suggestions,
- lang
- };
-}
-
-SearchAutocomplete.propTypes = {
- chapters: customPropTypes.chapters.isRequired,
- value: PropTypes.string,
- // TODO: This should not be doing html stuff. Should use react onKeydown.
- input: PropTypes.any, // eslint-disable-line
- push: PropTypes.func.isRequired,
- suggest: PropTypes.func.isRequired,
- suggestions: customPropTypes.suggestions,
- lang: PropTypes.string,
- delay: PropTypes.number,
-};
-
-SearchAutocomplete.defaultProps = {
- delay: 200
-};
-
-export default connect(mapStateToProps, { push, suggest })(SearchAutocomplete);
diff --git a/src/components/SearchAutocomplete/style.scss b/src/components/SearchAutocomplete/style.scss
deleted file mode 100644
index 06ca208ee..000000000
--- a/src/components/SearchAutocomplete/style.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-@import '../../styles/variables.scss';
-
-.autocomplete {
- width: 100%;
- background-color: #ccc;
- position: absolute;
- z-index: 99;
-
- .list{
- left: 0;
- z-index: 1;
- min-width: 100%;
- box-sizing: border-box;
- list-style: none;
- padding: 0;
- margin: .2em 0 0;
- background: white;
- border: 1px solid rgba(0,0,0,.3);
- box-shadow: .05em .2em .6em rgba(0,0,0,.2);
- text-shadow: none;
- }
-
- /* Pointer */
- .list:before {
- content: "";
- position: absolute;
- top: -.23em;
- left: 1em;
- width: 0; height: 0;
- padding: .4em;
- background: white;
- border: inherit;
- border-right: 0;
- border-bottom: 0;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- .list > li {
- position: relative;
- cursor: pointer;
- text-align: left;
- }
-
- .link {
- position: absolute;
- right: 0;
- padding-top: .2em;
- padding-bottom: .2em;
- padding-left: 70px;
- padding-right: 10px;
- line-height: 28px;
- background: linear-gradient(to right,rgba(255, 255, 255, 0), white 40%, rgba(255,255,255,1));
- z-index: 2;
- text-align: right;
- }
- .text {
- overflow: hidden;
- word-wrap: break-word;
- white-space: nowrap;
- line-height: 28px;
- padding-left: 10px;
- padding-top: .2em;
- padding-bottom: .2em;
- a {
- display: block;
- }
- }
- .list > li:hover .text, .list > li:focus .text {
- background-color: rgba($brand-primary, 0.5);
- color: $text-color;
- }
- .list > li:hover .text a, .list > li:focus .text a {
- color: #444;
- }
- .list > li:hover .link a, .list > li:focus .link a {
- color: #444;
- }
- .list > li[aria-selected="true"] .text {
- background: hsl(205, 40%, 40%);
- color: white;
- }
- mark {
- background: hsl(65, 100%, 50%);
- }
- .list li:hover mark, .list li:focus mark {
- background: hsl(68, 100%, 41%);
- }
- li[aria-selected="true"] mark {
- background: hsl(86, 100%, 21%);
- color: inherit;
- }
-}
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
new file mode 100644
index 000000000..5ee37ec85
--- /dev/null
+++ b/src/components/SearchInput.tsx
@@ -0,0 +1,193 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { lighten } from 'polished';
+import toNumber from 'lodash/toNumber';
+import OutsideClickHandler from 'react-outside-click-handler';
+import { withRouter } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router';
+import { PropTypes as MetricsPropTypes } from 'react-metrics';
+import { History } from 'history';
+
+import T, { KEYS } from './T';
+import SearchAutocompleteContainer from '../containers/SearchAutocompleteContainer';
+
+const arabic = new RegExp(/[\u0600-\u06FF]/);
+// eslint-disable-next-line
+const shortcutSearch = /\d[\.,\:,\,,\\,//]/g;
+// eslint-disable-next-line
+const splitSearch = /[\.,\:,\,,\\,//]/g;
+
+const Input = styled.input<{ isArabic?: boolean }>`
+ text-align: ${({ isArabic }) => (isArabic ? 'right' : 'left')};
+ width: 100%;
+ padding: 20px 30px;
+ padding-right: 60px;
+ outline: none;
+ border: none;
+ background-color: #fff;
+ color: ${({ theme }) => theme.brandPrimary};
+
+ &::-webkit-input-placeholder {
+ color: ${({ theme }) => theme.brandPrimary};
+ font-weight: 300;
+ }
+
+ &:-moz-placeholder {
+ /* Firefox 18- */
+ color: ${({ theme }) => theme.brandPrimary};
+ font-weight: 300;
+ }
+
+ &::-moz-placeholder {
+ /* Firefox 19+ */
+ color: ${({ theme }) => theme.brandPrimary};
+ font-weight: 300;
+ }
+
+ &:-ms-input-placeholder {
+ color: ${({ theme }) => theme.brandPrimary};
+ font-weight: 300;
+ }
+`;
+
+const Button = styled.button`
+ position: absolute;
+ right: 0;
+ padding: 15px 15px;
+ font-size: 150%;
+ background-color: ${({ theme }) => theme.brandPrimary};
+ color: #fff;
+ cursor: pointer;
+ height: 100%;
+ border: 3px solid #fff;
+
+ &:hover {
+ background-color: ${({ theme }) => lighten(0.1, theme.brandPrimary)};
+ }
+`;
+
+const contextTypes = {
+ metrics: MetricsPropTypes.metrics,
+};
+
+const propTypes = {
+ className: PropTypes.string,
+ history: PropTypes.object.isRequired,
+};
+
+const defaultProps = {
+ className: '',
+};
+
+type Props = {
+ history: History;
+ className?: string;
+} & RouteComponentProps<{}>;
+
+type State = {
+ value: string;
+ showAutocomplete: boolean;
+};
+
+class SearchInput extends Component- { this.menu = ref; }}>
- {this.renderList()}
-
+
+
+ {placeholder => (
+
+ )}
+
+ {showAutocomplete &&
+
-
- { this.input = input; }}
- onFocus={() => this.setState({ showAutocomplete: true })}
- // onBlur={() => this.setState({ showAutocomplete: false })}
- onKeyUp={this.search}
- />
- {
- showAutocomplete &&
-
- );
- }
-}
-
-SearchInput.propTypes = {
- push: PropTypes.func.isRequired,
- className: PropTypes.string,
- intl: intlShape.isRequired
-};
-
-export default injectIntl(connect(null, { push })(SearchInput));
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
new file mode 100644
index 000000000..45850a7ab
--- /dev/null
+++ b/src/components/Settings.tsx
@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import last from 'lodash/last';
+import Menu from 'quran-components/lib/Menu';
+import LocaleSwitcher from './LocaleSwitcher';
+import FontSizeOptions from './settings/FontSizeOptions';
+import ReadingModeToggle from './settings/ReadingModeToggle';
+import NightModeToggle from './settings/NightModeToggle';
+import ChapterInfoToggle from './settings/ChapterInfoToggle';
+import ReciterDropdownContainer from '../containers/settings/ReciterDropdownContainer';
+import TranslationsDropdownContainer from '../containers/settings/TranslationsDropdownContainer';
+import TooltipOptions from './settings/TooltipOptions';
+import { VerseShape, ChapterShape, SettingsShape } from '../shapes';
+import { SetSetting } from '../redux/actions/settings';
+import { FetchVerses } from '../redux/actions/verses';
+
+const propTypes = {
+ setSetting: PropTypes.func.isRequired,
+ fetchVerses: PropTypes.func.isRequired,
+ chapter: ChapterShape.isRequired,
+ settings: SettingsShape.isRequired,
+ verses: PropTypes.shape({
+ verseKey: VerseShape,
+ }).isRequired,
+};
+
+type Props = {
+ setSetting: SetSetting;
+ fetchVerses: FetchVerses;
+ chapter: ChapterShape;
+ settings: SettingsShape;
+ verses: { [verseKey: string]: VerseShape };
+};
+
+class Settings extends Component
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-Share.propTypes = {
- chapter: customPropTypes.surahType.isRequired,
- verse: customPropTypes.verseType
-};
-
-export default Share;
diff --git a/src/components/Share/style.scss b/src/components/Share/style.scss
deleted file mode 100644
index 92b6684bb..000000000
--- a/src/components/Share/style.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import '../../styles/variables';
-
-.shareContainer {
- position: relative;
- top: 7px;
- display: inline-block;
-
- .iconContainer {
- display: inline-block;
-
- &:last-child{
- padding-left: 5px;
- }
-
- &:hover {
- cursor: pointer;
- }
- }
-
- .facebook {
- background-image: url(../../../static/images/FB-grn.png);
- background-repeat: no-repeat;
-
- background-size: 12px;
- padding-top: 1px;
-
- &:hover {
- background-image: url(../../../static/images/FB-beige.png);
- }
- }
-
- .twitter {
- background-image: url(../../../static/images/Twitter-grn.png);
- background-repeat: no-repeat;
- background-size: 21px;
-
- &:hover {
- background-image: url(../../../static/images/Twitter-beige.png);
- }
- }
-
-}
diff --git a/src/components/SmartBanner.tsx b/src/components/SmartBanner.tsx
new file mode 100644
index 000000000..a0086a684
--- /dev/null
+++ b/src/components/SmartBanner.tsx
@@ -0,0 +1,278 @@
+/* global window */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import useragent from 'express-useragent';
+import toNumber from 'lodash/toNumber';
+import cookie from 'react-cookie';
+import StoreTextShape from '../shapes/StoreTextShape';
+
+const appleIcon = require('../../static/images/app-banner-ios.jpg');
+const androidIcon = require('../../static/images/app-banner-android.png');
+
+const ICONS: { [key: string]: string } = {
+ apple: appleIcon,
+ android: androidIcon,
+};
+
+const propTypes = {
+ daysHidden: PropTypes.number,
+ daysReminder: PropTypes.number,
+ appStoreLanguage: PropTypes.string,
+ button: PropTypes.string,
+ storeText: StoreTextShape,
+ price: StoreTextShape,
+ force: PropTypes.string,
+ title: PropTypes.string,
+ author: PropTypes.string,
+};
+
+const defaultProps = {
+ daysHidden: 15,
+ daysReminder: 90,
+ appStoreLanguage: 'us',
+ button: 'View',
+ storeText: {
+ ios: 'On the App Store',
+ android: 'In Google Play',
+ windows: 'In Windows Store',
+ kindle: 'In the Amazon Appstore',
+ },
+ price: {
+ ios: 'Free',
+ android: 'Free',
+ windows: 'Free',
+ kindle: 'Free',
+ },
+ force: '',
+ title: '',
+ author: '',
+};
+
+type Props = {
+ daysHidden?: number;
+ daysReminder?: number;
+ appStoreLanguage?: string;
+ button?: string;
+ storeText?: StoreTextShape;
+ price?: StoreTextShape;
+ force?: string;
+ title?: string;
+ author?: string;
+};
+
+class SmartBanner extends Component
+
+ );
+ }
+}
+
+export default SmartBanner;
diff --git a/src/components/SmartBanner/index.js b/src/components/SmartBanner/index.js
deleted file mode 100644
index 3dd954306..000000000
--- a/src/components/SmartBanner/index.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/* global window */
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import useragent from 'express-useragent';
-import cookie from 'react-cookie';
-
-class SmartBanner extends Component {
-
- state = {
- settings: {},
- deviceType: '',
- appId: ''
- };
-
- componentDidMount() {
- if (__CLIENT__) {
- this.setSettings(this.props.force);
- }
- }
-
- setSettings(forceDeviceType) {
- const agent = useragent.parse(window.navigator.userAgent);
- let deviceType = '';
- const osVersion = parseInt(agent.version, 10);
-
- if (forceDeviceType) {
- deviceType = forceDeviceType;
- } else if (
- (agent.isAndroid || agent.isAndroidTablet) &&
- (agent.isChrome ? osVersion < 44 : true)
- ) {
- deviceType = 'android';
- } else if ((agent.isiPad || agent.isiPhone) && (agent.isSafari ? osVersion < 6 : true)) {
- deviceType = 'ios';
- }
-
- this.setState({ deviceType });
- if (deviceType) {
- this.setSettingsForDevice(deviceType);
- }
- }
-
- setSettingsForDevice(deviceType) {
- const mixins = {
- ios: {
- icon: 'app-banner-ios.jpg',
- appMeta: 'apple-itunes-app',
- getStoreLink: () =>
- `https://itunes.apple.com/${this.props.appStoreLanguage}/app/id`,
- },
- android: {
- icon: 'app-banner-android.png',
- appMeta: 'google-play-app',
- getStoreLink: () =>
- 'http://play.google.com/store/apps/details?id=',
- }
- };
-
- if (mixins[deviceType]) {
- this.setState({
- settings: mixins[deviceType],
- appId: this.parseAppId(mixins[deviceType].appMeta)
- });
- }
- }
-
- parseAppId = (metaName) => {
- const meta = window.document.querySelector(`meta[name="${metaName}"]`);
- return /app-id=([^\s,]+)/.exec(meta.getAttribute('content'))[1];
- }
-
- hide = () => {
- window.document.querySelector('html').classList.remove('smartbanner-show');
- }
-
- show = () => {
- window.document.querySelector('html').classList.add('smartbanner-show');
- }
-
- close() {
- this.hide();
-
- let expireDate = new Date();
- expireDate = new Date(expireDate.setDate(expireDate.getDate() + this.props.daysHidden));
-
- cookie.save('smartbanner-closed', 'true', {
- path: '/',
- expires: expireDate,
- });
- }
-
- install() {
- let expireDate = new Date();
- expireDate = new Date(expireDate.setDate(expireDate.getDate() + this.props.daysReminder));
-
- this.hide();
- cookie.save('smartbanner-installed', 'true', {
- path: '/',
- expires: expireDate,
- });
- }
-
- retrieveInfo() {
- const link = this.state.settings.getStoreLink() + this.state.appId;
- const inStore = `
- ${this.props.price[this.state.deviceType]} - ${this.props.storeText[this.state.deviceType]}`;
- const icon = require(`../../../static/images/${this.state.settings.icon}`); // eslint-disable-line
-
- return {
- icon,
- link,
- inStore,
- };
- }
-
-
- render() {
- // Don't show banner when:
- // 1) if device isn't iOS or Android
- // 2) website is loaded in app,
- // 3) user dismissed banner,
- // 4) or we have no app id in meta
-
- if (!this.state.deviceType
- || window.navigator.standalone
- || cookie.load('smartbanner-closed')
- || cookie.load('smartbanner-installed')) {
- return null;
- }
-
- if (!this.state.appId) {
- return null;
- }
-
- this.show();
-
- const { icon, link, inStore } = this.retrieveInfo();
- const wrapperClassName = `smartbanner smartbanner-${this.state.deviceType}`;
- const iconStyle = {
- backgroundImage: `url(${icon})`,
- };
-
- return (
-
+
+
+
+
+
+
+ this.install()}
+ className="smartbanner-button"
+ data-metrics-event-name="SmartBanner:InstallAapp"
+ >
+ {button}
+
+ {title}
+ {author}
+ {inStore}
+
-
- );
- }
-}
-
-SmartBanner.propTypes = {
- daysHidden: PropTypes.number,
- daysReminder: PropTypes.number,
- appStoreLanguage: PropTypes.string,
- button: PropTypes.string,
- storeText: customPropTypes.storeText,
- price: customPropTypes.storeText,
- force: PropTypes.string,
- title: PropTypes.string,
- author: PropTypes.string,
-};
-
-SmartBanner.defaultProps = {
- daysHidden: 15,
- daysReminder: 90,
- appStoreLanguage: 'us',
- button: 'View',
- storeText: {
- ios: 'On the App Store',
- android: 'In Google Play',
- windows: 'In Windows Store',
- kindle: 'In the Amazon Appstore',
- },
- price: {
- ios: 'Free',
- android: 'Free',
- windows: 'Free',
- kindle: 'Free',
- },
- force: '',
- title: '',
- author: '',
-};
-
-export default SmartBanner;
diff --git a/src/components/SurahInfo/index.js b/src/components/SurahInfo/index.js
deleted file mode 100644
index 16d13b1b4..000000000
--- a/src/components/SurahInfo/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import Loader from 'quran-components/lib/Loader';
-
-const style = require('./style.scss');
-
-const SurahInfo = ({ chapter, info, isShowingSurahInfo, onClose }) => {
- // So we don't need to load images and files unless needed
- if (!isShowingSurahInfo) return ;
- if (!info) {
- return
- this.close()}
- data-metrics-event-name="SmartBanner:close"
- >
-
-
-
-
-
-
-
- this.install()} className="smartbanner-button" data-metrics-event-name="SmartBanner:InstallAapp">
- {this.props.button}
-
- {this.props.title}
- {this.props.author}
- {inStore}
-
- {
- onClose &&
-
- );
-};
-
-SurahInfo.propTypes = {
- onClose: PropTypes.func,
- isShowingSurahInfo: PropTypes.bool,
- chapter: customPropTypes.surahType,
- info: customPropTypes.infoType
-};
-
-export default SurahInfo;
diff --git a/src/components/SurahInfo/style.scss b/src/components/SurahInfo/style.scss
deleted file mode 100644
index 7fbf9b609..000000000
--- a/src/components/SurahInfo/style.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-@import '../../styles/variables.scss';
-$transition-speed: 0.75s;
-
-.container{
- overflow-y: auto;
- margin-bottom: 30px;
- height: 0px;
- max-height: 0px;
- min-height: 0px;
- transition: max-height $transition-speed, height $transition-speed;
- margin-top: -20px; // To account for the .surah-container padding.
-
- @media(max-width: $screen-xs-max) {
- margin-bottom: 0;
- }
-
- &.show{
- max-height: 600px;
- max-height: 70vh;
- height: 1000px;
- }
-
- .row{
- height: 100%;
- }
-
- .bg{
- height: 100%;
- background-size: cover !important;
- background-position: center center;
- background-repeat: no-repeat;
-
- &.madinah{
- background-image: url('../../../static/images/madinah.jpg');
- }
-
- &.makkah{
- background-image: url('../../../static/images/makkah.jpg');
- }
- }
-
- .list{
- background: lighten($text-muted, 10%);
- height: 100%;
- }
-
- @media(max-width: $screen-sm){
- .list, .bg{
- height: 30%;
- }
- }
-
-
- .info{
- height: 100%;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- padding-top: 15px;
- padding-bottom: 15px;
- font-size: 16px;
- background: lighten($text-muted, 15%);
-
- h2{
- font-size: 22px;
- font-family: $font-montserrat;
- font-weight: bold;
- }
-
- h3{
- font-size: 20px;
- font-family: $font-montserrat;
- font-weight: bold;
- }
-
- p{
- font-size: 16px;
- }
- }
-
- dl{
- padding-top: 8px;
- text-align: right;
-
- dt{
- font-size: 10px;
- font-weight: 500;
- padding-top: 25px;
- padding-bottom: 5px;
- }
-
- dd{
- color: $brand-primary;
- font-weight: 300;
- }
- }
-
- .close{
- position: absolute;
- right: 15px;
- top: 15px;
- background: lighten($text-muted, 10%);
- height: 26px;
- width: 26px;
- padding: 7px 8px;
- font-size: 10px;
- border-radius: 16px;
- color: #fff;
- z-index: 20;
- cursor: pointer;
-
- &:hover{
- opacity: 0.8;
- }
- }
-}
diff --git a/src/components/SurahsDropdown/index.js b/src/components/SurahsDropdown/index.js
deleted file mode 100644
index 9f3b37d94..000000000
--- a/src/components/SurahsDropdown/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
-import NavDropdown from 'react-bootstrap/lib/NavDropdown';
-import MenuItem from 'react-bootstrap/lib/MenuItem';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const styles = require('./style.scss');
-
-class SurahsDropdown extends Component {
- shouldComponentUpdate(nextProps) {
- return this.props.chapters !== nextProps.chapters;
- }
-
- renderList() {
- const { chapters } = this.props;
-
- return Object.values(chapters).map((chapter, index) => (
-
-
-
-
-);
-
-SwitchToggle.propTypes = {
- id: PropTypes.string,
- flat: PropTypes.bool,
- checked: PropTypes.bool,
- onToggle: PropTypes.func.isRequired
-};
-
-SwitchToggle.defaultProps = {
- flat: false,
- checked: false
-};
-
-export default SwitchToggle;
diff --git a/src/components/SwitchToggle/style.scss b/src/components/SwitchToggle/style.scss
deleted file mode 100644
index 0d21d4bbb..000000000
--- a/src/components/SwitchToggle/style.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-@import '../../styles/variables.scss';
-$old-color: #8ce196;
-$color: $brand-primary;
-$height: 25px;
-$width: 50px;
-
-.switch{
- display: inline-block;
- vertical-align: middle;
-}
-
-.toggle {
- position: absolute;
- margin-left: -9999px;
- visibility: hidden;
-}
-
-.toggle + .label {
- display: block;
- position: relative;
- cursor: pointer;
- outline: none;
- user-select: none;
- margin-bottom: 0px;
-}
-
-.toggleRound + .label {
- padding: 2px;
- width: $width;
- height: $height;
- background-color: #dddddd;
- border-radius: $height;
-}
-
-.toggleRound + .label:before,
-.toggleRound + .label:after {
- display: block;
- position: absolute;
- top: 1px;
- left: 1px;
- bottom: 1px;
- content: "";
-}
-
-.toggleRound + .label:before {
- right: 1px;
- background-color: #f1f1f1;
- border-radius: $height;
- transition: background 0.4s;
-}
-
-.toggleRound + .label:after {
- width: $height - 2;
- background-color: #fff;
- border-radius: 100%;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
- transition: margin 0.4s;
-}
-
-.toggleRound:checked + .label:before {
- background-color: $color;
-}
-
-.toggleRound:checked + .label:after {
- margin-left: $width / 2;
-}
-
-.toggleFlat + .label {
- padding: 2px;
- width: $width;
- height: $height;
- background-color: #dddddd;
- border-radius: $height;
- transition: background 0.4s;
-}
-.toggleFlat + .label:before,
-.toggleFlat + .label:after {
- display: block;
- position: absolute;
- content: "";
-}
-.toggleFlat + .label:before {
- top: 2px;
- left: 2px;
- bottom: 2px;
- right: 2px;
- background-color: #fff;
- border-radius: $height;
- transition: background 0.4s;
-}
-.toggleFlat + .label:after {
- top: 4px;
- left: 4px;
- bottom: 4px;
- width: $height - 8;
- background-color: #dddddd;
- border-radius: $height - 8;
- transition: margin 0.4s, background 0.4s;
-}
-.toggleFlat:checked + .label {
- background-color: $color;
-}
-.toggleFlat:checked + .label:after {
- margin-left: $width / 2;
- background-color: $color;
-}
diff --git a/src/components/T.tsx b/src/components/T.tsx
new file mode 100644
index 000000000..a30f6726a
--- /dev/null
+++ b/src/components/T.tsx
@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import {
+ injectIntl,
+ intlShape,
+ FormattedMessage,
+ InjectedIntlProps, // eslint-disable-line
+} from 'react-intl';
+import config from '../../config';
+import LOCALE_KEYS from '../locale/keys';
+
+type Props = {
+ id: LOCALE_KEYS;
+ values?: { [key: string]: string };
+ intl?: $TsFixMe;
+ children?: (...formattedMessage: Array
+
+ );
+};
+
+Tafsir.propTypes = propTypes;
+Tafsir.defaultProps = defaultProps;
+
+export default Tafsir;
diff --git a/src/components/TooltipDropdown/index.js b/src/components/TooltipDropdown/index.js
deleted file mode 100644
index 0f9d407be..000000000
--- a/src/components/TooltipDropdown/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { PropTypes } from 'react';
-import Menu, { MenuItem } from 'quran-components/lib/Menu';
-import Radio from 'quran-components/lib/Radio';
-import Icon from 'quran-components/lib/Icon';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-const TooltipDropdown = ({ tooltip, onOptionChange }) => {
- const handleOptionChange = type => onOptionChange({
- tooltip: type
- });
-
- const list = ['translation', 'transliteration'].map(type => (
-
- ));
-
- return (
- }
- menu={
-
- }
- >
- {tafsir.resourceName}
+{verse.textMadani}
+ +
-
-);
-
-TopOptions.propTypes = {
- title: PropTypes.string,
- chapter: customPropTypes.surahType.isRequired
-};
-
-export default TopOptions;
diff --git a/src/components/TopOptions/spec.js b/src/components/TopOptions/spec.js
deleted file mode 100644
index 4a6c55174..000000000
--- a/src/components/TopOptions/spec.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import TopOptions from './index.js';
-import getSurahs from '../../../tests/fixtures/getSurahs.js';
-// used components
-import InformationToggle from 'components/InformationToggle'; // eslint-disable-line
-import FontSizeDropdown from 'components/FontSizeDropdown'; // eslint-disable-line
-import TooltipDropdown from 'components/TooltipDropdown'; // eslint-disable-line
-import ReadingModeToggle from 'components/ReadingModeToggle'; // eslint-disable-line
-import Share from 'components/Share'; // eslint-disable-line
-
-describe('
- {/* NOTE: Caused about 7000 lines of code to accept all titles SVG */}
- {/*
- {title}
} -
-
- -
-
{translation.resourceName}
+
+
+
-
- );
- }
-}
-
-Translation.propTypes = {
- translation: customPropTypes.translationType.isRequired,
- index: PropTypes.number,
- loadFootNote: PropTypes.func.isRequired,
-};
-
-export default connect(state => ({}), // eslint-disable-line no-unused-vars
- { loadFootNote }
-)(Translation);
diff --git a/src/components/Translation/style.scss b/src/components/Translation/style.scss
deleted file mode 100644
index 28d7d5b68..000000000
--- a/src/components/Translation/style.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../../styles/variables';
-
-.translation{
- &.arabic{
- text-align: right;
- }
-
- h4{
- color: $light-green;
- margin-bottom: 5px;
- text-transform: uppercase;
- font-size: 14px;
- font-weight: 400;
-
- @media(max-width: $screen-sm-max) {
- font-size: 12px;
- }
- }
-
- h2{
- margin-top: 5px;
- margin-bottom: 25px;
- }
-
- sup{
- color: $light-green;
- cursor: pointer;
- }
-}
diff --git a/src/components/TranslationNode.tsx b/src/components/TranslationNode.tsx
new file mode 100644
index 000000000..a85b4bc0b
--- /dev/null
+++ b/src/components/TranslationNode.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export default styled.div<{ arabic?: boolean }>`
+ ${({ arabic }) => (arabic ? 'text-align: right;' : '')} h4 {
+ color: ${({ theme }) => theme.brandPrimary};
+ margin-bottom: 5px;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 400;
+ display: block;
+ clear: both;
+ @media (max-width: ${({ theme }) => theme.breakpointsMd}) {
+ font-size: 12px;
+ }
+ }
+ h2 {
+ margin-top: 5px;
+ margin-bottom: 25px;
+ }
+ sup {
+ color: ${({ theme }) => theme.brandPrimary};
+ cursor: pointer;
+ }
+`;
diff --git a/src/components/Verse.tsx b/src/components/Verse.tsx
new file mode 100644
index 000000000..283521fe5
--- /dev/null
+++ b/src/components/Verse.tsx
@@ -0,0 +1,165 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Element from 'react-scroll/modules/components/Element';
+import Translation from './Translation';
+
+import { VerseShape, ChapterShape, FootNoteShape } from '../shapes';
+import Text from './verse/Text';
+import Controls from './verse/Controls';
+import { FetchTafsirs } from '../redux/actions/tafsirs';
+import { SetCurrentVerseKey, Play, Pause } from '../redux/actions/audioplayer';
+import { FetchFootNote } from '../redux/actions/footNotes';
+import FootNote from './FootNote';
+
+const backgroundColor = ({
+ highlight,
+ isNightMode,
+}: {
+ highlight?: boolean;
+ isNightMode?: boolean;
+}): string => {
+ if (highlight) {
+ return isNightMode ? '#151414' : '#F5FBF7';
+ }
+
+ return '';
+};
+
+// TODO: Change this
+const VerseNode = styled(Element)<{
+ highlight?: boolean;
+ isNightMode?: boolean;
+ textMuted: string;
+}>`
+ padding: 2.5% 0;
+ border-bottom: 1px solid rgba(${({ textMuted }) => textMuted}, 0.5);
+ background-color: ${backgroundColor};
+ .text-info {
+ color: ${({ theme }) => theme.brandInfo};
+ &:hover {
+ color: ${({ theme }) => theme.brandPrimary};
+ }
+ }
+ a {
+ color: ${({ theme, isNightMode }) =>
+ isNightMode ? theme.colors.white : theme.colors.textColor};
+ }
+`;
+
+const propTypes = {
+ isSearched: PropTypes.bool,
+ verse: VerseShape.isRequired,
+ chapter: ChapterShape.isRequired,
+ isCurrentVersePlaying: PropTypes.bool.isRequired,
+ fetchTafsirs: PropTypes.func.isRequired,
+ pause: PropTypes.func.isRequired,
+ setCurrentVerseKey: PropTypes.func.isRequired,
+ fetchFootNote: PropTypes.func.isRequired,
+ isPdf: PropTypes.bool,
+ footNote: FootNoteShape,
+ isNightMode: PropTypes.bool,
+};
+
+const defaultProps: $TsFixMe = {
+ isSearched: false,
+ isPdf: false,
+ match: null,
+ currentVerse: null,
+ footNote: null,
+ isNightMode: false,
+};
+
+type Props = {
+ isSearched?: boolean;
+ verse: VerseShape;
+ chapter: ChapterShape;
+ isCurrentVersePlaying: boolean;
+ tooltip: 'translation' | 'transliteration';
+ fetchTafsirs: FetchTafsirs;
+ play: Play;
+ pause: Pause;
+ setCurrentVerseKey: SetCurrentVerseKey;
+ fetchFootNote: FetchFootNote;
+ isPdf?: boolean;
+ footNote?: FootNoteShape;
+ isNightMode: boolean;
+};
+
+class Verse extends Component{translation.resourceName}
-- -
-
+
+
- {verse.mediaContents.map((content, index) => (
-
- ))}
-
- );
- }
-
- renderText() {
- const {
- verse,
- tooltip,
- currentVerse,
- isPlaying,
- audioActions,
- isSearched
- } = this.props; // eslint-disable-line max-len
- // NOTE: Some 'word's are glyphs (jeem). Not words and should not be clicked for audio
- let wordAudioPosition = -1;
- const renderText = false; // userAgent.isBot;
-
- const text = verse.words.map((word) => ( // eslint-disable-line
- -
- {text} -
- - ); - } - - renderPlayLink() { - const { isSearched, verse, currentVerse, isPlaying, isPdf } = this.props; - const playing = verse.verseKey === currentVerse && isPlaying; - - if (isPdf) return false; - - if (!isSearched) { - return ( - this.handlePlay(verse)} - className="text-muted" - > - - {' '} -- - {verse.verseKey} - -
- ); - - if (isSearched) { - metric = 'Verse:Searched:Link'; - } else { - metric = 'Verse:Link'; - } - - return ( - - {content} - - ); - } - - renderShare() { - const { isSearched, verse, chapter } = this.props; - - if (isSearched) return false; - - return
- {this.renderBadge()}
- {this.renderPlayLink()}
- {this.renderCopyLink()}
- {this.renderBookmark()}
- {!isPdf && this.renderShare()}
-
- );
- }
-
- render() {
- const { verse, iscurrentVerse } = this.props;
- debug('component:Verse', `Render ${verse.verseKey}`);
-
- return (
-
- {this.renderText()}
- {this.renderTranslations()}
- {this.renderMedia()}
-
- {tooltipText}
+ );
+
+ return (
+
+
+
+ );
+ }
+
+ // TODO: PLEASE DON'T DO renderXYZ
+ renderSingleAyah() {
+ const { repeat, setRepeat, chapter } = this.props;
+ const array = range(chapter.versesCount);
+
+ return (
+ -
+
-
+
: +
+{ + let to = toNumber(event.target.value) + 3; + + to = to < chapter.versesCount ? to : chapter.versesCount; + + setRepeat({ + ...repeat, + from: toNumber(event.target.value), + to, + }); + }} + > + {array.reduce( + (options, time) => { + if (time + 1 < chapter.versesCount) { + // Exclude last verse + options.push( + + ); + } + + return options; + }, + [] as Array ++ )} +
+ - - +
-
+
: +
++ setRepeat({ ...repeat, to: parseInt(event.target.value, 10) }) + } + > + {array.reduce( + (options, time) => { + if ( + (repeat.from ? repeat.from : 1) < time + 1 && + time + 1 <= chapter.versesCount + ) { + // eslint-disable-line max-len + options.push( + + ); + } + + return options; + }, + [] as Array ++ )} +
+
+
+
+ setRepeat({
+ ...repeat,
+ from: parseInt(event.target.value, 10),
+ to: parseInt(event.target.value, 10),
+ })
+ }
+ >
+ {array.map(time => (
+
+ ))}
+
+
+ );
+ }
+
+ render() {
+ const { repeat, setRepeat } = this.props;
+ const times = range(10);
+
+ const popover = (
+ +
+
+
+
+
+
+
+
+ setRepeat({
+ ...repeat,
+ times: toNumber(event.target.value),
+ })
+ }
+ >
+
+ {times.map(time => (
+
+ ))}
+
+
+ +
+
+
+
+
+
+
+ );
+ }
+}
+
+export default RepeatButton;
diff --git a/src/components/audioplayer/ScrollButton.tsx b/src/components/audioplayer/ScrollButton.tsx
new file mode 100644
index 000000000..bee0a6829
--- /dev/null
+++ b/src/components/audioplayer/ScrollButton.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import SwitchToggle from 'quran-components/lib/Toggle';
+import T, { KEYS } from '../T';
+import ControlButton from './ControlButton';
+import Popover from './Popover';
+
+const propTypes = {
+ shouldScroll: PropTypes.bool.isRequired,
+ onScrollToggle: PropTypes.func.isRequired,
+};
+
+type Props = {
+ shouldScroll: boolean;
+ onScrollToggle: $TsFixMe;
+};
+
+const ScrollButton: React.SFC
+
+
+
+
+
+
+ );
+};
+
+ScrollButton.propTypes = propTypes;
+
+export default ScrollButton;
diff --git a/src/components/audioplayer/Segments.tsx b/src/components/audioplayer/Segments.tsx
new file mode 100644
index 000000000..4c50e9ad6
--- /dev/null
+++ b/src/components/audioplayer/Segments.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import SegmentShape from '../../shapes/SegmentShape';
+
+const propTypes = {
+ segments: SegmentShape.isRequired,
+ currentVerseKey: PropTypes.string,
+ currentTime: PropTypes.number,
+};
+
+const defaultProps: { currentVerseKey: undefined; currentTime: undefined } = {
+ currentVerseKey: undefined,
+ currentTime: undefined,
+};
+
+type Props = {
+ segments: SegmentShape;
+ currentVerseKey?: string;
+ currentTime?: number;
+};
+
+const Segments: React.SFC-
+
-
+
+
+ +
+
+
+);
+
+TopOptions.propTypes = propTypes;
+TopOptions.defaultProps = defaultProps;
+
+export default TopOptions;
diff --git a/src/components/chapter/_tests_/ChapterPagination.test.tsx b/src/components/chapter/_tests_/ChapterPagination.test.tsx
new file mode 100644
index 000000000..229d885c6
--- /dev/null
+++ b/src/components/chapter/_tests_/ChapterPagination.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import ChapterPagination from '../ChapterPagination';
+import { chapter } from '../../../../tests/fixtures/chapters';
+import { INITIAL_STATE } from '../../../redux/reducers/settings';
+
+const props = {
+ isSingleVerse: false,
+ isLoading: false,
+ isEndOfChapter: false,
+ chapter,
+ verses: {},
+ settings: INITIAL_STATE,
+ onLazyLoad: jest.fn(),
+};
+
+describe('
+ {title && {title} }
+
+
+
+
+
+ <T id={KEYS.SETTING_FONTSIZE} />
+ <Reset
+ type="refresh"
+ className="text-right"
+ onClick={this.handleFontSizeReset}
+ />
+
+
+
+
+ );
+ }
+}
+
+export default FontSizeOptions;
diff --git a/src/components/NightModeToggle/index.js b/src/components/settings/NightModeToggle.tsx
similarity index 50%
rename from src/components/NightModeToggle/index.js
rename to src/components/settings/NightModeToggle.tsx
index 5addc28ef..f132b77b9 100644
--- a/src/components/NightModeToggle/index.js
+++ b/src/components/settings/NightModeToggle.tsx
@@ -1,19 +1,25 @@
/* global document */
-import React, { Component, PropTypes } from 'react';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import { MenuItem } from 'quran-components/lib/Menu';
+import T from '../T';
+import KEYS from '../../locale/keys';
+import { SetSetting } from '../../redux/actions/settings';
-class NightModeToggle extends Component {
+const propTypes = {
+ isNightMode: PropTypes.bool.isRequired,
+ onToggle: PropTypes.func.isRequired,
+};
- componentDidMount() {
- const { isNightMode } = this.props;
+type Props = {
+ isNightMode?: boolean;
+ onToggle: SetSetting;
+};
- if (isNightMode) {
- document.body.classList.add('night-mode');
- }
- }
+class NightModeToggle extends Component
+
+
+ -
+
- + + +
-
+
+
+ - + + +
+
-
+
- + + +
-
+
+
+ - + + +
+ +
+ ); + + if (isSearched) { + metric = 'Verse:Searched:Link'; + } else { + metric = 'Verse:Link'; + } + + return ( + + {content} + + ); +}; + +Badge.propTypes = propTypes; +Badge.defaultProps = defaultProps; + +export default Badge; diff --git a/src/components/verse/Controls.tsx b/src/components/verse/Controls.tsx new file mode 100644 index 000000000..3d60ff45e --- /dev/null +++ b/src/components/verse/Controls.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import Badge from './Badge'; +import VerseCopy from '../VerseCopy'; +import Share from '../Share'; +import { VerseShape, ChapterShape } from '../../shapes'; +import T, { KEYS } from '../T'; +import ButtonLink from '../dls/ButtonLink'; + +const ControlsNode = styled.div<{ textMuted?: $TsFixMe }>` + a { + margin-bottom: 15px; + display: block; + text-decoration: none; + font-size: 12px; + cursor: pointer; + + &:focus { + color: ${({ textMuted }) => textMuted}; + } + } + .label { + padding: 0.65em 1.1em; + border-radius: 0; + display: inline-block; + margin-bottom: 15px; + font-weight: 300; + color: ${({ theme }) => theme.textColor}; + + &:hover { + opacity: 0.7; + } + } + + @media (max-width: ${({ theme }) => theme.breakpoints.sm}) { + h4, + a { + display: inline-block; + margin: 0 10; + } + + h4 { + margin: 0; + } + + padding: 0; + } +`; + +const propTypes = { + isSearched: PropTypes.bool, + verse: VerseShape.isRequired, + chapter: ChapterShape.isRequired, + isCurrentVersePlaying: PropTypes.bool.isRequired, + isPdf: PropTypes.bool, + onPlayClick: PropTypes.func.isRequired, + onTafsirsClick: PropTypes.func.isRequired, +}; + +const defaultProps: $TsFixMe = { + isSearched: false, + isPdf: false, +}; + +type Props = { + isSearched?: boolean; + verse: VerseShape; + chapter: ChapterShape; + isCurrentVersePlaying: boolean; + isPdf?: boolean; + onPlayClick(): void; + onTafsirsClick(): void; +}; + +const Controls: React.SFC
-
-);
diff --git a/src/containers/App/connect.js b/src/containers/App/connect.js
deleted file mode 100644
index 7ea6f0e83..000000000
--- a/src/containers/App/connect.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { isLoaded as isAuthLoaded } from 'redux/actions/auth';
-import { load as loadBookmarks } from 'redux/actions/bookmarks';
-
-export default ({ store: { getState, dispatch } }) => {
- const promises = [];
-
- if (isAuthLoaded(getState())) {
- promises.push(dispatch(loadBookmarks()));
- }
-
- return Promise.all(promises);
-};
diff --git a/src/containers/App/index.js b/src/containers/App/index.js
deleted file mode 100644
index ca617c4c3..000000000
--- a/src/containers/App/index.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/* eslint-disable react/prefer-stateless-function */
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import { metrics } from 'react-metrics';
-import { connect } from 'react-redux';
-import { asyncConnect } from 'redux-connect';
-import Helmet from 'react-helmet';
-import Modal from 'react-bootstrap/lib/Modal';
-import Loadable from 'react-loadable';
-import ComponentLoader from 'components/ComponentLoader';
-import debug from 'helpers/debug';
-import config from 'config';
-import metricsConfig from 'helpers/metrics';
-import Footer from 'components/Footer';
-import NoScript from 'components/NoScript';
-import { removeMedia } from 'redux/actions/media';
-import { removeFootNote } from 'redux/actions/footNote';
-import Loader from 'quran-components/lib/Loader';
-import authConnect from './connect';
-
-const ModalHeader = Modal.Header;
-const ModalTitle = Modal.Title;
-const ModalBody = Modal.Body;
-
-const GlobalNav = Loadable({
- loader: () =>
- import(/* webpackChunkName: "globalnav" */ 'components/GlobalNav'),
- LoadingComponent: ComponentLoader
-});
-
-const GlobalSidebar = Loadable({
- loader: () =>
- import(/* webpackChunkName: "globalsidebar" */ 'components/GlobalSidebar'),
- LoadingComponent: ComponentLoader
-});
-
-const SmartBanner = Loadable({
- loader: () =>
- import(/* webpackChunkName: "smartbanner" */ 'components/SmartBanner'),
- LoadingComponent: ComponentLoader
-});
-
-class App extends Component {
- static contextTypes = {
- store: PropTypes.object.isRequired
- };
-
- state = {
- sidebarOpen: false
- };
-
- render() {
- const {
- main,
- nav,
- footer,
- children,
- media,
- footNote,
- loadingFootNote,
- removeMedia, // eslint-disable-line no-shadow
- removeFootNote, // eslint-disable-line no-shadow
- ...props
- } = this.props;
- debug('component:APPLICATION', 'Render');
- let footNoteText;
-
- if (footNote) {
- footNoteText = footNote.text;
- } else {
- footNoteText =
-
-
-
-
-
- - The Noble Quran is the central - religious text of Islam. Muslims believe the Qur’an is the - book of Divine guidance and direction for mankind, and - consider the original Arabic text the final revelation of - Allah (God).[1] - All translations of the original Arabic text - are thus interpretations of the original meanings and should - be embraced as such. For more information about the Noble - Quran, you may visit its Wikipedia article. -
-
-
-
-
- MECCAN SURAHS
-- The Meccan suras are the chronologically earlier chapters - (suras) of the Quran that were, according to Islamic - tradition, revealed anytime before the migration of the - Islamic prophet Muhammed and his followers from Mecca to - Medina (Hijra). The Medinan suras are those revelations that - occurred after the move to the city of that name. -
-
-
-
-
- MEDINAN SURAHS
-- The Medinan suras or Medinan chapters of the Quran are the - latest 24 suras that, according to Islamic tradition, were - revealed at Medina after Muhammad's hijra from Mecca. These - suras were revealed by Allah when the Muslim community was - larger and more developed, as opposed to their minority position - in Mecca. -
-
-
-
-
- BROWSING SURAHS ON THIS WEBSITE
-- We have redesigned the website with a user friendly approach in - mind. To browse through the surahs, click on the button - (shown left) in the READ & LISTEN page and navigate surah by - title or by page. In future iterations, we will be integrating - more search and audio features inshaAllah. If you have any - suggestions on how we can make the website a better experience - please do not hesitate to contact us. -
-
-
-
-
- CREDITS
-- This website was created by a few volunteers and was made - possible with the will of Allah (Glory be unto Him) and with the - help of the open source Muslim community online. Data sources - include Tanzil, - QuranComplex, - Colin Fair's work on audio segments, - Zekr and - Online Quran Project. - Special thanks to the - Elmohafez team for word by - word timing files. - If you have any questions, you may visit the Contact page. -
-
- this.setState({ sidebarOpen: open })}
- />}
- {children || main}
-
-
-
- {media.content && media.content.authorName}
-
-
-
-
-
- }
- {__CLIENT__ &&
-
-
-
- Foot note
-
-
-
-
-
- }
-
- );
- }
-}
-
-const metricsApp = metrics(metricsConfig)(App);
-const AsyncApp = asyncConnect([{ promise: authConnect }])(metricsApp);
-
-App.propTypes = {
- media: customPropTypes.media.isRequired,
- removeMedia: PropTypes.func.isRequired,
- removeFootNote: PropTypes.func.isRequired,
- children: PropTypes.element,
- main: PropTypes.element,
- nav: PropTypes.element,
- footer: PropTypes.element,
- sidebar: PropTypes.element,
- footNote: customPropTypes.footNoteType,
- loadingFootNote: PropTypes.bool
-};
-
-export default connect(
- state => ({
- media: state.media,
- footNote: state.footNote.footNote,
- loadingFootNote: state.footNote.loadingFootNote
- }),
- { removeMedia, removeFootNote }
-)(AsyncApp);
diff --git a/src/containers/App/style.scss b/src/containers/App/style.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/containers/AudioplayerContainer.tsx b/src/containers/AudioplayerContainer.tsx
new file mode 100644
index 000000000..ec222b22a
--- /dev/null
+++ b/src/containers/AudioplayerContainer.tsx
@@ -0,0 +1,44 @@
+import { connect } from 'react-redux';
+import Audioplayer from '../components/Audioplayer';
+import ReduxState from '../types/ReduxState';
+import {
+ fetchAudio,
+ play,
+ pause,
+ update,
+ setCurrentVerseKey,
+} from '../redux/actions/audioplayer';
+
+export const mapStateToProps = (state: ReduxState, ownProps: $TsFixMe) => {
+ const { chapter } = ownProps;
+ const { currentVerseKey, files } = state.audioplayer;
+ const currentFile =
+ currentVerseKey &&
+ files[ownProps.chapter.id] &&
+ files[ownProps.chapter.id][currentVerseKey];
+
+ return {
+ segments: state.audioplayer.segments[chapter.id],
+ isPlaying: state.audioplayer.isPlaying,
+ repeat: state.audioplayer.repeat,
+ shouldScroll: state.audioplayer.shouldScroll,
+ duration: state.audioplayer.duration,
+ currentTime: state.audioplayer.currentTime,
+ currentVerseKey,
+ currentFile,
+ files: state.audioplayer.files[chapter.id],
+ audioSetting: state.settings.audio,
+ isNightMode: state.settings.isNightMode,
+ };
+};
+
+export default connect(
+ mapStateToProps,
+ {
+ fetchAudio,
+ play,
+ pause,
+ update,
+ setCurrentVerseKey,
+ }
+)(Audioplayer);
diff --git a/src/containers/AyatulKursi/connect.js b/src/containers/AyatulKursi/connect.js
deleted file mode 100644
index c34b46d75..000000000
--- a/src/containers/AyatulKursi/connect.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
- clearCurrent,
- load as loadVerses,
- isLoaded
-} from 'redux/actions/verses.js';
-
-import { debug } from 'helpers';
-
-export default ({ store: { dispatch, getState } }) => {
- debug('component:AyatulKursi:versesConnect', 'Init');
-
- const chapterId = 2;
- const paging = { offset: 254, limit: 1 };
-
- if (!isLoaded(getState(), chapterId, paging)) {
- debug('component:AyatulKursi:versesConnect', 'Not loaded');
-
- dispatch(clearCurrent(chapterId)); // In the case where you go to same surah but later ayahs.
-
- if (__CLIENT__) {
- dispatch(loadVerses(chapterId, paging, getState().options));
- return true;
- }
-
- return dispatch(loadVerses(chapterId, paging, getState().options));
- }
-
- return true;
-};
diff --git a/src/containers/AyatulKursi/index.js b/src/containers/AyatulKursi/index.js
deleted file mode 100644
index 25433ae69..000000000
--- a/src/containers/AyatulKursi/index.js
+++ /dev/null
@@ -1,258 +0,0 @@
-/* global window, document */
-import React, { Component, PropTypes } from 'react';
-import * as customPropTypes from 'customPropTypes';
-import Link from 'react-router/lib/Link';
-// redux
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import { asyncConnect } from 'redux-connect';
-import { push } from 'react-router-redux';
-
-import Helmet from 'react-helmet';
-import Loadable from 'react-loadable';
-
-// components
-import Verse from 'components/Verse';
-import ComponentLoader from 'components/ComponentLoader';
-import Bismillah from 'components/Bismillah';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-
-// Helpers
-import makeHeadTags from 'helpers/makeHeadTags';
-import debug from 'helpers/debug';
-
-import * as AudioActions from 'redux/actions/audioplayer.js';
-import * as AyahActions from 'redux/actions/verses.js';
-import * as BookmarkActions from 'redux/actions/bookmarks.js';
-import * as OptionsActions from 'redux/actions/options.js';
-import * as MediaActions from 'redux/actions/media.js';
-
-import { chaptersConnect, versesConnect } from 'containers/Surah/connect';
-
-const style = require('../Surah/style.scss');
-
-const PageView = Loadable({
- loader: () =>
- import(/* webpackChunkName: "pageview" */ 'components/PageView'),
- LoadingComponent: ComponentLoader
-});
-
-const Audioplayer = Loadable({
- loader: () =>
- import(/* webpackChunkName: "audioplayer" */ 'components/Audioplayer'),
- LoadingComponent: ComponentLoader
-});
-
-const TopOptions = Loadable({
- loader: () =>
- import(/* webpackChunkName: "topoptions" */ 'components/TopOptions'),
- LoadingComponent: ComponentLoader
-});
-
-const title = 'Ayatul Kursi';
-
-const description =
- 'Ayatul Kursi is verse 255 of the second chapter, surah Baqarah of the Holy Quran, Surah al-Baqarah (The Chapter of the Cow). It is also known as the Throne Verse.';
-
-class AyatulKursi extends Component {
- state = {
- sidebarOpen: false
- };
-
- shouldComponentUpdate(nextProps, nextState) {
- const conditions = [
- this.state.sidebarOpen !== nextState.sidebarOpen,
- this.props.chapter !== nextProps.chapter,
- this.props.bookmarks !== nextProps.bookmarks,
- this.props.isLoading !== nextProps.isLoading,
- this.props.isLoaded !== nextProps.isLoaded,
- this.props.options !== nextProps.options,
- this.props.currentVerse !== nextProps.currentVerse,
- this.props.isPlaying !== nextProps.isPlaying
- ];
-
- return conditions.some(condition => condition);
- }
-
- handleLazyLoadAyahs = () => false;
-
- renderVerses() {
- const {
- chapter,
- verses,
- actions,
- options,
- bookmarks,
- isPlaying,
- isAuthenticated,
- currentVerse
- } = this.props; // eslint-disable-line no-shadow
-
- return Object.values(verses).map(verse => (
-
-
- );
- }
-}
-
-AyatulKursi.propTypes = {
- chapter: customPropTypes.surahType.isRequired,
- actions: PropTypes.object.isRequired, // eslint-disable-line
- lines: PropTypes.object.isRequired, // eslint-disable-line
- currentVerse: PropTypes.string,
- bookmarks: PropTypes.object.isRequired, // eslint-disable-line
- isLoading: PropTypes.bool.isRequired,
- isLoaded: PropTypes.bool.isRequired,
- isAuthenticated: PropTypes.bool.isRequired,
- options: PropTypes.object.isRequired, // eslint-disable-line
- verses: customPropTypes.verses,
- isPlaying: PropTypes.bool
-};
-
-const AsyncAyatulKursi = asyncConnect([
- { promise: chaptersConnect },
- {
- promise: ({ store }) =>
- versesConnect({ store, params: { chapterId: '2', range: '255' } })
- }
-])(AyatulKursi);
-
-function mapStateToProps(state) {
- const chapterId = 2;
- const chapter: Object = state.chapters.entities[chapterId];
- const verses: Object = state.verses.entities[chapterId];
- const currentVerse = state.audioplayer.currentVerse || Object.keys(verses)[0];
-
- return {
- chapter,
- verses,
- currentVerse,
- isStarted: state.audioplayer.isStarted,
- isPlaying: state.audioplayer.isPlaying,
- isAuthenticated: state.auth.loaded,
- currentWord: state.verses.currentWord,
- bookmarks: state.bookmarks.entities,
- isLoading: state.verses.loading,
- isLoaded: state.verses.loaded,
- lines: state.lines.lines,
- options: state.options
- };
-}
-
-function mapDispatchToProps(dispatch) {
- return {
- actions: {
- options: bindActionCreators(OptionsActions, dispatch),
- verse: bindActionCreators(AyahActions, dispatch),
- audio: bindActionCreators(AudioActions, dispatch),
- bookmark: bindActionCreators(BookmarkActions, dispatch),
- media: bindActionCreators(MediaActions, dispatch),
- push: bindActionCreators(push, dispatch)
- }
- };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(AsyncAyatulKursi);
diff --git a/src/containers/AyatulKursiContainer.tsx b/src/containers/AyatulKursiContainer.tsx
new file mode 100644
index 000000000..27fb8fa8d
--- /dev/null
+++ b/src/containers/AyatulKursiContainer.tsx
@@ -0,0 +1,28 @@
+import { connect } from 'react-redux';
+import { fetchVerses } from '../redux/actions/verses';
+import { fetchChapters } from '../redux/actions/chapters';
+import ReduxState from '../types/ReduxState';
+import AyatulKursi from '../components/AyatulKursi';
+
+export const mapStateToProps = (state: ReduxState) => {
+ const chapter = state.chapters.entities[2];
+ const verses = state.verses.entities[2];
+
+ return {
+ chapter,
+ verses,
+ chapters: state.chapters.entities,
+ isVersesLoading: state.verses.isLoading,
+ isChapterLoading: state.chapters.isLoading,
+ lines: state.lines.entities,
+ settings: state.settings,
+ };
+};
+
+export default connect(
+ mapStateToProps,
+ {
+ fetchVerses,
+ fetchChapters,
+ }
+)(AyatulKursi);
diff --git a/src/containers/ChapterContainer.tsx b/src/containers/ChapterContainer.tsx
new file mode 100644
index 000000000..7532fff31
--- /dev/null
+++ b/src/containers/ChapterContainer.tsx
@@ -0,0 +1,39 @@
+import { connect } from 'react-redux';
+import { match } from 'react-router';
+import { fetchVerses } from '../redux/actions/verses';
+import { fetchChapters } from '../redux/actions/chapters';
+import { fetchChapterInfo } from '../redux/actions/chapterInfos';
+import ReduxState from '../types/ReduxState';
+import Chapter from '../components/Chapter';
+import { reset } from '../redux/actions/audioplayer';
+
+type Props = {
+ match: match<$TsFixMe>;
+};
+
+export const mapStateToProps = (state: ReduxState, ownProps: Props) => {
+ const { chapterId } = ownProps.match.params;
+ const chapter = state.chapters.entities[chapterId];
+ const verses = state.verses.entities[chapterId];
+
+ return {
+ chapter,
+ verses,
+ chapters: state.chapters.entities,
+ chapterInfo: state.chapterInfos.entities[chapterId],
+ isVersesLoading: state.verses.isLoading,
+ isChapterLoading: state.chapters.isLoading,
+ lines: state.lines.entities,
+ settings: state.settings,
+ };
+};
+
+export default connect(
+ mapStateToProps,
+ {
+ fetchVerses,
+ fetchChapters,
+ fetchChapterInfo,
+ resetAudioPlayer: reset,
+ }
+)(Chapter);
diff --git a/src/containers/ChapterInfo/index.js b/src/containers/ChapterInfo/index.js
deleted file mode 100644
index 02158ecfb..000000000
--- a/src/containers/ChapterInfo/index.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as customPropTypes from 'customPropTypes';
-import React from 'react';
-import { connect } from 'react-redux';
-import { asyncConnect } from 'redux-connect';
-
-import Helmet from 'react-helmet';
-import Loadable from 'react-loadable';
-import Button from 'quran-components/lib/Button';
-import ComponentLoader from 'components/ComponentLoader';
-import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-import makeHeadTags from 'helpers/makeHeadTags';
-
-import { chaptersConnect, chapterInfoConnect } from '../Surah/connect';
-
-const SurahInfo = Loadable({
- loader: () =>
- import(/* webpackChunkName: "surahinfo" */ 'components/SurahInfo'),
- LoadingComponent: ComponentLoader
-});
-
-const ChapterInfo = ({ chapter, info }) => (
-
-
- {__CLIENT__ &&
-
-
-
- {__CLIENT__ &&
-
-
-
- -
-
-
-
-
- -
-
-
-);
-
-ChapterInfo.propTypes = {
- chapter: customPropTypes.surahType,
- info: customPropTypes.infoType
-};
-
-const AsyncChapterInfo = asyncConnect([
- { promise: chaptersConnect },
- { promise: chapterInfoConnect }
-])(ChapterInfo);
-
-function mapStateToProps(state, ownProps) {
- const chapterId = parseInt(ownProps.params.chapterId, 10);
- const chapter: Object = state.chapters.entities[chapterId];
-
- return {
- chapter,
- info: state.chapters.infos[chapterId]
- };
-}
-
-export default connect(mapStateToProps)(AsyncChapterInfo);
diff --git a/src/containers/ChapterInfoContainer.tsx b/src/containers/ChapterInfoContainer.tsx
new file mode 100644
index 000000000..b1e36def6
--- /dev/null
+++ b/src/containers/ChapterInfoContainer.tsx
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import ReduxState from '../types/ReduxState';
+import { match } from '../../node_modules/@types/react-router';
+import ChapterInfo from '../components/ChapterInfo';
+
+type Props = {
+ match: match<{ chapterId: string }>;
+};
+
+function mapStateToProps(state: ReduxState, ownProps: Props) {
+ const chapterId = parseInt(ownProps.match.params.chapterId, 10);
+
+ return {
+ chapter: state.chapters.entities[chapterId],
+ chapterInfo: state.chapterInfos.entities[chapterId],
+ };
+}
+
+export default connect(mapStateToProps)(ChapterInfo);
diff --git a/src/containers/ChapterInfoPanelContainer.tsx b/src/containers/ChapterInfoPanelContainer.tsx
new file mode 100644
index 000000000..067a77f70
--- /dev/null
+++ b/src/containers/ChapterInfoPanelContainer.tsx
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import ChapterInfoPanel from '../components/ChapterInfoPanel';
+import { setSetting } from '../redux/actions/settings';
+import ReduxState from '../types/ReduxState';
+import { ChapterShape } from '../shapes';
+
+type Props = {
+ chapter: ChapterShape;
+};
+
+export const mapStateToProps = (state: ReduxState, ownProps: Props) => ({
+ chapterInfo: state.chapterInfos.entities[ownProps.chapter.id],
+ isShowingChapterInfo: state.settings.isShowingChapterInfo,
+});
+
+export default connect(
+ mapStateToProps,
+ { setSetting }
+)(ChapterInfoPanel);
diff --git a/src/containers/ChapterNavbarContainer.tsx b/src/containers/ChapterNavbarContainer.tsx
new file mode 100644
index 000000000..aa2dca619
--- /dev/null
+++ b/src/containers/ChapterNavbarContainer.tsx
@@ -0,0 +1,34 @@
+import { connect } from 'react-redux';
+import toNumber from 'lodash/toNumber';
+import ReduxState from '../types/ReduxState';
+import { match } from '../../node_modules/@types/react-router';
+import ChapterNavbar from '../components/ChapterNavbar';
+import { setSetting } from '../redux/actions/settings';
+import { fetchVerses } from '../redux/actions/verses';
+import { setCurrentVerseKey } from '../redux/actions/audioplayer';
+
+type Props = {
+ match: match<{ chapterId: string }>;
+};
+
+export const mapStateToProps = (state: ReduxState, ownProps: Props) => {
+ const chapterId = toNumber(ownProps.match.params.chapterId);
+ const chapter = state.chapters.entities[chapterId];
+ const verses = state.verses.entities[chapterId];
+
+ return {
+ chapter,
+ verses,
+ chapters: state.chapters.entities,
+ settings: state.settings,
+ };
+};
+
+export default connect(
+ mapStateToProps,
+ {
+ setSetting,
+ fetchVerses,
+ setCurrentVerseKey,
+ }
+)(ChapterNavbar);
diff --git a/src/containers/Contact/index.js b/src/containers/Contact/index.js
deleted file mode 100644
index 0d804fc46..000000000
--- a/src/containers/Contact/index.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { Component } from 'react';
-import superagent from 'superagent';
-
-import IndexHeader from 'components/IndexHeader';
-
-class Contact extends Component {
- state = {
- success: false
- };
-
- submitSupport = (event) => {
- event.preventDefault();
-
- const form = {
- subject: this.purpose.value.trim(),
- description: this.body.value.trim(),
- requester: {
- name: this.name.value.trim(),
- email: this.email.value.trim(),
- locale_id: 8
- }
- };
-
- superagent.post('/support').send(form).end((err, { body }) => {
- if (body.ticket) {
- this.setState({
- success: true
- });
- }
- });
- }
-
- renderForm() {
- return (
-
-
-
-