add and display satellite types

scott-the-programmer · Jan 11, 2024 · e5e436f · e5e436f
1 parent b53611b
commit e5e436f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/src/components/SatelliteMap.tsx b/src/components/SatelliteMap.tsx
@@ -57,6 +57,7 @@ const SatelliteMap: React.FC = () => {
             longitude={satellite.longitude}
             altitude={satellite.altitude}
             birthday={satellite.age}
+            type={satellite.type}
           >
             <Satellite
               rotation={rotation}

diff --git a/src/components/SatellitePopup.tsx b/src/components/SatellitePopup.tsx
@@ -8,13 +8,16 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "../shadcn/ui/drawer";
+import { SatelliteType } from "../lib/satellite-client";
+import { read } from "fs";
 
 type SatellitePopupProps = {
   name: string;
   latitude: number;
   longitude: number;
   altitude: number;
   birthday: Date;
+  type: SatelliteType;
   children: React.ReactNode;
 };
 
@@ -24,9 +27,19 @@ const SatellitePopup: React.FC<SatellitePopupProps> = ({
   longitude,
   altitude,
   birthday,
+  type,
   children,
 }) => {
   const age = calculateAge(birthday);
+  let readableType = "";
+  switch (type) {
+    case SatelliteType.WeatherStation:
+      readableType = "Weather Station";
+      break;
+    default:
+      readableType = type[0].toUpperCase() + type.slice(1);
+  }
+
   return (
     <Drawer>
       <DrawerTrigger>{children}</DrawerTrigger>
@@ -37,8 +50,8 @@ const SatellitePopup: React.FC<SatellitePopupProps> = ({
           </DrawerHeader>
           <div className="table">
             <div className="table-row mx-auto my-auto">
-              <div className="table-cell w-1/2 align-top pt-5">
-                <DrawerDescription>Type: Weather Station</DrawerDescription>
+              <div className="table-cell w-1/2 align-top pt-5 text-center">
+                <DrawerDescription>Type: {readableType}</DrawerDescription>
                 <DrawerDescription>Latitude: {latitude}</DrawerDescription>
                 <DrawerDescription>Longitude: {longitude}</DrawerDescription>
                 <DrawerDescription>Altitude: {altitude}km</DrawerDescription>

diff --git a/src/lib/satellite-client.ts b/src/lib/satellite-client.ts
@@ -4,20 +4,31 @@ export type SatelliteInfo = {
   longitude: number;
   age: Date;
   altitude: number;
+  type: SatelliteType;
 };
 
+export enum SatelliteType {
+  WeatherStation = "weatherstation",
+  ISS = "iss",
+  Iridium = "iridium",
+  Starlink = "starlink",
+  TV = "tv",
+  Brightest = "brightest",
+  Celestis = "celestis",
+}
+
 export class SatelliteClient {
   baseUrl: string;
 
   constructor(baseUrl: string) {
     this.baseUrl = baseUrl;
   }
 
-  private async fetchSatellites(endpoint: string): Promise<SatelliteInfo[]> {
+  private async fetchSatellites(type: string): Promise<SatelliteInfo[]> {
     try {
-      const response = await fetch(`${this.baseUrl}/${endpoint}`);
+      const response = await fetch(`${this.baseUrl}/${type}`);
       if (!response.ok) {
-        throw new Error(`Error fetching ${endpoint}: ${response.statusText}`);
+        throw new Error(`Error fetching ${type}: ${response.statusText}`);
       }
       const satellites = await response.json();
       const typedResponse: SatelliteInfo[] = [];
@@ -28,27 +39,28 @@ export class SatelliteClient {
           longitude: s.longitude,
           age: new Date(s.age),
           altitude: s.altitude,
+          type: type as SatelliteType,
         });
       });
 
       return typedResponse;
     } catch (error) {
-      console.error(`Error fetching ${endpoint}:`, error);
+      console.error(`Error fetching ${type}:`, error);
       return [];
     }
   }
 
   async getSatellites(): Promise<SatelliteInfo[]> {
-    const endpoints = [
-      "weatherstations",
-      "iss",
-      "iridiums",
-      "starlinks",
-      "tv",
-      "brightest",
-      "celestis",
+    const types = [
+      SatelliteType.WeatherStation,
+      SatelliteType.ISS,
+      SatelliteType.Iridium,
+      SatelliteType.Starlink,
+      SatelliteType.TV,
+      SatelliteType.Brightest,
+      SatelliteType.Celestis,
     ];
-    const promises = endpoints.map((endpoint) =>
+    const promises = types.map((endpoint) =>
       this.fetchSatellites(endpoint),
     );
     const results = await Promise.all(promises);