[CONFIG] - new eslint / prettier / stylelint changes

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+### 9.0.0
+
+### Changed
+
+* Updated all dependencies
+* See: https://github.com/yannickcr/eslint-plugin-react/issues/1471
+
 ## 8.0.0
 
 ### Changed

gulpfile.babel.js/configs/.eslintrc

@@ -11,7 +11,12 @@
     "prefer-arrow-callback": ["error", { "allowNamedFunctions": true }],
     "class-methods-use-this": [0],
     "jsx-a11y/no-static-element-interactions": [0],
+    "jsx-a11y/anchor-is-valid": [ "error", {
+      "components": [ "Link" ],
+      "specialLink": [ "to" ]
+    }],
     "react/jsx-boolean-value": ["off"],
+    "react/no-unescaped-entities": ["off"],
     "prettier/prettier": ["warn", {
         "singleQuote": true,
         "semi": true,

gulpfile.babel.js/tasks/gulp_client_unit_test.js

@@ -1,7 +1,7 @@
 import gulp from 'gulp';
 import path from 'path';
 
-const Server = require('karma').Server;
+const { Server } = require('karma');
 
 const karmaAuto = process.env.KARMA_AUTOWATCH;
 const singleRun = karmaAuto !== 'on';

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-ssr-spa",
   "private": false,
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Simple server rendered single page app.",
   "repository": "https://github.com/michaelBenin/react-ssr-spa",
   "license": "MIT",

src/client/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { hydrate, render } from 'react-dom';
 import createHistory from 'history/createBrowserHistory';
 import scriptJS from 'scriptjs';
+import get from 'lodash/get';
 import log from './services/logger_service';
 import initialize from './utils/initializer_util';
 import configureStore from '../redux/store/store';
@@ -26,7 +27,7 @@ function bootReact() {
     bootstrappedConfig = JSON.parse(
       document.querySelector('.client-config').getAttribute('data-state')
     );
-    env = bootstrappedConfig.config.env;
+    env = get(bootstrappedConfig, 'config.env');
   } catch (error) {
     // console.error(error, 'Error parsing client config.');
     bootstrappedConfig = {};

src/server/utils/graceful_exit_util.js

@@ -12,8 +12,9 @@ export default (err, silent) => {
     log.info(`Process exiting because of error: ${err.message}`);
     log.fatal(
       err.stack,
-      `${err.message} - commit: ${process.env
-        .GIT_COMMIT}, Build Number: ${process.env.BUILD_NUMBER}`
+      `${err.message} - commit: ${process.env.GIT_COMMIT}, Build Number: ${
+        process.env.BUILD_NUMBER
+      }`
     );
   } else {
     log.info('Exiting without error.');

src/views/components/footer/footer.js

@@ -6,7 +6,7 @@ export default function Footer() {
     <footer className="footer">
       <ul className="footer__link-container">
         <li className="footer__link">
-          <Link to={'/'}>react-ssr-spa</Link>
+          <Link to="/">react-ssr-spa</Link>
         </li>
       </ul>
     </footer>

src/views/components/nav/nav.js

@@ -17,9 +17,9 @@ class Nav extends Component {
       <nav className="top-nav">
         <ul className="top-nav__link-container">
           <li className="top-nav__link">
-            <Link to={'/'}>react-ssr-spa</Link>
+            <Link to="/">react-ssr-spa</Link>
 
-            <Link to={'/about'}>About</Link>
+            <Link to="/about">About</Link>
           </li>
         </ul>
         <form

src/views/containers/layouts/_layout.scss

@@ -18,12 +18,9 @@ body {
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
-.fonts-loaded {
-
-  html,
-  body {
-    font-family: Amble, sans-serif;
-  }
+html.fonts-loaded,
+.fonts-loaded body {
+  font-family: Amble, sans-serif;
 }
 
 html {

src/views/containers/layouts/layout.js

@@ -61,7 +61,7 @@ class Layout extends Component {
             appear={true}
             className="main"
             role="main"
-            component={'main'}
+            component="main"
           >
             <CSSTransition
               key={this.props.location.pathname}

src/views/containers/pages/about_page/about_page.js

@@ -21,14 +21,12 @@ class AboutPage extends Component {
   render() {
     return (
       <div className="about-page">
-        <h1>{"What's this about?"}</h1>
+        <h1>What's this about?</h1>
         <p>
           This project aims to do one thing well: make server side rendering
           simple in a react application using only mature community maintained
           libraries.
-          <Link to={'/repo/michaelBenin/react-ssr-spa'}>
-            demo: react-ssr-spa
-          </Link>
+          <Link to="/repo/michaelBenin/react-ssr-spa">demo: react-ssr-spa</Link>
         </p>
         <Footer />
       </div>
@@ -37,9 +35,9 @@ class AboutPage extends Component {
 }
 
 AboutPage.propTypes = {
-  match: PropTypes.shape().isRequired,
+  match: PropTypes.shape({}).isRequired,
   dispatch: PropTypes.func.isRequired,
-  state: PropTypes.shape().isRequired
+  state: PropTypes.shape({}).isRequired
 };
 
 AboutPage.defaultProps = {};

src/views/containers/pages/about_page/about_page_data_fetch.js

@@ -8,11 +8,9 @@ export default function fetchAboutData(match, dispatch, state) {
       return false;
     }
   }
-  return asyncAboutPageAction(
-    match.params,
-    dispatch,
-    state
-  ).catch(function handleError(err) {
-    log.error(err);
-  });
+  return asyncAboutPageAction(match.params, dispatch, state).catch(
+    function handleError(err) {
+      log.error(err);
+    }
+  );
 }

src/views/containers/pages/error_page/error_page.js

@@ -11,24 +11,24 @@ function ErrorPage({ env, componentInfo, err }) {
   }
   return (
     <div className="error-page">
-      <h1>{`Error Occurred.`}</h1>
+      <h1>Error Occurred.</h1>
       {isDevelopment ? (
         <div>
           <h2>Error Message: {err.message}</h2>
           <h2>Error Stack: {JSON.stringify(err.stack, null, 2)}</h2>
           <h2>Component Info: {JSON.stringify(componentInfo, null, 2)}</h2>
         </div>
       ) : (
-        <p>{`We're sorry please try again later.`}</p>
+        <p>We\'re sorry please try again later.</p>
       )}
       <Footer />
     </div>
   );
 }
 
 ErrorPage.propTypes = {
-  err: PropTypes.shape(),
-  componentInfo: PropTypes.shape(),
+  err: PropTypes.shape({}),
+  componentInfo: PropTypes.shape({}),
   env: PropTypes.string.isRequired
 };
 

src/views/containers/pages/index_page/index_page.js

@@ -22,17 +22,17 @@ class Homepage extends Component {
     return (
       <div className="index-page">
         <h1>Welcome to react-ssr-spa working demo.</h1>
-        <Link to={'/repo/michaelBenin/react-ssr-spa'}>demo: react-ssr-spa</Link>
+        <Link to="/repo/michaelBenin/react-ssr-spa">demo: react-ssr-spa</Link>
         <Footer />
       </div>
     );
   }
 }
 
 Homepage.propTypes = {
-  match: PropTypes.shape().isRequired,
+  match: PropTypes.shape({}).isRequired,
   dispatch: PropTypes.func.isRequired,
-  state: PropTypes.shape().isRequired
+  state: PropTypes.shape({}).isRequired
 };
 
 Homepage.defaultProps = {};

src/views/containers/pages/index_page/index_page_data_fetch.js

@@ -8,11 +8,9 @@ export default function fetchIndexData(match, dispatch, state) {
       return false;
     }
   }
-  return asyncIndexPageAction(
-    match.params,
-    dispatch,
-    state
-  ).catch(function handleError(err) {
-    log.error(err);
-  });
+  return asyncIndexPageAction(match.params, dispatch, state).catch(
+    function handleError(err) {
+      log.error(err);
+    }
+  );
 }

src/views/containers/pages/repo_detail_page/repo_detail_page.js

@@ -10,7 +10,7 @@ import Footer from './../../../components/footer/footer';
 
 class RepoDetail extends Component {
   componentWillMount() {
-    if (!this.props.state.config.initialPageLoad) {
+    if (!get(this.props, 'state.config.initialPageLoad')) {
       loadData(this.props.match, this.props.dispatch, this.props.state);
     } else {
       // TODO: warm cache for PWA, don't trigger render
@@ -62,11 +62,11 @@ class RepoDetail extends Component {
 }
 
 RepoDetail.propTypes = {
-  match: PropTypes.shape().isRequired,
+  match: PropTypes.shape({}).isRequired,
   dispatch: PropTypes.func.isRequired,
-  state: PropTypes.shape().isRequired,
+  state: PropTypes.shape({}).isRequired,
   repo: PropTypes.shape({}), // eslint-disable-line react/require-default-props
-  isLoading: PropTypes.bool.isRequired, // eslint-disable-line react/require-default-props
+  isLoading: PropTypes.bool, // eslint-disable-line react/require-default-props
   error: PropTypes.bool, // eslint-disable-line react/require-default-props
   errorMessage: PropTypes.string // eslint-disable-line react/require-default-props
 };

src/views/containers/pages/repo_detail_page/repo_detail_page_data_fetch.js

@@ -8,11 +8,9 @@ export default function fetchData(match, dispatch, state) {
       return false;
     }
   }
-  return asyncRepoDetailPageAction(
-    match.params,
-    dispatch,
-    state
-  ).catch(function handleActionError(err) {
-    log.error(err);
-  });
+  return asyncRepoDetailPageAction(match.params, dispatch, state).catch(
+    function handleActionError(err) {
+      log.error(err);
+    }
+  );
 }

src/views/containers/pages/search_results_page/search_results_data_fetch.js

@@ -8,11 +8,9 @@ export default function fetchSearchData(nextState, dispatch, state) {
       return false;
     }
   }
-  return fetchSearchPageAction(
-    nextState.params.query,
-    dispatch,
-    state
-  ).catch(function handleServerSideRenderError(err) {
-    log.error(err);
-  });
+  return fetchSearchPageAction(nextState.params.query, dispatch, state).catch(
+    function handleServerSideRenderError(err) {
+      log.error(err);
+    }
+  );
 }

src/views/containers/pages/search_results_page/search_results_page.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { withRouter } from 'react-router';
+import get from 'lodash/get';
 
 import loadData from './search_results_data_fetch';
 
@@ -11,7 +12,7 @@ import Footer from './../../../components/footer/footer';
 // eslint-disable-next-line react/prefer-stateless-function
 class Search extends Component {
   componentWillMount() {
-    if (!this.props.state.config.initialPageLoad) {
+    if (!get(this.props, 'state.config.initialPageLoad')) {
       loadData(this.props.match, this.props.dispatch, this.props.state);
     } else {
       // TODO: warm cache for PWA, don't trigger render
@@ -22,7 +23,7 @@ class Search extends Component {
     if (this.props.error === true) {
       return (
         <section className="search">
-          <h1>{"We're sorry! There was an error. Message: "}</h1>
+          <h1>We're sorry! There was an error. Message: </h1>
           <p>{this.props.errorMessage}</p>
           <Footer />
         </section>
@@ -41,7 +42,7 @@ class Search extends Component {
     return (
       <section className="search">
         <ul>
-          {this.props.response.items.map(function mapItems(item) {
+          {get(this.props.response, 'items', []).map(function mapItems(item) {
             return (
               <li key={`${item.owner.login}|${item.name}`}>
                 <Link to={`/repo/${item.owner.login}/${item.name}`}>
@@ -60,18 +61,21 @@ class Search extends Component {
 }
 
 Search.propTypes = {
-  match: PropTypes.shape().isRequired,
+  match: PropTypes.shape({}).isRequired,
   dispatch: PropTypes.func.isRequired,
-  state: PropTypes.shape().isRequired,
-  isLoading: PropTypes.bool.isRequired, // eslint-disable-line react/require-default-props
+  state: PropTypes.shape({}).isRequired,
+  isLoading: PropTypes.bool, // eslint-disable-line react/require-default-props
   error: PropTypes.bool, // eslint-disable-line react/require-default-props
   errorMessage: PropTypes.string, // eslint-disable-line react/require-default-props
-  response: PropTypes.shape() // eslint-disable-line react/require-default-props
+  response: PropTypes.shape({}) // eslint-disable-line react/require-default-props
 };
 
 Search.defaultProps = {
   isLoading: true,
-  error: false
+  error: false,
+  response: {
+    items: []
+  }
 };
 
 function mapStateToProps(state = {}) {