Fixes #248 Out of range bug

.env

@@ -1,6 +1,6 @@
 NODE_ENV=development
 PORT=8000
-API_URL=http://quran.com:3000
+API_URL=http://api.quran.com:3000
 SEGMENTS_KEY=
 SENTRY_KEY_CLIENT=
 SENTRY_KEY_SERVER=

.gitignore

@@ -13,3 +13,4 @@ tests/functional/output/*
 test/functional/screenshots/*
 .ssh
 webpack-stats.debug.json
+.env

src/containers/Error/index.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import IndexHeader from '../../components/IndexHeader';
+import Link from 'react-router/lib/Link';
+import Helmet from 'react-helmet';
+
+export default ({params}) => {
+    console.log(params, 'params?');
+    return (
+      <div>
+        <Helmet title={`Error ${params.errorTitle}`} />
+        <IndexHeader noSearch={true} />
+        <div className="container-fluid about-text">
+          <div className="row">
+              <div className="col-md-8 col-md-offset-2">
+                  <h4 className="source-sans">
+                    {params.errorTitle} is an invalid Surah/Ayah. Please go to the <a href="/">home page </a>and select a surah
+                  </h4>
+              </div>
+          </div>
+        </div>
+      </div>
+    );
+}

src/containers/Home/index.js

@@ -141,6 +141,14 @@ class Home extends React.Component {
               Ayat Al-Kursi
             </Link>
           </li>
+          <li>
+            <Link
+              to="/884843948389"
+              data-metrics-event-name="QuickLinks:Click"
+              data-metrics-surah-id="2/255">
+              Ayat Al-Kursi
+            </Link>
+          </li>
         </ul>
       </span>
     );

src/containers/Surah/index.js

@@ -165,7 +165,13 @@ export default class Surah extends Component {
   state = {
     lazyLoading: false
   };
-
+  componentWillMount() {
+    const {params, surah, push } = this.props;
+      let start = parseInt(params.range.split('-')[0], 10);
+      if(start > surah.ayat || isNaN(start)){
+         return push(`/error/${params.range}`);
+      }
+  }
   componentDidMount() {
     if (__CLIENT__) {
       window.removeEventListener('scroll', this.handleNavbar, true);

src/routes.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import IndexRoute from 'react-router/lib/IndexRoute';
 import Route from 'react-router/lib/Route';
-
+import checkValidSurah from './utils/checkValidSurah';
 import App from './containers/App';
 
+
+
 export default () => {
   return (
     <Route path="/" component={App}>
@@ -16,10 +18,12 @@ export default () => {
 
       <Route path="/contact" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module))} />
       <Route path="/contactus" getComponent={(nextState, cb) => System.import('./containers/Contact').then(module => cb(null, module))} />
+      <Route path="/error/:errorTitle" getComponent={(nextState, cb) => System.import('./containers/Error').then(module => cb(null, module))} />
 
       <Route path="/search" getComponent={(nextState, cb) => System.import('./containers/Search').then(module => cb(null, module))} />
 
-      <Route path="/:surahId(/:range)" getComponent={(nextState, cb) => System.import('./containers/Surah').then(module => cb(null, module)).catch(err => console.trace(err))} />
+      <Route path="/:surahId(/:range)" getComponent={(nextState, cb) => System.import('./containers/Surah').then(module => cb(null, module)).catch(err => console.trace(err))}
+      onEnter={checkValidSurah} />
     </Route>
   );
 }

src/utils/checkValidSurah.js

@@ -0,0 +1,7 @@
+export default function isValidSurah(nextState, replaceState) {
+  let surahId = parseInt(nextState.params.surahId, 10)
+  if(isNaN(surahId) || surahId > 114 || surahId < 1){
+
+    replaceState(`/error/${nextState.params.surahId}`);
+  }
+}