[Chore] Upgrade to eslint 8.53.0 and prettier 2.8.8, fix lint and type errors

.eslintrc.js

@@ -0,0 +1,83 @@
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+    'jest/globals': true
+  },
+  globals: {
+    page: true,
+    browser: true,
+    context: true,
+    jestPuppeteer: true
+  },
+  parser: '@typescript-eslint/parser',
+  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'plugin:react-hooks/recommended'],
+  plugins: ['babel', 'prettier', 'react', 'enzyme-deprecation'],
+  rules: {
+    'valid-jsdoc': 0,
+    'no-var': 0,
+    'max-len': 0,
+    'react/no-did-mount-set-state': 0,
+    'react/no-multi-comp': 0,
+    'react/sort-comp': 0,
+    'no-use-before-define': 'off',
+    'prefer-spread': 1,
+    'prefer-template': 1,
+    'prettier/prettier': 'error',
+    'quote-props': 0,
+    'spaced-comment': 1,
+    'max-params': 0,
+    'no-multiple-empty-lines': 1,
+    'no-process-env': 0,
+    'no-inline-comments': 0,
+    'no-invalid-this': 0,
+    'no-unused-expressions': 0,
+    'no-undef': 0,
+    camelcase: 0,
+    'consistent-return': 0,
+    'comma-dangle': 1,
+    'enzyme-deprecation/no-shallow': 2,
+    'enzyme-deprecation/no-mount': 2
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      // Plugins like @typescript-eslint provide different ruleset configs that can be extended
+      plugins: ['@typescript-eslint'],
+      extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        // This doesn't enable extra rules, but rather just helps with TS settings
+        'plugin:import/typescript'
+      ],
+      rules: {
+        // TODO: Replace any declarations and enable
+        '@typescript-eslint/no-explicit-any': 'off',
+        // TODO: Enable this rule and provide description or fix the errors
+        '@typescript-eslint/ban-ts-comment': 'off',
+        '@typescript-eslint/no-var-requires': 'off'
+      }
+    },
+    {
+      files: ['src/**/src/**/*.spec.js'],
+      plugins: ['jest'],
+      extends: ['plugin:jest/recommended'],
+      rules: {'jest/prefer-expect-assertions': 'off'}
+    }
+  ],
+  settings: {
+    react: {
+      version: 'detect'
+    },
+    // Settings related to eslint-plugin-import
+    'import/resolver': {
+      // Settings for eslint-import-resolver-typescript which resolves
+      // typescript aliases based on tsconfig.json "paths"
+      typescript: {
+        project: './tsconfig.json'
+      }
+    }
+  }
+};

.github/workflows/test.yml

@@ -34,8 +34,8 @@ jobs:
       - name: Install Dependecies
         run: yarn global add "puppeteer@19.11.1" && yarn
 
-      # - name: Lint
-      #  run: yarn lint
+      - name: Lint
+        run: yarn lint
 
       - name: Test
         run: xvfb-run --auto-servernum yarn cover

.prettierrc.js

@@ -6,5 +6,6 @@ module.exports = {
   printWidth: 100,
   semi: true,
   singleQuote: true,
-  trailingComma: "none"
-}
+  trailingComma: 'none',
+  arrowParens: 'avoid'
+};

examples/custom-reducer/src/app-reducer.js

