fixed lint rules

Author: nimjetushar

.eslintrc

@@ -1,49 +1,9 @@
 {
+  "extends": [
+    "@fourjs/eslint-config-tn"
+  ],
   "parser": "babel-eslint",
-  "plugins": ["react"],
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true
-  },
   "rules": {
-    "no-console": 0,
-    "react/display-name": 2,
-    "react/jsx-key": 2,
-    "react/jsx-no-comment-textnodes": 2,
-    "react/jsx-no-duplicate-props": 2,
-    "react/jsx-no-target-blank": 2,
-    "react/jsx-no-undef": 2,
-    "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2,
-    "react/no-children-prop": 2,
-    "react/no-danger-with-children": 2,
-    "react/no-deprecated": 2,
-    "react/no-direct-mutation-state": 2,
-    "react/no-find-dom-node": 2,
-    "react/no-is-mounted": 2,
-    "react/no-render-return-value": 2,
-    "react/no-string-refs": 2,
-    "react/no-unescaped-entities": 2,
-    "react/no-unknown-property": 2,
-    "react/no-unsafe": 0,
-    "react/prop-types": 2,
-    "react/react-in-jsx-scope": 2,
-    "react/require-render-return": 2
-  },
-  "parserOptions": {
-    "ecmaVersion": 7,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "pragma": "React",
-      "version": "16.5",
-      "flowVersion": "0.53"
-    }
-  },
-  "extends": ["eslint:recommended"]
-}
+    "babel/new-cap": 0
+  }
+}

config/webpack.common.js

@@ -1,59 +1,59 @@
-const webpack = require("webpack"),
-  HtmlWebpackPlugin = require("html-webpack-plugin"),
-  path = require("path"),
-  MiniCssExtractPlugin = require("mini-css-extract-plugin"),
+const path = require('path'),
   CopyWebpackPlugin = require('copy-webpack-plugin'),
-  CleanWebpackPlugin = require('clean-webpack-plugin');
+  CleanWebpackPlugin = require('clean-webpack-plugin'),
+  HtmlWebpackPlugin = require('html-webpack-plugin'),
+  MiniCssExtractPlugin = require('mini-css-extract-plugin'),
+  webpack = require('webpack');
 
 module.exports = mode => {
   return {
     entry: {
-      polyfills: "./polyfills.js",
-      vendor: "./vendor.js",
-      app: "./src/app.js"
+      app: './src/app.js',
+      polyfills: './polyfills.js',
+      vendor: './vendor.js'
     },
 
     resolve: {
-      extensions: [".js", ".jsx"]
+      extensions: ['.js', '.jsx']
     },
 
     module: {
       rules: [{
-          test: /\.(js|jsx)$/,
-          exclude: /node_modules/,
-          use: [{
-              loader: "babel-loader"
-            },
-            {
-              loader: "angularjs-template-loader?relativeTo:" +
-                path.resolve(__dirname, "../src")
-            }
-          ]
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: [{
+          loader: 'babel-loader'
         },
         {
-          test: /\.html$/,
-          use: [{
-            loader: "html-loader",
-            options: {
-              minimize: true
-            }
-          }]
-        },
-        {
-          test: /\.scss$/,
-          use: [
-            // fallback to style-loader in development
-            !mode ?
-            "style-loader" :
-            MiniCssExtractPlugin.loader,
-            "css-loader",
-            "sass-loader"
-          ]
-        },
-        {
-          test: /\.(eot|svg|ttf|woff|woff2)$/,
-          use: "file-loader?name=pubic/fonts/[name].[ext]"
+          loader: 'angularjs-template-loader?relativeTo:' +
+            path.resolve(__dirname, '../src')
         }
+        ]
+      },
+      {
+        test: /\.html$/,
+        use: [{
+          loader: 'html-loader',
+          options: {
+            minimize: true
+          }
+        }]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          // fallback to style-loader in development
+          !mode ?
+            'style-loader' :
+            MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2)$/,
+        use: 'file-loader?name=pubic/fonts/[name].[ext]'
+      }
       ]
     },
 
@@ -62,24 +62,24 @@ module.exports = mode => {
         cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '../dist')]
       }),
       new HtmlWebpackPlugin({
-        template: "./index.html", // Input FileName
-        filename: "./index.html" // Output FileName
+        template: './index.html', // Input FileName
+        filename: './index.html' // Output FileName
       }),
       new webpack.ProvidePlugin({}),
       new MiniCssExtractPlugin({
-        filename: "[name].css"
+        filename: '[name].css'
       }),
       new CopyWebpackPlugin(
         [{
-          from: path.resolve(__dirname, "../src/partialViews/**/*.html"),
-          to: ""
+          from: path.resolve(__dirname, '../src/partialViews/**/*.html'),
+          to: ''
         }], {}
       )
     ],
 
     optimization: {
       splitChunks: {
-        chunks: "all",
+        chunks: 'all',
         maxAsyncRequests: 5,
         minChunks: 1
       },
@@ -89,5 +89,5 @@ module.exports = mode => {
     stats: {
       warnings: false
     }
-  }
-};
+  };
+};

config/webpack.dev.js

