Fix lint and issues

modern/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "extends": "airbnb",
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "overrides": [{
+    "files": ["*.jsx", "*.js"]
+  }],
+  "plugins": [
+    "react"
+  ],
+  "ignorePatterns": ["build/", "switcher.js", "theme.js"],
+  "rules": {
+    "max-len": [0],
+    "no-shadow": [0],
+    "no-return-assign": [0],
+    "no-param-reassign": [0],
+    "no-prototype-builtins": [0],
+    "object-curly-newline": [1, {
+      "ObjectExpression": { "minProperties": 8, "multiline": true, "consistent": true },
+      "ObjectPattern": { "minProperties": 8, "multiline": true, "consistent": true },
+      "ImportDeclaration": { "minProperties": 4, "multiline": true, "consistent": true },
+      "ExportDeclaration": { "minProperties": 4, "multiline": true, "consistent": true }
+    }],
+    "import/no-unresolved": [1, {
+      "ignore": ["\\.svg", "virtual:"]
+    }],
+    "react/function-component-definition": [1, {
+      "namedComponents": "arrow-function",
+      "unnamedComponents": "arrow-function"
+    }],
+    "react/jsx-props-no-spreading": [0],
+    "jsx-a11y/anchor-is-valid": [0],
+    "jsx-a11y/label-has-associated-control": [0],
+    "react/prop-types": [0]
+  }
+}

modern/package.json

@@ -43,7 +43,7 @@
     "build": "vite build",
     "generate-pwa-assets": "pwa-assets-generator --preset minimal public/logo.svg",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix --ext .js ."
+    "lint:fix": "eslint --fix ."
   },
   "browserslist": {
     "production": [

modern/src/UpdateController.jsx

@@ -1,12 +1,12 @@
 import { Snackbar, IconButton } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
-import React from 'react'
+import React from 'react';
 import { useSelector } from 'react-redux';
+import { useRegisterSW } from 'virtual:pwa-register/react';
 import { useTranslation } from './common/components/LocalizationProvider';
-import { useRegisterSW } from 'virtual:pwa-register/react'
 
 // Based on https://vite-pwa-org.netlify.app/frameworks/react.html
-function UpdateController() {
+const UpdateController = () => {
   const t = useTranslation();
 
   const swUpdateInterval = useSelector((state) => state.session.server.attributes.serviceWorkerUpdateInterval || 3600000);
@@ -21,30 +21,30 @@ function UpdateController() {
           if (!(!swRegistration.installing && navigator)) {
             return;
           }
-    
+
           if (('connection' in navigator) && !navigator.onLine) {
             return;
           }
-    
+
           const newSW = await fetch(swUrl, {
             cache: 'no-store',
             headers: {
-              'cache': 'no-store',
+              cache: 'no-store',
               'cache-control': 'no-cache',
             },
           });
-    
+
           if (newSW?.status === 200) {
             await swRegistration.update();
           }
         }, swUpdateInterval);
       }
-    }
+    },
   });
 
   return (
-    <Snackbar 
-      open={needRefresh} 
+    <Snackbar
+      open={needRefresh}
       message={t('settingsUpdateAvailable')}
       action={(
         <IconButton color="inherit" onClick={() => updateServiceWorker(true)}>
@@ -53,6 +53,6 @@ function UpdateController() {
       )}
     />
   );
-}
+};
 
 export default UpdateController;

modern/src/login/LoginPage.jsx

