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": {
@@ -34,11 +33,8 @@
         "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

@@ -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,4 +1,5 @@
 import React, { useState, useContext, createContext, useMemo, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { httpService } from '../../services/http/httpService';
 
 /**
@@ -67,6 +68,10 @@ export const CategoriesProvider = ({ children }) => {
     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.
@@ -41,10 +38,12 @@ const MapWrap = () => {
  *
  * @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 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 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';
@@ -44,61 +44,38 @@ const AccessibilityTable = ({ userPosition, setIsAccessibilityTableOpen }) => {
     }, [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 @@ const AccessibilityTable = ({ userPosition, setIsAccessibilityTableOpen }) => {
                         </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

@@ -10,7 +10,7 @@ import { useMapStore } from '../store/map.store';
  *
  * @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);
@@ -50,3 +50,5 @@ export const GoToLocation = () => {
 
     return null;
 };
+
+export default GoToLocation;

frontend/src/components/Map/components/ListView.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Tooltip } from '@mui/material';
 import ViewListIcon from '@mui/icons-material/ViewList';
@@ -65,4 +66,8 @@ const Wrapper = styled.div`
     z-index: 9999999;
 `;
 
+ListView.propTypes = {
+    onClick: PropTypes.func.isRequired,
+};
+
 export default ListView;

frontend/src/components/Map/components/LocationControl.jsx

@@ -86,4 +86,4 @@ const LocationControl = () => {
     );
 };
 
-export { LocationControl };
+export default LocationControl;

frontend/src/components/Map/components/LocationPermissionBanner.jsx

@@ -12,7 +12,7 @@ const BANNER_DISMISSED_KEY = 'goodmap_location_banner_dismissed';
  *
  * @returns {React.ReactElement|null} Banner component or null if not applicable
  */
-export const LocationPermissionBanner = () => {
+const LocationPermissionBanner = () => {
     const { t } = useTranslation();
     const { permissionState, requestGeolocation } = useLocation();
     const [dismissed, setDismissed] = useState(true);
@@ -52,6 +52,8 @@ export const LocationPermissionBanner = () => {
     );
 };
 
+export default LocationPermissionBanner;
+
 const BannerContainer = styled.div`
     position: absolute;
     /* Positioned above the zoom controls and other map buttons */

frontend/src/components/Map/components/MapLoadingOverlay.jsx

@@ -56,7 +56,7 @@ const LoadingText = styled.p`
  * @param {string} [props.text] - Optional loading text to display
  * @returns {React.ReactElement} Loading overlay with spinner or custom GIF
  */
-export const MapLoadingOverlay = ({ isLoading, text = null }) => {
+const MapLoadingOverlay = ({ isLoading, text = null }) => {
     const customGif = globalThis.MAP_LOADING_GIF;
 
     return (
@@ -71,3 +71,5 @@ MapLoadingOverlay.propTypes = {
     isLoading: PropTypes.bool.isRequired,
     text: PropTypes.string,
 };
+
+export default MapLoadingOverlay;