Start work on react-query

frontend/leeds-beer-quest/src/lib/api.ts

@@ -1,8 +1,20 @@
+import { TTag } from "./types";
+
 export class API {
     constructor(private baseAPIUrl: string) {}
 
-    async getVenues() {
+    getVenues = async() => {
         const response = await fetch(`${this.baseAPIUrl}/venue`);
-        await response.text();
+        await response.json();
+    }
+
+    getCategories = async() => {
+        const response = await fetch(`${this.baseAPIUrl}/category`);
+        await response.json();
+    }
+
+    getTags = async (): Promise<TTag[]> => {
+        const response = await fetch(`${this.baseAPIUrl}/tag`);
+        return await response.json();
     }
 }

frontend/leeds-beer-quest/src/lib/types.ts

@@ -0,0 +1,4 @@
+export type TTag = {
+    id: number;
+    name: string;
+};

frontend/leeds-beer-quest/src/main.tsx

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
@@ -11,8 +12,12 @@ const router = createBrowserRouter([
   },
 ]);
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </React.StrictMode>
 )

frontend/leeds-beer-quest/src/pages/index.tsx

@@ -1,11 +1,12 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { API } from "../lib/api";
 import { Environment } from "../lib/environment";
+import { TTag } from "../lib/types";
 
 export function Index() {
     const api = new API(Environment.BaseAPIUrl);
-    const a: any = "";
-    api.getVenues().then((data) => {
-        console.log(data);
-    }).catch(_ => console.log("some error"));
-    return(<div>Hello, index!</div>);
+
+    const { isLoading, isError, data, error } = useQuery<TTag[], Error>(["tags"], api.getTags);
+
+    return(<div>{data?.map(d => d.name)}</div>);
 };