🥅 [#223] fix: handling error better for catalogi api

Author: Xaohs

frontend/src/App.tsx

@@ -5,7 +5,6 @@ import {
   H2,
   Hr,
   Logo,
-  ModalService,
   Outline,
   Select,
 } from "@maykin-ui/admin-ui";
@@ -172,15 +171,13 @@ function App() {
       sidebarItems={sidebarItems}
       grid={!hideUi}
     >
-      <ModalService>
-        <ConfigContext.Provider
-          value={{ templatesContentOnly: true, templatesGrid: false }}
-        >
-          <OBContext.Provider value={{ catalogiChoices }}>
-            <Outlet />
-          </OBContext.Provider>
-        </ConfigContext.Provider>
-      </ModalService>
+      <ConfigContext.Provider
+        value={{ templatesContentOnly: true, templatesGrid: false }}
+      >
+        <OBContext.Provider value={{ catalogiChoices }}>
+          <Outlet />
+        </OBContext.Provider>
+      </ConfigContext.Provider>
     </BaseTemplate>
   );
 }

frontend/src/hooks/index.ts

@@ -1,5 +1,5 @@
 export * from "./useBreadcrumbItems";
-export * from "./useCatalogi";
+export * from "./useCatalogi.tsx";
 export * from "./useChildRoutes";
 export * from "./useCombinedSearchParams";
 export * from "./useCurrentMatch";

frontend/src/hooks/useCatalogi.ts frontend/src/hooks/useCatalogi.tsxfrontend/src/hooks/useCatalogi.ts renamed to frontend/src/hooks/useCatalogi.tsx

@@ -1,3 +1,4 @@
+import { Errors, useAlert } from "@maykin-ui/admin-ui";
 import { cacheGet, cacheSet } from "@maykin-ui/client-common";
 import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router";
@@ -19,6 +20,7 @@ export function useCatalogi(
   const [catalogiChoices, setCatalogiChoices] = useState<
     components["schemas"]["OBOption_str_"][]
   >([]);
+  const alert = useAlert();
 
   const handleCatalogusChange = (newCatalogusId: string) => {
     if (newCatalogusId) {
@@ -57,7 +59,15 @@ export function useCatalogi(
           }
         }
       } catch (error) {
-        console.error("Failed to fetch catalogi choices:", error);
+        const messages: string[] = ["Failed to fetch catalogi choices."];
+        if (error instanceof Response) {
+          messages.push(`Status: ${error.status}, ${error.statusText}`);
+        }
+        alert(
+          "Foutmelding",
+          (<Errors errors={messages} />) as unknown as string, // TODO: Fix in admin-ui
+          "Ok",
+        );
       }
     };
 

frontend/src/main.tsx

@@ -1,3 +1,4 @@
+import { ModalService } from "@maykin-ui/admin-ui";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { RouterProvider, createBrowserRouter } from "react-router";
@@ -11,6 +12,8 @@ const root = document.getElementById("root") as HTMLElement;
 
 createRoot(root).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <ModalService>
+      <RouterProvider router={router} />
+    </ModalService>
   </StrictMode>,
 );