Reducing bundle size (#310)

* Reducing bundle size

* rearranged files

* more rearrange and deleted unneeded files

client.js

@@ -1,13 +1,16 @@
 /*global document, window, $ */
-require('babel-polyfill');
+import 'babel-polyfill';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import reactCookie from 'react-cookie';
-import { Provider } from 'react-redux';
-import { Router, browserHistory } from 'react-router';
-import useScroll from 'scroll-behavior/lib/useStandardScroll';
-import { ReduxAsyncConnect } from 'redux-async-connect';
+import Provider from 'react-redux/lib/components/Provider';
+import Router from 'react-router/lib/Router';
+import browserHistory from 'react-router/lib/browserHistory';
+import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
+import useScroll from 'react-router-scroll';
+import { ReduxAsyncConnect } from 'redux-connect';
+import { syncHistoryWithStore } from 'react-router-redux';
 
 import debug from 'debug';
 
@@ -16,8 +19,8 @@ import createStore from './src/redux/create';
 import routes from './src/routes';
 
 const client = new ApiClient();
-const history = useScroll(() => browserHistory)();
-const store = createStore(history, client, window.__data);
+const store = createStore(browserHistory, client, window.__data);
+const history = syncHistoryWithStore(browserHistory, store);
 
 window.quranDebug = debug;
 window.ReactDOM = ReactDOM; // For chrome dev tool support
@@ -40,9 +43,17 @@ if (typeof window !== 'undefined') {
 }
 
 const component = (
-  <Router render={(props) =>
-        <ReduxAsyncConnect {...props} helpers={{client}} />
-      } history={history}>
+  <Router
+    history={history}
+    render={(props) => (
+      <ReduxAsyncConnect
+        {...props}
+        helpers={{client}}
+        filter={item => !item.deferred}
+        render={applyRouterMiddleware(useScroll())}
+      />
+    )}
+  >
     {routes()}
   </Router>
 );

package.json

@@ -33,8 +33,8 @@
     "babel-plugin-typecheck": "^3.8.0",
     "babel-polyfill": "^6.7.4",
     "babel-preset-es2015": "^6.6.0",
-    "babel-preset-stage-0": "^6.5.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.7.2",
     "babel-runtime": "^6.6.1",
     "body-parser": "^1.14.1",
@@ -63,6 +63,7 @@
     "humps": "^1.0.0",
     "imports-loader": "^0.6.3",
     "jquery": "^2.1.4",
+    "js-yaml": "~3.6.0",
     "json-loader": "~0.5.1",
     "loopstacks": "0.0.3",
     "moment": "^2.12.0",
@@ -82,26 +83,26 @@
     "react-metrics": "^1.1.0",
     "react-paginate": "^0.4.0",
     "react-redux": "^4.4.1",
-    "react-router": "^2.0.1",
+    "react-router": "^2.4.1",
     "react-router-bootstrap": "^0.20.1",
     "react-router-redux": "^4.0.0",
+    "react-router-scroll": "^0.2.0",
     "react-scroll": "^1.0.4",
     "redux": "^3.3.1",
-    "redux-async-connect": "^1.0.0-rc4",
+    "redux-connect": "^2.4.0",
     "sass-loader": "2.0.1",
     "scroll-behavior": "^0.3.3",
     "serialize-javascript": "^1.0.0",
     "serve-favicon": "^2.2.1",
     "sitemap": "^1.5.0",
+    "sjcl": "~1.0.3",
     "style-loader": "^0.13.1",
     "superagent": "^1.2.0",
     "url": "^0.11.0",
     "url-loader": "~0.5.5",
     "webpack": "^1.10.3",
     "webpack-isomorphic-tools": "^2.2.41",
-    "winston": "^1.1.2",
-    "sjcl": "~1.0.3",
-    "js-yaml": "~3.6.0"
+    "winston": "^1.1.2"
   },
   "devDependencies": {
     "babel-core": "^6.7.7",

server.js

@@ -6,7 +6,7 @@ expressConfig(server);
 import React from 'react';
 import ReactDOM from 'react-dom/server';
 import { match } from 'react-router';
-import { ReduxAsyncConnect, loadOnServer } from 'redux-async-connect';
+import { ReduxAsyncConnect, loadOnServer } from 'redux-connect';
 import createHistory from 'react-router/lib/createMemoryHistory';
 import { Provider } from 'react-redux';
 import cookie from 'react-cookie';
@@ -18,10 +18,7 @@ import routes from './src/routes';
 import ApiClient from './src/helpers/ApiClient';
 import createStore from './src/redux/create';
 
-import NotFound from 'components/NotFound';
-import Errored from 'components/Error';
-import ErroredMessage from 'components/ErrorMessage';
-import Html from 'components/Html';
+import Html from './src/helpers/Html';
 
 import { setUserAgent } from './src/redux/modules/audioplayer';
 import { setOption } from './src/redux/modules/options';

src/components/Audioplayer/index.js

@@ -14,7 +14,7 @@ import Segments from './Segments';
 
 // Helpers
 import debug from '../../helpers/debug';
-import scroller from '../../scripts/utils/scroller';
+import scroller from '../../utils/scroller';
 
 const style = require('./style.scss');
 

src/components/Ayah/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable consistent-return */
 import React, { Component, PropTypes } from 'react';
-import { Link } from 'react-router';
+import Link from 'react-router/lib/Link';
 import { Element } from 'react-scroll';
 import ReactDOM from 'react-dom'
 

src/scripts/components/header/IndexHeaderNav.js → src/components/IndexHeader/Nav/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router';
+import Link from 'react-router/lib/Link';
 
 class IndexHeaderNav extends React.Component {
   constructor() {

src/scripts/components/header/IndexHeader.js → src/components/IndexHeader/index.js

@@ -1,12 +1,18 @@
-import React from 'react';
-import SearchInput from 'components/header/SearchInput';
-import IndexHeaderNav from 'components/header/IndexHeaderNav';
-import { Link } from 'react-router';
-import debug from 'utils/Debug';
+import React, { Component, PropTypes } from 'react';
+import Link from 'react-router/lib/Link';
 
-const logo = require('../../../../static/images/logo-lg-w.png');
+import SearchInput from '../SearchInput';
+import IndexHeaderNav from './Nav';
+
+import debug from '../../helpers/debug';
+
+const logo = require('../../../static/images/logo-lg-w.png');
+
+export default class IndexHeader extends Component {
+  static propTypes = {
+    noSearch: PropTypes.bool
+  };
 
-class IndexHeader extends React.Component {
   renderSearch() {
     if (this.props.noSearch) {
       return null;
@@ -38,7 +44,3 @@ class IndexHeader extends React.Component {
     );
   }
 }
-
-IndexHeader.displayName = 'IndexHeader';
-
-export default IndexHeader;

src/components/Line/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import debug from 'utils/Debug';
+import debug from '../../helpers/debug';
 
 const styles = require('../Ayah/style.scss');
 

src/scripts/components/Loader.js → src/components/Loader/index.js

@@ -3,9 +3,9 @@ import React from 'react';
 const loading = require('../../../static/images/loading.gif');
 
 const Loader = () => (
-  <div className="loading" ng-hide="currentSurah.ayahs">
+  <div className="loading" nghide="currentSurah.ayahs">
     <div className="row">
-      <div className="col-md-6 col-md-offset-3 text-center">
+      <div className="colmd6 colmdoffset3 textcenter">
         <img src={loading} />
         <h3>Loading...</h3>
       </div>

src/scripts/components/header/ReadingModeToggle.js → src/components/ReadingModeToggle/index.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-import SwitchToggle from '../../../components/SwitchToggle';
+import SwitchToggle from '../SwitchToggle';
 
 const ReadingModeToggle = ({ onReadingModeToggle, isToggled }) => (
   <div>
@@ -9,4 +9,9 @@ const ReadingModeToggle = ({ onReadingModeToggle, isToggled }) => (
   </div>
 );
 
+ReadingModeToggle.propTypes = {
+  onReadingModeToggle: PropTypes.func.isRequired,
+  isToggled: PropTypes.bool.isRequired
+}
+
 export default ReadingModeToggle;

src/scripts/components/header/SearchInput.js → src/components/SearchInput/index.js

@@ -1,16 +1,15 @@
-import React from 'react';
-import { PropTypes } from "react-metrics";
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import { PropTypes } from 'react-metrics';
 import { push } from 'react-router-redux';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
 
-import SearchAutocomplete from '../../../components/SearchAutocomplete';
+import SearchAutocomplete from '../SearchAutocomplete';
 
-import debug from 'utils/Debug';
+import debug from '../../helpers/debug';
 
 @connect(null, { push })
-export default class SearchInput extends React.Component {
+export default class SearchInput extends Component {
   static contextTypes = {
     metrics: PropTypes.metrics
   };

src/scripts/routes/About.js → src/containers/About/index.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import IndexHeader from 'components/header/IndexHeader';
-import { Link } from 'react-router';
+import React, { Component } from 'react';
+import IndexHeader from '../../components/IndexHeader';
+import Link from 'react-router/lib/Link';
 import Helmet from 'react-helmet';
 
-class About extends React.Component {
+export default class About extends Component {
   render() {
     return (
       <div>
@@ -82,5 +82,3 @@ class About extends React.Component {
     );
   }
 }
-
-export default About;

src/containers/App/index.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { metrics } from 'react-metrics';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
+import Link from 'react-router/lib/Link';
 import Helmet from 'react-helmet';
 
 import Grid from 'react-bootstrap/lib/Grid';
@@ -10,7 +10,7 @@ import Col from 'react-bootstrap/lib/Col';
 
 import FontStyles from '../../components/FontStyles';
 
-import debug from 'utils/Debug';
+import debug from '../../helpers/debug';
 import config from '../../config';
 import metricsConfig from '../../helpers/metrics';
 

src/scripts/routes/Contact.js → src/containers/Contact/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import superagent from 'superagent';
 
-import IndexHeader from 'components/header/IndexHeader';
+import IndexHeader from '../../components/IndexHeader';
 
-export default class Contact extends React.Component {
+export default class Contact extends Component {
   state = {
     success: false
   };

src/scripts/routes/Donations.js → src/containers/Donations/index.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import IndexHeader from 'components/header/IndexHeader';
+import React, { Component } from 'react';
+import IndexHeader from '../../components/IndexHeader';
 
-class Donations extends React.Component {
+export default class Donations extends Component {
   render() {
     return (
       <div className="top-section">
@@ -52,5 +52,3 @@ class Donations extends React.Component {
     );
   }
 }
-
-export default Donations;

src/containers/Home/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import Helmet from 'react-helmet';
-import IndexHeader from 'components/header/IndexHeader';
-import { Link } from 'react-router';
+import IndexHeader from '../../components/IndexHeader';
+import Link from 'react-router/lib/Link';
 import { LinkContainer } from 'react-router-bootstrap';
-import { asyncConnect } from 'redux-async-connect'
+import { asyncConnect } from 'redux-connect'
 import { connect } from 'react-redux';
 import moment from 'moment';
 
-import debug from 'utils/Debug';
+import debug from '../../helpers/debug';
 
 import { isAllLoaded, loadAll } from '../../redux/modules/surahs';
 

src/scripts/components/header/SearchHeader.js → src/containers/Search/Header/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import SearchInput from 'components/header/SearchInput';
-import { Link } from 'react-router';
+import React, { Component } from 'react';
+import SearchInput from '../../../components/SearchInput';
+import Link from 'react-router/lib/Link';
 
 const logo = require('../../../../static/images/logo-lg-w.png');
 
-class SearchHeader extends React.Component {
+class Header extends Component {
   render() {
     return (
       <div className="index-header">
@@ -24,4 +24,4 @@ class SearchHeader extends React.Component {
   }
 }
 
-export default SearchHeader;
+export default Header;

src/containers/Search/index.js

@@ -1,8 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import { PropTypes as MetricsPropTypes } from "react-metrics";
-import { asyncConnect } from 'redux-async-connect';
+import { asyncConnect } from 'redux-connect';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
+import Link from 'react-router/lib/Link';
 import { push } from 'react-router-redux';
 import Helmet from 'react-helmet';
 import ReactPaginate from 'react-paginate';
@@ -12,9 +12,9 @@ import Grid from 'react-bootstrap/lib/Grid';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
-import SearchHeader from 'components/header/SearchHeader';
+import Header from './Header';
 import Ayah from '../../components/Ayah';
-import CoreLoader from '../../scripts/components/Loader';
+import CoreLoader from '../../components/Loader';
 
 import { search } from '../../redux/modules/searchResults';
 
@@ -148,7 +148,7 @@ class Search extends Component {
           __html: `.text-arabic{font-size: ${options.fontSize.arabic}rem;} .text-translation{font-size: ${options.fontSize.translation}rem;}`
           }}
         />
-        <SearchHeader />
+        <Header />
         {this.renderStatsBar()}
         <div className="container surah-list">
           <div className="row">