chore: linting fixes

frontend/.eslintrc.json

@@ -4,8 +4,7 @@
         "plugin:react/recommended",
         "plugin:prettier/recommended",
         "airbnb",
-        "prettier",
-        "wikimedia/client/es6"],
+        "prettier"],
     "plugins": ["react", "prettier", "eslint-plugin-react", "eslint-plugin-react-hooks"],
     "parser": "@babel/eslint-parser",
     "parserOptions": {
@@ -28,17 +27,29 @@
         "no-console": "warn",
         "func-names": "error",
         "no-process-exit": "error",
+        "no-restricted-syntax": [
+            "error",
+            {
+                "selector": "ForInStatement",
+                "message": "for..in iterates over the prototype chain; use Object.{keys,values,entries} instead."
+            },
+            {
+                "selector": "LabeledStatement",
+                "message": "Labels are a form of GOTO; use functions or early returns instead."
+            },
+            {
+                "selector": "WithStatement",
+                "message": "`with` is disallowed in strict mode because it makes scope ambiguous."
+            }
+        ],
         "object-shorthand": "error",
         "template-curly-spacing": "off",
         "computed-property-spacing": "off",
         "arrow-parens": "off",
         "class-methods-use-this": "error",
         "import/prefer-default-export": "error",
-        "react/require-default-props": "error",
+        "react/require-default-props": ["error", { "functions": "defaultArguments" }],
         "comma-dangle": "off",
-        "es-x/no-rest-spread-properties": "off",
-        "es-x/no-trailing-function-commas": "off",
-        "es-x/no-global-this": "off",
         "indent": ["error", 4],
         "implicit-arrow-linebreak": "off",
         "react/function-component-definition": [

frontend/package.json

@@ -15,10 +15,10 @@
         "watch": "webpack --progress -d --config webpack.config.js --watch",
         "test": "jest --config jest.config.js",
         "coverage": "jest --coverage --config jest.config.js",
-        "lint-fix": "eslint src/**/*.jsx tests/**/*.jsx --fix",
-        "lint": "eslint src/**/*.jsx tests/**/*.jsx",
-        "prettier-fix": "prettier --write \"src/**/*.jsx\" \"tests/**/*.jsx\"",
-        "prettier": "prettier --check \"src/**/*.jsx\" \"tests/**/*.jsx\""
+        "lint-fix": "eslint \"src/**/*.{js,jsx}\" \"tests/**/*.{js,jsx}\" --fix",
+        "lint": "eslint \"src/**/*.{js,jsx}\" \"tests/**/*.{js,jsx}\"",
+        "prettier-fix": "prettier --write \"src/**/*.{js,jsx}\" \"tests/**/*.{js,jsx}\"",
+        "prettier": "prettier --check \"src/**/*.{js,jsx}\" \"tests/**/*.{js,jsx}\""
     },
     "files": [
         "dist"
@@ -42,7 +42,6 @@
         "eslint": "^8.30.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^8.10.0",
-        "eslint-config-wikimedia": "^0.28.2",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-prettier": "^4.2.1",
@@ -64,6 +63,7 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.14.6",
         "@mui/material": "^5.14.6",
+        "@react-leaflet/core": "^2.1.0",
         "axios": "^1.7.6",
         "browser-image-compression": "^2.0.2",
         "i18next": "^23.15.1",

frontend/src/components/Categories/CategoriesContext.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext, createContext, useMemo, useEffect, useCallback } from 'react';
-import { httpService } from '../../services/http/httpService';
+import PropTypes from 'prop-types';
+import httpService from '../../services/http/httpService';
 
 /**
  * React Context for managing categories state across the application.
@@ -36,7 +37,7 @@
             }
             setIsInitialized(true);
         } catch (error) {
             console.error('Failed to load categories:', error);
             // Establish an explicit fallback (no filters) instead of silently
             // signaling initialization with unknown/missing category data.
             setCategoriesData([]);
@@ -67,6 +68,10 @@
     return <CategoriesContext.Provider value={value}>{children}</CategoriesContext.Provider>;
 };
 
+CategoriesProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+
 /**
  * Custom hook to access categories context.
  * Must be used within a CategoriesProvider component.

frontend/src/components/FiltersForm/FiltersForm.jsx

@@ -239,7 +239,7 @@ const LoadingSkeleton = () => (
     </>
 );
 
-export const FiltersForm = () => {
+const FiltersForm = () => {
     const { t } = useTranslation();
     const {
         categories: selectedFilters,
@@ -456,3 +456,5 @@ export const FiltersForm = () => {
         </form>
     );
 };
+
+export default FiltersForm;

frontend/src/components/FiltersForm/FiltersTooltip.jsx

@@ -27,37 +27,35 @@ const IconWrapper = styled.span`
  * @param {string} props.text - The help text to display in the tooltip
  * @returns {React.ReactElement} Info icon with attached MUI tooltip
  */
-const FiltersTooltip = ({ text }) => {
-    return (
-        <Tooltip
-            title={text}
-            placement="top"
-            arrow
-            enterTouchDelay={0}
-            leaveTouchDelay={3000}
-            slotProps={{
-                tooltip: {
-                    sx: {
-                        backgroundColor: 'rgba(50, 50, 50, 0.95)',
-                        fontSize: '12px',
-                        padding: '8px 12px',
-                        maxWidth: '250px',
-                        lineHeight: 1.4,
-                    },
+const FiltersTooltip = ({ text }) => (
+    <Tooltip
+        title={text}
+        placement="top"
+        arrow
+        enterTouchDelay={0}
+        leaveTouchDelay={3000}
+        slotProps={{
+            tooltip: {
+                sx: {
+                    backgroundColor: 'rgba(50, 50, 50, 0.95)',
+                    fontSize: '12px',
+                    padding: '8px 12px',
+                    maxWidth: '250px',
+                    lineHeight: 1.4,
                 },
-                arrow: {
-                    sx: {
-                        color: 'rgba(50, 50, 50, 0.95)',
-                    },
+            },
+            arrow: {
+                sx: {
+                    color: 'rgba(50, 50, 50, 0.95)',
                 },
-            }}
-        >
-            <IconWrapper aria-label={`Help: ${text}`}>
-                <InfoOutlinedIcon sx={{ fontSize: 16 }} />
-            </IconWrapper>
-        </Tooltip>
-    );
-};
+            },
+        }}
+    >
+        <IconWrapper aria-label={`Help: ${text}`}>
+            <InfoOutlinedIcon sx={{ fontSize: 16 }} />
+        </IconWrapper>
+    </Tooltip>
+);
 
 FiltersTooltip.propTypes = {
     text: PropTypes.string.isRequired,

frontend/src/components/Map/Map.jsx

@@ -1,13 +1,10 @@
 import ReactDOM from 'react-dom/client';
-import React, { useEffect } from 'react';
-import { httpService } from '../../services/http/httpService';
-import { FiltersForm } from '../FiltersForm/FiltersForm';
-import { MapComponent } from './MapComponent';
-import { useMapStore } from './store/map.store';
-import { CategoriesProvider } from '../Categories/CategoriesContext';
+import React from 'react';
 import { createPortal } from 'react-dom';
-import { AppToaster } from '../common/AppToaster';
-import useDebounce from '../../utils/hooks/useDebounce';
+import FiltersForm from '../FiltersForm/FiltersForm';
+import MapComponent from './MapComponent';
+import { CategoriesProvider } from '../Categories/CategoriesContext';
+import AppToaster from '../common/AppToaster';
 
 /**
  * Wrapper component that renders the map and filters form into their respective DOM placeholders.
@@ -21,7 +18,7 @@
     const filtersPlaceholder = document.getElementById('filter-form');
 
     if (!filtersPlaceholder || !mapPlaceholder) {
         console.error('Did not find any DOM elements to render the map or filters form');
         return null;
     }
 
@@ -41,10 +38,12 @@
  *
  * @returns {void}
  */
-export const MapContainer = () => {
+const MapContainer = () => {
     const appContainer = document.createElement('div');
     document.body.appendChild(appContainer);
 
     const root = ReactDOM.createRoot(appContainer);
     root.render(<MapWrap />);
 };
+
+export default MapContainer;

frontend/src/components/Map/MapComponent.jsx

@@ -1,19 +1,19 @@
 import React, { useState } from 'react';
 import { MapContainer, TileLayer } from 'react-leaflet';
 import Control from 'react-leaflet-custom-control';
-import { LocationControl } from './components/LocationControl';
-import { SuggestNewPointButton } from './components/SuggestNewPointButton';
-import { LocationPermissionBanner } from './components/LocationPermissionBanner';
-import { mapConfig } from './map.config';
-import { CustomZoomControl } from './components/ZoomControl';
+import LocationControl from './components/LocationControl';
+import SuggestNewPointButton from './components/SuggestNewPointButton';
+import LocationPermissionBanner from './components/LocationPermissionBanner';
+import mapConfig from './map.config';
+import CustomZoomControl from './components/ZoomControl';
 import MapAutocomplete from './components/MapAutocomplete';
 import ListViewButton from './components/ListView';
 import AccessibilityTable from './components/AccessibilityTable';
 import SaveMapConfiguration from './components/SaveMapConfiguration';
-import { Markers } from './components/Markers';
-import { MapLoadingOverlay } from './components/MapLoadingOverlay';
+import Markers from './components/Markers';
+import MapLoadingOverlay from './components/MapLoadingOverlay';
 import { LocationProvider, useLocation } from './context/LocationContext';
-import { GoToLocation } from './components/GoToLocation';
+import GoToLocation from './components/GoToLocation';
 import MapOverlays from '../../plugins/MapOverlays';
 
 /**
@@ -83,10 +83,10 @@ const MapComponentInner = () => {
  *
  * @returns {React.ReactElement} MapContainer with markers and controls, or AccessibilityTable when list view is active
  */
-export const MapComponent = () => {
-    return (
-        <LocationProvider>
-            <MapComponentInner />
-        </LocationProvider>
-    );
-};
+const MapComponent = () => (
+    <LocationProvider>
+        <MapComponentInner />
+    </LocationProvider>
+);
+
+export default MapComponent;

frontend/src/components/Map/components/AccessibilityTable.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -10,7 +10,7 @@
 import Arrow from '@mui/icons-material/ArrowLeftRounded';
 import { IconButton } from '@mui/material';
 import PropTypes from 'prop-types';
-import { httpService } from '../../../services/http/httpService';
+import httpService from '../../../services/http/httpService';
 import FieldRenderer from '../../MarkerPopup/FieldRenderer';
 import { useCategories } from '../../Categories/CategoriesContext';
 
@@ -44,61 +44,38 @@
     }, [categories, userPosition]);
 
     useEffect(() => {
+        if (!data) {
+            return;
+        }
         try {
-            const uniqueHeadersSet = new Set();
-            if (!data) {
-                return;
-            }
-            uniqueHeadersSet.add(t('title'));
-            for (const place of data) {
-                for (const item of place.data) {
+            const uniqueHeadersSet = new Set([t('title')]);
+            data.forEach(place => {
+                place.data.forEach(item => {
                     uniqueHeadersSet.add(item[0]);
-                }
-            }
-            const uniqueNumberedKeys = {};
-            for (const [index, key] of Array.from(uniqueHeadersSet).entries()) {
-                uniqueNumberedKeys[key] = index;
-            }
-            const orderedKeysArray = Object.keys(uniqueNumberedKeys).sort(
-                (a, b) => uniqueNumberedKeys[a] - uniqueNumberedKeys[b],
-            );
+                });
+            });
+            const orderedKeysArray = Array.from(uniqueHeadersSet);
             setHeaders(orderedKeysArray);
 
-            const rowsLocal = [];
-
             const getArr = (placeItem, key) => {
                 const item = placeItem.find(it => it[0] === key);
-                if (!item) {
-                    return ['', '—'];
-                }
-                return item;
+                return item || ['', '—'];
             };
 
-            for (const it of data) {
-                const row = [];
-                const place = it.data;
-                row.push(it.title);
+            const rowsLocal = data.map(it => {
+                const row = [it.title];
                 // Skip first element (title) and iterate over remaining keys
-                for (const key of orderedKeysArray.slice(1)) {
-                    const values = getArr(place, key);
-                    if (values === undefined) {
-                        continue;
-                    }
-                    const value = values[1];
-                    if (Array.isArray(value)) {
-                        const str = value.join(', ');
-                        row.push(str);
-                        continue;
-                    }
-                    row.push(value);
-                }
-                rowsLocal.push(row);
-            }
+                orderedKeysArray.slice(1).forEach(key => {
+                    const [, value] = getArr(it.data, key);
+                    row.push(Array.isArray(value) ? value.join(', ') : value);
+                });
+                return row;
+            });
             setRows(rowsLocal);
         } catch (error) {
             console.log('AccessibilityTable: ', error);
         }
-    }, [data]);
+    }, [data, t]);
 
     return (
         <>
@@ -125,13 +102,13 @@
                         </TableRow>
                     </TableHead>
                     <TableBody>
-                        {rows.map((row, index) => (
+                        {rows.map(row => (
                             <TableRow
                                 key={row.toString()}
                                 sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                             >
-                                {row.map((cell, index) => (
-                                    <TableCell key={`${cell.toString()}-${index}`} align="center">
+                                {row.map((cell, cellIndex) => (
+                                    <TableCell key={headers[cellIndex]} align="center">
                                         {cell.type ? <FieldRenderer value={cell} /> : cell}
                                     </TableCell>
                                 ))}

frontend/src/components/Map/components/GoToLocation.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useMap } from 'react-leaflet';
-import { httpService } from '../../../services/http/httpService';
-import { useMapStore } from '../store/map.store';
+import httpService from '../../../services/http/httpService';
+import useMapStore from '../store/map.store';
 
 /**
  * Component that handles navigating to a specific location by ID.
@@ -10,7 +10,7 @@
  *
  * @returns {null} This component renders nothing
  */
-export const GoToLocation = () => {
+const GoToLocation = () => {
     const map = useMap();
     const [hasNavigated, setHasNavigated] = useState(false);
     const setSelectedLocationId = useMapStore(state => state.setSelectedLocationId);
@@ -32,7 +32,7 @@
                 const location = await httpService.getLocation(locationId);
 
                 if (!location?.position) {
                     console.warn('Location not found or has no position:', locationId);
                     return;
                 }
 
@@ -41,7 +41,7 @@
                 setSelectedLocationId(locationId);
                 setHasNavigated(true);
             } catch (error) {
                 console.error('Failed to navigate to location:', error);
             }
         };
 
@@ -50,3 +50,5 @@
 
     return null;
 };
+
+export default GoToLocation;