Eslint Added

Lints Warning Purified

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/*
+README.md
+dist/
+public/

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  env: {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  extends: [
+    "plugin:react/recommended",
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  },
+  plugins: [
+    "react"
+  ],
+  rules: {
+    "react/prop-types": 1,
+    "no-unused-vars": 1,
+    "react/display-name": 1,
+    "no-console": 1
+  }
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "interactive-iran-map",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -5062,6 +5062,15 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz",
+      "integrity": "sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==",
+      "dev": true,
+      "requires": {
+        "get-stdin": "^6.0.0"
+      }
+    },
     "eslint-config-react-app": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz",
@@ -5272,6 +5281,15 @@
         }
       }
     },
+    "eslint-plugin-prettier": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.3.tgz",
+      "integrity": "sha512-+HG5jmu/dN3ZV3T6eCD7a4BlAySdN7mLIbJYo0z1cFQuI+r2DiTJEFeF68ots93PsnrMxbzIZ2S/ieX+mkrBeQ==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "eslint-plugin-react": {
       "version": "7.19.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz",
@@ -5683,6 +5701,12 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
       "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA=="
     },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
@@ -6119,6 +6143,12 @@
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
       "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
     },
+    "get-stdin": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
+      "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
+      "dev": true
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -10235,6 +10265,21 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "prettier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz",
+      "integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==",
+      "dev": true
+    },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-bytes": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
@@ -28,7 +29,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "publish:npm": "export NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/InteractiveIranMap --out-dir dist --copy-files"
+    "publish:npm": "export NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/InteractiveIranMap --out-dir dist --copy-files",
+    "lint": "eslint . --ext .js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -46,6 +48,12 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.1"
+    "@babel/cli": "^7.10.1",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "prettier": "2.0.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.19.1"
   }
 }

src/InteractiveIranMap/IranMap.js

@@ -1,6 +1,7 @@
 // core libraries
 import React from "react";
 import ReactTooltip from "react-tooltip";
+import PropTypes from "prop-types";
 
 // constants
 import { iransStatesProperties } from "./constants/iransStates";
@@ -155,4 +156,21 @@ const InteractiveIranMap = (props) => {
   );
 };
 
+InteractiveIranMap.propTypes = {
+  height: PropTypes.number.isRequired,
+  backgroundColor: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+  selectedArea: PropTypes.string.isRequired,
+  useTestData: PropTypes.bool,
+  defaultAreasColor: PropTypes.string,
+  selectedAreaColor: PropTypes.string,
+};
+
+InteractiveIranMap.defaultProps = {
+  defaultAreasColor: "#fff",
+  selectedAreaColor: "red",
+  backgroundColor: "white",
+  useTestData: false,
+};
+
 export default InteractiveIranMap;

src/InteractiveIranMap/index.js

@@ -1,7 +1,7 @@
 // InteractiveIranMap.js
 import React from "react";
 import IranMap from "./IranMap";
-const InteractiveIranMap = (props) => {
+const InteractiveIranMap = () => {
   const [state, setState] = React.useState({ selectedArea: "tehran" });
   const selectAreaHandler = (area) => {
     setState((prevState) => ({ ...prevState, selectedArea: area.name }));
@@ -10,12 +10,9 @@ const InteractiveIranMap = (props) => {
     <div>
       <IranMap
         height={600}
-        backgroundColor="white"
         onClick={selectAreaHandler}
         selectedArea={state.selectedArea}
         useTestData={true}
-        defaultAreasColor="#fff"
-        selectedAreaColor="red"
       />
     </div>
   );