From 538978f1955ceeefb89803427ecf7cd5d3e7c2d8 Mon Sep 17 00:00:00 2001
From: Johannes Schmidt <devshred@tigerflanke.de>
Date: Tue, 18 Jun 2024 22:47:58 +0200
Subject: [PATCH] perf(react): introduce tanstack query

---
 .eslintrc.cjs                                 |   2 +
 package-lock.json                             | 191 ++++++++++++++++++
 package.json                                  |   3 +
 src/routes/__root.tsx                         |  12 +-
 .../about/-screens/AboutScreen.test.tsx       |  16 +-
 src/routes/about/-screens/AboutScreen.tsx     |  52 ++---
 src/services/backend/gps-backend-api.ts       |  14 +-
 src/services/providers/index.tsx              |  11 +-
 8 files changed, 268 insertions(+), 33 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index b5a6729..4d19535 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -6,6 +6,7 @@ module.exports = {
     'plugin:import/typescript',
     'plugin:jsx-a11y/recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
     'eslint-config-prettier',
   ],
   settings: {
@@ -24,4 +25,5 @@ module.exports = {
     'react/jsx-uses-react': 'off',
     'import/no-unresolved': ['error', { ignore: ['^geojson'] }],
   },
+  "plugins": ["@tanstack/query"]
 }
diff --git a/package-lock.json b/package-lock.json
index 99f13ce..0391802 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@fontsource/roboto": "^5.0.13",
         "@hello-pangea/dnd": "^16.6.0",
+        "@tanstack/react-query": "^5.45.1",
+        "@tanstack/react-query-devtools": "^5.45.1",
         "@tanstack/react-router": "^1.36.3",
         "@types/geojson": "^7946.0.14",
         "@types/leaflet": "^1.9.12",
@@ -42,6 +44,7 @@
         "@playwright/test": "^1.44.1",
         "@semantic-release/changelog": "^6.0.3",
         "@semantic-release/git": "^10.0.1",
+        "@tanstack/eslint-plugin-query": "^5.43.1",
         "@tanstack/router-devtools": "^1.36.3",
         "@tanstack/router-vite-plugin": "^1.37.0",
         "@testing-library/jest-dom": "^6.4.6",
@@ -3134,6 +3137,141 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@tanstack/eslint-plugin-query": {
+      "version": "5.43.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.43.1.tgz",
+      "integrity": "sha512-5WZmkny6u/lSjzUpgnvn+vnA1KtIa7umNZYLqCg9TZK0lmz9SRP6Hnui1PI279eisDy/O+1yD0MfEHTJWlQGVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/utils": "8.0.0-alpha.28"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "eslint": "^8 || ^9"
+      }
+    },
+    "node_modules/@tanstack/eslint-plugin-query/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-Iq8QFmJ2DH2tx7jfOraMZM1Y1axRfWh4t29JXRgbzvgiDQ2uHRHcaXqTulqsZXzJ0+vERNvNkOIPcQYGsNeGVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.0.0-alpha.28",
+        "@typescript-eslint/visitor-keys": "8.0.0-alpha.28"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@tanstack/eslint-plugin-query/node_modules/@typescript-eslint/types": {
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-HYg+e0EWVShx0FEX0MAjDinYLmd+wD6nGMpbaddB1iACYwqaJFbf7vw0l+hdLTJvQC6UY8ndRkaEsL68QEoIZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@tanstack/eslint-plugin-query/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-I/5ODd4XJ+TO0XrKwDaB4tVGVi6kz2LAlN3WPd7mZVVtW21HHByCILRhOF9RbC69gJQ/TGHFpWCmAcsq2RZisg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "8.0.0-alpha.28",
+        "@typescript-eslint/visitor-keys": "8.0.0-alpha.28",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/eslint-plugin-query/node_modules/@typescript-eslint/utils": {
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-PnIz94+nbyjJisMI+KZqXMfw0wfIHvbyh0MGEx2M314wqm6SUWcxB5I8zduGQgJbRB0YFnboPS+MeSlBYPWrBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.0.0-alpha.28",
+        "@typescript-eslint/types": "8.0.0-alpha.28",
+        "@typescript-eslint/typescript-estree": "8.0.0-alpha.28"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      }
+    },
+    "node_modules/@tanstack/eslint-plugin-query/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.0.0-alpha.28",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.0.0-alpha.28.tgz",
+      "integrity": "sha512-+ewAOeKDycydKMlnfmW8zAURTA8PR5Csyvxy6PJt4XRYjoquode9/eWaMt9Sp4Rz1FGMSVU9KxDRR83ASH/xkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.0.0-alpha.28",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@tanstack/eslint-plugin-query/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@tanstack/history": {
       "version": "1.31.16",
       "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.31.16.tgz",
