feat: add title with name of the airport

packages/app/src/components/FlightsTable/index.tsx

@@ -2,12 +2,14 @@
 
 import Flight from '@mach/common'
 import { FC, useState } from 'react'
+import { Airport } from '../../services/fetch-airports'
+import { formatAirport } from '../../utils/format-airport'
 import Button from '../Button'
 import FlightModal from '../FlightModal'
 import styles from './index.module.css'
 
 type Props = {
-  items: Flight[]
+  items: Array<Flight & { departure: Airport, arrival: Airport }>
 }
 
 const FlightsTable: FC<Props> = ({ items }) => {
@@ -31,8 +33,8 @@ const FlightsTable: FC<Props> = ({ items }) => {
             {items.map((flight, key) => (
               <tr key={key}>
                 <td>{flight.callsign}</td>
-                <td>{flight.departureIcao}</td>
-                <td>{flight.arrivalIcao}</td>
+                <td><abbr title={formatAirport(flight.departure)}>{flight.departureIcao}</abbr></td>
+                <td><abbr title={formatAirport(flight.arrival)}>{flight.arrivalIcao}</abbr></td>
                 <td>{flight.estimatedOffBlockTime}</td>
                 <td>{flight.aircraft.icaoCode}</td>
                 <td className="grid justify-items-center">

packages/app/src/components/SearchFlightsForm/index.tsx

@@ -2,11 +2,10 @@
 
 import { ChangeEventHandler, FC, useState } from 'react'
 import { Airport } from '../../services/fetch-airports'
+import { formatAirport } from '../../utils/format-airport'
 import Button from '../Button'
-import FormInput from '../FormInput'
-import styles from './index.module.css'
-import Select from 'react-select'
 import { SelectInput } from '../SelectInput'
+import styles from './index.module.css'
 
 export type SearchFlightsFormFields = { departureIcao: string; arrivalIcao: string, company: string }
 
@@ -32,7 +31,7 @@ const SearchFlightsForm: FC<Props> = ({ companies, airports }) => {
   }
 
   const airportsOptions = airports.map(airport => {
-    return { value: airport.AeroCode, label: `${airport.AeroCode} - ${airport.name} - ${airport.city}` }
+    return { value: airport.AeroCode, label: formatAirport(airport) }
   })
 
   return (

packages/app/src/services/fetch-airports.ts

@@ -26,7 +26,7 @@ const airportSchema = z.object({
 
 export type Airport = z.infer<typeof airportSchema>;
 
-async function fetchAirportsData(icaoCodes: string[]) {
+export async function fetchAirportsData(icaoCodes: string[]) {
   const endpoint = new URL("https://aisweb.decea.mil.br/api");
   endpoint.searchParams.set("apiKey", environment.AISWEB_API_KEY);
   endpoint.searchParams.set("apiPass", environment.AISWEB_API_PASSWORD);

packages/app/src/services/fetch-flights.ts

@@ -1,6 +1,7 @@
 import { FlightModel } from "@mach/database";
 import { Op } from "sequelize";
 import z from "zod";
+import { fetchAirportsData } from "./fetch-airports";
 
 const schema = z.object({
   departureIcao: z
@@ -21,11 +22,11 @@ const schema = z.object({
     .optional(),
 });
 
-export function fetchFlights(searchParams: Record<string, unknown>) {
+export async function fetchFlights(searchParams: Record<string, unknown>) {
   const today = new Date();
 
   const where = schema.parse(searchParams);
-  return FlightModel.findAll({
+  const flights = await FlightModel.findAll({
     where: {
       ...(where.departureIcao && { departureIcao: where.departureIcao }),
       ...(where.arrivalIcao && { arrivalIcao: where.arrivalIcao }),
@@ -44,4 +45,23 @@ export function fetchFlights(searchParams: Record<string, unknown>) {
     },
     raw: true,
   });
+
+  const icaos = flights.flatMap((flight) => [
+    flight.departureIcao,
+    flight.arrivalIcao,
+  ]);
+
+  const airports = await fetchAirportsData(icaos);
+
+  return flights.map((flight) => {
+    return {
+      ...flight,
+      departure: airports.find(
+        ({ AeroCode }) => AeroCode === flight.departureIcao
+      )!,
+      arrival: airports.find(
+        ({ AeroCode }) => AeroCode === flight.arrivalIcao
+      )!,
+    };
+  });
 }

packages/app/src/utils/format-airport.ts

@@ -0,0 +1,8 @@
+import { Airport } from "../services/fetch-airports";
+
+export function formatAirport(airport: Airport) {
+  if (airport.name === airport.city) {
+    return `${airport.AeroCode} - ${airport.name}`;
+  }
+  return `${airport.AeroCode} - ${airport.name} - ${airport.city}`;
+}