From d4196a24ec9071c1394a9a88000f36cab2b5efba Mon Sep 17 00:00:00 2001
From: Ben Sherriff <bsherriffj@gmail.com>
Date: Thu, 24 Aug 2023 12:05:51 -0400
Subject: [PATCH] Working on airport pages

---
 src/app/airport/[icao]/page.tsx        | 13 ++++++++
 src/app/page.tsx                       | 42 ++++++++++++--------------
 src/app/recoil-root-wrapper.tsx        |  8 ++---
 src/{app => }/components/.gitkeep      |  0
 src/{app => }/components/MetarCard.tsx |  2 +-
 src/js/state.ts                        | 12 +++++---
 src/js/weather.ts                      |  5 ++-
 tsconfig.json                          |  2 +-
 8 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 src/app/airport/[icao]/page.tsx
 rename src/{app => }/components/.gitkeep (100%)
 rename src/{app => }/components/MetarCard.tsx (96%)

diff --git a/src/app/airport/[icao]/page.tsx b/src/app/airport/[icao]/page.tsx
new file mode 100644
index 0000000..fb263b6
--- /dev/null
+++ b/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>
+    </>;
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0ab9ab2..55df61a 100644
--- a/src/app/page.tsx
+++ b/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>
-    </>;
+    </>
 }
diff --git a/src/app/recoil-root-wrapper.tsx b/src/app/recoil-root-wrapper.tsx
index 9f51791..10a2aea 100644
--- a/src/app/recoil-root-wrapper.tsx
+++ b/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>
+};
diff --git a/src/app/components/.gitkeep b/src/components/.gitkeep
similarity index 100%
rename from src/app/components/.gitkeep
rename to src/components/.gitkeep
diff --git a/src/app/components/MetarCard.tsx b/src/components/MetarCard.tsx
similarity index 96%
rename from src/app/components/MetarCard.tsx
rename to src/components/MetarCard.tsx
index 72f98be..51ff963 100644
--- a/src/app/components/MetarCard.tsx
+++ b/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>
diff --git a/src/js/state.ts b/src/js/state.ts
index 2985a17..8de603d 100644
--- a/src/js/state.ts
+++ b/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[]
-});
\ No newline at end of file
+// export const airportsState = atom({
+//     key: 'airportsState',
+//     default: [] as Airport[]
+// });
+
+export const airports: Map<string, Airport> = new Map();
\ No newline at end of file
diff --git a/src/js/weather.ts b/src/js/weather.ts
index 5a6edeb..a27c8a4 100644
--- a/src/js/weather.ts
+++ b/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;
diff --git a/tsconfig.json b/tsconfig.json
index 5fd5866..f6e45df 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@app/*": ["./src/app/*"],
-      "@components/*": ["./src/app/components/*"],
+      "@components/*": ["src/components/*"],
       "@js/*": ["src/js"]
     }
   },