@@ -3147,6 +3285,59 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.45.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.45.0.tgz",
+      "integrity": "sha512-RVfIZQmFUTdjhSAAblvueimfngYyfN6HlwaJUPK71PKd7yi43Vs1S/rdimmZedPWX/WGppcq/U1HOj7O7FwYxw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.37.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz",
+      "integrity": "sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.45.1.tgz",
+      "integrity": "sha512-mYYfJujKg2kxmkRRjA6nn4YKG3ITsKuH22f1kteJ5IuVQqgKUgbaSQfYwVP0gBS05mhwxO03HVpD0t7BMN7WOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.45.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.45.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.45.1.tgz",
+      "integrity": "sha512-4mrbk1g5jqlqh0pifZNsKzy7FtgeqgwzMICL4d6IJGayrrcrKq9K4N/OzRNbgRWrTn6YTY63qcAcKo+NJU2QMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.37.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.45.1",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tanstack/react-router": {
       "version": "1.36.3",
       "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.36.3.tgz",
diff --git a/package.json b/package.json
index 6dd93a2..ed8fe51 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
   "dependencies": {
     "@fontsource/roboto": "^5.0.13",
     "@hello-pangea/dnd": "^16.6.0",
+    "@tanstack/react-query": "^5.45.1",
+    "@tanstack/react-query-devtools": "^5.45.1",
     "@tanstack/react-router": "^1.36.3",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.9.12",
@@ -55,6 +57,7 @@
     "@playwright/test": "^1.44.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@tanstack/eslint-plugin-query": "^5.43.1",
     "@tanstack/router-devtools": "^1.36.3",
     "@tanstack/router-vite-plugin": "^1.37.0",
     "@testing-library/jest-dom": "^6.4.6",
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 6f20ae5..280652f 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -14,6 +14,15 @@ const TanStackRouterDevtools =
       )
     : () => null
 
