Foot note (#710)

* added foot note popup

* lint happy

Author: naveed-ahmad

src/components/Translation/index.js

@@ -1,23 +1,55 @@
 /* eslint-disable react/prefer-stateless-function */
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
 
 import { translationType } from 'types';
+import { loadFootNote } from 'redux/actions/footNote';
 
 const styles = require('./style.scss');
 
-export default class Translation extends Component {
+class Translation extends Component {
   static propTypes = {
     translation: translationType.isRequired,
-    index: PropTypes.number
+    index: PropTypes.number,
+    loadFootNote: PropTypes.func.isRequired,
   };
 
+  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() {
+    const { index } = this.props;
+    let trans;
+
+    if (__CLIENT__) {
+      trans = document.getElementById(`trans${index}`).children[1]; // eslint-disable-line no-undef
+      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 (
-      <div id={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`}>
           <small
@@ -29,3 +61,7 @@ export default class Translation extends Component {
     );
   }
 }
+
+export default connect(state => ({}),  // eslint-disable-line no-unused-vars
+  { loadFootNote }
+)(Translation);

src/components/Verse/index.js

@@ -95,11 +95,10 @@ class Verse extends Component {
 
   renderTranslations() {
     const { verse, match } = this.props;
-
     const array = match || verse.translations || [];
 
-    return array.map((translation, index) => (
-      <Translation translation={translation} index={index} key={index} />
+    return array.map(translation => (
+      <Translation translation={translation} index={translation.id} key={translation.id} />
     ));
   }
 

src/containers/App/index.js

@@ -15,6 +15,11 @@ 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 { footNoteType } from 'types';
 
 import authConnect from './connect';
 
@@ -28,10 +33,13 @@ class App extends Component {
       content: PropTypes.object
     }).isRequired,
     removeMedia: PropTypes.func.isRequired,
+    removeFootNote: PropTypes.func.isRequired,
     children: PropTypes.element,
     main: PropTypes.element,
     nav: PropTypes.element,
     sidebar: PropTypes.element,
+    footNote: footNoteType,
+    loadingFootNote: PropTypes.bool
   };
 
   static contextTypes = {
@@ -49,10 +57,20 @@ class App extends Component {
       sidebar,
       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>
@@ -91,6 +109,7 @@ class App extends Component {
         {children || main}
         <SmartBanner title="The Noble Quran - القرآن الكريم" button="Install" />
         <Footer />
+
         <Modal bsSize="large" show={media && media.content} onHide={removeMedia}>
           <ModalHeader closeButton>
             <ModalTitle className="montserrat">
@@ -104,6 +123,20 @@ class App extends Component {
             />
           </ModalBody>
         </Modal>
+
+        <Modal bsSize="large" show={!!footNote || loadingFootNote} onHide={removeFootNote}>
+          <ModalHeader closeButton>
+            <ModalTitle className="montserrat">
+              Foot note
+            </ModalTitle>
+          </ModalHeader>
+          <ModalBody>
+            <div
+              className={`${footNote && footNote.languageName}`}
+              dangerouslySetInnerHTML={{ __html: footNoteText }}
+            />
+          </ModalBody>
+        </Modal>
       </div>
     );
   }
@@ -113,6 +146,10 @@ const metricsApp = metrics(metricsConfig)(App);
 const AsyncApp = asyncConnect([{ promise: authConnect }])(metricsApp);
 
 export default connect(
-  state => ({ media: state.media }),
-  { removeMedia }
+  state => ({
+    media: state.media,
+    footNote: state.footNote.footNote,
+    loadingFootNote: state.footNote.loadingFootNote
+  }),
+  { removeMedia, removeFootNote }
 )(AsyncApp);

src/redux/actions/footNote.js

@@ -0,0 +1,15 @@
+import {
+  LOAD_FOOT_NOTE,
+  LOAD_FOOT_NOTE_SUCCESS,
+  REMOVE_FOOT_NOTE,
+  LOAD_FOOT_NOTE_FAIL
+} from 'redux/constants/footNote.js';
+
+export const loadFootNote = footNoteId => ({
+  types: [LOAD_FOOT_NOTE, LOAD_FOOT_NOTE_SUCCESS, LOAD_FOOT_NOTE_FAIL],
+  promise: client => client.get(`/api/v3/foot_notes/${footNoteId}`)
+});
+
+export const removeFootNote = () => ({
+  type: REMOVE_FOOT_NOTE
+});

src/redux/actions/options.js

@@ -30,11 +30,6 @@ export function setOption(payload) {
   };
 }
 
-export const loadRecitations = () => ({
-  types: [LOAD_RECITERS, LOAD_RECITERS_SUCCESS, LOAD_RECITERS_FAIL],
-  promise: client => client.get('/api/v3/options/recitations')
-});
-
 export function setUserAgent(userAgent) {
   return {
     type: SET_USER_AGENT,
@@ -46,3 +41,8 @@ export const loadTranslations = () => ({
   types: [LOAD_TRANSLATIONS, LOAD_TRANSLATIONS_SUCCESS, LOAD_TRANSLATIONS_FAIL],
   promise: client => client.get('/api/v3/options/translations')
 });
+
+export const loadRecitations = () => ({
+  types: [LOAD_RECITERS, LOAD_RECITERS_SUCCESS, LOAD_RECITERS_FAIL],
+  promise: client => client.get('/api/v3/options/recitations')
+});

src/redux/constants/footNote.js

@@ -0,0 +1,4 @@
+export const LOAD_FOOT_NOTE = '@@quran/footNote/LOAD';
+export const LOAD_FOOT_NOTE_SUCCESS = '@@quran/footNote/LOAD_SUCCESS';
+export const LOAD_FOOT_NOTE_FAIL = '@@quran/footNote/LOAD_FAIL';
+export const REMOVE_FOOT_NOTE = '@@quran/footNote/REMOVE';

src/redux/modules/footNote.js

@@ -0,0 +1,38 @@
+import {
+  LOAD_FOOT_NOTE,
+  LOAD_FOOT_NOTE_SUCCESS,
+  REMOVE_FOOT_NOTE
+} from 'redux/constants/footNote.js';
+
+const initialState = {
+  footNote: null,
+  loadingFootNote: false
+};
+
+export default function reducer(state = initialState, action = {}) {
+  switch (action.type) {
+    case LOAD_FOOT_NOTE: {
+      return {
+        ...state,
+        loadingFootNote: true,
+        footNote: null,
+      };
+    }
+    case LOAD_FOOT_NOTE_SUCCESS: {
+      return {
+        ...state,
+        loadingFootNote: false,
+        footNote: action.result.footNote
+      };
+    }
+    case REMOVE_FOOT_NOTE: {
+      return {
+        ...state,
+        loadingFootNote: false,
+        footNote: null,
+      };
+    }
+    default:
+      return state;
+  }
+}

src/redux/modules/options.js

@@ -5,7 +5,7 @@ import {
   SET_USER_AGENT,
   LOAD_TRANSLATIONS,
   LOAD_TRANSLATIONS_SUCCESS
-} from 'redux/constants/options.js';
+ } from 'redux/constants/options.js';
 
 const initialState = {
   isReadingMode: false,
@@ -17,6 +17,8 @@ const initialState = {
   translations: [20],
   tooltip: 'translation',
   userAgent: null,
+  footNote: null,
+  loadingFootNote: false,
   options: {
     recitations: [],
     translations: []

src/redux/modules/reducer.js

@@ -13,6 +13,7 @@ import fontFaces from './fontFaces';
 import auth from './auth';
 import bookmarks from './bookmarks';
 import media from './media';
+import footNote from './footNote';
 
 export default combineReducers({
   routing: routerReducer,
@@ -27,5 +28,6 @@ export default combineReducers({
   lines,
   searchResults,
   suggestResults,
-  options
+  options,
+  footNote
 });

src/styles/main.scss

@@ -167,6 +167,12 @@ li em{
 .urdu, .punjabi{
   direction: rtl;
   font-family: 'Nafees';
+  text-align: right;
+  line-height: 30px;
+
+  #arabic{
+    font-family: initial;
+  }
 }
 
 .modal-backdrop{