feat: add possibility to filter results by company (#99)

packages/front/app/page.tsx

@@ -1,10 +1,13 @@
 import GeneralLayout from '../src/layouts/GeneralLayout';
 import Lead from '../src/components/Lead';
 import SearchFlightsForm from '../src/components/SearchFlightsForm';
+import { fetchCompanies } from '../src/services/fetch-companies';
+
+export default async function Page() {
+    const companies = await fetchCompanies()
 
-export default function Page() {
     return <GeneralLayout>
         <Lead>To begin, fill at least one of the following fields.</Lead>
-        <SearchFlightsForm />
+        <SearchFlightsForm companies={companies} />
     </GeneralLayout>
 }

packages/front/src/components/SearchFlightsForm/index.module.css

@@ -9,3 +9,8 @@
 .container > div > label {
   @apply dark:text-white;
 }
+
+.input {
+  @apply p-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-gray-600 dark:border-gray-800 dark:text-gray-200;
+}
+

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

@@ -1,61 +1,66 @@
 "use client"
 
-import { ChangeEventHandler, FC, FormEventHandler, useState } from 'react'
+import { ChangeEventHandler, FC, useState } from 'react'
 import Button from '../Button'
 import FormInput from '../FormInput'
 import styles from './index.module.css'
 
-export type SearchFlightsFormFields = { departureIcao: string; arrivalIcao: string }
+export type SearchFlightsFormFields = { departureIcao: string; arrivalIcao: string, company: string }
 
 type Props = {
-  onSubmit?: (params: Partial<SearchFlightsFormFields>) => void
+  companies: string[]
 }
 
-const SearchFlightsForm: FC<Props> = ({ onSubmit = () => { } }) => {
+const SearchFlightsForm: FC<Props> = ({ companies }) => {
   const [form, setForm] = useState<SearchFlightsFormFields>({
     arrivalIcao: '',
-    departureIcao: ''
+    departureIcao: '',
+    company: ''
   })
 
-  const isSubmitDisabled = form.arrivalIcao.trim().length === 0 && form.departureIcao.trim().length === 0
+  const isSubmitDisabled = form.arrivalIcao.trim().length === 0 && form.departureIcao.trim().length === 0 && form.company.length === 0
 
-  const onChange: ChangeEventHandler<HTMLInputElement> = evt => {
+  const onChange: ChangeEventHandler<HTMLInputElement | HTMLSelectElement> = evt => {
     setForm(form => ({
       ...form,
       [evt.target.name]: evt.target.value.toUpperCase()
     }))
   }
 
-  const handleSubmit: FormEventHandler = evt => {
-    evt.preventDefault()
-    onSubmit({
-      ...(form.departureIcao && { departureIcao: form.departureIcao }),
-      ...(form.arrivalIcao && { arrivalIcao: form.arrivalIcao })
-    })
-  }
-
   return (
     <form className={styles.container} action={"/search"}>
       <div>
-        <label>Departure ICAO</label>
+        <label htmlFor="departureIcao">Departure ICAO</label>
         <FormInput
           type="text"
           placeholder="SBSP"
+          id="departureIcao"
           name="departureIcao"
           onChange={onChange}
         />
       </div>
 
       <div>
-        <label>Arrival ICAO</label>
+        <label htmlFor="arrivalIcao">Arrival ICAO</label>
         <FormInput
           type="text"
           placeholder="SBRF"
+          id="arrivalIcao"
           name="arrivalIcao"
           onChange={onChange}
         />
       </div>
 
+      <div>
+        <label htmlFor="company">Company</label>
+        <select name="company" className={styles.input} id="company" value={form.company} onChange={onChange}>
+          <option value="" disabled>Pick a company</option>
+          {companies.map((company) => {
+            return <option key={company} value={company}>{company}</option>
+          })}
+        </select>
+      </div>
+
       <Button type="submit" disabled={isSubmitDisabled}>Search flights</Button>
     </form>
   )

packages/front/src/services/fetch-companies.ts

@@ -0,0 +1,13 @@
+import { FlightModel } from "@mach/database";
+import { Sequelize } from "sequelize";
+
+export async function fetchCompanies() {
+  const companies = await FlightModel.findAll({
+    attributes: [
+      [Sequelize.fn("DISTINCT", Sequelize.col("company")), "company"],
+    ],
+    raw: true,
+  });
+
+  return companies.map((v) => v.company);
+}

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

@@ -10,6 +10,10 @@ const schema = z.object({
     .string()
     .transform((v) => v.toUpperCase())
     .optional(),
+  company: z
+    .string()
+    .transform((v) => v.toUpperCase())
+    .optional(),
 });
 
 export function fetchFlights(searchParams: Record<string, unknown>) {
@@ -18,6 +22,7 @@ export function fetchFlights(searchParams: Record<string, unknown>) {
     where: {
       ...(where.departureIcao && { departureIcao: where.departureIcao }),
       ...(where.arrivalIcao && { arrivalIcao: where.arrivalIcao }),
+      ...(where.company && { company: where.company }),
     },
     attributes: {
       exclude: ["createdAt", "updatedAt", "beginDate", "endDate"],