+const TanStackQueryDevtools =
+  process.env.NODE_ENV === 'development'
+    ? React.lazy(() =>
+        import('@tanstack/react-query-devtools').then((res) => ({
+          default: res.ReactQueryDevtools,
+        })),
+      )
+    : () => null
+
 export const Route = createRootRoute({
   component: () => (
     <Providers>
@@ -26,7 +35,8 @@ export const Route = createRootRoute({
         <Footer />
       </div>
       <Suspense>
-        <TanStackRouterDevtools position="bottom-right" />
+        <TanStackRouterDevtools position="bottom-left" />
+        <TanStackQueryDevtools position="bottom" initialIsOpen={false} />
       </Suspense>
     </Providers>
   ),
diff --git a/src/routes/about/-screens/AboutScreen.test.tsx b/src/routes/about/-screens/AboutScreen.test.tsx
index bb92faa..1aaa191 100644
--- a/src/routes/about/-screens/AboutScreen.test.tsx
+++ b/src/routes/about/-screens/AboutScreen.test.tsx
@@ -4,6 +4,7 @@ import AboutScreen from './AboutScreen'
 import React from 'react'
 import { LanguageProvider } from '../../../services/providers/language/LanguageProvider'
 import { Language } from '../../../@types/language'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const mocks = vi.hoisted(() => ({ get: vi.fn() }))
 
@@ -21,8 +22,13 @@ vi.mock('axios', async (importActual) => {
 })
 
 describe('About Page', () => {
-  const renderWithLanguage = (children: React.ReactNode, language: Language = 'en') => {
-    render(<LanguageProvider initialLanguage={language}>{children}</LanguageProvider>)
+  const queryClient = new QueryClient()
+  const renderWithProviders = (children: React.ReactNode, language: Language = 'en') => {
+    render(
+      <QueryClientProvider client={queryClient}>
+        <LanguageProvider initialLanguage={language}>{children}</LanguageProvider>
+      </QueryClientProvider>,
+    )
   }
 
   const version = 'v1.2.3'
@@ -33,21 +39,21 @@ describe('About Page', () => {
   })
 
   it('load page', () => {
-    renderWithLanguage(<AboutScreen />)
+    renderWithProviders(<AboutScreen />)
     waitFor(() => {
       expect(screen.getByText('An app dealing with GPS files.')).toBeInTheDocument()
     })
   })
 
   it('load page german page', () => {
-    renderWithLanguage(<AboutScreen />, 'de')
+    renderWithProviders(<AboutScreen />, 'de')
     waitFor(() => {
       expect(screen.getByText('Eine Anwendung zum Bearbeiten von GPS-Dateien.')).toBeInTheDocument()
     })
   })
 
   it('show version of backend', () => {
-    renderWithLanguage(<AboutScreen />)
+    renderWithProviders(<AboutScreen />)
 
     waitFor(async () => {
       expect(await screen.findByText(version)).toBeInTheDocument()
diff --git a/src/routes/about/-screens/AboutScreen.tsx b/src/routes/about/-screens/AboutScreen.tsx
index 03f8fb6..a9cf196 100644
--- a/src/routes/about/-screens/AboutScreen.tsx
+++ b/src/routes/about/-screens/AboutScreen.tsx
@@ -1,7 +1,4 @@
-import { useEffect, useState } from 'react'
-import { BackendVersion } from '../../../@types/common'
-import { AxiosResponse } from 'axios'
-import API from '../../../services/backend/gps-backend-api'
+import { useBackendVersion } from '../../../services/backend/gps-backend-api'
 import useLanguage from '../../../hooks/useLanguage'
 import { FaArrowRight, FaGithub, FaStrava } from 'react-icons/fa6'
 import { SiKomoot } from 'react-icons/si'
@@ -11,24 +8,7 @@ const NO_VERSION = { app: 'N/A', git: 'N/A' }
 
 const AboutScreen = () => {
   const { getMessage } = useLanguage()
-
-  const [backendVersion, setBackendVersion] = useState<BackendVersion>(NO_VERSION)
-
-  const fetchBackendVersion = async () => {
-    try {
-      const response: AxiosResponse<BackendVersion> = await API.get('/version')
-      setBackendVersion(response.data)
-    } catch (fetchError) {
-      setBackendVersion(NO_VERSION)
-      console.error('Error fetching version: ', fetchError)
-    }
-  }
-
-  useEffect(() => {
-    ;(async () => {
-      await fetchBackendVersion()
-    })()
-  }, [])
+  const { data: backendVersion, isLoading, isError } = useBackendVersion()
 
   return (
     <div className="ml-2 md:ml-6 lg:ml-10 mt-8 text-base-content">
@@ -72,7 +52,7 @@ const AboutScreen = () => {
           target="_blank"
           rel="noreferrer"
         >
-          {backendVersion.app}
+          {isLoading || isError ? NO_VERSION.app : backendVersion?.app}
         </a>
       </p>
       <p className="text-lg mt-4">{getMessage('technologies_header')}</p>
@@ -104,6 +84,32 @@ const AboutScreen = () => {
             daisyUI
           </a>
         </li>
+        <li>
+          <FaArrowRight
+            className="highlight-color inline text- mr-1"
+            style={{ verticalAlign: '-2px' }}
+          />{' '}
+          <a href="https://tanstack.com/" className="hover:underline" target="_blank" rel="noreferrer">
+            TanStack
+          </a>{' '}
+          <a
+            href="https://tanstack.com/router/"
+            className="hover:underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Router
+          </a>{' '}
+          /{' '}
+          <a
+            href="https://tanstack.com/query/"
+            className="hover:underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Query
+          </a>
+        </li>
         <li>
           <FaArrowRight
             className="highlight-color inline text- mr-1"
diff --git a/src/services/backend/gps-backend-api.ts b/src/services/backend/gps-backend-api.ts
index be7b0ad..d624e5e 100644
--- a/src/services/backend/gps-backend-api.ts
+++ b/src/services/backend/gps-backend-api.ts
@@ -1,8 +1,20 @@
 import axios from 'axios'
+import { BackendVersion } from '../../@types/common'
+import { useQuery } from '@tanstack/react-query'
 
-export default axios.create({
+const backendApi = axios.create({
   baseURL: import.meta.env.VITE_BACKEND_BASE_URL,
   headers: {
     'Content-type': 'application/json',
   },
 })
+
+function fetchBackendVersion(): Promise<BackendVersion> {
+  return backendApi.get('/version').then((response) => response.data)
+}
+
+export function useBackendVersion() {
+  return useQuery({ queryKey: ['backendVersion'], queryFn: fetchBackendVersion })
+}
+
+export default backendApi
diff --git a/src/services/providers/index.tsx b/src/services/providers/index.tsx
index 68a5196..4ec6220 100644
--- a/src/services/providers/index.tsx
+++ b/src/services/providers/index.tsx
@@ -1,12 +1,17 @@
 import { PropsWithChildren } from 'react'
 import { LanguageProvider } from './language/LanguageProvider'
 import { FeedbackProvider } from './feedback/FeedbackProvider'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
 
 const Providers = ({ children }: PropsWithChildren) => {
   return (
-    <LanguageProvider initialLanguage="en">
-      <FeedbackProvider>{children}</FeedbackProvider>
-    </LanguageProvider>
+    <QueryClientProvider client={queryClient}>
+      <LanguageProvider initialLanguage="en">
+        <FeedbackProvider>{children}</FeedbackProvider>
+      </LanguageProvider>
+    </QueryClientProvider>
   )
 }