Fixed layouts

ui/src/components/Admin/AirportTablePanel.tsx

@@ -15,7 +15,8 @@ export default function AirportTablePanel({ setAirport }: { setAirport: (airport
 
   async function getAirportData() {
     const response = await getAirports({
-      search,
+      icaos: [search],
+      name: search,
       page,
       limit: 100
     });

ui/src/components/Header/header.css

@@ -24,4 +24,10 @@
   padding-right: 2em;
   margin-top: auto;
   margin-bottom: auto;
+}
+
+.navbar .user-section {
+  display: flex;
+  align-items: center;
+  padding-right: 2em;
 }

ui/src/components/Header/index.tsx

@@ -11,6 +11,7 @@ import { useToggle } from '@mantine/hooks';
 import { HeaderModal } from './HeaderModal';
 import { coordinatesState } from '@/state/map';
 import { User } from '@/api/auth.types';
+import { usePathname, useRouter } from 'next/navigation';
 
 interface HeaderProps {
   user: User | undefined;
@@ -26,10 +27,12 @@ export default function Header({ user, profilePicture, setProfilePicture, login,
   const [airports, setAirports] = useState<{ key: string; value: string; label: string }[]>([]);
   const [modalType, toggle] = useToggle([undefined, 'login', 'register', 'reset']);
   const [_, setCoordinates] = useRecoilState(coordinatesState);
+  const pathname = usePathname();
+  const router = useRouter();
 
   async function onChange(value: string) {
     setSearchValue(value);
-    const airportData = await getAirports({ search: value });
+    const airportData = await getAirports({ icaos: [value], name: value });
     setAirports(
       airportData.data.map((airport) => ({
         key: airport.icao,
@@ -40,9 +43,15 @@ export default function Header({ user, profilePicture, setProfilePicture, login,
   }
 
   async function onClick(value: string) {
-    const airport = await getAirport({ icao: value });
-    if (airport) {
-      setCoordinates({ lat: airport.data.latitude, lon: airport.data.longitude });
+    setSearchValue('');
+    // Get current path
+    if (pathname == '/') {
+      const airport = await getAirport({ icao: value });
+      if (airport) {
+        setCoordinates({ lat: airport.data.latitude, lon: airport.data.longitude });
+      }
+    } else {
+      router.push(`/airport/${value}`)
     }
   }
 

ui/src/components/Metars/MapTiles.tsx

@@ -15,7 +15,6 @@ export default function MapTiles() {
   const [airports, setAirports] = useState<Airport[]>([]);
   const [selectedAirport, setSelectedAirport] = useState<Airport | undefined>();
   const coordinates = useRecoilValue(coordinatesState);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [zoom, setZoom] = useRecoilState(zoomState);
   // const [dragging, setDragging] = useState(false);
   const map = useMap();
@@ -46,7 +45,6 @@ export default function MapTiles() {
   async function updateAirports(bounds: LatLngBounds) {
     const ne = bounds.getNorthEast();
     const sw = bounds.getSouthWest();
-    console.log('zoom', zoom)
     const { data: airportData } = await getAirports({
       bounds: {
         northEast: { lat: ne.lat, lon: ne.lng },

ui/src/components/Metars/MetarMap.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MapContainer, useMap } from 'react-leaflet';
+import { MapContainer } from 'react-leaflet';
 import MapTiles from './MapTiles';
 import './metars.css';
 import { coordinatesState, zoomState } from '@/state/map';
@@ -18,8 +18,7 @@ export default function Map() {
         maxZoom={14} // Zoomed in
         minZoom={3} // Zoomed out
         id='map-container'
-        style={{ height: '94.5vh' }}
-        className={`overflow-y-hidden overflow-x-hidden`}
+        className={`map-container`}
         attributionControl={false}
       >
         <MapTiles />

ui/src/components/Metars/MetarModal.tsx

@@ -22,7 +22,7 @@ import './metars.css';
 import SkyConditions from './SkyConditions';
 import { addFavorite, getFavorites, removeFavorite } from '@/api/users';
 import { favoritesState } from '@/state/user';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 interface MetarModalProps {
   airport: Airport;
@@ -31,20 +31,21 @@ interface MetarModalProps {
 }
 
 export default function MetarModal({ airport, isOpen, onClose }: MetarModalProps) {
-  const favorites = useRecoilValue(favoritesState);
+  const [favorites, setFavorites] = useRecoilState(favoritesState);
   const [isFavorite, setIsFavorite] = useState(false);
 
   useEffect(() => {
     setIsFavorite(favorites.includes(airport.icao));
-  }, [favorites, airport]);
+  }, [airport, isOpen]);
 
-  function handleFavorite(value: boolean) {
+  async function updateIsFavorite(value: boolean) {
     setIsFavorite(value);
     if (value) {
-      addFavorite(airport.icao);
+      await addFavorite(airport.icao);
     } else {
-      removeFavorite(airport.icao);
+      await removeFavorite(airport.icao);
     }
+    setFavorites(await getFavorites());
   }
 
   return (
@@ -60,9 +61,9 @@ export default function MetarModal({ airport, isOpen, onClose }: MetarModalProps
           {airport.icao} {airport.name}
         </Link>
         {isFavorite ? (
-          <AiFillStar size={24} className='star' onClick={() => handleFavorite(false)} />
+          <AiFillStar size={24} className='star' onClick={async () => await updateIsFavorite(false)} />
         ) : (
-          <AiOutlineStar size={24} className='star' onClick={() => handleFavorite(true)} />
+          <AiOutlineStar size={24} className='star' onClick={async () => await updateIsFavorite(true)} />
         )}
       </span>
       <div className='min-w-0 flex-1'>
@@ -171,11 +172,6 @@ function MetarInfo({ metar }: { metar: Metar }) {
           <Grid.Col className='gutter-row' span={12}>
             <Grid gutter={18}>
               <Grid.Col className='gutter-row' span={12}>
-                <Card shadow='sm' padding='sm' radius='md' style={{ textAlign: 'center' }}>
-                  <Card.Section>
-                    
-                  </Card.Section>
-                </Card>
               </Grid.Col>
             </Grid>
           </Grid.Col>

ui/src/components/Metars/index.tsx

@@ -1,14 +1,11 @@
 import { Metar } from '@/api/metar.types';
+import { Skeleton } from '@mantine/core';
 import dynamic from 'next/dynamic';
 
 export default async function Metar() {
   const Map = dynamic(() => import('@/components/Metars/MetarMap'), {
     loading: () => (
-      <div className='grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8'>
-        <div className='text-center'>
-          <p className='mt-4 text-3xl font-bold tracking-tight text-gray-300 sm:text-5xl'>Loading...</p>
-        </div>
-      </div>
+      <Skeleton className='map-container' />
     ),
     ssr: false
   });

ui/src/components/Metars/metars.css

@@ -16,3 +16,11 @@
 .modal .star {
   cursor: pointer;
 }
+
+.map-container {
+  /* 100vh - (height of navbar) */
+  height: calc(100vh - 46px);
+  width: 100%;
+  overflow-y: hidden;
+  overflow-x: hidden;
+}