Fixes #547 Support continuing from last visited ayah

src/components/Home/LastVisit/index.js

@@ -1,61 +1,29 @@
 import React, { PropTypes } from 'react';
 import debug from 'helpers/debug';
 import Link from 'react-router/lib/Link';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-import { surahType } from 'types';
-
-const styles = require('./style.scss');
+const styles = require('containers/Home/style.scss');
 
 const LastVisit = (props) => {
   debug('component:Index', 'LastVisit');
-
-  const { lastVisit, surahs } = props;
-
-  if (lastVisit) {
-    const surah = surahs[lastVisit.surah - 1];
-
-    if (surah) {
-      const lastVisitedAyah = parseInt(lastVisit.ayah, 10);
-
-      return (
-        <div className="col-md-10 col-md-offset-1">
-          <div className={`row ${styles.lastVisit}`}>
-            <div className="col-md-4">
-              <h4 className={`text-muted text-center ${styles.title}`}>LAST VISITED:</h4>
-            </div>
-            <ul className="col-md-4 list-unstyled">
-              <li className={`row ${styles.link}`}>
-                <Link
-                  to={`/${this.props.lastVisit.surah}/${lastVisitedAyah}-${lastVisitedAyah + 10}`}
-                >
-                  <div className="col-xs-2 text-muted">
-                    {surah.id}:{this.props.lastVisit.ayah}
-                  </div>
-                  <div className="col-xs-7">
-                    {surah.name.simple}
-                    <br />
-                    <span className={`text-uppercase ${styles.english}`}>
-                      {surah.name.english}
-                    </span>
-                  </div>
-                  <div className={`col-xs-3 text-right ${styles.arabic}`}>
-                    {surah.name.arabic}
-                  </div>
-                </Link>
-              </li>
-            </ul>
-          </div>
-        </div>
-      );
-    }
-  }
-
-  return false;
+  return (
+    <div>
+      <h4 className={`text-muted ${styles.title}`}>
+        <LocaleFormattedMessage id='surah.index.continue' defaultMessage={'Continue'}/>
+        <Link to={`/${props.surah.id}/${props.ayah}`}>
+          <span>
+            {props.surah.name.simple} ({props.surah.id}:{props.ayah})
+          </span>
+        </Link>
+      </h4>
+    </div>
+  );
 };
 
 LastVisit.propTypes = {
-  lastVisit: PropTypes.string,
-  surahs: PropTypes.objectOf(surahType)
+  surah: PropTypes.object.isRequired,
+  ayah: PropTypes.number.isRequired
 };
 
 export default LastVisit;

src/components/Home/QuickSurahs/index.js

@@ -13,8 +13,8 @@ export default () => {
 
   return (
     <div className="">
-      <h4 className={`text-muted ${styles.title}`}>
-        <LocaleFormattedMessage id="surah.index.quickLinks" defaultMessage="Quick links : " />
+      <h4 className={`text-muted ${styles.title} ${styles.items}`}>
+        <LocaleFormattedMessage id='surah.index.quickLinks' defaultMessage={'Quick links'}/>
         {
           isFriday &&
             <span>

src/containers/Home/index.js

@@ -1,11 +1,13 @@
 import React, { PropTypes } from 'react';
 import Helmet from 'react-helmet';
 import IndexHeader from 'components/IndexHeader';
+import cookie from 'react-cookie';
 import { asyncConnect } from 'redux-connect';
 import { connect } from 'react-redux';
 import debug from 'helpers/debug';
 import { isAllLoaded, loadAll } from 'redux/actions/surahs.js';
 
+import LastVisit from 'components/Home/LastVisit';
 import SurahsList from 'components/Home/SurahsList';
 import QuickSurahs from 'components/Home/QuickSurahs';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
@@ -16,13 +18,16 @@ const styles = require('./style.scss');
 const Home = (props) => {
   debug('component:Index', 'Render');
 
+  const lastVisit = cookie.load('lastVisit') || null;
+
   return (
     <div className="index-page">
       <Helmet title="The Noble Quran - القرآن الكريم" titleTemplate="%s" />
       <IndexHeader />
       <div className={`container ${styles.list}`}>
         <div className="row">
           <div className="col-md-10 col-md-offset-1">
+            {lastVisit && <LastVisit surah={props.surahs[lastVisit.surahId]} ayah={lastVisit.ayahId}/>}
             <QuickSurahs />
             <h4 className={`text-muted ${styles.title}`}>
               <LocaleFormattedMessage id="surah.index.heading" defaultMessage="SURAHS (CHAPTERS)" />

src/containers/Home/style.scss

@@ -5,13 +5,22 @@
     padding: 20px 0;
     font-size: 14px;
     margin-top: 20px;
-    
+
     span {
       margin: 0;
       line-height: 2;
       a {
         padding: 0 15px;
       }
+    }
+
+    &:last-child {
+      margin-top: 25px;
+      border-bottom: solid 2px rgba(0,0,0,.05)
+    }
+  }
+  .items {
+    span {
       &:after {
         content: '|';
       }
@@ -21,10 +30,5 @@
         }
       }
     }
-
-    &:last-child {
-      margin-top: 25px;
-      border-bottom: solid 2px rgba(0,0,0,.05)
-    }
   }
 }

src/locale/ar.js

@@ -37,6 +37,7 @@ export default {
     'surah.previous': 'السابقة سورة',
     'surah.info': 'سورہ معلومات',
     'surah.index.heading': 'السور',
+    'surah.index.continue': 'استءنف',
     'surah.index.quickLinks': 'روابط سريعة',
     'surah.goToBeginning': 'ابتداء من سورة',
 

src/locale/en.js

@@ -37,6 +37,7 @@ export default {
     'surah.previous': 'PREVIOUS',
     'surah.info': 'Surah Info',
     'surah.index.heading': 'SURAHS (CHAPTERS)',
+    'surah.index.continue': 'Continue',
     'surah.index.quickLinks': 'Quick links',
     'surah.goToBeginning': 'Beginning of Surah',
 

src/locale/ur.js

@@ -37,6 +37,7 @@ export default {
     'surah.previous': 'پچھلی سورت',
     'surah.info': 'سورہ کی معلومات',
     'surah.index.heading': 'سورتیں',
+    'surah.index.continue': 'جاری رہے',
     'surah.index.quickLinks': 'فوری لنک',
     'surah.goToBeginning': 'سورہ کے شروع میں جائیں',
 

src/redux/actions/ayahs.js

@@ -1,3 +1,4 @@
+import cookie from 'react-cookie';
 import { ayahsSchema } from 'redux/schemas';
 
 import {
@@ -20,6 +21,8 @@ const defaultOptions = {
 export function load(id, from, to, options = defaultOptions) {
   const { audio, quran, content } = options;
 
+  cookie.save('lastVisit', JSON.stringify({surahId: id, ayahId: from}));
+
   return {
     types: [LOAD, LOAD_SUCCESS, LOAD_FAIL],
     schema: [ayahsSchema],