Merge pull request #4 from Easybuoy/chore/164683136/integrate-linting

#164683136 Integrate Linting

.eslintrc.json

@@ -0,0 +1,47 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": ["airbnb", "prettier"],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+      "react/jsx-filename-extension": [ 1,{"extensions": [".js", ".jsx"] }],
+      "react/prop-types": 1,
+      "no-underscore-dangle": 0,
+      "import/imports-first": ["error", "absolute-first"],
+      "import/newline-after-import": "error",
+      "max-len": ["error", { "code": 80 }],
+      "function-paren-newline": 0,
+      "one-var": 0,
+      "one-var-declaration-per-line": 0,
+      "new-cap": 1,
+      "consistent-return": 0,
+      "no-param-reassign": 0,
+      "comma-dangle": 0,
+      "curly": ["error", "multi-line"],
+      "import/no-unresolved": [2, { "commonjs": true }],
+      "no-shadow": ["error", { "allow": ["req", "res", "err"] }],
+      "valid-jsdoc": ["error", {
+        "requireReturn": true,
+        "requireReturnType": true,
+        "requireParamDescription": false,
+        "requireReturnDescription": true
+      }]
+    },
+    "parser": "babel-eslint"
+}

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "printWidth": 100,
+    "singleQuote": true
+  }

package.json

@@ -8,6 +8,8 @@
     "@babel/preset-react": "^7.0.0",
     "@material-ui/core": "^3.0.3",
     "@material-ui/icons": "^3.0.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
     "grommet": "^1.11.0",
     "jest": "^24.5.0",
     "mdbreact": "^4.7.0",
@@ -22,10 +24,17 @@
     "build": "react-scripts build",
     "test": "jest",
     "coveralls": "jest --coverage && cat coverage/lcov.info | coveralls",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src"
   },
   "devDependencies": {
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.11.2"
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.15.2",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-react": "^7.12.4",
+    "prettier": "^1.16.4"
   }
 }

src/App.js

@@ -1,35 +1,36 @@
 import React, { Component } from 'react';
-import Navigation from './components/navigation/Navigation';
-import Footer from './components/footer/Footer';
-import { BrowserRouter as Router, Route} from 'react-router-dom';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import Home from './components/pages/home/Home';
+import Navigation from './components/navigation/Navigation';
 import Movies from './components/pages/movies/Movies';
 import Movie from './components/pages/movies/Movie';
 import Tvseries from './components/pages/tvseries/Tvseries';
 import TvSerie from './components/pages/tvseries/TvSerie';
 import About from './components/pages/about/About';
 import Thanks from './components/thanks/Thanks';
