chore: eslint enabled

Author: Ashish Kumar

.eslintignore

@@ -0,0 +1,4 @@
+/client-build
+/node_modules
+/server-build
+.gitignore

.eslintrc

@@ -0,0 +1,87 @@
+{
+    "root": true,
+    "env": {
+        "browser": true,
+        "es6": true,
+        "commonjs": true,
+        "node": true
+    },
+    "extends": [
+        "airbnb-base",
+        "eslint:recommended", 
+        "plugin:react/recommended"
+    ],
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "allowImportExportEverywhere": true,
+        "ecmaVersion": 8,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "settings": {
+        "react": {
+          "createClass": "createReactClass",             
+          "pragma": "React",  
+          "version": "detect",
+          "flowVersion": "0.53" 
+        }
+    },
+    "plugins": ["react"],
+    "rules": {
+        "no-console": "off",
+        "semi": [
+            "error", "always"
+        ],
+        "quotes": [
+            "error", "double"
+        ],
+        "indent": [
+            "error", 4
+        ],
+        "react/jsx-indent": [
+            "error",
+            4, {
+                "checkAttributes": true
+            }
+        ],
+        "max-len": 0,
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "react/react-in-jsx-scope": "off",
+        "react/destructuring-assignment": "off",
+        "no-nested-ternary": "warn",
+        "react/prop-types": 0,
+        "prefer-destructuring": [
+            "warn", {
+                "VariableDeclarator": {
+                    "array": false,
+                    "object": true
+                },
+                "AssignmentExpression": {
+                    "array": true,
+                    "object": false
+                }
+            }, {
+                "enforceForRenamedProperties": false
+            }
+        ],
+        "comma-dangle": [
+            "error", {
+                "arrays": "never",
+                "objects": "never",
+                "imports": "never",
+                "exports": "never",
+                "functions": "never"
+            }
+        ],
+        "import/no-extraneous-dependencies": [
+            "error", {
+                "devDependencies": true,
+                "optionalDependencies": true,
+                "peerDependencies": true
+            }
+        ]
+    }
+}

client/App.js

@@ -1,16 +1,13 @@
-import React, {Component} from "react";
+import React from "react";
 import { renderRoutes } from "react-router-config";
+import withStyles from "isomorphic-style-loader/withStyles";
 import Routes from "./Routes";
-import styles from  "./scss/root.scss";
-import withStyles from 'isomorphic-style-loader/withStyles'
-class App extends Component {
-    render() {
-        return (
-            <div className={`container`}>
-                {renderRoutes(Routes)}
-            </div>
-        );
-    }
-}
+import styles from "./scss/root.scss";
+
+const App = () => (
+    <div className={"container"}>
+        {renderRoutes(Routes)}
+    </div>
+);
 
 export default withStyles(styles)(App);

client/AppContainer.js

