stylelint

Author: mmahalwy

.eslintrc

@@ -1,39 +1,23 @@
 {
-  "parser": "babel-eslint",
   "extends": "airbnb",
-  "env": {
-    "browser": true,
-    "node": true,
-    "mocha": true,
-    "es6": true
-  },
+  "parser": "babel-eslint",
   "rules": {
-    "react/no-multi-comp": 0,
-    "import/default": 0,
-    "import/no-duplicates": 0,
-    "import/named": 0,
-    "import/namespace": 0,
+    "comma-dangle": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "import/no-extraneous-dependencies": 0,
+    "import/extensions": 0,
     "import/no-unresolved": 0,
-    "import/no-named-as-default": 2,
-    // Temporarirly disabled due to a possible bug in babel-eslint (todomvc example)
-    "block-scoped-var": 0,
-    // Temporarily disabled for test/* until babel/babel-eslint#33 is resolved
-    "padded-blocks": 0,
-    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
-    "indent": [2, 2, {"SwitchCase": 1}],
-    "no-console": 0,
-    "no-alert": 0,
-    "object-curly-spacing": 0,
-    "no-case-declarations": 0
+    "strict": 0
+  },
+  "ecmaFeatures": {
+    "classes": true,
+    "jsx": true
   },
   "plugins": [
-    "react", "import"
+    "react"
   ],
   "settings": {
-    "import/parser": "babel-eslint",
-    "import/resolve": {
-      moduleDirectory: ["node_modules", "src"]
-    }
+    "import/resolver": "webpack"
   },
   "parserOptions":{
     "ecmaFeatures": {

package.json

@@ -55,81 +55,82 @@
     "clean-webpack-plugin": "0.1.10",
     "compression": "1.6.2",
     "cookie-parser": "1.4.3",
-    "copy-to-clipboard": "1.1.1",
+    "copy-to-clipboard": "3.0.5",
     "cors": "2.7.1",
-    "crypto-js": "3.1.6",
     "css-loader": "0.23.1",
     "debug": "2.2.0",
-    "dotenv": "1.2.0",
+    "dotenv": "2.0.0",
     "errorhandler": "1.4.3",
     "express": "4.14.0",
     "express-state": "1.4.0",
-    "express-useragent": "0.2.4",
+    "express-useragent": "1.0.4",
     "extract-text-webpack-plugin": "2.0.0-beta.3",
     "file-loader": "0.8.5",
     "fontfaceobserver": "1.7.3",
+    "history": "^3.0.0",
     "html-webpack-plugin": "1.7.0",
     "http-proxy": "1.14.0",
-    "humps": "1.1.0",
+    "humps": "2.0.0",
     "imports-loader": "0.6.5",
-    "jquery": "2.2.4",
     "json-loader": "0.5.4",
     "morgan": "1.7.0",
-    "node-sass": "3.8.0",
+    "node-sass": "4.1.1",
     "normalizr": "2.2.1",
     "pretty-error": "2.0.0",
     "promise": "7.1.1",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
-    "raven": "0.11.0",
+    "raven": "1.1.1",
     "raw-loader": "0.5.1",
-    "react": "0.14.8",
+    "react": "15.4.1",
+    "react-a11y": "0.3.3",
+    "react-addons-create-fragment": "15.4.1",
     "react-bootstrap": "0.29.5",
-    "react-cookie": "0.3.4",
-    "react-dom": "0.14.8",
+    "react-cookie": "1.0.4",
+    "react-dom": "15.4.1",
     "react-helmet": "3.1.0",
+    "react-inlinesvg": "0.5.4",
     "react-metrics": "1.2.1",
-    "react-paginate": "0.4.3",
-    "react-redux": "4.4.5",
-    "react-router": "2.6.1",
+    "react-paginate": "4.0.0",
+    "react-redux": "5.0.1",
+    "react-router": "3.0.0",
     "react-router-bootstrap": "0.20.1",
-    "react-router-redux": "4.0.5",
+    "react-router-redux": "4.0.7",
     "react-router-scroll": "0.2.1",
     "react-scroll": "1.2.0",
     "react-share": "1.11.0",
     "react-sidebar": "2.2.1",
     "redux": "3.5.2",
-    "redux-connect": "2.4.0",
+    "redux-connect": "5.0.0",
     "reselect": "2.5.3",
     "resolve-url": "0.2.1",
-    "sass-loader": "2.0.1",
+    "sass-loader": "4.1.1",
     "serialize-javascript": "1.3.0",
     "serve-favicon": "2.3.0",
     "sitemap": "1.8.1",
     "strip-loader": "0.1.2",
     "style-loader": "0.13.1",
-    "superagent": "1.8.4",
+    "superagent": "3.3.1",
     "url": "0.11.0",
     "url-loader": "0.5.7",
     "webpack": "2.1.0-beta.20",
     "webpack-isomorphic-tools": "2.5.7",
-    "winston": "1.1.2",
-    "react-inlinesvg": "0.5.4"
+    "winston": "1.1.2"
   },
   "devDependencies": {
-    "babel-eslint": "6.0.4",
+    "babel-eslint": "7.1.1",
     "babel-plugin-react-transform": "2.0.2",
     "babel-preset-react-hmre": "1.1.1",
     "chai": "3.0.0",
     "chromedriver": "2.22.2",
     "del": "2.0.2",
     "enzyme": "2.2.0",
-    "eslint": "2.13.0",
-    "eslint-config-airbnb": "9.0.1",
+    "eslint": "3.12.2",
+    "eslint-config-airbnb": "13.0.0",
     "eslint-loader": "1.3.0",
-    "eslint-plugin-import": "1.8.1",
-    "eslint-plugin-jsx-a11y": "1.5.3",
-    "eslint-plugin-react": "5.2.2",
+    "eslint-plugin-import": "2.2.0",
+    "eslint-plugin-jsx-a11y": "2.2.3",
+    "eslint-plugin-react": "6.8.0",
     "jscs": "2.1.1",
     "karma": "1.2.0",
     "karma-chai": "0.1.0",
@@ -149,7 +150,7 @@
     "phantomjs-polyfill": "0.0.1",
     "piping": "0.3.0",
     "pre-commit": "1.1.3",
-    "react-addons-test-utils": "0.14.7",
+    "react-addons-test-utils": "15.4.1",
     "react-transform-catch-errors": "1.0.0",
     "react-transform-hmr": "1.0.1",
     "redbox-react": "1.1.1",

src/client.js

@@ -27,7 +27,7 @@ const history = syncHistoryWithStore(browserHistory, store);
 try {
   Raven.config(config.sentryClient).install();
 } catch (error) {
-  console.log(error);
+  debug('client', error);
 }
 
 window.quranDebug = debug;
@@ -44,11 +44,10 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
   const component = (
     <Router
       {...renderProps}
-      render={(props) => (
+      render={props => (
         <ReduxAsyncConnect
           {...props}
           helpers={{ client }}
-          filter={item => !item.deferred}
           render={applyRouterMiddleware(useScroll())}
         />
       )}

src/components/FontStyles/index.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { fontFaceStyle, fontFaceStyleLoaded } from 'helpers/buildFontFaces';
-import { load } from 'redux/actions/fontFace.js';
+import load from 'redux/actions/fontFace.js';
 
 import debug from 'helpers/debug';
 import selector from './selector';
@@ -29,7 +29,7 @@ export default class FontStyles extends Component {
     if (__CLIENT__) {
       const FontFaceObserver = require('fontfaceobserver'); // eslint-disable-line global-require
 
-      Object.keys(fontFaces).filter(className => !fontFaces[className]).forEach(className => {
+      Object.keys(fontFaces).filter(className => !fontFaces[className]).forEach((className) => {
         const font = new FontFaceObserver(className);
 
         font.load().then(() => load(className), () => load(className));

src/components/FontStyles/selector.js

@@ -2,5 +2,5 @@ import { createSelector } from 'reselect';
 
 export default createSelector(
   state => state.fontFaces,
-  (fontFaces) => fontFaces
+  fontFaces => fontFaces
 );

src/components/Footer/index.js

@@ -18,7 +18,12 @@ const Footer = () => (
               <li><Link to="/about">About</Link></li>
               <li><Link to="/contact">Contact</Link></li>
               <li>
-                <a href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="Footer:Link:Developer">
+                <a
+                  href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  data-metrics-event-name="Footer:Link:Developer"
+                >
                   Developers
                 </a>
               </li>
@@ -27,11 +32,43 @@ const Footer = () => (
           <Col md={3} sm={4} xs={12} className={styles.links}>
             <p>Useful sites</p>
             <ul className={`source-sans ${styles.list}`}>
-              <li><a target="_blank" href="http://sunnah.com/" data-metrics-event-name="Footer:Link:Sunnah">Sunnah.com</a></li>
-              <li><a target="_blank" href="http://salah.com/" data-metrics-event-name="Footer:Link:Salah">Salah.com</a></li>
-              <li><a target="_blank" href="http://quranicaudio.com/" data-metrics-event-name="Footer:Link:QuranicAudio">QuranicAudio.com</a></li>
               <li>
-                <a target="_blank" href="http://corpus.quran.com/wordbyword.jsp" data-metrics-event-name="Footer:Link:Corpus">
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="http://sunnah.com/"
+                  data-metrics-event-name="Footer:Link:Sunnah"
+                >
+                  Sunnah.com
+                </a>
+              </li>
+              <li>
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="http://salah.com/"
+                  data-metrics-event-name="Footer:Link:Salah"
+                >
+                  Salah.com
+                </a>
+              </li>
+              <li>
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="http://quranicaudio.com/"
+                  data-metrics-event-name="Footer:Link:QuranicAudio"
+                >
+                  QuranicAudio.com
+                </a>
+              </li>
+              <li>
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="http://corpus.quran.com/wordbyword.jsp"
+                  data-metrics-event-name="Footer:Link:Corpus"
+                >
                   Corpus: Word by Word
                 </a>
               </li>

src/components/Home/LastVisit/index.js

@@ -1,19 +1,18 @@
 import React, { PropTypes } from 'react';
 import debug from 'helpers/debug';
+import Link from 'react-router/lib/Link';
+
 const styles = require('./style.scss');
 
 const LastVisit = (props) => {
-
   debug('component:Index', 'LastVisit');
 
-  const {lastVisit, surahs} = props;
+  const { lastVisit, surahs } = props;
 
   if (lastVisit) {
-
     const surah = surahs[lastVisit.surah - 1];
 
     if (surah) {
-
       const lastVisitedAyah = parseInt(lastVisit.ayah, 10);
 
       return (
@@ -48,6 +47,8 @@ const LastVisit = (props) => {
       );
     }
   }
+
+  return false;
 };
 
 LastVisit.propTypes = {

src/components/Home/QuickSurahs/spec.js

@@ -1,21 +1,19 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Link from 'react-router/lib/Link';
 import QuickSurahs from './index.js';
 
-describe("<QuickSurahs />", () => {
+describe('<QuickSurahs />', () => {
   const count = new Date().getDay() === 5 ? 5 : 4;
 
-  it("Should render QuickSurahs component", () => {
-    let component = mount(<QuickSurahs />);
+  it('Should render QuickSurahs component', () => {
+    const component = mount(<QuickSurahs />);
     expect(component).to.be.ok;
     expect(component.find('a').length).to.equal(count);
   });
 
-  it("Should render QuickSurahs component with Surah Al-Kahf", () => {
-    let component = mount(<QuickSurahs />);
+  it('Should render QuickSurahs component with Surah Al-Kahf', () => {
+    const component = mount(<QuickSurahs />);
     expect(component).to.be.ok;
     expect(component.find('a').length).to.equal(count);
-  })
-
+  });
 });

src/components/Home/SurahsList/index.js

@@ -1,14 +1,15 @@
 import React, { PropTypes } from 'react';
 import debug from 'helpers/debug';
 import Link from 'react-router/lib/Link';
+
 const styles = require('./style.scss');
 
 const SurahsList = (props) => {
   debug('component:Index', 'SurahsList');
 
   return (
     <ul className="col-md-4 list-unstyled">
-      {props.surahs.map((surah) => (
+      {props.surahs.map(surah => (
         <li className={`${styles.item}`} key={surah.id}>
           <Link to={`/${surah.id}`} className={`${styles.link} row`}>
             <div className="col-xs-2 text-muted">

src/components/Home/SurahsList/spec.js

@@ -5,11 +5,9 @@ import getSurahs from '../../../../tests/fixtures/getSurahs.js';
 import SurahsList from './index.js';
 
 describe('<SurahsList />', () => {
-
-  it("Should render SurahList component", () => {
-    let component = mount(<SurahsList surahs={getSurahs.default.slice(0, 4)}/>);
+  it('Should render SurahList component', () => {
+    const component = mount(<SurahsList surahs={getSurahs.default.slice(0, 4)} />);
     expect(component).to.be.ok;
     expect(component.find('li').length).to.equal(4);
   });
-
 });