fix: type errors

enmeshed-analytics · Oct 1, 2024 · 1f93ae3 · 1f93ae3
1 parent ee9dcb9
commit 1f93ae3
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 77 deletions.
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -11,12 +11,7 @@ import {
   handleFileToggle as handleFileToggleUtil,
 } from "../utils/fileHandler";
 
-type BaseLayerKey = "Light" | "Dark" | "Road";
-const layerButtonColors: Record<BaseLayerKey, string> = {
-  Light: "bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300",
-  Dark: "bg-purple-700 hover:bg-purple-800 focus:ring-purple-600",
-  Road: "bg-green-600 hover:bg-green-700 focus:ring-green-500",
-};
+export type BaseLayerKey = "Light" | "Dark" | "Road";
 
 const Map = dynamic(() => import("../components/Map/Map"), {
   loading: () => <LoadingSpinner />,
@@ -80,8 +75,8 @@ function Home() {
   const dragCounter = useRef(0);
 
   // Callbacks
-  const handleBaseLayerChange = useCallback((newBaseLayer: string) => {
-    setSelectedBaseLayer(newBaseLayer as BaseLayerKey);
+  const handleBaseLayerChange = useCallback((newBaseLayer: BaseLayerKey) => {
+    setSelectedBaseLayer(newBaseLayer);
   }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
@@ -220,11 +215,10 @@ function Home() {
         uploadError={uploadError}
         selectedBaseLayer={selectedBaseLayer}
         layerGroups={[
-          { 
-            title: "Base", 
-            layers: Object.keys(BASE_LAYERS) as BaseLayerKey[], 
-            onLayerSelect: handleBaseLayerChange,
-            buttonColors: layerButtonColors
+          {
+            title: "Base",
+            layers: Object.keys(BASE_LAYERS) as BaseLayerKey[],
+            onLayerSelect: (layerName: string) => handleBaseLayerChange(layerName as BaseLayerKey)
           },
           { title: "Core", layers: CORE_LAYERS },
           { title: "Thematic", layers: THEMATIC_LAYERS },

diff --git a/frontend/src/components/Map/Map.tsx b/frontend/src/components/Map/Map.tsx
@@ -1,11 +1,12 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useCallback, useRef, useEffect, useState } from "react";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import {
   MapProps,
   TokenData,
   FeatureCollectionWithCRS,
   INITIAL_VIEW_STATE,
+  handleError,
   fetchToken,
   getValidToken,
   transformGeoJsonData,
@@ -76,46 +77,6 @@ const LayerStyleForm: React.FC<{
   );
 };
 
-const addMvtLayer = (map: React.RefObject<maplibregl.Map>) => {
-  console.log("Adding MVT Layer");
-  console.log("Backend URL:", process.env.NEXT_PUBLIC_BACKEND_URL);
-  if (!map.current) {
-    console.log("Map not initialized, cannot add MVT layer");
-    return;
-  }
-  const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
-
-  // Remove existing layer and source if they exist
-  if (map.current.getLayer('my-mvt-layer')) {
-    map.current.removeLayer('my-mvt-layer');
-  }
-  if (map.current.getSource('my-mvt-source')) {
-    map.current.removeSource('my-mvt-source');
-  }
-
-  // Add the vector tile source and layer
-  map.current.addSource('my-mvt-source', {
-    type: 'vector',
-    tiles: [`${backendUrl}/tiles/{z}/{y}/{x}`],
-    minzoom: 0,
-    maxzoom: 14,
-  });
-
-  map.current.addLayer({
-    id: 'my-mvt-layer',
-    type: 'circle',
-    source: 'my-mvt-source',
-    'source-layer': 'pois', // Replace with your actual source layer
-    paint: {
-      'circle-color': '#FF0000',
-      'circle-radius': 3,
-    },
-  });
-
-  console.log('MVT layer added');
-};
-
-
 // Initialize the map
 const initMap = async (
   mapContainer: React.RefObject<HTMLDivElement>,
@@ -160,16 +121,10 @@ const initMap = async (
       },
     });
 
-    map.current.on("load", () => {
-      console.log("Running on load event")
-      setMapLoaded(true);
-      console.log("Calling addMvtLayer")
-      addMvtLayer(map);
-    });
-
-    map.current.on("error", (e) => {
-      console.error(setMapError, e.error, "Map error")
-    });
+    map.current.on("load", () => setMapLoaded(true));
+    map.current.on("error", (e) =>
+      handleError(setMapError, e.error, "Map error"),
+    );
 
     // Add click listener for layers to open the style form
     map.current.on("click", (e) => {
@@ -183,7 +138,7 @@ const initMap = async (
     });
 
   } catch (error) {
-    console.error('Error adding MVT layer:', error);
+    handleError(setMapError, error as Error, "Error initializing map");
   }
 };
 
@@ -213,7 +168,7 @@ const Map: React.FC<MapProps> = ({ activeFiles, baseLayer }) => {
         setSelectedLayer,
       );
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -225,18 +180,68 @@ const Map: React.FC<MapProps> = ({ activeFiles, baseLayer }) => {
     };
   }, []);
 
+  const addMvtLayer = () => {
+    console.log("Adding MVT Layer");
+    if (!map.current) return;
+    const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
+
+    // Remove existing layer and source if they exist
+    if (map.current.getLayer('my-mvt-layer')) {
+      map.current.removeLayer('my-mvt-layer');
+    }
+    if (map.current.getSource('my-mvt-source')) {
+      map.current.removeSource('my-mvt-source');
+    }
+
+    // Add the vector tile source and layer
+    map.current.addSource('my-mvt-source', {
+      type: 'vector',
+      tiles: [`${backendUrl}/tiles/{z}/{y}/{x}`],
+      minzoom: 0,
+      maxzoom: 14,
+    });
+
+    map.current.addLayer({
+      id: 'my-mvt-layer',
+      type: 'circle',
+      source: 'my-mvt-source',
+      'source-layer': 'pois', // Replace with your actual source layer
+      paint: {
+        'circle-color': '#FF0000',
+        'circle-radius': 3,
+      },
+    });
+
+    console.log('MVT layer added');
+  };
+
+  const addCustomLayers = useCallback(() => {
+    console.log("Adding custom layers");
+    if (!map.current) return;
+
+    // Add MVT Layer
+    addMvtLayer();
+  }, [map]);
+
   useEffect(() => {
     if (map.current) {
       console.log("Changing map style");
       map.current.setStyle(baseLayer);
 
-      // Listen for the 'style.load' event and then add the MVT layer
-      map.current.once("styledata", () => {
-        console.log("Style loaded, adding MVT layer");
-        addMvtLayer(map);
-      });
+      const onStyleLoad = () => {
+        console.log("Style loaded");
+        addCustomLayers(); // Re-add your custom layers here
+      };
+
+      map.current.on('style.load', onStyleLoad);
+
+      return () => {
+        if (map.current) {
+          map.current.off('style.load', onStyleLoad);
+        }
+      };
     }
-  }, [baseLayer]);
+  }, [baseLayer, addCustomLayers]);
 
   // Adds locally uploaded Geojsons to the map
   useEffect(() => {

diff --git a/frontend/src/components/Sidebar/Sidebar.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -17,7 +17,6 @@ type LayerGroup = {
   title: string;
   layers: string[];
   onLayerSelect?: (layerName: string) => void;
-  buttonColors?: Record<string, string>;
 };
 
 type SidebarProps = {
@@ -77,7 +76,7 @@ const Sidebar: React.FC<SidebarProps> = ({
     }
   };
 
-  const renderLayerGroup = ({ title, layers, onLayerSelect, buttonColors }: LayerGroup) => {
+  const renderLayerGroup = ({ title, layers, onLayerSelect }: LayerGroup) => {
     const LayerIcon = layerIcons[title.replace(/\s+/g, "")] || Layers;
     const isVisible = visibleGroups[title];
 
@@ -99,14 +98,12 @@ const Sidebar: React.FC<SidebarProps> = ({
           <div className="mt-4 ml-7">
             {layers.map((layerName) => {
               const LayerItemIcon = layerIcons[layerName] || Layers;
-              const buttonColorClasses = buttonColors ? buttonColors[layerName] : "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500";
-
               return (
                 <div key={layerName} className="mb-4">
                   {onLayerSelect ? (
                     <button
                       onClick={() => onLayerSelect(layerName)}
-                      className={`w-full mb-2 flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white ${buttonColorClasses} focus:outline-none focus:ring-2 focus:ring-offset-2 ${
+                      className={`w-full mb-2 flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
                         layerName === selectedBaseLayer ? 'ring-2 ring-offset-2 ring-blue-500' : ''
                       }`}
                     >