diff --git a/src/components/Map/FlightsLayer/hooks/useFlights.tsx b/src/components/Map/FlightsLayer/hooks/useFlights.tsx index d6f5183..e3c6e0f 100644 --- 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 index d149cb3..2082957 100644 --- 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) => { }, []); const onSetIcao = useCallback(({ icao24 }: { icao24: string }) => { + refetch(); + setIcao(icao24); setIsIcaoSetted(true); }, []); @@ -36,8 +38,8 @@ export const useSingleFlight = (mapRef: RefObject) => { [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 index f2938ca..e544591 100644 --- 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 }) => { const { flightFeatures } = useFlights(); @@ -24,6 +24,8 @@ export const FlightsLayer = memo(({ mapRef }: { mapRef: RefObject }) => { onSetIcao, } = useSingleFlight(mapRef); + const flightLayer = useRef(null); + return ( <> }) => { { @@ -81,17 +84,13 @@ export const FlightsLayer = memo(({ mapRef }: { mapRef: RefObject }) => { 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 index 8e388ef..4462331 100644 --- a/src/components/Map/MainMap/index.tsx +++ b/src/components/Map/MainMap/index.tsx @@ -18,8 +18,8 @@ export const MainMap = memo(() => { { setSearchParams(searchParams); }, - [searchParams, setSearchParams] + [searchParams] ); const getCoords = useCallback(() => {