Merge pull request #82 from Navigraph/feat/add-packages-api

Add packages API

Author: SkySails

.changeset/slow-carrots-work.md

@@ -0,0 +1,8 @@
+---
+"getting-started": patch
+"navigraph": patch
+"@navigraph/packages": major
+"@navigraph/app": patch
+---
+
+Added `@navigraph/packages` module for interactions with the packages-api.

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 # turbo
 .turbo

examples/getting-started/package.json

@@ -14,7 +14,8 @@
     "react-dom": "^18.2.0",
     "@navigraph/app": "*",
     "@navigraph/auth": "*",
-    "@navigraph/charts": "*"
+    "@navigraph/charts": "*",
+    "@navigraph/packages": "*"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

examples/getting-started/src/App.tsx

@@ -1,73 +1,79 @@
-import { DeviceFlowParams } from "navigraph/auth";
-import { useCallback, useState } from "react";
-import { useNavigraphAuth } from "./hooks/useNavigraphAuth";
-import { charts } from "./lib/navigraph";
+import { NoPackagesFoundError, RequestFailedError } from "@navigraph/app"
+import { NavigraphPackage } from "@navigraph/packages"
+import { useCallback, useState } from "react"
+import Auth from "./components/Auth"
+import Button from "./components/Button"
+import { useNavigraphAuth } from "./hooks/useNavigraphAuth"
+import { charts, packages } from "./lib/navigraph"
+
+const AIRPORT_ICAO = "KJFK"
 
 function App() {
-  const [params, setParams] = useState<DeviceFlowParams | null>(null);
-  const [chartsIndex, setChartsIndex] = useState<string | undefined>(undefined);
+  const [output, setOutput] = useState<string | undefined>(undefined)
+  const [packageDetails, setPackageDetails] = useState<NavigraphPackage | undefined>(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
+
+  const { user } = useNavigraphAuth()
 
-  const { user, isInitialized, signIn, signOut } = useNavigraphAuth();
+  const handleNavigraphError = useCallback(
+    (error: unknown) => {
+      if (error instanceof NoPackagesFoundError) setErrorMessage("No packages found")
+      else if (error instanceof RequestFailedError) setErrorMessage("Failed to fetch packages")
+      else if (error instanceof Error) setErrorMessage("An unknown error occurred")
+      else setErrorMessage("An unknown error occurred: " + error)
+    },
+    [setErrorMessage],
+  )
 
-  const fetchChartsIndex = () =>
-    charts.getChartsIndex({ icao: "KJFK" }).then((d) => setChartsIndex(JSON.stringify(d, null, 2)));
+  const listCharts = () =>
+    charts
+      .getChartsIndex({ icao: AIRPORT_ICAO })
+      .then(charts => setOutput(JSON.stringify(charts, null, 2)))
+      .catch(err => handleNavigraphError(err))
 
-  const handleSignIn = useCallback(
-    () => signIn((p) => setParams(p)).finally(() => setParams(null)),
-    [signIn]
-  );
+  const fetchPackage = () =>
+    packages
+      .getPackage()
+      .then(pkg => setPackageDetails(pkg))
+      .catch(err => handleNavigraphError(err))
 
-  const isLoginInProgress = !!params;
+  const listPackages = () =>
+    packages
+      .listPackages()
+      .then(pkgs => setOutput(JSON.stringify(pkgs, null, 2)))
+      .catch(err => handleNavigraphError(err))
 
   return (
     <main className="dark:bg-black dark:text-white flex flex-col space-y-10 items-center justify-center min-h-screen ">
-      {!isInitialized && <div>Loading...</div>}
-
       <h1 className="text-6xl text-black dark:text-white font-bold">Navigraph SDK Demo</h1>
 
-      <button
-        className="py-2 px-4 font-semibold rounded-md bg-black text-white dark:bg-white dark:text-black"
-        onClick={() => !isLoginInProgress && (user ? signOut() : handleSignIn())}
-      >
-        {user ? "Sign out" : !isLoginInProgress ? "Sign in" : "Signing in..."}
-      </button>
-
-      {params?.verification_uri_complete && !user && (
-        <div className="flex flex-col items-center gap-2">
-          <a
-            href={params.verification_uri_complete}
-            className="text-blue-600 bg-gray-500/10 p-3 rounded-lg"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Open sign in page
-          </a>
-          <span className="opacity-50">or scan this QR code:</span>
-          <div className="p-2 rounded-lg bg-white mt-1">
-            <img
-              src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${params.verification_uri_complete}`}
-            />
-          </div>
-        </div>
-      )}
+      <Auth />
 
       {user && (
         <>
-          <h2 className="text-2xl">
-            Welcome, <span className="text-blue-400 font-bold">{user.preferred_username}</span>
-          </h2>
-          <button
-            onClick={fetchChartsIndex}
-            className="bg-white text-black py-2 px-4 font-semibold rounded-md"
-          >
-            Fetch charts index
-          </button>
+          <div className="flex flex-col items-center space-y-2">
+            <h2 className="text-2xl mb-2">
+              Welcome, <span className="text-blue-400 font-bold">{user.preferred_username}</span>
+            </h2>
+
+            <Button onClick={listCharts}>List {AIRPORT_ICAO} charts</Button>
+            <Button onClick={listPackages}>List available packages</Button>
+            <Button onClick={fetchPackage}>Fetch default package</Button>
+
+            {packageDetails && (
+              <a href={packageDetails.file?.url} className="text-blue-500 hover:text-blue-700">
+                Download {packageDetails.format}
+              </a>
+            )}
+
+            {errorMessage && <span className="text-red-500 hover:text-red-700">{errorMessage}</span>}
+          </div>
         </>
       )}
 
-      {chartsIndex && <pre className="text-sm max-h-[40vh] overflow-auto">{chartsIndex}</pre>}
+      {output && <pre className="text-sm max-h-[40vh] max-w-[90vw] overflow-auto">{output}</pre>}
     </main>
-  );
+  )
 }
 
-export default App;
+export default App

examples/getting-started/src/components/Auth.tsx

@@ -0,0 +1,62 @@
+import { DeviceFlowTokenExpiredError } from "@navigraph/app"
+import { DeviceFlowParams } from "@navigraph/auth"
+import { useCallback, useState } from "react"
+import { useNavigraphAuth } from "../hooks/useNavigraphAuth"
+
+export default function Auth() {
+  const [error, setError] = useState<Error | null>(null)
+  const [params, setParams] = useState<DeviceFlowParams | null>(null)
+  const { user, isInitialized, signIn, signOut } = useNavigraphAuth()
+
+  const handleSignIn = useCallback(
+    () =>
+      signIn(params => {
+        setParams(params)
+        setError(null)
+      })
+        .catch(err => setError(err))
+        .finally(() => setParams(null)),
+    [signIn],
+  )
+
+  const isLoginInProgress = !!params
+
+  return (
+    <>
+      {!isInitialized && <div>Loading...</div>}
+
+      {isInitialized && (
+        <button
+          className="py-2 px-4 font-semibold rounded-md bg-black text-white dark:bg-white dark:text-black"
+          onClick={() => !isLoginInProgress && (user ? signOut() : handleSignIn())}>
+          {user ? "Sign out" : !isLoginInProgress ? "Sign in" : "Signing in..."}
+        </button>
+      )}
+
+      {error && (
+        <div className="text-red-500">
+          {error instanceof DeviceFlowTokenExpiredError ? "Session expired, try again!" : error.message}
+        </div>
+      )}
+
+      {params?.verification_uri_complete && !user && (
+        <div className="flex flex-col items-center gap-2">
+          <a
+            href={params.verification_uri_complete}
+            className="text-blue-600 bg-gray-500/10 p-3 rounded-lg"
+            target="_blank"
+            rel="noreferrer">
+            Open sign in page
+          </a>
+          <span className="opacity-50">or scan this QR code:</span>
+          <div className="p-2 rounded-lg bg-white mt-1">
+            <img
+              src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${params.verification_uri_complete}`}
+              alt="QR Code for sign in."
+            />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

examples/getting-started/src/components/Button.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+export default function Button(props: React.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      className="bg-black dark:bg-white text-white dark:text-black py-2 px-4 font-semibold rounded-md"
+      {...props}
+    />
+  )
+}

examples/getting-started/src/lib/navigraph.ts

@@ -1,18 +1,20 @@
 import { initializeApp, NavigraphApp, Scope } from "@navigraph/app"
 import { getAuth } from "@navigraph/auth"
 import { getChartsAPI } from "@navigraph/charts"
+import { getPackagesAPI } from "@navigraph/packages"
 
 const config: NavigraphApp = {
   clientId: import.meta.env.NG_CLIENT_ID,
   clientSecret: import.meta.env.NG_CLIENT_SECRET,
   scopes: [Scope.CHARTS, Scope.FMSDATA],
 }
 
-if (config.clientId.includes("<")) {
+if (!config.clientId || config.clientId.includes("<")) {
   alert("Please add your client credentials in lib/navigraph.ts.")
 }
 
 initializeApp(config)
 
 export const auth = getAuth()
 export const charts = getChartsAPI()
+export const packages = getPackagesAPI()

packages/app/src/shared/errors.ts

@@ -47,3 +47,17 @@ export class NonGeoreferencedChartError extends Error {
     this.name = "NonGeoreferencedChartError"
   }
 }
+
+export class NoPackagesFoundError extends Error {
+  constructor() {
+    super("No packages found")
+    this.name = "NoPackagesFoundError"
+  }
+}
+
+export class RequestFailedError extends Error {
+  constructor(resource: string, reason?: string) {
+    super(`Failed to fetch ${resource}${reason ? `. Reason: ${reason}` : ""}`)
+    this.name = "RequestFailedError"
+  }
+}

packages/charts/package.json

@@ -37,8 +37,5 @@
   "dependencies": {
     "@navigraph/auth": "2.5.0",
     "@navigraph/app": "1.3.4"
-  },
-  "devDependencies": {
-    "@types/leaflet": "^1.9.3"
   }
 }

packages/leaflet/package.json

@@ -41,6 +41,7 @@
     "leaflet": "^1.9.4"
   },
   "devDependencies": {
-    "@navigraph/auth": "2.5.0"
+    "@navigraph/auth": "2.5.0",
+    "@types/leaflet": "^1.9.3"
   }
 }