[no-ticket] Adding linting rules (#22)

* First pass at linting

* Replacing double quotes with single quotes

* Adding linting rules and refactoring 1st pass at linting errors

* Adding PropTypes

services/client/.eslintrc.json

@@ -0,0 +1,63 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "plugins": [
+    "babel",
+    "prettier"
+  ],
+  "settings": {
+    "react": {
+      "version": "15.6.1"
+    }
+  },
+  "rules": {
+    "func-names": "off",
+    "no-restricted-properties": ["error", { "object": "React", "property": "PropTypes" }, { "object": "React", "property": "createClass" }],
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/label-has-for": "off",
+    "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
+    "react/no-unescaped-entities": "off",
+    "react/forbid-prop-types": "off",
+    "babel/new-cap": 1,
+    "babel/object-curly-spacing": 1,
+    "babel/no-invalid-this": 1,
+    "babel/semi": 1,
+    "import/no-extraneous-dependencies": "off",
+    "import/no-unresolved": "off",
+    "import/first": "off",
+    "import/no-undef": "off",
+    "import/extensions": "off",
+    "class-methods-use-this": "off",
+    "react/prefer-stateless-function": "off",
+    "consistent-return": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "import/no-duplicates": "off",
+    "no-console": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "no-use-before-define": "off",
+    "no-param-reassign": "off",
+    "react/jsx-no-bind": "off",
+    "react/no-string-refs": "off",
+    "babel/no-invalid-this": "off",
+    "no-undef": "off",
+    "react/jsx-no-duplicate-props": "off",
+    "no-unused-vars": "off",
+    "no-debugger": "off"
+  }
+}

services/client/README.md

@@ -283,7 +283,7 @@ In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and s
 
 Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm.
 
-The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. 
+The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.
 
 ## Formatting Code Automatically
 
@@ -1769,7 +1769,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c
     RewriteRule ^ index.html [QSA,L]
 ```
 
-It will get copied to the `build` folder when you run `npm run build`. 
+It will get copied to the `build` folder when you run `npm run build`.
 
 If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
 
@@ -1822,7 +1822,7 @@ See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azu
 
 ### Firebase
 
-Install the Firebase CLI if you haven’t already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account.
+Install the Firebase CLI if you haven’t already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https:console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account.
 
 Then run the `firebase init` command from your project’s root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`.
 
@@ -1875,7 +1875,7 @@ Now, after you create a production build with `npm run build`, you can deploy it
 
     ✔  Deploy complete!
 
