refactors

Author: professoralex13

examples/playground/src/components/JsonView.tsx

@@ -5,6 +5,9 @@ interface Props {
   onClick?: () => void
 }
 
+/**
+ * Renders any object as JSON on a scrollable pane
+ */
 export default function JsonView({ content, onClick }: Props) {
   return (
     <div className={clsx("pane overflow-auto w-full no-scrollbar", onClick && "cursor-pointer")}>

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

@@ -1,37 +1,31 @@
-import { AmdbLayerName, getAmdbAPI } from "@navigraph/amdb"
-import { useQueries } from "@tanstack/react-query"
+import { AmdbLayerName } from "@navigraph/amdb"
 import { circleMarker, geoJson, GeoJSON } from "leaflet"
 import { memo, useEffect, useRef } from "react"
 import { renderToString } from "react-dom/server"
 import { useMap } from "react-leaflet"
 import { useRecoilValue } from "recoil"
+import useAmdbLayers from "../../hooks/useAmdbLayers"
 import { amdbLayersState } from "../../state/amdb"
 import JsonView from "../JsonView"
 import amdbStyle, { layerOrder } from "./amdbStyle"
 
-const AmdbManager = memo(() => {
-  const amdb = getAmdbAPI()
-
+/**
+ * Handles the rendering of AMDB layers to the map for a specific airport
+ */
+function AmdbLayer({ idarpt, layerNames }: { idarpt: string; layerNames: AmdbLayerName[] }) {
   const map = useMap()
 
-  const amdbLayers = useRecoilValue(amdbLayersState)
-
-  const data = useQueries({
-    queries: amdbLayers.flatMap(([idarpt, layers]) =>
-      layers.map(layer => ({
-        queryKey: ["amdb-data", idarpt, layer],
-        queryFn: async () => ({ idarpt, layer, data: await amdb.getAmdbLayer({ icao: idarpt, layer }) }),
-      })),
-    ),
-  })
+  const data = useAmdbLayers(idarpt, layerNames)
 
-  const layers = useRef<{ idarpt: string; layerName: AmdbLayerName; layer: GeoJSON }[]>([])
+  // Store references to the layer instances
+  const layers = useRef<{ layerName: AmdbLayerName; layer: GeoJSON }[]>([])
 
+  // This use effect will run each time the layer data or layers to render has (probably) updated
   useEffect(() => {
-    const toRemove = layers.current.filter(
-      ({ idarpt, layerName }) => !data.some(({ data }) => data?.idarpt === idarpt && data?.layer === layerName),
-    )
+    // Find layers which are no longer present in the queried data
+    const toRemove = layers.current.filter(({ layerName }) => !data.some(([_layerName]) => _layerName === layerName))
 
+    // Remove these layers from the map and from the stored references
     toRemove.forEach(({ layer }) => {
       map.removeLayer(layer)
       layers.current.splice(
@@ -40,20 +34,17 @@ const AmdbManager = memo(() => {
       )
     })
 
-    const newLayers = data.flatMap(({ data }) => {
-      if (
-        data?.data &&
-        !layers.current.some(({ idarpt, layerName }) => idarpt === data.idarpt && layerName === data.layer)
-      ) {
+    // Create layers which there is now queried data for, but no stored layer for it
+    const newLayers = data.flatMap(([layerName, data]) => {
+      if (data && !layers.current.some(x => x.layerName === layerName)) {
         return [
           {
-            idarpt: data.idarpt,
-            layerName: data.layer,
-            layer: geoJson(data.data, {
-              style: amdbStyle(data.layer),
+            layerName,
+            layer: geoJson(data, {
+              style: amdbStyle,
 
               pointToLayer: (feature, latlng) => {
-                const marker = circleMarker(latlng, amdbStyle(data.layer)(feature))
+                const marker = circleMarker(latlng, amdbStyle(feature))
 
                 marker.feature = feature
 
@@ -67,7 +58,7 @@ const AmdbManager = memo(() => {
                   const feature = target.feature
 
                   if (feature?.type === "Feature") {
-                    const style = amdbStyle(data.layer)(feature)
+                    const style = amdbStyle(feature)
 
                     style.stroke = true
                     style.color = "blue"
@@ -84,8 +75,8 @@ const AmdbManager = memo(() => {
                   _layer.bindPopup(
                     renderToString(
                       <div className="flex flex-col items-center gap-2">
-                        <span className="text-ng-background-200">{data.layer}</span>
-                        <JsonView content={feature.properties} />
+                        <span className="text-ng-background-200">{layerName}</span>
+                        <JsonView content={feature.properties as unknown} />
                       </div>,
                     ),
                   )
@@ -99,17 +90,28 @@ const AmdbManager = memo(() => {
       return []
     })
 
-    newLayers.forEach(({ idarpt, layerName, layer }) => {
+    // Add the new layers to the map and store the references
+    newLayers.forEach(({ layerName, layer }) => {
       map.addLayer(layer)
-      layers.current.push({ idarpt, layerName, layer })
+      layers.current.push({ layerName, layer })
     })
 
+    // Sort the layers and bring them to front in that correct order to ensure they appear in the correct order on the map
     layers.current
       .sort((a, b) => layerOrder[b.layerName] - layerOrder[a.layerName])
       .forEach(({ layer }) => layer.bringToFront())
   }, [data, map])
 
   return null
+}
+
+/**
+ * Handles the rendering of selected AMDB layers from selected airports to the leaflet map
+ */
+const AmdbManager = memo(() => {
+  const amdbLayers = useRecoilValue(amdbLayersState)
+
+  return amdbLayers.map(([idarpt, layerNames]) => <AmdbLayer idarpt={idarpt} layerNames={layerNames} />)
 })
 
 export default AmdbManager