Merge pull request #668 from pi-hole/lint-2

Add a lint script

.github/workflows/ci.yml

@@ -35,6 +35,9 @@ jobs:
       - name: Check Formatting
         run: npm run check-format
 
+      - name: Lint
+        run: npm run lint
+
       - name: Test
         run: npm run coverage
 

package.json

@@ -52,7 +52,6 @@
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "moment": "^2.24.0",
-    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
     "react-bootstrap-daterangepicker": "^4.1.0",
@@ -77,9 +76,10 @@
     "test": "react-scripts test --env=jsdom",
     "coverage": "react-scripts test --env=jsdom --coverage",
     "codecov": "codecov",
+    "lint": "eslint --ignore-path .gitignore --ext js,ts,tsx .",
     "eject": "react-scripts eject",
-    "format": "prettier --write \"**/*.{js,tsx}\"",
-    "check-format": "prettier --list-different \"**/*.{js,tsx}\""
+    "format": "prettier --write \"**/*.{js,tsx}\" --ignore-path .gitignore",
+    "check-format": "prettier --list-different \"**/*.{js,tsx}\" --ignore-path .gitignore"
   },
   "browserslist": [
     "defaults",
@@ -92,5 +92,13 @@
   "prettier": {
     "arrowParens": "avoid",
     "trailingComma": "none"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": ["react-app"],
+    "rules": {
+      "react/display-name": "off",
+      "react/prop-types": "off"
+    }
   }
 }

src/components/common/__tests__/Header.test.tsx

@@ -8,7 +8,7 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
-import React, { MouseEvent } from "react";
+import React from "react";
 import api from "../../../util/api";
 import { shallow } from "enzyme";
 import Header from "../Header";
@@ -16,7 +16,7 @@ import { TimeRangeSelectorContainer } from "../../dashboard/TimeRangeSelector";
 
 it("shows the time range selector on the dashboard", () => {
   api.loggedIn = true;
-  history.pushState({}, "", "/dashboard");
+  window.history.pushState({}, "", "/dashboard");
 
   const wrapper = shallow(<Header />);
 
@@ -25,7 +25,7 @@ it("shows the time range selector on the dashboard", () => {
 
 it("does not show the time range selector when not logged in", () => {
   api.loggedIn = false;
-  history.pushState({}, "", "/dashboard");
+  window.history.pushState({}, "", "/dashboard");
 
   const wrapper = shallow(<Header />);
 
@@ -34,7 +34,7 @@ it("does not show the time range selector when not logged in", () => {
 
 it("does not show the time range selector on non-dashboard pages", () => {
   api.loggedIn = true;
-  history.pushState({}, "", "/whitelist");
+  window.history.pushState({}, "", "/whitelist");
 
   const wrapper = shallow(<Header />);
 

src/components/dashboard/ClientsGraph.tsx

@@ -207,7 +207,7 @@ export const transformData = (
   // Fill in data & labels
   for (let step of overTime) {
     for (let destination in datasets) {
-      if (datasets.hasOwnProperty(destination))
+      if (Object.prototype.hasOwnProperty.call(datasets, destination))
         (datasets[destination].data as Array<number>).push(
           step.data[destination]
         );

src/components/dashboard/__tests__/TopBlockedClients.test.tsx

@@ -8,7 +8,6 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
-import React from "react";
 import { generateRows, transformData } from "../TopBlockedClients";
 
 const fakeData: ApiTopBlockedClients = {

src/components/dashboard/__tests__/TopBlockedDomains.test.tsx

@@ -8,7 +8,6 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
-import React from "react";
 import { generateRows, transformData } from "../TopBlockedDomains";
 
 const fakeData: ApiTopBlockedDomains = {

src/components/dashboard/__tests__/TopClients.test.tsx

@@ -8,7 +8,6 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
-import React from "react";
 import { generateRows, transformData } from "../TopClients";
 
 const fakeData: ApiTopClients = {

src/components/dashboard/__tests__/TopDomains.test.tsx

@@ -8,7 +8,6 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
-import React from "react";
 import { generateRows, transformData } from "../TopDomains";
 
 const fakeData: ApiTopDomains = {

src/components/settings/DnsOptionSettings.tsx

@@ -9,7 +9,6 @@
  * Please see LICENSE file for your rights under this license. */
 
 import React, { Fragment } from "react";
-import PropTypes from "prop-types";
 import { Col, FormGroup, Input, Label } from "reactstrap";
 import { TFunction } from "i18next";
 
@@ -86,10 +85,4 @@ const DnsOptionSettings = ({
   </Fragment>
 );
 
-DnsOptionSettings.propTypes = {
-  settings: PropTypes.object.isRequired,
-  onUpdate: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
-};
-
 export default DnsOptionSettings;

src/types/global.d.ts

@@ -8,6 +8,7 @@
  * This file is copyright under the latest version of the EUPL.
  * Please see LICENSE file for your rights under this license. */
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace NodeJS {
   import i18next from "i18next";
 

src/views/Login.tsx

@@ -37,7 +37,7 @@ class Login extends Component<LoginProps, LoginState> {
     cookiesEnabled: false
   };
 
-  componentWillMount() {
+  componentDidMount() {
     // Check if cookies are enabled
     if (navigator.cookieEnabled) this.setState({ cookiesEnabled: true });
   }

src/views/Logout.tsx

@@ -14,7 +14,7 @@ import api from "../util/api";
 import config from "../config";
 
 export default class Logout extends Component {
-  componentWillMount() {
+  componentDidMount() {
     api.loggedIn = false;
 
     if (config.fakeAPI) {