chore: mock info request

Author: mjkeaton

src/constants/endpoints.ts

@@ -1,5 +1,7 @@
+const INFO = "/info"
 const BALANCES = "/balances"
 
 export {
+  INFO,
   BALANCES,
 }

src/lib/api.ts

@@ -0,0 +1,14 @@
+import { INFO } from "@/constants/endpoints";
+import { apiFetch } from "@/utils/api";
+
+export interface InfoResponse {
+  version: string
+}
+
+export async function fetchInfo(): Promise<InfoResponse> {
+  return apiFetch<InfoResponse>(INFO, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+}

src/main.tsx

@@ -8,7 +8,9 @@ import BalancesPage from './pages/balances/BalancesPage'
 import QuotesPage from './pages/quotes/QuotesPage';
 import SettingsPage from './pages/settings/SettingsPage';
 import meta from './constants/meta';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
+const queryClient = new QueryClient();
 
 const prepare = async () => {
   if (meta.apiMocksEnabled) {
@@ -20,16 +22,18 @@ const prepare = async () => {
 void prepare().then(() => {
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
-      <BrowserRouter>
-        <Routes>
-          <Route  element={<Layout />}>
-            <Route index element={<HomePage />} />
-            <Route path="balances" element={<BalancesPage />} />
-            <Route path="quotes" element={<QuotesPage />} />
-            <Route path="settings" element={<SettingsPage />} />
-          </Route>
-        </Routes>
-      </BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Routes>
+            <Route  element={<Layout />}>
+              <Route index element={<HomePage />} />
+              <Route path="balances" element={<BalancesPage />} />
+              <Route path="quotes" element={<QuotesPage />} />
+              <Route path="settings" element={<SettingsPage />} />
+            </Route>
+          </Routes>
+        </BrowserRouter>
+      </QueryClientProvider>
     </StrictMode>,
   )
 })

src/mocks/browser.ts

@@ -6,7 +6,6 @@ const scenarioName = new URLSearchParams(window.location.search).get(
   "scenario"
 ) as unknown as keyof typeof scenarios;
 
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 const runtimeScenarios = scenarios[scenarioName] || [];
 
 export const worker = setupWorker(...runtimeScenarios, ...handlers);

src/mocks/handlers.ts

@@ -1,4 +1,5 @@
+import { fetchInfo } from "./handlers/info"
 
 export const handlers = [
-
+  fetchInfo
 ]

src/mocks/handlers/home.ts

@@ -0,0 +1,11 @@
+import { http, delay, HttpResponse } from "msw"
+import { INFO } from "@/constants/endpoints"
+import type { InfoResponse } from "@/lib/api"
+
+export const fetchInfo = http.get<never, never, InfoResponse>(INFO, async () => {
+  await delay(1000)
+
+  return HttpResponse.json({
+    version: '0.1.0-dev'
+  })
+})

src/mocks/handlers/info.ts

@@ -1,9 +1,41 @@
 import { PageTitle } from "@/components/PageTitle";
+import { Skeleton } from "@/components/ui/skeleton";
+import { fetchInfo } from "@/lib/api";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Suspense } from "react";
+
+
+function Loader() {
+  return (
+    <div className="flex flex-col gap-1.5 py-2">
+      <Skeleton className="h-12 rounded-lg" />
+      <Skeleton className="h-12 rounded-lg" />
+    </div>
+  )
+}
+
+function HomePageBody() {
+  const { data } = useSuspenseQuery({
+    queryKey: ["info"],
+    queryFn: fetchInfo,
+  });
+
+  return (
+    <>
+      <pre>
+        {JSON.stringify(data)}
+      </pre>
+    </>
+  )
+}
 
 export default function HomePage() {
   return (
     <>
       <PageTitle>Home</PageTitle>
+      <Suspense fallback={<Loader />}>
+        <HomePageBody />
+      </Suspense>
     </>
   )
 }

src/pages/home/HomePage.tsx

@@ -0,0 +1,32 @@
+import { API_URL } from "@/constants/api";
+
+export const apiFetch = async <T = unknown>(
+  endpoint: string,
+  options: RequestInit = {}
+): Promise<T> => {
+  const url = `${API_URL}${endpoint}`;
+
+  const response = await fetch(url, {
+    ...options,
+    /* headers: {
+      "Content-Type": "application/json",
+      ...(options.headers || {}),
+    }, */
+    headers: options.headers ?? [],
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.statusText}`);
+  }
+
+  const contentLength = response.headers.get("Content-Length");
+
+  if (
+    contentLength === "0" ||
+    response.headers.get("Content-Type")?.includes("application/json") === false
+  ) {
+    return {} as T;
+  }
+
+  return response.json() as Promise<T>;
+};