feat: packages list

Author: professoralex13

examples/playground/package.json

@@ -15,6 +15,7 @@
     "@navigraph/auth": "*",
     "@navigraph/charts": "*",
     "@navigraph/leaflet": "*",
+    "@navigraph/packages": "*",
     "@tanstack/react-query": "^5.52.2",
     "clsx": "^2.1.1",
     "leaflet": "^1.9.4",

examples/playground/src/Root.tsx

@@ -8,6 +8,7 @@ import Auth from "./pages/Auth"
 import Tiles from "./pages/Tiles"
 import Charts from "./pages/Charts"
 import Amdb from "./pages/Amdb"
+import Packages from "./pages/Packages"
 
 function Root() {
   useAppConfigLoader();
@@ -22,6 +23,7 @@ function Root() {
         <Route path="/tiles" element={<Tiles />} />
         <Route path="/charts" element={<Charts />} />
         <Route path="/amdb/*" element={<Amdb />} />
+        <Route path="/packages" element={<Packages />} />
       </Routes>
       <Outlet />
       <MainWindow />

examples/playground/src/components/SideBar.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { IconType } from "react-icons";
-import { FaDatabase, FaGlobe, FaMap, FaUser } from "react-icons/fa";
+import { FaDatabase, FaDownload, FaGlobe, FaMap, FaUser } from "react-icons/fa";
 import { MdOutlineSettings } from "react-icons/md";
 import { NavLink } from "react-router-dom";
 import { appState } from "../state/app";
@@ -40,6 +40,7 @@ export default function SideBar() {
             <SideBarLink path="/tiles" icon={FaGlobe} disabled={!user?.scope.includes(Scope.TILES)}>Tiles</SideBarLink>
             <SideBarLink path="/charts" icon={FaMap} disabled={!user?.scope.includes(Scope.CHARTS)}>Charts</SideBarLink>
             <SideBarLink path="/amdb" icon={FaDatabase} disabled={!user?.scope.includes(Scope.AMDB)}>AMDB</SideBarLink>
+            <SideBarLink path="/packages" icon={FaDownload} disabled={!user?.scope.includes(Scope.FMSDATA)}>Packages</SideBarLink>
         </div >
     )
 }

examples/playground/src/components/map/index.tsx

@@ -83,8 +83,6 @@ function NavigraphTiles({ auth }: { auth: NavigraphAuth }) {
 
     const preset = useMemo<PresetConfig>(() => createPreset(source, theme, faa, tac), [source, theme, faa, tac]);
 
-    console.log(preset)
-
     const ngLayer = useRef(new NavigraphTileLayer(auth, preset));
 
     useEffect(() => {

examples/playground/src/components/protectedPage.tsx

@@ -7,10 +7,12 @@ import { Scope } from "@navigraph/app";
 import { ReactNode } from "react";
 import { getChartsAPI } from "@navigraph/charts";
 import { getAmdbAPI } from "@navigraph/amdb";
+import { getPackagesAPI } from "@navigraph/packages";
 
 interface PropsStruct {
-    [Scope.CHARTS]: ReturnType<typeof getChartsAPI>
     [Scope.AMDB]: ReturnType<typeof getAmdbAPI>
+    [Scope.CHARTS]: ReturnType<typeof getChartsAPI>
+    [Scope.FMSDATA]: ReturnType<typeof getPackagesAPI>
 }
 
 export function protectedPage<P extends {}, S extends Scope[]>(Component: (props: P & { auth: NavigraphAuth, user: User } & Pick<PropsStruct, Extract<S[number], keyof PropsStruct>>) => ReactNode, requiredScopes: S) {
@@ -26,9 +28,10 @@ export function protectedPage<P extends {}, S extends Scope[]>(Component: (props
             return null
         }
 
-        const charts = user.scope.includes(Scope.CHARTS) ? getChartsAPI() : undefined;
         const amdb = user.scope.includes(Scope.AMDB) ? getAmdbAPI() : undefined;
+        const charts = user.scope.includes(Scope.CHARTS) ? getChartsAPI() : undefined;
+        const fmsdata = user.scope.includes(Scope.FMSDATA) ? getPackagesAPI() : undefined;
 
-        return <Component user={user} auth={app.auth} amdb={amdb} charts={charts} {...props as unknown as any} />;
+        return <Component user={user} auth={app.auth} amdb={amdb} charts={charts} fmsdata={fmsdata} {...props as unknown as any} />;
     };
 }

examples/playground/src/pages/Auth.tsx

@@ -5,7 +5,7 @@ import { appState } from "../state/app";
 import { redirect } from "react-router-dom";
 import { userState } from "../state/user";
 import { authState } from "../state/auth";
-import { DeviceFlowTokenExpiredError } from "@navigraph/app";
+import { DeviceFlowTokenExpiredError, InvalidScopeError } from "@navigraph/app";
 import JsonView from "../components/JsonView";
 
 export default function Auth() {
@@ -45,7 +45,7 @@ export default function Auth() {
 
             {error && (
                 <div className="text-red-500">
-                    {error instanceof DeviceFlowTokenExpiredError ? "Session expired, try again!" : error.message}
+                    {error instanceof DeviceFlowTokenExpiredError ? "Session expired, try again!" : error instanceof InvalidScopeError ? "Invalid scope provided, perhaps the configured client does not have permission for all requested scopes" : error.message}
                 </div>
             )}
 

examples/playground/src/pages/Packages.tsx

@@ -0,0 +1,36 @@
+import JsonView from "../components/JsonView";
+import { protectedPage } from "../components/protectedPage";
+import { Scope } from "@navigraph/app";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+import SpinningCircles from "react-loading-icons/dist/esm/components/spinning-circles";
+
+const Packages = protectedPage(({ fmsdata }) => {
+    const { data, isLoading } = useQuery({
+        queryKey: ['packages-list'],
+        queryFn: () => fmsdata.listPackages(),
+    })
+
+    return (
+        <div className="page-container flex flex-col items-center gap-3 px-3">
+            <h1>Available Packages</h1>
+
+            {isLoading && <SpinningCircles />}
+
+            {data &&
+                <>
+                    <span className="text-sm text-gray-100">Note that this is only a list of packages available for this client</span>
+                    <div className="flex flex-col gap-3 overflow-auto px-3 self-stretch">
+                        {data.map((item) =>
+                            <Link to={item.file.url} download>
+                                <JsonView onClick={() => null} content={item} />
+                            </Link>
+                        )}
+                    </div>
+                </>
+            }
+        </div>
+    )
+}, [Scope.FMSDATA]);
+
+export default Packages;