feat(web): move from react-router to @tanstack/router (#1338)

* fix(auth): invalid cookie handling and wrongful basic auth invalidation * fix(auth): fix test to reflect new HTTP status code * fix(auth/web): do not throw on error * fix(http): replace http codes in middleware to prevent basic auth invalidation fix typo in comment * fix test * fix(web): api client handle 403 * refactor(http): auth_test use testify.assert * refactor(http): set session opts after valid login * refactor(http): send more client headers * fix(http): test * refactor(web): move router to tanstack/router * refactor(web): use route loaders and suspense * refactor(web): useSuspense for settings * refactor(web): invalidate cookie in middleware * fix: loclfile * fix: load filter/id * fix(web): login, onboard, types, imports * fix(web): filter load * fix(web): build errors * fix(web): ts-expect-error * fix(tests): filter_test.go * fix(filters): tests * refactor: remove duplicate spinner components refactor: ReleaseTable.tsx loading animation refactor: remove dedicated `pendingComponent` for `settingsRoute` * fix: refactor missed SectionLoader to RingResizeSpinner * fix: substitute divides with borders to account for unloaded elements * fix(api): action status URL param * revert: action status URL param add comment * fix(routing): notfound handling and split files * fix(filters): notfound get params * fix(queries): colon * fix(queries): comments ts-ignore * fix(queries): extract queryKeys * fix(queries): remove err * fix(routes): move zob schema inline * fix(auth): middleware and redirect to login * fix(auth): failing test * fix(logs): invalidate correct key * fix(logs): invalidate correct key * fix(logs): invalidate correct key * fix: JSX element stealing focus from searchbar * reimplement empty release table state text * fix(context): use deep-copy * fix(releases): empty state and filter input warnings * fix(releases): empty states * fix(auth): onboarding * fix(cache): invalidate queries --------- Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
2025-07-24 01:09:13 +00:00 · 2024-02-12 13:07:00 +01:00 · 2024-02-12 13:07:00 +01:00 · 1a23b69bcf
commit 1a23b69bcf
parent cc9656cd41
64 changed files with 2543 additions and 2091 deletions
--- a/web/src/api/QueryClient.tsx
+++ b/web/src/api/QueryClient.tsx
@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2021 - 2024, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { toast } from "react-hot-toast";
+import Toast from "@components/notifications/Toast";
+
+const MAX_RETRIES = 6;
+const HTTP_STATUS_TO_NOT_RETRY = [400, 401, 403, 404];
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error ) => {
+      console.error("query client error: ", error);
+
+      toast.custom((t) => <Toast type="error" body={error?.message} t={t}/>);
+
+      // @ts-expect-error TS2339: Property status does not exist on type Error
+      if (error?.status === 401 || error?.status === 403) {
+        // @ts-expect-error TS2339: Property status does not exist on type Error
+        console.error("bad status, redirect to login", error?.status)
+        // Redirect to login page
+        window.location.href = "/login";
+
+        return
+      }
+    }
+  }),
+  defaultOptions: {
+    queries: {
+      // The retries will have exponential delay.
+      // See https://tanstack.com/query/v4/docs/guides/query-retries#retry-delay
+      // delay = Math.min(1000 * 2 ** attemptIndex, 30000)
+      // retry: false,
+      throwOnError: true,
+      retry: (failureCount, error) => {
+        console.debug("retry count:", failureCount)
+        console.error("retry err: ", error)
+
+        // @ts-expect-error TS2339: ignore
+        if (HTTP_STATUS_TO_NOT_RETRY.includes(error.status)) {
+          // @ts-expect-error TS2339: ignore
+          console.log(`retry: Aborting retry due to ${error.status} status`);
+          return false;
+        }
+
+        return failureCount <= MAX_RETRIES;
+      },
+    },
+    mutations: {
+      onError: (error) => {
+        // Use a format string to convert the error object to a proper string without much hassle.
+        const message = (
+          typeof (error) === "object" && typeof ((error as Error).message) ?
+            (error as Error).message :
+            `${error}`
+        );
+        toast.custom((t) => <Toast type="error" body={message} t={t}/>);
+      }
+    }
+  }
+});