chore: start migrating away from BlFetcher

frontend/src/app/layout.tsx

@@ -2,7 +2,7 @@ import { ThemeProvider } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 import { Metadata } from "next";
-import { ReactNode } from "react";
+import { ReactNode, Suspense } from "react";
 
 import AuthLinker from "@/components/AuthLinker";
 import DynamicHeightProvider from "@/components/DynamicHeightProvider";
@@ -35,7 +35,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
                   <AuthLinker>
                     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
                     <CssBaseline />
-                    {children}
+                    <Suspense>{children}</Suspense>
                   </AuthLinker>
                 </ThemeProvider>
               </AppRouterCacheProvider>

frontend/src/components/BranchSelect.tsx

@@ -12,20 +12,24 @@ import { useQuery } from "@tanstack/react-query";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 
-import BlFetcher from "@/api/blFetcher";
+import unpack from "@/utils/api/bl-api-request";
 import useApiClient from "@/utils/api/useApiClient";
 import { useGlobalState } from "@/utils/useGlobalState";
 
 const BranchSelect = ({ isNav }: { isNav?: boolean }) => {
   const client = useApiClient();
+  const branchQuery = {
+    query: { active: true, sort: "name" },
+  };
   const { data: branches } = useQuery({
-    queryKey: [
-      client.$url("collection.branches.getAll", {
-        query: { active: true, sort: "name" },
-      }),
-    ],
-    queryFn: ({ queryKey }) => BlFetcher.get<Branch[]>(queryKey[0] ?? ""),
+    queryKey: [client.$url("collection.branches.getAll", branchQuery)],
+    queryFn: () =>
+      client
+        .$route("collection.branches.getAll")
+        .$get(branchQuery)
+        .then(unpack<Branch[]>),
   });
+  console.log(branches);
 
   const { selectedBranchId, selectBranch } = useGlobalState();
 

frontend/src/components/admin/waiting-list/WaitingList.tsx

@@ -5,9 +5,9 @@ import { Item } from "@boklisten/backend/shared/item/item";
 import { Alert, AlertTitle } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 
-import BlFetcher from "@/api/blFetcher";
 import CreateWaitingListEntry from "@/components/admin/waiting-list/CreateWaitingListEntry";
 import WaitingListTable from "@/components/admin/waiting-list/WaitingListTable";
+import unpack from "@/utils/api/bl-api-request";
 import useApiClient from "@/utils/api/useApiClient";
 
 export default function WaitingList() {
@@ -19,7 +19,11 @@ export default function WaitingList() {
     error: itemsError,
   } = useQuery({
     queryKey: [client.$url("collection.items.getAll")],
-    queryFn: ({ queryKey }) => BlFetcher.get<Item[]>(queryKey[0] ?? ""),
+    queryFn: () =>
+      client
+        .$route("collection.items.getAll")
+        .$get()
+        .then(unpack<Item[]>),
   });
 
   const {
@@ -32,7 +36,13 @@ export default function WaitingList() {
         query: { active: true, sort: "name" },
       }),
     ],
-    queryFn: ({ queryKey }) => BlFetcher.get<Branch[]>(queryKey[0] ?? ""),
+    queryFn: () =>
+      client
+        .$route("collection.branches.getAll")
+        .$get({
+          query: { active: true, sort: "name" },
+        })
+        .then(unpack<Branch[]>),
   });
 
   const {

frontend/src/utils/api/bl-api-request.ts

@@ -0,0 +1,4 @@
+// Unpack data that is encapsulated in a BlApiResponse
+export default function unpack<T>(response: unknown) {
+  return (response as { data: { data: T } }).data.data;
+}