Working on airport pages

src/app/airport/[icao]/page.tsx

@@ -0,0 +1,13 @@
+import { airports } from "@/js/state";
+import Link from "next/link";
+
+
+export default function Page({ params }: { params: { icao: string } }) {
+    const airport = airports.get(params.icao);
+    return <>
+        <div className="border-b border-gray-200 bg-gray-400 px-4 py-5 sm:px-6 flex justify-between">
+            <h3 className="text-base font-semibold leading-6 text-gray-900">{airport?.name}</h3>
+            <Link href={"/"}>Back</Link>
+        </div>
+    </>;
+}

src/app/page.tsx

@@ -1,32 +1,30 @@
-import { Airport } from '@/js/airport';
 import React from 'react';
-import MetarCard from './components/MetarCard';
+import { airports } from "@/js/state";
+import { Airport } from "@/js/airport";
+import MetarCard from '@/components/MetarCard';
+
+airports.set('KJYO', new Airport('Leesburg Executive Airport', 'KJYO'))
+airports.set('KHEF', new Airport('Manassas Regional Airpoirt', 'KHEF'))
+airports.set('KIAD', new Airport('Dulles International Airport', 'KIAD'))
+airports.set('KFDK', new Airport('Frederick Municipal Airport', 'KFDK'))
+airports.set('KMRB', new Airport('Eastern West Virginia Regional Airport', 'KMRB'))
+airports.set('KOKV', new Airport('Winchester Regional Airport', 'KOKV'))
+airports.set('KFRR', new Airport('Front Royal-Warren County Airport', 'KFRR'))
+airports.set('KLUA', new Airport('Luray Caverns Airport', 'KLUA'))
+airports.set('KSHD', new Airport('Shenandoah Valley Airport', 'KSHD'))
+airports.set('KCHO', new Airport('Charlottesville-Albemarle Airport', 'KCHO'))
+airports.set('KCJR', new Airport('Culpeper Regional Airport', 'KCJR'))
+airports.set('KHWY', new Airport('Warrenton-Fauquier Airport', 'KHWY'))
+airports.set('KRMN', new Airport('Stafford Regional Airport', 'KRMN'))
+airports.set('KEZF', new Airport('Shannon Airport', 'KEZF'))
 
 export default function Page() {
-    const defaultAirports = [
-        new Airport('Leesburg Executive Airport', 'KJYO'),
-        new Airport('Manassas Regional Airpoirt', 'KHEF'),
-        new Airport('Dulles International Airport', 'KIAD'),
-        new Airport('Frederick Municipal Airport', 'KFDK'),
-        new Airport('Eastern West Virginia Regional Airport', 'KMRB'),
-        new Airport('Winchester Regional Airport', 'KOKV'),
-        new Airport('Front Royal-Warren County Airport', 'KFRR'),
-        new Airport('Luray Caverns Airport', 'KLUA'),
-        new Airport('Shenandoah Valley Airport', 'KSHD'),
-        new Airport('Charlottesville-Albemarle Airport', 'KCHO'),
-        new Airport('Culpeper Regional Airport', 'KCJR'),
-        new Airport('Warrenton-Fauquier Airport', 'KHWY'),
-        new Airport('Stafford Regional Airport', 'KRMN'),
-        new Airport('Shannon Airport', 'KEZF'),
-    ];
-    
-
     return <>
         <div className="border-b border-gray-200 bg-gray-400 px-4 py-5 sm:px-6">
             <h3 className="text-base font-semibold leading-6 text-gray-900">Airports</h3>
         </div>
         <div className='p-4'>
-            <MetarCard airports={defaultAirports}/>
+            <MetarCard airports={[...airports.values()]}/>
         </div>
-    </>;
+    </>
 }

src/app/recoil-root-wrapper.tsx

@@ -3,8 +3,6 @@
 import { RecoilRoot } from 'recoil';
 import React, { ReactNode } from 'react';
 
-const RecoilRootWrapper = ({ children }: { children: ReactNode }) => (
-    <RecoilRoot>{children}</RecoilRoot>
-);
-
-export default RecoilRootWrapper;
+export default function RecoilRootWrapper({ children }: { children: ReactNode }) {
+    return <RecoilRoot>{children}</RecoilRoot>
+};

src/components/MetarCard.tsx

@@ -30,7 +30,7 @@ export default async function MetarCard({airports}: {airports: Airport[]}) {
                     className={`relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-4 py-2 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400`}
                 >
                     <div className="min-w-0 flex-1">
-                    <Link href={'#'}>
+                    <Link href={`/airport/${airport.icao}`}>
                         <span className="absolute inset-0" aria-hidden="true" />
                         <p className="text-gray-900 pb-1">{airport.name} ({airport.metar?.station_id})</p>
                         <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>

src/js/state.ts

@@ -1,7 +1,9 @@
-import { atom } from "recoil";
+// import { atom } from "recoil";
 import { Airport } from "./airport";
 
-export const airportsState = atom({
-    key: 'airportsState',
-    default: [] as Airport[]
-});
+// export const airportsState = atom({
+//     key: 'airportsState',
+//     default: [] as Airport[]
+// });
+
+export const airports: Map<string, Airport> = new Map();

src/js/weather.ts

@@ -20,7 +20,10 @@ export async function getMetars(airports: Airport[]): Promise<Metar[]> {
     if (response != null && response != undefined) {
         const json = xml2json(response.data, { compact: true });
         const jsonObject = JSON.parse(json);
-        const metarData = jsonObject?.response?.data?.METAR;
+        let metarData = jsonObject?.response?.data?.METAR;
+        if (!Array.isArray(metarData)) {
+            metarData = [metarData];
+        }
         for (const data of metarData) {
             const sky_condition: {
                 sky_cover: string;

tsconfig.json

@@ -27,7 +27,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@app/*": ["./src/app/*"],
-      "@components/*": ["./src/app/components/*"],
+      "@components/*": ["src/components/*"],
       "@js/*": ["src/js"]
     }
   },