com

src/components/Map/FlightsLayer/hooks/useFlights.tsx

@@ -9,101 +9,113 @@ import { useMapCoords } from "@/hooks/map/useMapCoords";
 import { FlightStates } from "@/types/flights/states.interface";
 // import { flightData } from "@/mocs/flights";
 
+/**
+ * Custom hook to retrieve flight data from the API and transform it into
+ * OpenLayers features. The hook updates the state with the resulting
+ * features, and returns the features to be rendered on the map.
+ *
+ * @return {Object} An object containing the flightFeatures array.
+ */
 export const useFlights = () => {
-  const [flightFeatures, setflightFeatures] = useState<(Feature | null)[]>([]);
+  // State to hold the flight features
+  const [flightFeatures, setFlightFeatures] = useState<(Feature | null)[]>([]);
 
+  // Get the map coordinates
   const { getCoords } = useMapCoords();
-
   const { lamax, lamin, lomax, lomin, lat, lon } = getCoords();
 
+  // Query the API for flight states
   const { error } = useQuery({
-    queryKey: ["getStates", { lat, lon }],
+    queryKey: ["getStates", { lat, lon }], // Query key
     queryFn: async () => {
+      // Retrieve flight states from the API
       const data = await getStates({
         lamax,
         lamin,
         lomax,
         lomin,
       });
 
-      // const data = flightData;
+      // If data is valid and contains flight states, transform it into OpenLayers features
+      if (data && data.states.length) {
+        const transformedFeatures = data.states.map((flightState, idx) => {
+          const [
+            icao24,
+            callsign,
+            origin_country,
+            time_position,
+            last_contact,
+            longitude,
+            latitude,
+            baro_altitude,
+            on_ground,
+            velocity,
+            true_track,
+            vertical_rate,
+            sensors,
+            geo_altitude,
+            squawk,
+            spi,
+            category,
+          ] = flightState as FlightStates;
+
+          // Check if the longitude and latitude fall within the map boundaries
+          if (
+            longitude >= lomin &&
+            longitude <= lomax &&
+            latitude >= lamin &&
+            latitude <= lamax
+          ) {
+            const point = new Point(fromLonLat([longitude, latitude]));
 
-      console.log("len", data.states.length);
+            return new Feature({
+              data: {
+                rotation: true_track, // True track of the aircraft
+                icao24, // ICAO24 identifier of the aircraft
+                callsign, // Callsign of the aircraft
+                origin_country, // Origin country of the aircraft
+                time_position, // Time of the last position update
+                last_contact, // Time of the last contact
+                longitude, // Longitude coordinate of the aircraft
+                latitude, // Latitude coordinate of the aircraft
+                baro_altitude, // Barometric altitude of the aircraft
+                on_ground, // Whether the aircraft is on the ground
+                velocity, // Velocity of the aircraft
+                vertical_rate, // Vertical rate of the aircraft
+                sensors, // Sensors used to determine the aircraft's position
+                geo_altitude, // Geodetic altitude of the aircraft
+                squawk, // Squawk code of the aircraft
+                spi, // Special purpose indicator of the aircraft
+                category, // Category of the aircraft
+              },
+              geometry: point, // Geometry of the feature
+              name: callsign, // Name of the feature
+              styleId: idx % (data.states.length - 1), // Style ID of the feature
+            });
+          }
 
-      if (data && data?.states?.length) {
-        setflightFeatures(
-          data?.states.map((i, idx) => {
-            const [
-              icao24,
-              callsign,
-              origin_country,
-              time_position,
-              last_contact,
-              longitude,
-              latitude,
-              baro_altitude,
-              on_ground,
-              velocity,
-              true_track,
-              vertical_rate,
-              sensors,
-              geo_altitude,
-              squawk,
-              spi,
-              // position_source,
-              category,
-            ] = i as FlightStates;
+          return null;
+        });
 
-            if (
-              longitude >= lomin &&
-              longitude <= lomax &&
-              latitude >= lamin &&
-              latitude <= lamax
-            ) {
-              const point = new Point(fromLonLat([longitude, latitude]));
-              return new Feature({
-                data: {
-                  rotation: true_track,
-                  icao24,
-                  callsign,
-                  origin_country,
-                  time_position,
-                  last_contact,
-                  longitude,
-                  latitude,
-                  baro_altitude,
-                  on_ground,
-                  velocity,
-                  vertical_rate,
-                  sensors,
-                  geo_altitude,
-                  squawk,
-                  spi,
-                  // position_source,
-                  category,
-                },
-                geometry: point,
-                name: callsign,
-                styleId: idx % (data.states.length - 1),
-              });
-            }
-            return null;
-          })
-        );
+        // Update the state with the transformed features
+        setFlightFeatures(transformedFeatures);
       }
 
+      // Return the retrieved data
       return data;
     },
-    refetchInterval: 3000,
-    refetchOnWindowFocus: false,
+    refetchInterval: 3000, // Refresh the data every 3 seconds
+    refetchOnWindowFocus: false, // Do not refetch the data when the window regains focus
   });
 
+  // If there was an error, display a toast notification with the error message
   if (error) {
-    toast("Произошла ошибка на сервере", {
+    toast("An error occurred on the server", {
       description: error.message,
     });
   }
 
+  // Return the flight features
   return {
     flightFeatures,
   };

src/hooks/map/useMapCoords.tsx

@@ -8,14 +8,35 @@ import { getInitialData } from "@/components/Map/MainMap/utils";
 
 const initialMapData = getInitialData();
 
-export const useMapCoords = () => {
+/**
+ * Custom hook for managing map coordinates.
+ *
+ * Returns an object with the current view, a reference to the map, a function to get coordinates from the URL,
+ * and a function to update the view and save the coordinates to the URL and local storage.
+ *
+ * @returns An object with the current view, a reference to the map, a function to get coordinates from the URL,
+ * and a function to update the view and save the coordinates to the URL and local storage.
+ */
+export const useMapCoords = (): {
+  view: RView;
+  mapRef: React.RefObject<RMap>;
+  getCoords: () => {
+    lon: string;
+    lat: string;
+    zoom: string;
+    lamax: number;
+    lamin: number;
+    lomax: number;
+    lomin: number;
+  };
+  onSetView: (view: RView) => void;
+} => {
   const mapRef = useRef<RMap>(null);
-
   const [view, setView] = useState<RView>(initialMapData);
   const [searchParams, setSearchParams] = useSearchParams();
 
   const onSetView = useCallback(
-    (view: RView) => {
+    (view: RView): void => {
       setView(view);
 
       const [lon, lat] = toLonLat(view.center);
@@ -26,18 +47,27 @@ export const useMapCoords = () => {
       searchParams.set("resolution", `${view.resolution}`);
 
       setSearchParams(searchParams);
+
       localStorageController.setItem("lon", lon.toString());
       localStorageController.setItem("lat", lat.toString());
       localStorageController.setItem("zoom", view.zoom.toString());
     },
     [searchParams]
   );
 
-  const getCoords = useCallback(() => {
-    const lon = searchParams.get("lon") || 0;
-    const lat = searchParams.get("lat") || 0;
-    const zoom = searchParams.get("zoom") || 1;
-    const resolution = searchParams.get("resolution") || 1;
+  const getCoords = useCallback((): {
+    lon: string;
+    lat: string;
+    zoom: string;
+    lamax: number;
+    lamin: number;
+    lomax: number;
+    lomin: number;
+  } => {
+    const lon = searchParams.get("lon") || "0";
+    const lat = searchParams.get("lat") || "0";
+    const zoom = searchParams.get("zoom") || "1";
+    const resolution = searchParams.get("resolution") || "1";
 
     const latOff = +resolution! / 500;
     const lonOff = +resolution! / 150;
@@ -48,13 +78,13 @@ export const useMapCoords = () => {
     const lomax = +lon + lonOff;
 
     return {
-      lon,
-      lat,
-      zoom,
-      lamax,
-      lamin,
-      lomax,
-      lomin,
+      lon: lon,
+      lat: lat,
+      zoom: zoom,
+      lamax: lamax,
+      lamin: lamin,
+      lomax: lomax,
+      lomin: lomin,
     };
   }, [searchParams]);