@@ -1,6 +1,5 @@
-import React, {Component} from "react";
-import {renderRoutes} from "react-router-config";
-  
+import React, { Component } from "react";
+import { renderRoutes } from "react-router-config";
 
 class AppContainer extends Component {
     render() {
@@ -13,4 +12,4 @@ class AppContainer extends Component {
 }
 
 
-export default AppContainer;
+export default AppContainer;

client/Routes.js

@@ -1,15 +1,15 @@
 import React from "react";
-import loadable from '@loadable/component';
-import {fetchStories} from "./actions";
+import loadable from "@loadable/component";
+import { fetchStories } from "./actions";
 
 const Loading = () => <h1>Loading...</h1>;
 
-const AppContainer = loadable(() => import(/* webpackChunkName: "appcontainer" */ "./AppContainer"),{
+const AppContainer = loadable(() => import(/* webpackChunkName: "appcontainer" */ "./AppContainer"), {
     fallback: <Loading />,
     ssr: true
 });
 
-const Home = loadable(() => import(/* webpackChunkName: "home" */ "./containers/Home"),{
+const Home = loadable(() => import(/* webpackChunkName: "home" */ "./containers/Home"), {
     fallback: <Loading/>,
     ssr: true
 });
@@ -23,16 +23,14 @@ export default [
                 exact: false,
                 path: "/",
                 component: Home,
-                loadData: (store,route,path,queryParams,urlParams) => { 
-                    /**
-                     * this function will be called on server side. 
-                     * Please check /server/helpers/ServeWeb.js for better understanding
-                     */
-                    return [
-                        store.dispatch(fetchStories(queryParams && (queryParams.page || 0)))
-                    ]
-                }
-            },
+                /**
+                 * this function will be called on server side.
+                 * Please check /server/helpers/ServeWeb.js for better understanding
+                 */
+                loadData: (store, route, path, queryParams) => ([
+                    store.dispatch(fetchStories(queryParams && (queryParams.page || 0)))
+                ])
+            }
         ]
     }
-];
+];

client/actions/index.js

@@ -1,23 +1,24 @@
+/* eslint-disable import/prefer-default-export */
 import {
     FETCH_STORIES_FAILURE,
     FETCH_STORIES_PENDING,
-    FETCH_STORIES_SUCCESS    
-} from "./../constants/ActionTypes";
+    FETCH_STORIES_SUCCESS
+} from "../constants/ActionTypes";
+
+export const fetchStories = (page = 0) => async (dispatch, getState, api) => {
+    try {
+        dispatch({ type: FETCH_STORIES_PENDING });
 
-export const fetchStories = (page=0) => async(dispatch, getState, api) => {
-    try{
-        dispatch({type: FETCH_STORIES_PENDING});
-        
         const res = await api.get(`/search?page=${page}&hitsPerPage=30`);
         // console.log(res);
         dispatch({
             type: FETCH_STORIES_SUCCESS,
             payload: res.data
         });
-    }catch(err){
+    } catch (err) {
         console.log(err);
         dispatch({
             type: FETCH_STORIES_FAILURE
         });
     }
-}
+};

client/components/PaginationButton/index.js

@@ -1,38 +1,38 @@
-import React,{Component} from "react";
-import {connect} from "react-redux";
-import {withRouter} from "react-router";
-import {Link} from "react-router-dom";
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { withRouter } from "react-router";
+import { Link } from "react-router-dom";
 
-class PaginationButton extends Component{
-    render(){
-        const {data} = this.props;
+class PaginationButton extends Component {
+    render() {
+        const { data } = this.props;
         const currPage = data.page;
         const maxPage = data.nbPages;
-        return(
+        return (
             <React.Fragment>
-                <Link 
+                <Link
                     to={`/?page=${currPage >= 1 ? currPage - 1 : 0}`}
-                    className={`${currPage == 0 ? "disabled" : ""} nav-btn text-orange`}
+                    className={`${currPage === 0 ? "disabled" : ""} nav-btn text-orange`}
                 >
                     Previous
                 </Link>
-                
-                &nbsp;&nbsp;|&nbsp;&nbsp; 
-                
-                <Link 
+
+                &nbsp;&nbsp;|&nbsp;&nbsp;
+
+                <Link
                     to={`/?page=${(currPage >= 0 && currPage < maxPage) ? currPage + 1 : maxPage}`}
-                    className={`${currPage == maxPage ? "disabled" : ""} nav-btn text-orange`}
+                    className={`${currPage === maxPage ? "disabled" : ""} nav-btn text-orange`}
                 >
                     Next
                 </Link>
             </React.Fragment>
-        )
+        );
     }
 }
 
-const mapStateToProps = ({stories}) => ({
+const mapStateToProps = ({ stories }) => ({
     data: stories.data
 });
 
-export default withRouter(connect(mapStateToProps,{
-})(PaginationButton));
+export default withRouter(connect(mapStateToProps, {
+})(PaginationButton));

client/components/StoryList/ListItem.js

@@ -1,68 +1,68 @@
 import React from "react";
 
 const getOriginFromUrl = (str) => {
-    if(!str){
+    if (!str) {
         return null;
     }
-    try{
+    try {
         const url = new window.URL(str);
-        return url.origin;   
-    }catch(err){
+        return url.origin;
+    } catch (err) {
         // console.log(err);
         return str;
     }
-}
+};
 
-export default (props) => {
+const getClassForPoints = (points = 0) => {
+    if (points >= 50 && points < 100) {
+        return "text-brown";
+    } if (points >= 100) {
+        return "text-orange";
+    }
+    return null;
+};
+
+const ListItem = (props) => {
     const {
-        num_comments, // Number of comments
+        num_comments: numComments, // Number of comments
         points, // Vote Count
         title,
         url,
-        author,
-        created_at
+        author
     } = props.data;
-    if(!title){
+    if (!title) {
         return null;
     }
-    
-    const getClassForPoints = (points=0) => {
-        if(points >= 50 && points < 100){
-            return "text-brown"
-        }else if(points >= 100){
-            return "text-orange";
-        }else{
-            return null;
-        }
-    }
     const className = getClassForPoints(points);
     return (
         <tr className="row-item">
-            <td className="row-item__td">{num_comments || "-"}</td>
+            <td className="row-item__td">{numComments || "-"}</td>
             <td className={`row-item__td ${className}`}>{points || "-"}</td>
             <td className="row-item__td">
                 <span className="caret-upvote"></span>
             </td>
             <td className="row-item__td">
                 <div className="row-item__info clearfix">
                     <div className="row-item__info--title">
-                        <a href={url} target="__blank" suppressHydrationWarning={true}>
+                        <a href={url} target="__blank">
                             {title}
                         </a>
-                        <small>{getOriginFromUrl(url)}</small>
+                        <small suppressHydrationWarning={true}>{getOriginFromUrl(url)}</small>
                     </div>
                     <div className="row-item__info--meta">
                         <div className="row-item__info--meta-block">
                             <small>by <strong>{author}</strong></small>
                         </div>
                         <div className="row-item__info--meta-block">
                             <small>
-                                <a href="#">hide</a>    
+                                <a href="#">hide</a>
                             </small>
                         </div>
                     </div>
                 </div>
             </td>
         </tr>
-    )
-}
+    );
+};
+
+export default ListItem;