added content page for tafsir

src/components/Tafsir/index.js

@@ -0,0 +1,25 @@
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component } from 'react';
+import * as customPropTypes from 'customPropTypes';
+
+export default class Tafsir extends Component {
+  render() {
+    const { tafsir, verse } = this.props;
+
+    return (
+      <div className="col-md-10 col-md-offset-1">
+        <h4 className="montserrat">{tafsir.resourceName}</h4>
+        <h2 className="text-right">{verse.textMadani}</h2>
+        <p
+          className={`${tafsir.languageName} text-right`}
+          dangerouslySetInnerHTML={{ __html: tafsir.text }}
+        />
+      </div>
+    );
+  }
+}
+
+Tafsir.propTypes = {
+  tafsir: customPropTypes.tafsirType.isRequired,
+  verse: customPropTypes.verseType
+};

src/components/Translation/index.js

@@ -2,12 +2,11 @@
 import React, { Component, PropTypes } from 'react';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
-import { loadFootNote } from 'redux/actions/footNote';
+import { loadFootNote } from 'redux/actions/media';
 
 const styles = require('./style.scss');
 
 class Translation extends Component {
-
   componentDidMount() {
     const { index } = this.props;
     let trans;
@@ -22,10 +21,9 @@ class Translation extends Component {
     // 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);
+    // trans = document.getElementById(`trans${index}`).children[1]; // eslint-disable-line
+    // trans.removeEventListener('click', this.fetchFootNote, true);
     // }
   }
 
@@ -36,17 +34,22 @@ class Translation extends Component {
       event.preventDefault();
       loadFootNote(event.target.attributes.foot_note.value);
     }
-  }
+  };
 
   render() {
     const { translation, index } = this.props;
     const lang = translation.languageName;
     const isArabic = lang === 'arabic';
 
     return (
-      <div id={`trans${index}`} className={`${styles.translation} ${isArabic && 'arabic'} translation`}>
+      <div
+        id={`trans${index}`}
+        className={`${styles.translation} ${isArabic && 'arabic'} translation`}
+      >
         <h4 className="montserrat">{translation.resourceName}</h4>
-        <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
+        <h2
+          className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}
+        >
           <small
             dangerouslySetInnerHTML={{ __html: translation.text }}
             className={`${lang || 'times-new'}`}
@@ -60,9 +63,10 @@ class Translation extends Component {
 Translation.propTypes = {
   translation: customPropTypes.translationType.isRequired,
   index: PropTypes.number,
-  loadFootNote: PropTypes.func.isRequired,
+  loadFootNote: PropTypes.func.isRequired
 };
 
-export default connect(state => ({}),  // eslint-disable-line no-unused-vars
+export default connect(
+  state => ({}), // eslint-disable-line no-unused-vars
   { loadFootNote }
 )(Translation);

src/components/Verse/index.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import * as customPropTypes from 'customPropTypes';
 import Link from 'react-router/lib/Link';
+import { connect } from 'react-redux';
 import Element from 'react-scroll/lib/components/Element';
 import Loadable from 'react-loadable';
 import ComponentLoader from 'components/ComponentLoader';
@@ -9,6 +10,8 @@ import Word from 'components/Word';
 import Translation from 'components/Translation';
 import debug from 'helpers/debug';
 
+import { loadTafsirs } from 'redux/actions/media';
+
 const styles = require('./style.scss');
 
 const Copy = Loadable({
@@ -168,6 +171,25 @@ class Verse extends Component {
     return false;
   }
 
+  renderTafsirLink() {
+    const { verse } = this.props;
+
+    return (
+      <a
+        tabIndex="-1"
+        className="text-muted"
+        onClick={() => this.props.loadTafsirs(verse)}
+      >
+        <i className="ss-book vertical-align-middle" />
+        {' '}
+        <LocaleFormattedMessage
+          id={'actions.tafsir'}
+          defaultMessage={'Tafsir'}
+        />
+      </a>
+    );
+  }
+
   renderCopyLink() {
     const { isSearched, verse, isPdf } = this.props;
 
@@ -268,6 +290,7 @@ class Verse extends Component {
         {this.renderBadge()}
         {this.renderPlayLink()}
         {this.renderCopyLink()}
+        {this.renderTafsirLink()}
         {this.renderBookmark()}
         {!isPdf && this.renderShare()}
       </div>
@@ -310,6 +333,7 @@ Verse.propTypes = {
   iscurrentVerse: PropTypes.bool,
   currentVerse: PropTypes.string,
   userAgent: PropTypes.object, // eslint-disable-line
+  loadTafsirs: PropTypes.func.isRequired,
   isPdf: PropTypes.bool
 };
 
@@ -319,4 +343,4 @@ Verse.defaultProps = {
   isPdf: false
 };
 
-export default Verse;
+export default connect(() => ({}), { loadTafsirs })(Verse);

src/containers/App/index.js

@@ -14,7 +14,6 @@ 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';
 
@@ -49,27 +48,38 @@ class App extends Component {
     sidebarOpen: false
   };
 
+  renderModalBody() {
+    const { media } = this.props;
+
+    if (media.loading) {
+      return (
+        <div className="embed-responsive embed-responsive-16by9">
+          <Loader isActive relative />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={`embed-responsive embed-responsive-16by9 ${media.wrapperClass}`}
+        dangerouslySetInnerHTML={{
+          __html: media.content.body
+        }}
+      />
+    );
+  }
+
   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 = <Loader isActive={loadingFootNote} />;
-    }
 
     return (
       <div>
@@ -101,41 +111,15 @@ class App extends Component {
         <SmartBanner title="The Noble Quran - القرآن الكريم" button="Install" />
         {footer || <Footer />}
         {__CLIENT__ &&
-          <Modal
-            bsSize="large"
-            show={media && media.content}
-            onHide={removeMedia}
-          >
-            <ModalHeader closeButton>
-              <ModalTitle className="montserrat">
-                {media.content && media.content.authorName}
-              </ModalTitle>
-            </ModalHeader>
-            <ModalBody>
-              <div
-                className="embed-responsive embed-responsive-16by9"
-                dangerouslySetInnerHTML={{
-                  __html: media.content && media.content.embedText
-                }}
-              />
-            </ModalBody>
-          </Modal>}
-        {__CLIENT__ &&
-          <Modal
-            bsSize="large"
-            show={!!footNote || loadingFootNote}
-            onHide={removeFootNote}
-          >
+          media.show &&
+          <Modal bsSize={media.size} show={media.show} onHide={removeMedia}>
             <ModalHeader closeButton>
               <ModalTitle className="montserrat">
-                Foot note
+                {media.content.title}
               </ModalTitle>
             </ModalHeader>
             <ModalBody>
-              <div
-                className={`${footNote && footNote.languageName}`}
-                dangerouslySetInnerHTML={{ __html: footNoteText }}
-              />
+              {this.renderModalBody()}
             </ModalBody>
           </Modal>}
       </div>
@@ -149,7 +133,6 @@ 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,
@@ -161,9 +144,7 @@ App.propTypes = {
 
 export default connect(
   state => ({
-    media: state.media,
-    footNote: state.footNote.footNote,
-    loadingFootNote: state.footNote.loadingFootNote
+    media: state.media
   }),
-  { removeMedia, removeFootNote }
+  { removeMedia }
 )(AsyncApp);

src/containers/Surah/connect.js

@@ -9,7 +9,9 @@ import {
 import {
   clearCurrent,
   load as loadVerses,
-  isLoaded
+  isLoaded,
+  loadTafsir,
+  isTafsirLoaded
 } from 'redux/actions/verses.js';
 
 import { debug } from 'helpers';
@@ -105,3 +107,18 @@ export const versesConnect = ({
 
   return true;
 };
+
+export const tafsirConnect = ({ store: { dispatch, getState }, params }) => {
+  if (
+    isTafsirLoaded(getState(), params.chapterId, params.range, params.tafsirId)
+  ) {
+    return false;
+  }
+
+  if (__CLIENT__) {
+    dispatch(loadTafsir(params.chapterId, params.range, params.tafsirId));
+    return true;
+  }
+
+  return dispatch(loadTafsir(params.chapterId, params.range, params.tafsirId));
+};