chg: handle load config with absolute urls

Author: nicokant

src/components/Header.tsx

@@ -6,7 +6,7 @@ export function Header({ icon }: { icon: string }) {
       <div className="container mx-auto px-4 py-8">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
-            <img src={icon} className="h-12 w-auto" />
+            {icon && <img src={icon} className="h-12 w-auto" />}
             <div>
               <div className="text-3xl font-bold">NINA</div>
               <div className="text-sm opacity-90">Norsk institutt for naturforskning</div>

src/routes/$mapId.tsx

@@ -1,29 +1,33 @@
 import { ErrorComponentProps, Outlet, ErrorComponent, createFileRoute, Link } from '@tanstack/react-router';
-import { DEFAULT_LANG, mapConfigQueryOptions } from '../config';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { DEFAULT_LANG, mapConfigQueryOptions, storeConfigQueryOptions } from '../config';
 import { Fragment, useEffect } from 'react';
 import { AxiosError } from 'axios';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { useAppStore } from '../hooks/app';
 import { useUIActions, useUIStore } from '../hooks/ui';
 import { Head } from '../components/Head';
 import { useTranslation } from 'react-i18next';
 import { Header } from '../components/Header';
 import { Footer } from '../components/HomeFooter';
 
+class MapNotFoundError extends Error {}
+
 export const Route = createFileRoute('/$mapId')({
   component: RootComponent,
-  loader: ({ params: { mapId }, context: { queryClient } }) => {
-    return queryClient.ensureQueryData(
-      mapConfigQueryOptions(`${useUIStore.getState().defaultConfig}/${mapId}/config.json`),
-    );
+  loader: async ({ params: { mapId }, context: { queryClient } }) => {
+    const config = useUIStore.getState().defaultConfig;
+    const storeResponse = await queryClient.fetchQuery(storeConfigQueryOptions(config));
+    const map = storeResponse.data.maps.find(m => m.id === mapId);
+    if (map) {
+      const configResponse = await queryClient.fetchQuery(mapConfigQueryOptions(map.url));
+      return configResponse.data;
+    }
+    throw new MapNotFoundError(mapId);
   },
   errorComponent: ConfigErrorComponent,
 });
 
 function ConfigErrorComponent({ error }: ErrorComponentProps) {
-  if (error instanceof AxiosError) {
+  if (error instanceof AxiosError || MapNotFoundError) {
     return (
       <div className="min-h-screen bg-base-100 flex flex-col">
         <Header icon="" />
@@ -56,20 +60,15 @@ function ConfigErrorComponent({ error }: ErrorComponentProps) {
 }
 
 function RootComponent() {
-  const defaultConfigPath = useUIStore(state => state.defaultConfig);
-  const ready = useUIStore(state => state.ready);
-  const { mapId } = Route.useParams();
-  const { isLoading, data: config } = useSuspenseQuery(
-    mapConfigQueryOptions(`${defaultConfigPath}/${mapId}/config.json`),
-  );
+  const config = Route.useLoaderData();
   const uiActions = useUIActions();
   const { i18n } = useTranslation();
 
   useEffect(() => {
-    useAppStore.setState(() => config.data);
+    useAppStore.setState(() => config);
     if (i18n?.changeLanguage) {
       i18n
-        .changeLanguage(config.data.config.language ?? DEFAULT_LANG)
+        .changeLanguage(config.config.language ?? DEFAULT_LANG)
         .then(() => uiActions.setReady(true))
         .catch(console.error);
     } else {
@@ -79,15 +78,7 @@ function RootComponent() {
     return () => {
       uiActions.setReady(false);
     };
-  }, [uiActions, config.data, i18n]);
-
-  if (isLoading || !ready) {
-    return (
-      <div className="flex justify-center items-center w-screen h-screen bg-primary/20">
-        <FontAwesomeIcon icon={faSpinner} spin />
-      </div>
-    );
-  }
+  }, [uiActions, config, i18n]);
 
   return (
     <Fragment>

src/routes/index.tsx

@@ -1,10 +1,10 @@
 import { createFileRoute, ErrorComponent, ErrorComponentProps, Link } from '@tanstack/react-router';
-import { storeConfigQueryOptions } from '../config';
 import { useUIStore } from '../hooks/ui';
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
 import { Header } from '../components/Header';
 import { Footer } from '../components/HomeFooter';
+import { AxiosError } from 'axios';
+import { storeConfigQueryOptions } from '../config';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 function ConfigErrorComponent({ error }: ErrorComponentProps) {
   if (error instanceof AxiosError) {
@@ -36,18 +36,18 @@ function ConfigErrorComponent({ error }: ErrorComponentProps) {
 export const Route = createFileRoute('/')({
   component: RouteComponent,
   loader: ({ context: { queryClient } }) => {
-    return queryClient.ensureQueryData(storeConfigQueryOptions(`${useUIStore.getState().defaultConfig}/maps.json`));
+    return queryClient.ensureQueryData(storeConfigQueryOptions(useUIStore.getState().defaultConfig));
   },
   errorComponent: ConfigErrorComponent,
 });
 
 function RouteComponent() {
   const defaultConfigPath = useUIStore(state => state.defaultConfig);
-  const { isLoading, data, isError } = useSuspenseQuery(storeConfigQueryOptions(`${defaultConfigPath}/maps.json`));
+  const { data, isLoading, isError } = useSuspenseQuery(storeConfigQueryOptions(defaultConfigPath));
 
   return (
     <div className="min-h-screen bg-base-100 flex flex-col">
-      <Header icon={defaultConfigPath + data.data.icon} />
+      <Header icon={data.data.icon} />
 
       <main className="container mx-auto px-4 py-8 grow">
         <div className="mb-8">

src/types.ts

@@ -212,11 +212,14 @@ export interface PMTileSource extends Partial<Source> {
 
 export type LayerConfig = TitilerSource | PMTileSource | RasterSource | Partial<Source>;
 
+export interface StoreMap {
+  title: string;
+  description?: string;
+  id: string;
+  url: string;
+}
+
 export interface StoreConfig {
   icon: string;
-  maps: {
-    title: string;
-    description?: string;
-    id: string;
-  }[];
+  maps: StoreMap[];
 }