Fixing lint errors and adding linter to preview action

.github/workflows/deploy-preview.yml

@@ -38,6 +38,9 @@ jobs:
     - name: Install 🎯
       run: cd site; npm install
 
+    - name: Lint 🧹
+      run: cd site; npm run lint
+
     - name: Build 🏃
       run: cd site; npm run build
       env:

site/package.json

@@ -7,7 +7,6 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "aws_deploy": "python3 scripts/deploy.py",
     "preview": "vite preview"
   },
   "dependencies": {

site/src/App.jsx

@@ -7,7 +7,7 @@ import { useState, useEffect, useRef } from "react";
 import Tour from "./Tour";
 import StartupBox from "./StartupBox";
 import { ThemeProvider } from "@mui/material";
-import { useNavigatorState } from "./navigator/Navigator";
+import { useNavigatorState } from "./navigator/useNavigatorState";
 
 function App() {
   const [modeName, setModeName] = useState(getTheme());
@@ -30,7 +30,7 @@ function App() {
     localStorage.setItem("tour", event.target.checked);
     setTour(!tour);
   };
-  
+
   const [visibleTypes, setVisibleTypes] = useState([]);
 
 

site/src/Map.jsx

@@ -3,6 +3,7 @@ import {
   NavigationControl,
   Source,
   AttributionControl,
+  ScaleControl,
 } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
 import * as pmtiles from "pmtiles";
@@ -176,7 +177,7 @@ export default function Map({
         setActiveFeature(null);
       }
     },
-    [visibleTypes]
+    [visibleTypes, setFeatures, setActiveFeature]
   );
 
   const handleZoom = (event) => {
@@ -222,32 +223,43 @@ export default function Map({
           />
 
           {[false, true].map((label) => {
-            return layers.map((props, i) => (
-              <ThemeTypeLayer
-                key={`${props.theme}_${props.type}_${i}`}
-                {...{
-                  ...props,
-                  color: activeThemes.includes(props.theme)
-                    ? props.activeColor || props.color
-                    : props.color,
-                }}
-                visible={
-                  visibleTypes.includes(props.type) &&
-                  (props.activeOnly === undefined ||
-                    activeThemes.includes(props.theme))
-                }
-                label={label && activeThemes.includes(props.theme)}
-                active={activeThemes.includes(props.theme)}
-                activeThemes={activeThemes}
-                highlightColor={
-                  activeThemes.includes(props.theme)
-                    ? props.activeColor
-                      ? props.color
-                      : undefined
-                    : props.activeColor
-                }
-              />
-            ));
+            return layers.map((layerProps, i) => {
+              const {
+                theme,
+                type,
+                color,
+                activeColor,
+                activeOnly,
+                ...otherProps
+              } = layerProps;
+
+              return (
+                <ThemeTypeLayer
+                  key={`${theme}_${type}_${i}`}
+                  {...otherProps}
+                  theme={theme}
+                  type={type}
+                  color={activeThemes.includes(theme)
+                    ? activeColor || color
+                    : color}
+                  visible={
+                    visibleTypes.includes(type) &&
+                    (activeOnly === undefined ||
+                      activeThemes.includes(theme))
+                  }
+                  label={label && activeThemes.includes(theme)}
+                  active={activeThemes.includes(theme)}
+                  activeThemes={activeThemes}
+                  highlightColor={
+                    activeThemes.includes(theme)
+                      ? activeColor
+                        ? color
+                        : undefined
+                      : activeColor
+                  }
+                />
+              );
+            });
           })}
           <Layer
             id="divisions_division"
@@ -340,6 +352,7 @@ export default function Map({
 
           <NavigationControl position="top-right"></NavigationControl>
           <GeolocateControl />
+          <ScaleControl position="bottom-left" />
           <AttributionControl customAttribution='<a href="https://openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>, <a href="https://overturemaps.org" target="_blank">Overture Maps Foundation</a>' />
         </MapLibreMap>
 
@@ -364,7 +377,6 @@ export default function Map({
             />
           )}
           <ThemeSelector
-            entity={features}
             mode={mode}
             visibleTypes={visibleTypes}
             setVisibleTypes={setVisibleTypes}
@@ -390,4 +402,14 @@ export default function Map({
 
 Map.propTypes = {
   mode: PropTypes.string.isRequired,
+  features: PropTypes.array.isRequired,
+  setFeatures: PropTypes.func.isRequired,
+  activeFeature: PropTypes.object,
+  setActiveFeature: PropTypes.func.isRequired,
+  setZoom: PropTypes.func.isRequired,
+  navigatorOpen: PropTypes.bool.isRequired,
+  setNavigatorOpen: PropTypes.func.isRequired,
+  themeRef: PropTypes.object.isRequired,
+  visibleTypes: PropTypes.array.isRequired,
+  setVisibleTypes: PropTypes.func.isRequired,
 };

site/src/StartupBox.jsx

@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { Checkbox, FormControlLabel, Box, Modal } from "@mui/material";
 import "./StartupBox.css";
 
@@ -68,4 +69,13 @@ function StartupBox({
   );
 }
 
+StartupBox.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+  startTour: PropTypes.func.isRequired,
+  updateTour: PropTypes.func.isRequired,
+  mode: PropTypes.string.isRequired,
+  setNavigatorOpen: PropTypes.func.isRequired,
+};
+
 export default StartupBox;

site/src/ThemeSelector.jsx

@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
 import LayerIcon from "./icons/icon-layers.svg?react";
 import "./ThemeSelector.css";
@@ -70,7 +71,6 @@ const ThemeSelector = ({
   setVisibleTypes,
   activeThemes,
   setActiveThemes,
-  entity,
   themeRef,
 }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -102,8 +102,13 @@ const ThemeSelector = ({
 
     setSelectedThemes(newSelectedThemes);
     setSelectedTypesState(newSelectedTypes);
-    updateVisibleTypes(newSelectedTypes);
-  }, []);
+
+    // Update visible types inline to avoid dependency issues
+    const visible = Object.keys(newSelectedTypes).filter(
+      (type) => newSelectedTypes[type]
+    );
+    setVisibleTypes(visible);
+  }, [setVisibleTypes]);
 
   useEffect(() => {
     const newSelectedTypes = {};
@@ -360,4 +365,13 @@ const ThemeSelector = ({
   );
 };
 
+ThemeSelector.propTypes = {
+  mode: PropTypes.string.isRequired,
+  visibleTypes: PropTypes.array.isRequired,
+  setVisibleTypes: PropTypes.func.isRequired,
+  activeThemes: PropTypes.array.isRequired,
+  setActiveThemes: PropTypes.func.isRequired,
+  themeRef: PropTypes.object.isRequired,
+};
+
 export default ThemeSelector;

site/src/ThemeTypeLayer.jsx

@@ -257,6 +257,7 @@ ThemeTypeLayer.propTypes = {
   line: PropTypes.bool,
   polygon: PropTypes.bool,
   extrusion: PropTypes.bool,
+  visible: PropTypes.bool,
   outline: PropTypes.bool,
   active: PropTypes.bool,
   label: PropTypes.bool,

site/src/Tour.jsx

@@ -1,6 +1,6 @@
+import PropTypes from "prop-types";
 import Joyride, { ACTIONS, EVENTS, LIFECYCLE } from "react-joyride";
 import { useState } from "react";
-import LayerIcon from "./icons/icon-layers.svg?react";
 import "./Tour.css";
 
 const Steps = [
@@ -93,62 +93,6 @@ const Steps = [
   },
 ];
 
-const sampleFeature = {
-  geometry: {
-    type: "Point",
-    coordinates: [3.7302714586257935, 51.05027395815554],
-  },
-  type: "Feature",
-  properties: {
-    theme: "places",
-    type: "place",
-    id: "08f194db132d2b6d0388899915aac1fc",
-    "@name": "Grill Mix Centrum",
-    "@category": "bar_and_grill_restaurant",
-    names: '{"primary":"Grill Mix Centrum","common":null,"rules":null}',
-    confidence: 0.9584614231086451,
-    categories:
-      '{"main":"bar_and_grill_restaurant","alternate":["pizza_restaurant","doner_kebab"]}',
-    websites: '["http://www.pizzacity.be"]',
-    socials: '["https://www.facebook.com/612060042296776"]',
-    phones: '["+3292257440"]',
-    addresses:
-      '[{"freeform":"Vlaanderenstraat 85","locality":"Gent","postcode":"9000","region":null,"country":"BE"}]',
-    version: 0,
-    update_time: "2024-04-11T00:00:00.000Z",
-    sources:
-      '[{"property":"","dataset":"meta","record_id":"612060042296776","confidence":null}]',
-  },
-  id: 38848842,
-  layer: {
-    id: "places",
-    type: "circle",
-    source: "overture-places",
-    "source-layer": "places",
-    filter: [">=", ["get", "confidence"], 0],
-    layout: {},
-    paint: {
-      "circle-color": {
-        r: 0.792156862745098,
-        g: 0.6980392156862745,
-        b: 0.8392156862745098,
-        a: 1,
-      },
-      "circle-radius": 1.8749883174673414,
-      "circle-stroke-width": 2,
-      "circle-stroke-color": {
-        r: 0,
-        g: 0,
-        b: 0,
-        a: 1,
-      },
-    },
-  },
-  source: "overture-places",
-  sourceLayer: "places",
-  state: {},
-};
-
 function Tour({ run, modeName, setFeatures, setNavigatorOpen, themeRef }) {
   const [stepIndex, setStepIndex] = useState(0);
 
@@ -164,8 +108,8 @@ function Tour({ run, modeName, setFeatures, setNavigatorOpen, themeRef }) {
   Each "step" has typically 3 events associated with it. Therefore, we must check that events only
   take place once, which is why we check the event lifecycle. In addition, we must check the action of
   the event (next, prev, skip, etc). This is a tedious and granular process, but it allows the tour
-  to be very controlled and open/close different parts and pieces of the explorer site to show them 
-  all off. 
+  to be very controlled and open/close different parts and pieces of the explorer site to show them
+  all off.
   */
   const handleJoyrideCallback = (event) => {
     if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(event.type)) {
@@ -291,4 +235,12 @@ function Tour({ run, modeName, setFeatures, setNavigatorOpen, themeRef }) {
   );
 }
 
+Tour.propTypes = {
+  run: PropTypes.bool.isRequired,
+  modeName: PropTypes.string.isRequired,
+  setFeatures: PropTypes.func.isRequired,
+  setNavigatorOpen: PropTypes.func.isRequired,
+  themeRef: PropTypes.object.isRequired,
+};
+
 export default Tour;

site/src/inspector_panel/InfoToolTip.jsx

@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import Floater from "react-floater";
 import InfoIcon from "../icons/icon-info.svg?react";
 import { useState } from "react";
@@ -45,4 +46,10 @@ function InfoToolTip({ mode, target, content }) {
   );
 }
 
+InfoToolTip.propTypes = {
+  mode: PropTypes.string.isRequired,
+  target: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+};
+
 export default InfoToolTip;