Merge pull request #19 from robertd2000/17-perf

17 perf
robertd2000 · Mar 27, 2024 · b2508ba · b2508ba
2 parents 49c0f83 + 0182390
commit b2508ba
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/src/components/Map/FlightsLayer/hooks/useFlights.tsx b/src/components/Map/FlightsLayer/hooks/useFlights.tsx
@@ -28,6 +28,8 @@ export const useFlights = () => {
 
       // const data = flightData;
 
+      console.log("len", data.states.length);
+
       if (data && data?.states?.length) {
         setflightFeatures(
           data?.states.map((i, idx) => {
@@ -92,7 +94,7 @@ export const useFlights = () => {
 
       return data;
     },
-    refetchInterval: 1500,
+    refetchInterval: 3000,
     refetchOnWindowFocus: false,
   });
 

diff --git a/src/components/Map/FlightsLayer/hooks/useSingleFlight.tsx b/src/components/Map/FlightsLayer/hooks/useSingleFlight.tsx
@@ -22,6 +22,8 @@ export const useSingleFlight = (mapRef: RefObject<RMap>) => {
   }, []);
 
   const onSetIcao = useCallback(({ icao24 }: { icao24: string }) => {
+    refetch();
+
     setIcao(icao24);
     setIsIcaoSetted(true);
   }, []);
@@ -36,8 +38,8 @@ export const useSingleFlight = (mapRef: RefObject<RMap>) => {
     [mapRef]
   );
 
-  const { error, isLoading } = useQuery({
-    queryKey: ["getStateByIcao"],
+  const { error, isLoading, refetch } = useQuery({
+    queryKey: ["getStateByIcao", icao],
     queryFn: async () => {
       // const data = flightSingleData;
       const data = await getStateByIcao(icao as string);

diff --git a/src/components/Map/FlightsLayer/index.tsx b/src/components/Map/FlightsLayer/index.tsx
@@ -1,14 +1,14 @@
+import { RefObject, memo, useCallback, useRef } from "react";
 import { Feature } from "ol";
 import { FeatureLike } from "ol/Feature";
 import { Style, Icon } from "ol/style";
 import { RFeature, RFeatureUIEvent, RLayerCluster, RMap } from "rlayers";
 import { FlightInfo } from "@/components/FlightInfo";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { useSingleFlight } from "./hooks/useSingleFlight";
 import { useFlights } from "./hooks/useFlights";
 import { AircraftCategories } from "@/constants/flights/categories";
-import { RefObject, memo, useCallback } from "react";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 
 export const FlightsLayer = memo(({ mapRef }: { mapRef: RefObject<RMap> }) => {
   const { flightFeatures } = useFlights();
@@ -24,6 +24,8 @@ export const FlightsLayer = memo(({ mapRef }: { mapRef: RefObject<RMap> }) => {
     onSetIcao,
   } = useSingleFlight(mapRef);
 
+  const flightLayer = useRef<RLayerCluster>(null);
+
   return (
     <>
       <FlightInfo
@@ -45,6 +47,7 @@ export const FlightsLayer = memo(({ mapRef }: { mapRef: RefObject<RMap> }) => {
       </div>
 
       <RLayerCluster
+        ref={flightLayer}
         distance={30}
         style={useCallback(
           (feature: FeatureLike, resolution: number) => {
@@ -81,17 +84,13 @@ export const FlightsLayer = memo(({ mapRef }: { mapRef: RefObject<RMap> }) => {
           name: "flights",
         }}
         zIndex={100}
-        onClick={useCallback(
-          (e: RFeatureUIEvent) => {
-            const { icao24 } =
-              e.target.getProperties().features[0].values_.data;
-            onSheetOpen(true);
-            onSetIcao({
-              icao24,
-            });
-          },
-          [onSetIcao, onSheetOpen]
-        )}
+        onClick={useCallback((e: RFeatureUIEvent) => {
+          const { icao24 } = e.target.getProperties().features[0].values_.data;
+          onSheetOpen(true);
+          onSetIcao({
+            icao24,
+          });
+        }, [])}
       >
         {flightFeatures
           .filter((i) => i != null)

diff --git a/src/components/Map/MainMap/index.tsx b/src/components/Map/MainMap/index.tsx
@@ -18,8 +18,8 @@ export const MainMap = memo(() => {
     <RMap
       className={style.mainMap}
       initial={view}
-      minZoom={6}
-      maxZoom={18}
+      minZoom={4}
+      maxZoom={8}
       projection={"EPSG:3857"}
       view={[view, onSetView]}
       ref={mapRef}

diff --git a/src/hooks/map/useMapCoords.tsx b/src/hooks/map/useMapCoords.tsx
@@ -24,7 +24,7 @@ export const useMapCoords = () => {
 
       setSearchParams(searchParams);
     },
-    [searchParams, setSearchParams]
+    [searchParams]
   );
 
   const getCoords = useCallback(() => {