diff --git a/frontend/leeds-beer-quest/package-lock.json b/frontend/leeds-beer-quest/package-lock.json index 253de75..a8672d2 100644 --- a/frontend/leeds-beer-quest/package-lock.json +++ b/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", diff --git a/frontend/leeds-beer-quest/package.json b/frontend/leeds-beer-quest/package.json index bd3bba8..da2d919 100644 --- a/frontend/leeds-beer-quest/package.json +++ b/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", diff --git a/frontend/leeds-beer-quest/src/lib/api.ts b/frontend/leeds-beer-quest/src/lib/api.ts index 467baef..8c09eb7 100644 --- a/frontend/leeds-beer-quest/src/lib/api.ts +++ b/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 => { + const response = await fetch(`${this.baseAPIUrl}/tag`); + return await response.json(); } } \ No newline at end of file diff --git a/frontend/leeds-beer-quest/src/lib/types.ts b/frontend/leeds-beer-quest/src/lib/types.ts new file mode 100644 index 0000000..239cfd7 --- /dev/null +++ b/frontend/leeds-beer-quest/src/lib/types.ts @@ -0,0 +1,4 @@ +export type TTag = { + id: number; + name: string; +}; \ No newline at end of file diff --git a/frontend/leeds-beer-quest/src/main.tsx b/frontend/leeds-beer-quest/src/main.tsx index d13b5dc..cfd8139 100644 --- a/frontend/leeds-beer-quest/src/main.tsx +++ b/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( - + + + ) diff --git a/frontend/leeds-beer-quest/src/pages/index.tsx b/frontend/leeds-beer-quest/src/pages/index.tsx index 32c62ef..7df93f7 100644 --- a/frontend/leeds-beer-quest/src/pages/index.tsx +++ b/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(
Hello, index!
); + + const { isLoading, isError, data, error } = useQuery(["tags"], api.getTags); + + return(
{data?.map(d => d.name)}
); }; \ No newline at end of file