add react-query to client

UoaWDCC · Mar 12, 2024 · b93253f · b93253f
1 parent f3e5f39
commit b93253f
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 69 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -8,7 +8,8 @@
     "standard",
     "prettier",
     "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "plugins": ["@typescript-eslint"],
   "env": {

diff --git a/client/package.json b/client/package.json
@@ -14,6 +14,7 @@
     "@mui/material": "^5.14.2",
     "@mui/system": "^5.14.1",
     "@mui/x-date-pickers": "^6.10.2",
+    "@tanstack/react-query": "^5.26.3",
     "@types/react-dom": "^18.2.18",
     "@types/stripe": "^8.0.417",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -16,40 +16,44 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
 import { ThemeProvider } from "@mui/material"
 import { LocalizationProvider } from "@mui/x-date-pickers"
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
+import queryClient from "services/QueryClient"
 import theme from "theme"
+import { QueryClientProvider } from "@tanstack/react-query"
 
 function App() {
   return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <div style={{ backgroundColor: "f4f4f4", height: "100vh" }}>
-        <ThemeProvider theme={theme}>
-          <Router>
-            <div className="App" style={{ height: "100%" }}>
-              <Navbar />
-              <div className="content" style={{ height: "100%" }}>
-                <Routes>
-                  <Route path="/" element={<Home />} />
-                  <Route path="/about" element={<About />} />
-                  <Route path="/events" element={<Events />} />
-                  <Route path="/contact" element={<Contact />} />
-                  <Route path="/register" element={<Register />} />
-                  <Route path="/login" element={<Login />} />
-                  <Route path="/checkout" element={<Checkout />} />
-                  <Route path="/booking" element={<Booking />} />
-                  <Route path="/profile" element={<Profile />} />
-                  <Route path="/admin" element={<Admin />} />
-                  <Route path="/thanks" element={<Thanks />} />
-                  <Route
-                    path="/admin/bookings"
-                    element={<AdminBookingsDetailedView />}
-                  />
-                </Routes>
+    <QueryClientProvider client={queryClient}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <div style={{ backgroundColor: "f4f4f4", height: "100vh" }}>
+          <ThemeProvider theme={theme}>
+            <Router>
+              <div className="App" style={{ height: "100%" }}>
+                <Navbar />
+                <div className="content" style={{ height: "100%" }}>
+                  <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/about" element={<About />} />
+                    <Route path="/events" element={<Events />} />
+                    <Route path="/contact" element={<Contact />} />
+                    <Route path="/register" element={<Register />} />
+                    <Route path="/login" element={<Login />} />
+                    <Route path="/checkout" element={<Checkout />} />
+                    <Route path="/booking" element={<Booking />} />
+                    <Route path="/profile" element={<Profile />} />
+                    <Route path="/admin" element={<Admin />} />
+                    <Route path="/thanks" element={<Thanks />} />
+                    <Route
+                      path="/admin/bookings"
+                      element={<AdminBookingsDetailedView />}
+                    />
+                  </Routes>
+                </div>
               </div>
-            </div>
-          </Router>
-        </ThemeProvider>
-      </div>
-    </LocalizationProvider>
+            </Router>
+          </ThemeProvider>
+        </div>
+      </LocalizationProvider>
+    </QueryClientProvider>
   )
 }
 

diff --git a/client/src/services/FetchClient.ts b/client/src/services/FetchClient.ts
diff --git a/client/src/services/UserService.ts b/client/src/services/UserService.ts
@@ -1,16 +1,10 @@
-import fetchClient from "./FetchClient"
+import fetchClient from "./OpenApiFetchClient"
 
 const UserService = {
   getUsers: async function () {
-    const res = await fetchClient.GET("/users/{userId}", {
-      params: {
-        path: {
-          userId: 1232
-        }
-      }
-    })
-    return res.data
+    const { data } = await fetchClient.GET("/users", {})
+    return data
   }
-}
+} as const
 
 export default UserService
diff --git a/client/src/store/store.ts b/client/src/store/store.ts
@@ -5,18 +5,16 @@ import {
   createHook
 } from "react-sweet-state"
 
-type State = { userData: number }
+type State = { current: number }
 
 const initialState: State = {
-  userData: 1000
+  current: 1000
 }
 
 const actions = {
-  loadUsers:
+  loadInfo:
     (): Action<State> =>
-    async ({ setState }) => {
-      setState({})
-    }
+    async ({ setState }) => {}
 }
 
 type Actions = typeof actions

diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "server"
   ],
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.20.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.23",
     "@typescript-eslint/eslint-plugin": "^7.1.0",

diff --git a/yarn.lock b/yarn.lock
@@ -3803,6 +3803,25 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
+"@tanstack/eslint-plugin-query@^5.20.1":
+  version "5.20.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.20.1.tgz#861afedd7cde6b98c88cf86a5923bb659122e7af"
+  integrity sha512-oIp7Wh90KHOm1FKCvcv87fiD2H96xo/crFrlhbvqBzR2f0tMEGOK/ANKMGNFQprd6BT6lyZhQPlOEkFdezsjIg==
+  dependencies:
+    "@typescript-eslint/utils" "^6.20.0"
+
+"@tanstack/[email protected]":
+  version "5.26.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.26.3.tgz#0e1075de03904165d892e2b801b49f21d6a88b66"
+  integrity sha512-kKv7VHIleC7cwpMS3M63mWUFFbdiRo7JZMVUyZ4z/79RZoAi7/vGTVkCrnNqyKl+zwBRkumYL+eiYtyShGZd0A==
+
+"@tanstack/react-query@^5.26.3":
+  version "5.26.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.26.3.tgz#263bc60ee0b80a95773a0b9872030ccf07edb2a0"
+  integrity sha512-fP/kEu8aVLb6ln0ySazaeyivVkSQ9EnFfA5kQ7yIQNklx5JCW7otHVY6GVjZtd/3wK6QU99yvdSH0rN0LV2vmA==
+  dependencies:
+    "@tanstack/query-core" "5.26.3"
+
 "@testing-library/dom@^9.3.1":
   version "9.3.4"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
@@ -4470,6 +4489,14 @@
     "@typescript-eslint/visitor-keys" "7.1.0"
     debug "^4.3.4"
 
+"@typescript-eslint/[email protected]":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+
 "@typescript-eslint/[email protected]":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.1.0.tgz#e4babaa39a3d612eff0e3559f3e99c720a2b4a54"
@@ -4488,11 +4515,30 @@
     debug "^4.3.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/[email protected]":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
 "@typescript-eslint/[email protected]":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.1.0.tgz#52a86d6236fda646e7e5fe61154991dc0dc433ef"
   integrity sha512-qTWjWieJ1tRJkxgZYXx6WUYtWlBc48YRxgY2JN1aGeVpkhmnopq+SUC8UEVGNXIvWH7XyuTjwALfG6bFEgCkQA==
 
+"@typescript-eslint/[email protected]":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/[email protected]":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.0.tgz#419b1310f061feee6df676c5bed460537310c593"
@@ -4520,6 +4566,27 @@
     "@typescript-eslint/typescript-estree" "7.1.0"
     semver "^7.5.4"
 
+"@typescript-eslint/utils@^6.20.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
+  integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    semver "^7.5.4"
+
+"@typescript-eslint/[email protected]":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    eslint-visitor-keys "^3.4.1"
+
 "@typescript-eslint/[email protected]":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.0.tgz#576c4ad462ca1378135a55e2857d7aced96ce0a0"