Simple refactorizations.

.eslintrc

@@ -36,15 +36,15 @@
     "__DEVTOOLS__": true,
     "socket": true,
     "webpackIsomorphicTools": true,
-    ga: true,
-    Raven: true,
-    mixpanel: true,
+    "ga": true,
+    "Raven": true,
+    "mixpanel": true,
     "expect": true,
     "browser": true,
     "import": true,
     "FB": true,
     "window": true,
-    sinon: true
+    "sinon": true
   },
   "env": {
     "mocha": true,

bin/server.js

@@ -32,7 +32,7 @@ if (__DEVELOPMENT__) {
 }
 
 global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../webpack/isomorphic-tools-configuration'))
-.development(process.env.NODE_ENV === 'development')
-.server(rootDir, function() {
-  require('../src/server.js').default();
-});
+  .development(process.env.NODE_ENV === 'development')
+  .server(rootDir, function() {
+    require('../src/server.js').default();
+  });

bin/server.prod.js

@@ -11,7 +11,7 @@ global.__SERVER__ = true;
 global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production';
 
 global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../webpack/isomorphic-tools-configuration'))
-.development(__DEVELOPMENT__)
-.server(rootDir, function() {
-  require('../dist/server.js').default();
-});
+  .development(__DEVELOPMENT__)
+  .server(rootDir, function() {
+    require('../dist/server.js').default();
+  });

karma.conf.js

@@ -1,6 +1,7 @@
-var webpack = require('webpack');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = function(config) {
+module.exports = (config) => {
   config.set({
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
@@ -26,7 +27,7 @@ module.exports = function(config) {
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
       './tests/polyfill/Event.js',
       './node_modules/Intl/locale-data/jsonp/en-US.js',
-      {pattern: 'static/images/*', watched: false, included: false, served: true},
+      { pattern: 'static/images/*', watched: false, included: false, served: true },
 
       // Actual tests here
       'tests.webpack.js'
@@ -37,17 +38,16 @@ module.exports = function(config) {
     ],
 
     proxies: {
-      '/images': __dirname + '/static/images',
-      '/images/': __dirname + '/static/images/',
+      '/images': path.join(__dirname, '/static/images'),
+      '/images/': path.join(__dirname, '/static/images/'),
     },
 
     proxyValidateSSL: false,
 
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessors
-
     preprocessors: {
-      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
+      'tests.webpack.js': ['webpack', 'sourcemap']
     },
 
     webpack: {
@@ -72,9 +72,9 @@ module.exports = function(config) {
             exclude: [/server/, /node_modules/, /tests/],
             loader: 'babel'
           },
-          { test: /\.json$/, loader: 'json-loader'},
+          { test: /\.json$/, loader: 'json-loader' },
           { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
-          { test: /\.(jpe?g|png|gif|svg)$/, loader: 'url', query: {limit: 10240} }
+          { test: /\.(jpe?g|png|gif|svg)$/, loader: 'url', query: { limit: 10240 } }
         ]
       },
 

src/components/Audioplayer/Track/style.scss

@@ -21,7 +21,7 @@
     width: 12px;
     border-radius: 10px;
     position: absolute;
-    right: 0px;
+    right: 0;
     display: block;
     background: #fff;
     top: -3px;

src/components/Audioplayer/style.scss

@@ -12,7 +12,7 @@
   box-shadow: 0 0 0.5rem 0 rgba(0,0,0,.2);
   min-width: 340px;
   @media(max-width: $screen-sm){
-    bottom: 0px;
+    bottom: 0;
     width: 100%;
   }
   // border: 0.08333rem solid transparent !important;
@@ -22,21 +22,21 @@
   width: 100%;
   position: absolute;
   top: 0;
-  left: 0px;
+  left: 0;
   height: 10%;
 }
 
 .options{
   border-radius: 4px;
   width: 100%;
   display: inline-block;
-  margin: 0px;
+  margin: 0;
   height: 90%;
   text-align: center;
 }
 
 .controls{
-  margin: 0px;
+  margin: 0;
   .controlItem{
     vertical-align: middle;
     padding-right: 20px;
@@ -45,10 +45,10 @@
 }
 
 .list{
-  margin-bottom: 0px;
+  margin-bottom: 0;
   display: table;
   width: 100%;
-  padding-left: 0px;
+  padding-left: 0;
   text-align: center;
 
   :global(li){
@@ -107,7 +107,7 @@
 }
 
 .verse{
-  padding: 0px;
+  padding: 0;
   color: $olive;
 }
 

src/components/FontSizeDropdown/index.js

@@ -19,7 +19,7 @@ class FontSizeDropdown extends Component {
         [type]: fontSize[type] + (changeFactor[type] * direction)
       }
     });
-  }
+  };
 
   renderPopup() {
     return (

src/components/FontSizeDropdown/style.scss

@@ -3,7 +3,7 @@
 .list{
   display: table;
   width: 100%;
-  padding: 15px 0px;
+  padding: 15px 0;
 }
 
 .item{

src/components/Footer/style.scss

@@ -1,7 +1,7 @@
 @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
 .footer{
   background-color: #32312C;
-  padding: 3% 0% 5% 0%;
+  padding: 3% 0 5% 0;
   font-size: 14px;
   margin-top: 50px;
 
@@ -15,7 +15,7 @@
     }
 
     .list{
-      padding-left: 0px;
+      padding-left: 0;
       :global(li){
         list-style: none;
         padding: 5px 0;
@@ -39,7 +39,7 @@
   @media(max-width: $screen-sm){
     padding-bottom: 9%;
   }
-  
+
   :global(a){
     -webkit-transition: color .15s ease-in-out;
     -moz-transition: color .15s ease-in-out;

src/components/GlobalSidebar/style.scss

@@ -5,8 +5,8 @@ $width: 280px;
 .container{
   position: fixed;
   left: $width * -1;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   background: #fff;
   z-index: 1031;
   box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.2);
@@ -17,12 +17,12 @@ $width: 280px;
   transition: left 0.35s cubic-bezier(0.24,1,0.32,1), visibility 0.2s;
 
   &.open{
-    left: 0px;
+    left: 0;
     visibility: visible;;
   }
 
   :global(.navbar-text){
-    margin-left: 0px;
+    margin-left: 0;
       .backToHome {
           margin-right: 23px;
           font-size: 17px;
@@ -34,7 +34,7 @@ $width: 280px;
     left: -1 * $width;
 
     &.open{
-      left: 0px;
+      left: 0;
     }
 
     :global(.navbar-text){
@@ -44,7 +44,7 @@ $width: 280px;
 }
 
 .list{
-  padding-left: 0px;
+  padding-left: 0;
 
   :global(li){
     color: #777;
@@ -65,4 +65,4 @@ $width: 280px;
       }
     }
   }
-}
+}

src/components/LazyLoad/index.js

@@ -31,7 +31,7 @@ class LazyLoad extends Component {
     }
 
     return false;
-  }
+  };
 
   render() {
     const { isEnd, loadingComponent, endComponent } = this.props;

src/components/NightModeToggle/index.js

@@ -23,7 +23,7 @@ class NightModeToggle extends Component {
     }
 
     onToggle({ isNightMode: !isNightMode });
-  }
+  };
 
   render() {
     return (

src/components/SearchAutocomplete/index.js

@@ -69,15 +69,15 @@ class SearchAutocomplete extends Component {
       text: `<b>${match[0]}</b>`,
       href: `/${match[1]}`
     })).slice(0, 5);
-  }
+  };
 
   suggest = (query) => {
     const { lang } = this.props;
 
     if (!query || ayahRegex.test(query)) return false;
 
     return this.props.suggest(query, lang);
-  }
+  };
 
   handleInputKeyDown = (event) => {
     if (!(event.keyCode === 9 || event.keyCode === 40 || event.keyCode === 27)) {
@@ -104,7 +104,7 @@ class SearchAutocomplete extends Component {
         return;
     }
     event.preventDefault();
-  }
+  };
 
   handleItemKeyDown(event, item) {
     const items = this.menu.getElementsByTagName('li');

src/components/SearchInput/index.js

@@ -82,7 +82,7 @@ class SearchInput extends Component {
     }
 
     return false;
-  }
+  };
 
   render() {
     const { showAutocomplete } = this.state;

src/components/SmartBanner/index.js

@@ -67,15 +67,15 @@ class SmartBanner extends Component {
   parseAppId = (metaName) => {
     const meta = window.document.querySelector(`meta[name="${metaName}"]`);
     return /app-id=([^\s,]+)/.exec(meta.getAttribute('content'))[1];
-  }
+  };
 
   hide = () => {
     window.document.querySelector('html').classList.remove('smartbanner-show');
-  }
+  };
 
   show = () => {
     window.document.querySelector('html').classList.add('smartbanner-show');
-  }
+  };
 
   close() {
     this.hide();

src/components/SurahInfo/index.js

@@ -7,9 +7,7 @@ const style = require('./style.scss');
 const SurahInfo = ({ chapter, info, isShowingSurahInfo, onClose }) => {
   // So we don't need to load images and files unless needed
   if (!isShowingSurahInfo) return <noscript />;
-  if (!info) {
-    return <Loader isActive />;
-  }
+  if (!info) return <Loader isActive />;
 
   return (
     <div className={`col-xs-12 ${style.container} chapter-info ${style.show}`}>

src/components/SurahInfo/style.scss

@@ -4,9 +4,9 @@ $transition-speed: 0.75s;
 .container{
   overflow-y: auto;
   margin-bottom: 30px;
-  height: 0px;
-  max-height: 0px;
-  min-height: 0px;
+  height: 0;
+  max-height: 0;
+  min-height: 0;
   transition: max-height $transition-speed, height $transition-speed;
   margin-top: -20px; // To account for the .surah-container padding.
 

src/components/SwitchToggle/style.scss

@@ -21,7 +21,7 @@ $width: 50px;
   cursor: pointer;
   outline: none;
   user-select: none;
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .toggleRound + .label {