@@ -1,26 +1,26 @@
-const webpackMerge = require("webpack-merge"),
-  commonConfig = require("./webpack.common.js"),
-  path = require("path"),
-  rootDir = path.resolve(__dirname, ".."),
-  port = require("../config.json").port;
+const path = require('path'),
+  webpackMerge = require('webpack-merge'),
+  port = require('../config.json').port,
+  commonConfig = require('./webpack.common.js'),
+  rootDir = path.resolve(__dirname, '..');
 
 module.exports = (mode) => {
   return webpackMerge(commonConfig(mode), {
-    devtool: "cheap-module-eval-source-map",
-    mode: "development",
+    devtool: 'cheap-module-eval-source-map',
+    mode: 'development',
 
     output: {
-      path: path.resolve(rootDir, "dist"),
+      path: path.resolve(rootDir, 'dist'),
       publicPath: `http://localhost:${port}/`,
-      filename: "[name].js",
-      chunkFilename: "[name].chunk.js"
+      filename: '[name].js',
+      chunkFilename: '[name].chunk.js'
     },
 
     devServer: {
       inline: true,
-      port: port,
+      port,
       historyApiFallback: true,
-      stats: "minimal"
+      stats: 'minimal'
     }
   });
-}
+};

jest.config.js

@@ -120,7 +120,7 @@ module.exports = {
   // setupFiles: [],
 
   // The path to a module that runs some code to configure or set up the testing framework before each test
-  setupTestFrameworkScriptFile: "<rootDir>src/test.init.js",
+  setupFilesAfterEnv: ["<rootDir>src/test.init.js"],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   // snapshotSerializers: [],

src/about/aboutComp/aboutComponent.js

@@ -1,8 +1,9 @@
-aboutCtrl.$inject = [];
 
-function aboutCtrl() {}
+function aboutCtrl() { }
+
+aboutCtrl.$inject = [];
 
 export default {
-  templateUrl: "./aboutComponent.html",
-  controller: aboutCtrl
-};
+  controller: aboutCtrl,
+  templateUrl: './aboutComponent.html'
+};

src/about/aboutModule.js

@@ -1,24 +1,23 @@
-import angular from "angular";
-
-import aboutComponent from "./aboutComp/aboutComponent";
+import angular from 'angular';
+import aboutComponent from './aboutComp/aboutComponent';
 
 const ABOUT_MODULE = angular
-  .module("AboutModule", [])
+  .module('AboutModule', [])
   .config([
-    "$stateProvider",
-    function($stateProvider) {
+    '$stateProvider',
+    ($stateProvider) => {
       // any two of the way can be used
       // $stateRegistry.register({
       //   name: "about",
       //   url: "/about",
       //   component: "aboutComponent"
       // });
-      $stateProvider.state("about", {
-        url: "/about",
-        component: "aboutComponent"
+      $stateProvider.state('about', {
+        component: 'aboutComponent',
+        url: '/about'
       });
     }
   ])
-  .component("aboutComponent", aboutComponent);
+  .component('aboutComponent', aboutComponent);
 
 export default ABOUT_MODULE;

src/app.js

@@ -1,23 +1,21 @@
-import "./styles.scss";
-import angular from "angular";
-
-import appModule from "./app.module";
-
-import routerConfig from "./route";
-import rootComponent from "./rootComponent";
-import landingComponent from "./landing/landingComponent";
-import headerComponent from "./header/headerComponent";
-import "./help/helpController";
-import tableDirective from "./landing/tableDir";
+import './styles.scss';
+import angular from 'angular';
+import appModule from './app.module';
+import routerConfig from './route';
+import rootComponent from './rootComponent';
+import landingComponent from './landing/landingComponent';
+import headerComponent from './header/headerComponent';
+import './help/helpController';
+import tableDirective from './landing/tableDir';
 
 appModule
   .config(routerConfig)
-  .component("root", rootComponent)
-  .component("header", headerComponent)
-  .component("landingComponent", landingComponent)
+  .component('root', rootComponent)
+  .component('header', headerComponent)
+  .component('landingComponent', landingComponent)
 
-  .directive("tableDirective", tableDirective);
+  .directive('tableDirective', tableDirective);
 
-angular.element(function() {
-  angular.bootstrap(document, ["angularReact"]);
+angular.element(() => {
+  angular.bootstrap(document, ['angularReact']);
 });

src/app.module.js

@@ -1,5 +1,5 @@
-import angular from "angular";
+import angular from 'angular';
 
-const appModule = angular.module("angularReact", ["ui.router", "oc.lazyLoad"]);
+const appModule = angular.module('angularReact', ['ui.router', 'oc.lazyLoad']);
 
 export default appModule;

src/common/table/tableComponent.jsx

@@ -1,13 +1,13 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 class Table extends Component {
   constructor(props) {
     super(props);
   }
 
   componentDidMount() {
-    console.log("componentDidMount");
+    console.log('componentDidMount');
   }
 
   render() {

src/common/table/tableComponent.spec.js

@@ -1,13 +1,14 @@
-import React from "react";
-import { shallow } from "enzyme";
-import Table from "./tableComponent";
+import React from 'react';
+import { shallow } from 'enzyme';
+import Table from './tableComponent';
 
-describe("Table", () => {
-  it("should render correctly", () => {
+describe('Table', () => {
+  // eslint-disable-next-line jest/expect-expect
+  it('should render correctly', () => {
     shallow(<Table />);
   });
 
-  it("should render initial layout", () => {
+  it('should render initial layout', () => {
     const component = shallow(<Table />);
     expect(component.getElements()).toMatchSnapshot();
   });