refactor: optimize amdb

Author: professoralex13

examples/playground/src/MainWindow.tsx

@@ -1,4 +1,4 @@
-import MapPane from "./components/Map";
+import MapPane from "./components/map";
 
 export default function MainWindow() {
     return (

examples/playground/src/components/map/amdb.tsx

@@ -0,0 +1,42 @@
+import { useRecoilValue } from "recoil";
+import { amdbLayersState } from "../../state/amdb";
+import { AmdbLayerName, getAmdbAPI } from "@navigraph/amdb";
+import { userState } from "../../state/user";
+import { Scope } from "@navigraph/app";
+import { memo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { GeoJSON, Popup } from "react-leaflet";
+
+const AmdbLayer = memo(({ idarpt, layer, amdb }: { idarpt: string, layer: AmdbLayerName, amdb: ReturnType<typeof getAmdbAPI> }) => {
+    const { data } = useQuery({
+        queryKey: ['amdb-data', idarpt, layer],
+        queryFn: async () => {
+            return amdb.getAmdbLayer({ icao: idarpt, layer })
+        }
+    })
+
+    if (!data) return null;
+
+    return (
+        <GeoJSON data={data}>
+            <Popup>
+                {layer}
+            </Popup>
+        </GeoJSON>
+    )
+});
+
+export default function AmdbManager() {
+    const amdbLayers = useRecoilValue(amdbLayersState);
+
+    const user = useRecoilValue(userState);
+
+    if (!user?.scope.includes(Scope.AMDB)) return;
+
+    const amdb = getAmdbAPI();
+
+    return amdbLayers.map(([idarpt, layers]) => <>
+        <AmdbLayer key={`${idarpt}/aerodromereferencepoint`} amdb={amdb} idarpt={idarpt} layer="aerodromereferencepoint" />
+        {layers.map((layer) => <AmdbLayer key={`${idarpt}/${layer}`} amdb={amdb} idarpt={idarpt} layer={layer} />)}
+    </>)
+}

examples/playground/src/components/Map.tsx renamed to examples/playground/src/components/map/index.tsx

@@ -1,23 +1,22 @@
-import { MapContainer, useMap, TileLayer, ImageOverlay, GeoJSON, Popup } from "react-leaflet";
-import { memo, useEffect, useMemo, useRef } from "react";
+import { MapContainer, useMap, TileLayer, ImageOverlay } from "react-leaflet";
+import { useEffect, useMemo, useRef } from "react";
 import { LatLngBounds, Map } from "leaflet";
 import { useRecoilState, useRecoilValue } from "recoil";
-import { appState } from "../state/app";
+import { appState } from "../../state/app";
 import { NavigraphRasterSource, NavigraphTheme, NavigraphTileLayer, PresetConfig } from "@navigraph/leaflet";
-import { userState } from "../state/user";
+import { userState } from "../../state/user";
 import { NavigraphAuth } from "@navigraph/auth";
 import { Scope } from "@navigraph/app";
 
 import "leaflet/dist/leaflet.css"
-import { mapFaaState, mapSourceState, mapTacState, mapThemeState } from "../state/mapStyle";
-import { chartOverlayOpacityState, chartOverlayState } from "../state/chartOverlay";
+import { mapFaaState, mapSourceState, mapTacState, mapThemeState } from "../../state/mapStyle";
+import { chartOverlayOpacityState, chartOverlayState } from "../../state/chartOverlay";
 import { calculateChartBounds } from "@navigraph/charts";
 import { useQuery } from "@tanstack/react-query";
-import { protectedPage } from "./protectedPage";
+import { protectedPage } from "../protectedPage";
 import { TbCircleX } from "react-icons/tb";
-import Button from "./Button";
-import { AmdbLayerName } from "@navigraph/amdb";
-import { amdbLayersState } from "../state/amdb";
+import Button from "../Button";
+import AmdbManager from "./amdb";
 
 export function createPreset(source: NavigraphRasterSource, theme: NavigraphTheme, faa: boolean, tac: boolean): PresetConfig {
     if (source === 'WORLD') {
@@ -30,27 +29,6 @@ export function createPreset(source: NavigraphRasterSource, theme: NavigraphThem
     return { source, theme, type: faa ? 'FAA' : 'Navigraph' }
 }
 
-const AmdbLayer = protectedPage<{ idarpt: string, layers: AmdbLayerName[] }, [Scope.AMDB]>(memo(({ idarpt, layers, amdb }) => {
-    const { data } = useQuery({
-        queryKey: ['amdb-data', idarpt, layers],
-        queryFn: async () => {
-            return amdb.getAmdbLayers({ icao: idarpt, include: ['aerodromereferencepoint', ...layers] })
-        }
-    })
-
-    if (!data) return null;
-
-    return (
-        Object.entries(data).map(([layerName, data]) =>
-            <GeoJSON data={data}>
-                <Popup>
-                    {layerName}
-                </Popup>
-            </GeoJSON>
-        )
-    )
-}), [Scope.AMDB]);
-
 const ChartOverlay = protectedPage(({ charts }) => {
     const theme = useRecoilValue(mapThemeState);
 
@@ -153,8 +131,6 @@ export default function MapPane() {
     const app = useRecoilValue(appState);
     const user = useRecoilValue(userState);
 
-    const amdbLayers = useRecoilValue(amdbLayersState);
-
     return (
         <div className='w-full'>
             <MapContainer center={[51.505, -0.09]} zoom={13} className='h-screen' zoomControl={false} ref={mapRef} whenReady={() => {
@@ -170,7 +146,7 @@ export default function MapPane() {
                     />
                 )}
                 <ChartOverlay />
-                {amdbLayers.map((layer) => <AmdbLayer key={layer[0]} idarpt={layer[0]} layers={layer[1]} />)}
+                <AmdbManager />
             </MapContainer>
         </div>
     )

examples/playground/src/pages/Tiles.tsx

@@ -3,7 +3,7 @@ import Button from "../components/Button";
 import { mapFaaState, mapSourceState, mapTacState, mapThemeState } from "../state/mapStyle";
 import { FaMoon, FaSun } from "react-icons/fa";
 import JsonView from "../components/JsonView";
-import { createPreset } from "../components/Map";
+import { createPreset } from "../components/map";
 import { protectedPage } from "../components/protectedPage";
 import { Scope } from "@navigraph/app";