Add toggle for FLIGHT_RADAR_SANDBOX_FLAG and fix Suspense boundary error

.env.example

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
+FLIGHT_RADAR_SANDBOX_FLAG="true"
 FLIGHT_RADAR_TOKEN=
 AVIATIONSTACK_API_TOKEN=

README.md

@@ -17,6 +17,7 @@ Created by [@matiasngf](https://github.com/matiasngf) and [@delbaoliveira](https
 
 - `NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN`: The map is generated using [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/).
 - `FLIGHT_RADAR_TOKEN`: Real flight tracking data is provided by [flightradar24.com](https://www.flightradar24.com/). It requires a [subscription](https://fr24api.flightradar24.com/subscriptions-and-credits), but also provides a sandbox key.
+- `FLIGHT_RADAR_SANDBOX_FLAG`: Set this to `true` to use the sandbox environment of the FlightRadar24 API, which provides mock data for testing purposes. Set it to `false` to use the live environment.
 - `AVIATIONSTACK_API_TOKEN`: The specific flight data is provided by [aviationstack.com](https://aviationstack.com/). The personal subscription is **free**. However, we found the API was unreliable, and to reduce the risk of showing an incomplete flight informationduring the keynote, we used mock data.
 
 3. Navigate to [http://localhost:3000/explore/sfo](http://localhost:3000/explore/sfo) to see the demo.

app/flights/[id]/page.tsx

@@ -6,7 +6,9 @@ import { Suspense } from 'react';
 export default async function Page({ params }) {
   return (
     <>
-      <PlaneDetails params={params} />
+      <Suspense fallback={<FlightSkeleton />}>
+        <PlaneDetails params={params} />
+      </Suspense>
       <Suspense fallback={<FlightSkeleton />}>
         <FlightActivity params={params} />
       </Suspense>

app/ui/plane-details.tsx

@@ -4,6 +4,7 @@ import Plane from './assets/plane.svg';
 import Stars from './assets/stars.svg';
 import { getPlaneDetails } from '../utils/get-plane-details';
 import { PlaneDetailsType } from './types';
+import { Suspense } from 'react';
 
 export async function PlaneDetails({
   params,
@@ -14,60 +15,62 @@ export async function PlaneDetails({
   const plane = (await getPlaneDetails(id)) as PlaneDetailsType;
 
   return (
-    <div className="text-white">
-      <div className="relative aspect-video xl:aspect-[7/3] max-w-screen-lg mx-auto">
-        <div className="absolute left-0 top-0 w-full h-full">
-          <Image
-            className="absolute inset-0 object-cover"
-            src={BackgroundGlow}
-            alt=""
-            fill
-            priority
-          />
-          <div className="stars-container absolute inset-0 mix-blend-lighten opacity-60">
+    <Suspense fallback={<div>Loading plane details...</div>}>
+      <div className="text-white">
+        <div className="relative aspect-video xl:aspect-[7/3] max-w-screen-lg mx-auto">
+          <div className="absolute left-0 top-0 w-full h-full">
             <Image
-              className="absolute inset-0 object-contain"
-              src={Stars}
-              alt="starts"
+              className="absolute inset-0 object-cover"
+              src={BackgroundGlow}
+              alt=""
               fill
               priority
             />
-            <Image
-              className="absolute inset-0 object-contain -translate-x-full"
-              src={Stars}
-              alt="starts"
-              fill
-            />
-          </div>
-          <div className="absolute inset-4">
-            <Image
-              className="absolute inset-0 object-contain"
-              src={Plane}
-              alt="plane"
-              fill
-              priority
-            />
-            <div className="absolute left-[61%] top-[54%] w-[5%] aspect-square -translate-x-1/2 -translate-y-1/2">
-              <div className="plane-light" />
+            <div className="stars-container absolute inset-0 mix-blend-lighten opacity-60">
+              <Image
+                className="absolute inset-0 object-contain"
+                src={Stars}
+                alt="starts"
+                fill
+                priority
+              />
+              <Image
+                className="absolute inset-0 object-contain -translate-x-full"
+                src={Stars}
+                alt="starts"
+                fill
+              />
+            </div>
+            <div className="absolute inset-4">
+              <Image
+                className="absolute inset-0 object-contain"
+                src={Plane}
+                alt="plane"
+                fill
+                priority
+              />
+              <div className="absolute left-[61%] top-[54%] w-[5%] aspect-square -translate-x-1/2 -translate-y-1/2">
+                <div className="plane-light" />
+              </div>
             </div>
           </div>
+          <div className="relative p-4 text-lg font-bold max-w-screen-lg mx-auto">
+            <h1 className="relative">
+              {plane.model_name}/{plane.registration_number}
+            </h1>
+            <p>{plane.airline.name}</p>
+          </div>
         </div>
-        <div className="relative p-4 text-lg font-bold max-w-screen-lg mx-auto">
-          <h1 className="relative">
-            {plane.model_name}/{plane.registration_number}
-          </h1>
-          <p>{plane.airline.name}</p>
-        </div>
-      </div>
-      <div className="p-4 max-w-screen-lg mx-auto">
-        <div className="flex gap-4 leading-tight text-sm opacity-70">
-          <div className="shrink-0">
-            <p className="leading-tight">{plane.plane_age} years old</p>
-            <p className="leading-tight">{plane.miles_flown} miles</p>
+        <div className="p-4 max-w-screen-lg mx-auto">
+          <div className="flex gap-4 leading-tight text-sm opacity-70">
+            <div className="shrink-0">
+              <p className="leading-tight">{plane.plane_age} years old</p>
+              <p className="leading-tight">{plane.miles_flown} miles</p>
+            </div>
+            <p className="text-pretty">{plane.description}</p>
           </div>
-          <p className="text-pretty">{plane.description}</p>
         </div>
       </div>
-    </div>
+    </Suspense>
   );
 }

app/utils/get-flight-tracks.ts

@@ -1,7 +1,11 @@
 "use server"
 
 export async function getFlightTracks(id: string) {
-  const baseUrl = 'https://fr24api.flightradar24.com/api/flight-tracks';
+  const SANDBOX: boolean = process.env.FLIGHT_RADAR_SANDBOX_FLAG === 'true' ? true : false;
+
+  const baseUrl = SANDBOX ? 'https://fr24api.flightradar24.com/api/sandbox/flight-tracks' : 'https://fr24api.flightradar24.com/api/flight-tracks';
+
+  console.log('baseUrl', SANDBOX, baseUrl);
 
   const query = new URLSearchParams({ flight_id: id });
 

app/utils/get-flights.ts

@@ -5,8 +5,11 @@ export async function getFlights(params: Promise<{ airport: string }>) {
   const { airport } = await params;
   const { latitude, longitude } = geocode(airport);
 
-  const baseUrl =
-    'https://fr24api.flightradar24.com/api/live/flight-positions/full';
+  const SANDBOX: boolean = process.env.FLIGHT_RADAR_SANDBOX_FLAG === 'true' ? true : false;
+
+  const baseUrl = SANDBOX ? 'https://fr24api.flightradar24.com/api/sandbox/live/flight-positions/full' : 'https://fr24api.flightradar24.com/api/live/flight-positions/full';
+
+  console.log('baseUrl', SANDBOX, baseUrl);
 
   const query = new URLSearchParams({
     bounds: getBounds(latitude, longitude), // show planes within 60km of airport