Start work on react-query

frontend/leeds-beer-quest/package-lock.json

@@ -8,6 +8,7 @@
       "name": "leeds-beer-quest",
       "version": "0.0.0",
       "dependencies": {
+        "@tanstack/react-query": "^4.13.4",
         "localforage": "^1.10.0",
         "match-sorter": "^6.3.1",
         "react": "^18.2.0",
@@ -536,6 +537,41 @@
         "node": ">=14"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "4.13.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.13.4.tgz",
+      "integrity": "sha512-DMIy6tgGehYoRUFyoR186+pQspOicyZNSGvBWxPc2CinHjWOQ7DPnGr9zmn/kE9xK4Zd3GXd25Nj3X20+TF6Lw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "4.13.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.13.4.tgz",
+      "integrity": "sha512-OHkUulPorHDiWNcUrcSUNxedeZ28z9kCKRG3JY+aJ8dFH/o4fixtac4ys0lwCP/n/VL1XMPnu+/CXEhbXHyJZA==",
+      "dependencies": {
+        "@tanstack/query-core": "4.13.4",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -1521,6 +1557,14 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.1.tgz",
@@ -1935,6 +1979,20 @@
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
       "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ=="
     },
+    "@tanstack/query-core": {
+      "version": "4.13.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.13.4.tgz",
+      "integrity": "sha512-DMIy6tgGehYoRUFyoR186+pQspOicyZNSGvBWxPc2CinHjWOQ7DPnGr9zmn/kE9xK4Zd3GXd25Nj3X20+TF6Lw=="
+    },
+    "@tanstack/react-query": {
+      "version": "4.13.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.13.4.tgz",
+      "integrity": "sha512-OHkUulPorHDiWNcUrcSUNxedeZ28z9kCKRG3JY+aJ8dFH/o4fixtac4ys0lwCP/n/VL1XMPnu+/CXEhbXHyJZA==",
+      "requires": {
+        "@tanstack/query-core": "4.13.4",
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -2544,6 +2602,12 @@
         "picocolors": "^1.0.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "vite": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.1.tgz",

frontend/leeds-beer-quest/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^4.13.4",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",

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) => {
+    const { isLoading, isError, data, error } = useQuery<TTag[], Error>(["tags"], api.getTags);
-        console.log(data);
+
-    }).catch(_ => console.log("some error"));
+    return(<div>{data?.map(d => d.name)}</div>);
-    return(<div>Hello, index!</div>);
 };