-    Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
+    Project Console: https:console.firebase.google.com/project/example-app-fd690/overview
     Hosting URL: https://example-app-fd690.firebaseapp.com
 ```
 

services/client/eslint-ignore-test.txt

@@ -0,0 +1,5 @@
+**/node_modules/**
+**/dist/**
+
+**/*.js
+!**/*.spec.js

services/client/package.json

@@ -13,6 +13,7 @@
     "chainable-check": "^1.0.0",
     "css-loader": "0.28.4",
     "dotenv": "4.0.0",
+    "eslint-plugin-babel": "^4.1.2",
     "file-loader": "0.11.2",
     "font-awesome": "^4.7.0",
     "html-webpack-plugin": "2.29.0",
@@ -41,7 +42,7 @@
   },
   "devDependencies": {
     "babel-core": "6.25.0",
-    "babel-eslint": "7.2.3",
+    "babel-eslint": "^7.2.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.1.1",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -50,16 +51,17 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.0.2",
     "babel-preset-stage-2": "^6.24.1",
-    "babel-runtime": "^6.26.0",
+    "babel-runtime": "^6.26.0",    
+    "eslint": "4.16.0",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint": "4.4.1",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-config-react-app": "^2.0.0",
+    "eslint-config-prettier": "2.9.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-flowtype": "2.35.0",
-    "eslint-plugin-import": "2.7.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.1.0",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-jest": "21.7.0",
+    "eslint-plugin-jsx-a11y": "6.0.3",
+    "eslint-plugin-prettier": "2.5.0",
+    "eslint-plugin-react": "7.5.1",
     "extract-text-webpack-plugin": "3.0.0",
     "fs-extra": "^3.0.1",
     "node-sass": "^4.5.3",
@@ -77,7 +79,7 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom",
-    "lint": "eslint --config .eslintrc.json src && prettier \"src/**/*.js\" --list-different",
+    "lint": "eslint --config .eslintrc.json src --ignore-path eslint-ignore-test.txt . && prettier \"src/**/*.js\" --list-different",
     "format": "prettier \"src/**/*.js\" --write",
     "dev": "npm run format && npm run lint && npm test"
   },

services/client/src/App.js

@@ -1,60 +1,67 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import PropTypes from "prop-types";
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
 
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
 
-import HomePage from "pages/home";
-import DeveloperListingPage from "pages/developers";
-import MeetupListingPage from "pages/meetups";
-import DeveloperPage from "pages/developer";
-import MeetupPage from "pages/meetup";
-import ErrorPage from "pages/404";
-import ProfilePage from "pages/profile";
-import AboutPage from "pages/about";
+import HomePage from 'pages/home';
+import DeveloperListingPage from 'pages/developers';
+import MeetupListingPage from 'pages/meetups';
+import DeveloperPage from 'pages/developer';
+import MeetupPage from 'pages/meetup';
+import ErrorPage from 'pages/404';
+import ProfilePage from 'pages/profile';
+import AboutPage from 'pages/about';
 
-import ScrollToTop from "components/navigation/scroll-to-top";
+import ScrollToTop from 'components/navigation/scroll-to-top';
 
 class App extends Component {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    isAuthenticated: PropTypes.bool.isRequired,
+    errorMessage: PropTypes.string.isRequired
+  };
+
   render() {
     return (
       <div>
         <Router>
           <ScrollToTop>
             <Switch>
               <Route
-                exact={true}
-                path="/"
-                render={props => <HomePage {...this.props} />}
+                exact
+                path='/'
+                render={props => <HomePage {...props} />}
               />
               <Route
-                exact={true}
-                path="/developers"
-                render={props => <DeveloperListingPage {...this.props} />}
+                exact
+                path='/developers'
+                render={props => <DeveloperListingPage {...props} />}
               />
               <Route
-                exact={true}
-                path="/meetups"
-                render={props => <MeetupListingPage {...this.props} />}
+                exact
+                path='/meetups'
+                render={props => <MeetupListingPage {...props} />}
               />
               <Route
-                path="/meetup/:id"
-                render={props => <MeetupPage {...this.props} {...props} />}
+                path='/meetup/:id'
+                render={props => <MeetupPage {...props} {...props} />}
               />
               <Route
-                path="/developer/:id"
-                render={props => <DeveloperPage {...this.props} {...props} />}
+                path='/developer/:id'
+                render={props => <DeveloperPage {...props} {...props} />}
               />
               <Route
-                path="/profile"
-                render={props => <ProfilePage {...this.props} />}
+                path='/profile'
+                render={props => <ProfilePage {...props} />}
               />
               <Route
-                exact={true}
-                path="/about"
-                render={props => <AboutPage {...this.props} />}
+                exact
+                path='/about'
+                render={props => <AboutPage {...props} />}
               />
-              <Route render={props => <ErrorPage {...this.props} />} />
+              <Route render={props => <ErrorPage {...props} />} />
             </Switch>
           </ScrollToTop>
         </Router>
@@ -63,19 +70,12 @@ class App extends Component {
   }
 }
 
-App.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  isAuthenticated: PropTypes.bool.isRequired,
-  errorMessage: PropTypes.string
-};
-
 // These props come from the application's
 // state when it is started
 function mapStateToProps(state) {
-  const { auth } = state;
-  const { isAuthenticated, errorMessage } = auth;
+  const {isAuthenticated, errorMessage} = state.auth;
 
-  return { isAuthenticated, errorMessage };
+  return {isAuthenticated, errorMessage};
 }
 
 export default connect(mapStateToProps)(App);

services/client/src/App.test.js

@@ -1,8 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
-it("renders without crashing", () => {
-  const div = document.createElement("div");
+it('renders without crashing', () => {
+  const div = document.createElement('div');
   ReactDOM.render(<App />, div);
 });

services/client/src/actions/login.js

@@ -1,6 +1,6 @@
-export const LOGIN_REQUEST = "LOGIN_REQUEST";
-export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
-export const LOGIN_FAILURE = "LOGIN_FAILURE";
+export const LOGIN_REQUEST = 'LOGIN_REQUEST';
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
+export const LOGIN_FAILURE = 'LOGIN_FAILURE';
 
 function requestLogin(creds) {
   return {
@@ -31,15 +31,15 @@ function loginError(message) {
 
 // Calls the API to get a token and dispatches actions along the way
 export function loginUser(creds) {
-  let payload = {
+  const payload = {
     email: creds.email,
     password: creds.password
   };
 
-  let config = {
-    method: "POST",
+  const config = {
+    method: 'POST',
     headers: {
-      "Content-Type": "application/json"
+      'Content-Type': 'application/json'
     },
     body: JSON.stringify(payload)
   };
@@ -48,33 +48,32 @@ export function loginUser(creds) {
     // We dispatch requestLogin to kickoff the call to the API
     dispatch(requestLogin(creds));
 
-    return fetch("http://localhost:5001/auth/login", config)
-      .then(response => response.json().then(user => ({ user, response })))
-      .then(({ user, response }) => {
+    return fetch('http://localhost:5001/auth/login', config)
+      .then(response => response.json().then(user => ({user, response})))
+      .then(({user, response}) => {
         if (!response.ok) {
           // If there was a problem, we want to
           // dispatch the error condition
           dispatch(
             loginError(
-              "Invalid login - please ensure your credentials are correct."
+              'Invalid login - please ensure your credentials are correct.'
             )
           );
           return Promise.reject(user);
-        } else {
-          // If login was successful, set the token in local storage
-          debugger;
-          localStorage.setItem("access_token", user.auth_token);
-          // Dispatch the success action
-          dispatch(receiveLogin(user));
         }
+        // If login was successful, set the token in local storage
+
+        localStorage.setItem('access_token', user.auth_token);
+        // Dispatch the success action
+        dispatch(receiveLogin(user));
       })
       .catch(err => {
         dispatch(
           loginError(
-            "Server Error - please ensure your credentials are correct."
+            'Server Error - please ensure your credentials are correct.'
           )
         );
-        console.log("Error: ", err);
+        console.log('Error: ', err);
       });
   };
 }

services/client/src/actions/logout.js

@@ -1,5 +1,5 @@
-export const LOGOUT_REQUEST = "LOGOUT_REQUEST";
-export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
+export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
+export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
 
 function requestLogout() {
   return {
@@ -20,8 +20,8 @@ function receiveLogout() {
 export function logoutUser() {
   return dispatch => {
     dispatch(requestLogout());
-    localStorage.removeItem("id_token");
-    localStorage.removeItem("access_token");
+    localStorage.removeItem('id_token');
+    localStorage.removeItem('access_token');
     dispatch(receiveLogout());
   };
 }