@@ -96,7 +96,7 @@ const LoginPage = () => {
       const query = `email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`;
       const response = await fetch('/api/session', {
         method: 'POST',
-        body: new URLSearchParams(code.length ? query + `&code=${code}` : query),
+        body: new URLSearchParams(code.length ? `${query}&code=${code}` : query),
       });
       if (response.ok) {
         const user = await response.json();

modern/src/main/DeviceRow.jsx

@@ -119,15 +119,15 @@ const DeviceRow = ({ data, index, style }) => {
             {position.attributes.hasOwnProperty('batteryLevel') && (
               <Tooltip title={`${t('positionBatteryLevel')}: ${formatPercentage(position.attributes.batteryLevel)}`}>
                 <IconButton size="small">
-                  {position.attributes.batteryLevel > 70 ? (
+                  {(position.attributes.batteryLevel > 70 && (
                     position.attributes.charge
                       ? (<BatteryChargingFullIcon fontSize="small" className={classes.success} />)
                       : (<BatteryFullIcon fontSize="small" className={classes.success} />)
-                  ) : position.attributes.batteryLevel > 30 ? (
+                  )) || (position.attributes.batteryLevel > 30 && (
                     position.attributes.charge
                       ? (<BatteryCharging60Icon fontSize="small" className={classes.warning} />)
                       : (<Battery60Icon fontSize="small" className={classes.warning} />)
-                  ) : (
+                  )) || (
                     position.attributes.charge
                       ? (<BatteryCharging20Icon fontSize="small" className={classes.error} />)
                       : (<Battery20Icon fontSize="small" className={classes.error} />)

modern/src/other/PositionPage.jsx

@@ -8,7 +8,6 @@ import makeStyles from '@mui/styles/makeStyles';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useEffectAsync } from '../reactHelper';
-import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PositionValue from '../common/components/PositionValue';
 import usePositionAttributes from '../common/attributes/usePositionAttributes';

modern/src/reports/EventReportPage.jsx

@@ -204,15 +204,15 @@ const EventReportPage = () => {
               {!loading ? items.map((item) => (
                 <TableRow key={item.id}>
                   <TableCell className={classes.columnAction} padding="none">
-                    {item.positionId ? selectedItem === item ? (
+                    {(item.positionId && (selectedItem === item ? (
                       <IconButton size="small" onClick={() => setSelectedItem(null)}>
                         <GpsFixedIcon fontSize="small" />
                       </IconButton>
                     ) : (
                       <IconButton size="small" onClick={() => setSelectedItem(item)}>
                         <LocationSearchingIcon fontSize="small" />
                       </IconButton>
-                    ) : ''}
+                    ))) || ''}
                   </TableCell>
                   {columns.map((key) => (
                     <TableCell key={key}>

modern/src/reports/LogsPage.jsx

@@ -41,7 +41,7 @@ const LogsPage = () => {
   const registerDevice = (uniqueId) => {
     const query = new URLSearchParams({ uniqueId });
     navigate(`/settings/device?${query.toString()}`);
-  }
+  };
 
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
@@ -55,7 +55,7 @@ const LogsPage = () => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {items.map((item, index) => (
+          {items.map((item, index) => /* eslint-disable react/no-array-index-key */ (
             <TableRow key={index}>
               <TableCell className={classes.columnAction} padding="none">
                 {item.deviceId ? (

modern/src/settings/UserPage.jsx

@@ -18,7 +18,6 @@ import {
   IconButton,
   OutlinedInput,
 } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import CachedIcon from '@mui/icons-material/Cached';
@@ -84,7 +83,7 @@ const UserPage = () => {
   const handleGenerateTotp = useCatch(async () => {
     const response = await fetch('/api/users/totp', { method: 'POST' });
     if (response.ok) {
-      setItem({ ...item, totpKey: await response.text() })
+      setItem({ ...item, totpKey: await response.text() });
     } else {
       throw Error(await response.text());
     }

modern/src/settings/UsersPage.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-  Table, TableRow, TableCell, TableHead, TableBody, Switch, TableFooter, FormControlLabel, FormControl, FormGroup, Grid,
+  Table, TableRow, TableCell, TableHead, TableBody, Switch, TableFooter, FormControlLabel,
 } from '@mui/material';
 import LoginIcon from '@mui/icons-material/Login';
 import LinkIcon from '@mui/icons-material/Link';
@@ -81,7 +81,7 @@ const UsersPage = () => {
             <TableCell>{t('userAdmin')}</TableCell>
             <TableCell>{t('sharedDisabled')}</TableCell>
             <TableCell>{t('userExpirationTime')}</TableCell>
-            <TableCell className={classes.columnAction}></TableCell>
+            <TableCell className={classes.columnAction} />
           </TableRow>
         </TableHead>
         <TableBody>
@@ -108,13 +108,13 @@ const UsersPage = () => {
           <TableRow>
             <TableCell colSpan={6} align="right">
               <FormControlLabel
-                control={
+                control={(
                   <Switch
                     value={temporary}
                     onChange={(e) => setTemporary(e.target.checked)}
                     size="small"
                   />
-                }
+                )}
                 label={t('userTemporary')}
                 labelPlacement="start"
               />