From 9ac98b9401c1da3ffd8aaf9d6cececdbe7d62d8f Mon Sep 17 00:00:00 2001
From: Adrian Andersen <adrianandersen@protonmail.com>
Date: Mon, 3 Feb 2025 15:38:57 +0100
Subject: [PATCH] chore: start migrating away from BlFetcher

---
 frontend/src/app/layout.tsx                    |  4 ++--
 frontend/src/components/BranchSelect.tsx       | 18 +++++++++++-------
 .../admin/waiting-list/WaitingList.tsx         | 16 +++++++++++++---
 frontend/src/utils/api/bl-api-request.ts       |  4 ++++
 4 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/utils/api/bl-api-request.ts

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index d3f3080..28a99f6 100644
--- a/frontend/src/app/layout.tsx
+++ b/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>
diff --git a/frontend/src/components/BranchSelect.tsx b/frontend/src/components/BranchSelect.tsx
index be703ee..ddc0cc2 100644
--- a/frontend/src/components/BranchSelect.tsx
+++ b/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();
 
diff --git a/frontend/src/components/admin/waiting-list/WaitingList.tsx b/frontend/src/components/admin/waiting-list/WaitingList.tsx
index f069454..d9633c2 100644
--- a/frontend/src/components/admin/waiting-list/WaitingList.tsx
+++ b/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 {
diff --git a/frontend/src/utils/api/bl-api-request.ts b/frontend/src/utils/api/bl-api-request.ts
new file mode 100644
index 0000000..f14c229
--- /dev/null
+++ b/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;
+}