From 7d9d32558f327e6ee3ff70af47297249615ec74c Mon Sep 17 00:00:00 2001
From: Ben Sherriff <bsherriffj@gmail.com>
Date: Fri, 15 Sep 2023 09:27:55 -0400
Subject: [PATCH] started working on favorites

---
 .../app/_components/Metars/MetarDialog.tsx    | 45 ++++++++++++++--
 .../src/app/_components/Topbar/index.tsx      | 51 +++++--------------
 2 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/weather-ui/src/app/_components/Metars/MetarDialog.tsx b/weather-ui/src/app/_components/Metars/MetarDialog.tsx
index 910457c..083896d 100644
--- a/weather-ui/src/app/_components/Metars/MetarDialog.tsx
+++ b/weather-ui/src/app/_components/Metars/MetarDialog.tsx
@@ -1,7 +1,12 @@
+'use client';
+
 import { Airport } from '@/app/_api/airport.types';
 import { Metar } from '@/app/_api/metar.types';
 import { FaArrowsSpin, FaLocationArrow } from 'react-icons/fa6';
 import { Modal } from 'antd';
+import Link from 'next/link';
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
+import { useState } from 'react';
 
 interface MetarDialogProps {
   airport: Airport;
@@ -10,6 +15,12 @@ interface MetarDialogProps {
 }
 
 export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogProps) {
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  function handleFavorite(value: boolean) {
+    setIsFavorite(value);
+  }
+
   function metarBGColor(metar: Metar | undefined) {
     if (metar?.flight_category == 'VFR') {
       return 'bg-emerald-600';
@@ -34,13 +45,41 @@ export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogPro
     }
   }
   return (
-    <Modal title={`${airport.icao} ${airport.full_name}`} open={isOpen} onCancel={onClose} closable={false} footer={[]}>
-      <div className='min-w-0 flex-1 select-none'>
+    <Modal
+      title={
+        <span className='flex justify-between'>
+          <Link href={`/airport/${airport.icao}`}>
+            {airport.icao} {airport.full_name}
+          </Link>
+          {isFavorite ? (
+            <AiFillStar
+              size={24}
+              className='cursor-pointer text-blue-500 hover:text-blue-400'
+              onClick={() => handleFavorite(false)}
+            />
+          ) : (
+            <AiOutlineStar
+              size={24}
+              className='cursor-pointer text-blue-500 hover:text-blue-400'
+              onClick={() => handleFavorite(true)}
+            />
+          )}
+        </span>
+      }
+      open={isOpen}
+      onCancel={onClose}
+      closable={false}
+      footer={[]}
+      className='select-none'
+    >
+      <div className='min-w-0 flex-1'>
         <hr />
         <p className='text-sm font-medium text-gray-500'>{airport.metar?.raw_text}</p>
         <div className='mt-2 flex'>
           <span
-            className={`flex inline-block text-sm text-white ${metarBGColor(airport.metar)} py-2 px-4 rounded-full`}
+            className={`flex inline-block align-middle text-sm text-white py-2 px-4 rounded-full 
+              ${metarBGColor(airport.metar)}
+            `}
           >
             {airport.metar?.flight_category ? airport.metar?.flight_category : 'UNKN'}
           </span>
diff --git a/weather-ui/src/app/_components/Topbar/index.tsx b/weather-ui/src/app/_components/Topbar/index.tsx
index b280d2e..067cd44 100644
--- a/weather-ui/src/app/_components/Topbar/index.tsx
+++ b/weather-ui/src/app/_components/Topbar/index.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { AutoComplete, Avatar, Modal } from 'antd';
+import { AutoComplete, Avatar } from 'antd';
 import Link from 'next/link';
-import { AiOutlineSearch, AiOutlineUser } from 'react-icons/ai';
-import { Button } from '@blueprintjs/core';
+import { AiOutlineUser } from 'react-icons/ai';
 import { useState } from 'react';
 import { getAirports } from '@/app/_api/airport';
 import { useRouter } from 'next/navigation';
@@ -11,7 +10,6 @@ import { useRouter } from 'next/navigation';
 const DEFAULT_ICON_SIZE = 40;
 
 export default function Topbar() {
-  const [modalOpen, setModalOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const [airports, setAirports] = useState<{ key: string; value: string; label: string }[]>([]);
   const router = useRouter();
@@ -29,49 +27,28 @@ export default function Topbar() {
   }
 
   function onSelect(value: string) {
-    setModalOpen(false);
     setSearchValue('');
     router.push(`/airport/${value}`);
   }
 
-  function onClose() {
-    setModalOpen(false);
-    setSearchValue('');
-  }
-
   return (
     <>
-      <Modal
-        open={modalOpen}
-        closable={false}
-        onCancel={onClose}
-        footer={[]}
-        className='p-0'
-        title={'Search for Airports'}
-      >
-        <AutoComplete
-          className='w-full'
-          allowClear
-          autoFocus
-          value={searchValue}
-          options={airports}
-          onSelect={onSelect}
-          onSearch={onSearch}
-          placeholder='Search Airports...'
-        />
-      </Modal>
       <nav className='w-screen flex bg-gray-700 text-gray-200 justify-between'>
         <div className='flex'>
-          <Link href={'/'} className='align-middle pt-2.5 pl-6 text-lg'>
+          <Link href={'/'} className='align-middle pt-2.5 px-6 text-lg'>
             <span>Aviation Weather</span>
           </Link>
-          <Button
-            icon={<AiOutlineSearch size={24} className='float-left mr-2 hover:text-white' />}
-            className='my-1 ml-6 pl-10 pr-12 border-none rounded-lg bg-gray-800 text-base text-gray-200/75 hover:bg-gray-600 hover:text-white cursor-pointer'
-            onClick={() => setModalOpen(true)}
-          >
-            Search Airports...
-          </Button>
+          <AutoComplete
+            className='w-72 relative top-2'
+            autoFocus
+            defaultActiveFirstOption
+            value={searchValue}
+            options={airports}
+            onSelect={onSelect}
+            onSearch={onSearch}
+            onBlur={() => setSearchValue('')}
+            placeholder='Search Airports...'
+          />
         </div>
         <Link className='my-1 mr-2' href={'/profile'}>
           <Avatar shape='circle' size={DEFAULT_ICON_SIZE} icon={<AiOutlineUser />} />