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

@@ -12,4 +12,4 @@ selenium-debug.log
 tests/functional/output/*
 test/functional/screenshots/*
 .ssh
-webpack-stats.debug.json
+webpack-stats.debug.json

src/containers/Error/index.js

@@ -0,0 +1,26 @@
+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}) => {
+  const error = {
+    'invalid-surah': 'Surah is out of range',
+    'invalid-ayah-range': 'Ayah(s) selected are out of range'
+  }
+    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">
+                    {error[params.errorKey]}. Please go to the <a href="/">home page </a>and select a surah/Ayah
+                  </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="/948484888585/255"
+              data-metrics-event-name="QuickLinks:Click"
+              data-metrics-surah-id="2/255">
+              Random Links
+              </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/invalid-ayah-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/:errorKey" 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/invalid-surah');
+  }
+}