@@ -18,7 +18,7 @@ const initialState = {
 // REDUCER
 const appReducer = handleActions(
   {
-    [INIT]: (state, action) => ({
+    [INIT]: state => ({
       ...state,
       loaded: true
     })

examples/custom-reducer/src/store.js

@@ -33,7 +33,7 @@ const customizedKeplerGlReducer = keplerGlReducer
   })
   // handle additional actions
   .plugin({
-    HIDE_AND_SHOW_SIDE_PANEL: (state, action) => ({
+    HIDE_AND_SHOW_SIDE_PANEL: state => ({
       ...state,
       uiState: {
         ...state.uiState,

examples/custom-theme/src/app.js

@@ -43,7 +43,7 @@ const StyleSwitch = styled.div`
   border: 1px solid mediumseagreen;
 `;
 
-function App(props) {
+function App() {
   const [customTheme, setTheme] = useState(false);
   const [windowDimension, setDimension] = useState({
     width: window.innerWidth,

examples/demo-app/src/actions.js

@@ -2,7 +2,7 @@
 // Copyright contributors to the kepler.gl project
 
 import {push} from 'react-router-redux';
-import {request, text as requestText, json as requestJson} from 'd3-request';
+import {request, json as requestJson} from 'd3-request';
 import {loadFiles, toggleModal} from '@kepler.gl/actions';
 import {load} from '@loaders.gl/core';
 import {CSVLoader} from '@loaders.gl/csv';
@@ -72,7 +72,7 @@ export function setLoadingMapStatus(isMapLoading) {
  *
  * @param {*} param0
  */
-export function onExportFileSuccess({response = {}, provider, options}) {
+export function onExportFileSuccess({provider, options}) {
   return dispatch => {
     // if isPublic is true, use share Url
     if (options.isPublic && provider.getShareUrl) {
@@ -271,11 +271,6 @@ function loadRemoteData(url) {
     return Promise.resolve(null);
   }
 
-  let requestMethod = requestText;
-  if (url.includes('.json') || url.includes('.geojson')) {
-    requestMethod = requestJson;
-  }
-
   // Load data
   return new Promise(resolve => {
     const loaders = [CSVLoader, ArrowLoader, GeoJSONLoader];

examples/demo-app/src/app.js

@@ -374,7 +374,7 @@ class App extends Component {
     });
   };
 
-  _getMapboxRef = (mapbox, index) => {
+  _getMapboxRef = mapbox => {
     if (!mapbox) {
       // The ref has been unset.
       // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
@@ -383,7 +383,7 @@ class App extends Component {
       // We expect an Map created by KeplerGl's MapContainer.
       // https://visgl.github.io/react-map-gl/docs/api-reference/map
       const map = mapbox.getMap();
-      map.on('zoomend', e => {
+      map.on('zoomend', () => {
         // console.log(`Map ${index} zoom level: ${e.target.style.z}`);
       });
     }

examples/demo-app/src/cloud-providers/carto/carto-provider.js

@@ -173,7 +173,7 @@ export default class CartoProvider extends Provider {
    * The CARTO cloud provider polls the created window internally to parse the URL
    * @param {*} location
    */
-  getAccessTokenFromLocation(location) {
+  getAccessTokenFromLocation() {
     return;
   }
 
@@ -182,7 +182,7 @@ export default class CartoProvider extends Provider {
       name: this.getUserName(),
       abbreviated: '',
       email: ''
-    }
+    };
   }
 
   async downloadMap(queryParams) {

examples/demo-app/src/cloud-providers/dropbox/dropbox-provider.js

@@ -88,7 +88,7 @@ export default class DropboxProvider extends Provider {
             'dropbox',
             JSON.stringify({
               // dropbox token doesn't expire unless revoked by the user
-              token: token,
+              token,
               user,
               timestamp: new Date()
             })

examples/demo-app/src/cloud-providers/foursquare/foursquare-provider.js

@@ -51,7 +51,7 @@ export default class FoursquareProvider extends Provider {
 
     this._auth0 = new Auth0Client({
       domain: authDomain,
-      clientId: clientId,
+      clientId,
       scope: FOURSQUARE_AUTH_SCOPE,
       authorizationParams: {
         redirect_uri: window.location.origin,

examples/demo-app/src/components/load-data-modal/sample-data-viewer.js

@@ -72,7 +72,7 @@ const StyledError = styled.div`
   margin-bottom: 16px;
 `;
 
-const SampleMap = ({id, sample, onClick, locale}) => (
+const SampleMap = ({id, sample, onClick}) => (
   <StyledSampleMap id={id} className="sample-map-gallery__item">
     <div className="sample-map">
       <div className="sample-map__image" onClick={onClick}>

examples/demo-app/src/components/load-data-modal/sample-maps-tab.js

@@ -10,7 +10,7 @@ import {FormattedMessage} from 'react-intl';
 import {ASSETS_URL} from '../../constants/default-settings';
 
 const StyledMapIcon = styled.div`
-  background-image: url("${ASSETS_URL}icon-demo-map.jpg");
+  background-image: url('${ASSETS_URL}icon-demo-map.jpg');
   background-repeat: no-repeat;
   background-size: 64px 48px;
   width: 64px;

examples/demo-app/src/data/sample-geojson-config.js

@@ -199,8 +199,7 @@ const config = {
         b9tnac: {
           accessToken: null,
           custom: true,
-          icon:
-            'https://api.mapbox.com/styles/v1/heshan0131/cjg0ks54x300a2squ8fr9vhvq/static/-122.3391,37.7922,9,0,0/400x300?access_token=pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pmc3hhd21uMzE3azJxczJhOWc4czBpYyJ9.HiDptGv2C0Bkcv_TGr_kJw&logo=false&attribution=false',
+          icon: 'https://api.mapbox.com/styles/v1/heshan0131/cjg0ks54x300a2squ8fr9vhvq/static/-122.3391,37.7922,9,0,0/400x300?access_token=pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pmc3hhd21uMzE3azJxczJhOWc4czBpYyJ9.HiDptGv2C0Bkcv_TGr_kJw&logo=false&attribution=false',
           id: 'b9tnac',
           label: 'label maker',
           url: 'mapbox://styles/heshan0131/cjg0ks54x300a2squ8fr9vhvq'

examples/demo-app/src/data/sample-trip-data.js

@@ -4086,8 +4086,7 @@ export const sampleTripDataConfig = {
         '41fv96u': {
           accessToken: null,
           custom: true,
-          icon:
-            'https://api.mapbox.com/styles/v1/MAPBOX_USER/cjg0ks54x300a2squ8fr9vhvq/static/-122.3391,37.7922,9,0,0/400x300?access_token=ACCESS_TOKEN&logo=false&attribution=false',
+          icon: 'https://api.mapbox.com/styles/v1/MAPBOX_USER/cjg0ks54x300a2squ8fr9vhvq/static/-122.3391,37.7922,9,0,0/400x300?access_token=ACCESS_TOKEN&logo=false&attribution=false',
           id: '41fv96u',
           label: 'Outdoors',
           url: 'mapbox://styles/MAPBOX_USER/cjhnxdcfy4ug62sn6qdfjutob'

examples/demo-app/src/factories/map-control.js

@@ -44,7 +44,7 @@ const StyledMapControlOverlay = styled.div`
   margin-top: ${props => (props.rightPanelVisible ? props.theme.rightPanelMarginTop : 0)}px;
   margin-right: ${props => (props.rightPanelVisible ? props.theme.rightPanelMarginRight : 0)}px;
   ${props => (props.fullHeight ? 'height' : 'max-height')}: calc(100% - ${props =>
-  props.theme.rightPanelMarginTop + props.theme.bottomWidgetPaddingBottom}px);
+    props.theme.rightPanelMarginTop + props.theme.bottomWidgetPaddingBottom}px);
 
   .map-control {
     ${props => (props.rightPanelVisible ? 'padding-top: 0px;' : '')}

examples/demo-app/src/utils/strings.js

@@ -7,7 +7,5 @@
  * @returns {string} hash string
  */
 export function generateHashId(count) {
-  return Math.random()
-    .toString(36)
-    .substr(count);
+  return Math.random().toString(36).substr(count);
 }

examples/demo-app/src/utils/url.js

@@ -45,8 +45,10 @@ parseUri.options = {
     parser: /(?:^|&)([^&=]*)=?([^&]*)/g
   },
   parser: {
-    strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
-    loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
+    strict:
+      /^(?:([^:/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:/?#]*)(?::(\d*))?))?((((?:[^?#/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
+    loose:
+      /^(?:(?![^:@]+:[^:@/]*@)([^:/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#/]*\.[^?#/.]+(?:[?#]|$)))*\/?)?([^?#/]*))(?:\?([^#]*))?(?:#(.*))?)/
   }
 };
 
@@ -55,5 +57,5 @@ parseUri.options = {
  * @param str
  */
 export function validateUrl(str) {
-  return str?.match(/^(ftp|http|https?):\/\/+(www\.)?[a-z0-9\-\.]{3,}\.[a-z]{3}$/);
+  return str?.match(/^(ftp|http|https?):\/\/+(www\.)?[a-z0-9\-.]{3,}\.[a-z]{3}$/);
 }

examples/demo-app/webpack.config.js

@@ -9,8 +9,8 @@ const resolve = require('path').resolve;
 const join = require('path').join;
 const webpack = require('webpack');
 
-const WEBPACK_ENV_VARIABLES = require('../../webpack/shared-webpack-configuration')
-  .WEBPACK_ENV_VARIABLES;
+const WEBPACK_ENV_VARIABLES =
+  require('../../webpack/shared-webpack-configuration').WEBPACK_ENV_VARIABLES;
 
 const CONFIG = {
   // bundle app.js and everything it imports, recursively.
@@ -37,20 +37,20 @@ const CONFIG = {
           loader: 'babel-loader',
           options: {
             plugins: [
-              "@babel/plugin-transform-class-properties",
-              "@babel/plugin-transform-optional-chaining",
-              "@babel/plugin-transform-logical-assignment-operators",
-              "@babel/plugin-transform-nullish-coalescing-operator",
-              "@babel/plugin-transform-export-namespace-from"
+              '@babel/plugin-transform-class-properties',
+              '@babel/plugin-transform-optional-chaining',
+              '@babel/plugin-transform-logical-assignment-operators',
+              '@babel/plugin-transform-nullish-coalescing-operator',
+              '@babel/plugin-transform-export-namespace-from'
             ],
             include: [
-                join(__dirname, 'src'),
-                /node_modules\/@loaders\.gl/,
-                /node_modules\/@probe\.gl/,
-                /node_modules\/@math\.gl/,
-                /node_modules\/@kepler\.gl/
+              join(__dirname, 'src'),
+              /node_modules\/@loaders\.gl/,
+              /node_modules\/@probe\.gl/,
+              /node_modules\/@math\.gl/,
+              /node_modules\/@kepler\.gl/
             ],
-            exclude: [/node_modules\/(?!(@loaders\.gl|@probe\.gl|@kepler\.gl|@math\.gl)).*/],
+            exclude: [/node_modules\/(?!(@loaders\.gl|@probe\.gl|@kepler\.gl|@math\.gl)).*/]
           }
         }
       },