+import Footer from './components/footer/Footer';
 
 import './App.css';
 
 class App extends Component {
+
   render() {
     return (
       <Router>
-      <div className="App">
-      <Navigation/>
-      <Route exact path="/" component={Home} />
-      <Route exact path="/movies" component={Movies} />
-      <Route  path="/movies/:movie_id" component={Movie} />
-      <Route  path="/series/:serie_id" component={TvSerie} />
-      <Route exact path="/tvseries" component={Tvseries} />
-      <Route exact path="/about" component={About} />
-      <Route exact path="/thanks" component={Thanks} />
+        <div className="App">
+          <Navigation />
+          <Route exact path="/" component={Home} />
+          <Route exact path="/movies" component={Movies} />
+          <Route path="/movies/:movie_id" component={Movie} />
+          <Route path="/series/:serie_id" component={TvSerie} />
+          <Route exact path="/tvseries" component={Tvseries} />
+          <Route exact path="/about" component={About} />
+          <Route exact path="/thanks" component={Thanks} />
+
+          <Footer />
 
-      <Footer />
-
-      </div>
+        </div>
       </Router>
     );
   }

src/components/pages/tvseries/TvSeriesCredits.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import TMDB from '../../../config/keys';
 import { Triple } from 'react-preloading-component';
+
+import TMDB from '../../../config/keys';
 import Error from '../../error/Error';
 import './TvSeriesCredits.css' ;
 
@@ -34,46 +35,54 @@ class TvseriesCredits extends Component {
       convertArrayToCommaSeperated(array){
         let response = '';
         array.map((singleitem, i) => {
-           return response += singleitem.name + ', ';
+           return response += `${singleitem.name  }, `;
         });
 
         return response.slice(0, -2);
       }
 
        convertTime(time) {
-        var minutes = time % 60;
-        var hours = (time - minutes) / 60;
+        const minutes = time % 60;
+        const hours = (time - minutes) / 60;
 
-        return hours + "h " + minutes + 'm';
+        return `${hours  }h ${  minutes  }m`;
         }
 
   render() {
     if(this.state.credits !== 0){
-        let credits =  this.state.credits;
-        let casts = credits.cast;
+        const {credits} = this.state;
+        const casts = credits.cast;
 
         if(credits){
 
             return(
-                <div className="container">    
+              <div className="container">    
 
                 <h1 className="text-center">CASTS</h1>
-              <hr></hr>
+                <hr />
 
-            <div className="row">                
-           {
+                <div className="row">                
+                  {
 
                     casts.slice(0, 12).map((cast, i) => { 
                      return ( 
-                        <div className="col-lg-4 col-md-4 col-sm-4">
-
-                    <div className="box">
-                     <img src={`${TMDB.IMG_PATH + 'w185/' +cast.profile_path}`} alt={cast.original_title} />
-                     <p className="text-center"><strong>Name: </strong> {cast.name}</p>
-                     <p className="text-center red-text"><strong>Character: </strong> {cast.character}</p>
-                    </div>
-                    <br></br>
-                     </div>
+                       <div className="col-lg-4 col-md-4 col-sm-4">
+
+                         <div className="box">
+                           <img src={`${`${TMDB.IMG_PATH}w185/${ cast.profile_path}`}`} alt={cast.original_title} />
+                           <p className="text-center">
+                             <strong>Name: </strong> 
+                             {' '}
+                             {cast.name}
+                           </p>
+                           <p className="text-center red-text">
+                             <strong>Character: </strong> 
+                             {' '}
+                             {cast.character}
+                           </p>
+                         </div>
+                         <br />
+                       </div>
 
                      ); 
 
@@ -82,8 +91,8 @@ class TvseriesCredits extends Component {
             }   
 
 
+                </div>
               </div>
-             </div>
           );
 
 
@@ -92,23 +101,23 @@ class TvseriesCredits extends Component {
       }else if(this.state.error !== 0){
 
               return (
-              <div>
+                <div>
                   <Error />
-              </div>
+                </div>
               );
 
       }else{
           return (
-              <div>
-                <Triple />
-              </div>
+            <div>
+              <Triple />
+            </div>
               )
     }
 
 
     return (
       <div>
-          <Triple />
+        <Triple />
       </div>
     );
   }

src/components/thanks/Thanks.js

@@ -1,24 +1,18 @@
-import React, { Component } from 'react';
+import React from 'react'
 
-class Thanks extends Component {
-
-  render(){
-
-
-    return(
-      <div className="container con">
+const Thanks = () => {
+  return (
+    <div className="container con">
 
       <div style={{marginTop: '10%', marginBottom: '10%'}}>
       <h1>Thanks For Reaching Out</h1>
       <h3> I Will Be In Touch Shortly</h3>
-      <a href='/'><input className="btn btn-outline-brown" type="button" value="Back To Home Page " /></a>
+        <a href='/'>
+          <input className="btn btn-outline-brown" type="button" value="Back To Home Page " />
+        </a>
       </div>
-
-
       </div>
-    );
-  }
+  )
 }
 
-export default Thanks;
-
+export default Thanks;

src/config/keys.js

@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 
 if(process.env.NODE_ENV === 'production'){
     module.exports = require('./keys_prod');

src/config/setupTests.js

@@ -1,4 +1,4 @@
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
- 
-Enzyme.configure({ adapter: new Adapter() });
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

src/index.js

@@ -1,9 +1,17 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
+import 'bootstrap-css-only/css/bootstrap.min.css';
+import 'mdbreact/dist/css/mdb.css';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import 'font-awesome/css/font-awesome.min.css';
-import 'bootstrap/dist/css/bootstrap.min.css'; 
-import 'mdbreact/dist/css/mdb.css';
+// import 'font-awesome/css/font-awesome.min.css';
+// import 'bootstrap/dist/css/bootstrap.min.css';
+// import 'mdbreact/dist/css/mdb.css';
+
+
+
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';