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>

web/src/api/APIClient.ts

@@ -4,7 +4,6 @@
  */
 
 import { baseUrl, sseBaseUrl } from "@utils";
-import { AuthContext } from "@utils/Context";
 import { GithubRelease } from "@app/types/Update";
 
 type RequestBody = BodyInit | object | Record<string, unknown> | null;
@@ -30,7 +29,8 @@ export async function HttpClient<T = unknown>(
 ): Promise<T> {
   const init: RequestInit = {
     method: config.method,
-    headers: { "Accept": "*/*" }
+    headers: { "Accept": "*/*", 'x-requested-with': 'XMLHttpRequest' },
+    credentials: "include",
   };
 
   if (config.body) {
@@ -87,22 +87,17 @@ export async function HttpClient<T = unknown>(
     return Promise.resolve<T>({} as T);
   }
   case 401: {
-    // Remove auth info from localStorage
-    AuthContext.reset();
-
-    // Show an error toast to notify the user what occurred
-    // return Promise.reject(new Error(`[401] Unauthorized: "${endpoint}"`));
     return Promise.reject(response);
+    // return Promise.reject(new Error(`[401] Unauthorized: "${endpoint}"`));
   }
   case 403: {
-    // Remove auth info from localStorage
-    AuthContext.reset();
-
-    // Show an error toast to notify the user what occurred
     return Promise.reject(response);
   }
   case 404: {
-    return Promise.reject(new Error(`[404] Not found: "${endpoint}"`));
+    const isJson = response.headers.get("Content-Type")?.includes("application/json");
+    const json = isJson ? await response.json() : null;
+    return Promise.reject<T>(json as T);
+    // return Promise.reject(new Error(`[404] Not Found: "${endpoint}"`));
   }
   case 500: {
     const health = await window.fetch(`${baseUrl()}api/healthz/liveness`);
@@ -326,6 +321,8 @@ export const APIClient = {
         if (filter.id == "indexer") {
           params["indexer"].push(filter.value);
         } else if (filter.id === "action_status") {
+          params["push_status"].push(filter.value); // push_status is the correct value here otherwise the releases table won't load when filtered by push status
+        } else if (filter.id === "push_status") {
           params["push_status"].push(filter.value);
         } else if (filter.id == "name") {
           params["q"].push(filter.value);

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}/>);
+      }
+    }
+  }
+});

web/src/api/queries.ts

@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2021 - 2024, Ludvig Lundgren and the autobrr contributors.
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import { keepPreviousData, queryOptions } from "@tanstack/react-query";
+import { APIClient } from "@api/APIClient";
+import {
+  ApiKeys,
+  DownloadClientKeys,
+  FeedKeys,
+  FilterKeys,
+  IndexerKeys,
+  IrcKeys, NotificationKeys,
+  ReleaseKeys,
+  SettingsKeys
+} from "@api/query_keys";
+
+export const FiltersQueryOptions = (indexers: string[], sortOrder: string) =>
+  queryOptions({
+    queryKey: FilterKeys.list(indexers, sortOrder),
+    queryFn: () => APIClient.filters.find(indexers, sortOrder),
+    refetchOnWindowFocus: false
+  });
+
+export const FilterByIdQueryOptions = (filterId: number) =>
+  queryOptions({
+    queryKey: FilterKeys.detail(filterId),
+    queryFn: async ({queryKey}) => await APIClient.filters.getByID(queryKey[2]),
+    retry: false,
+  });
+
+export const ConfigQueryOptions = (enabled: boolean = true) =>
+  queryOptions({
+    queryKey: SettingsKeys.config(),
+    queryFn: () => APIClient.config.get(),
+    retry: false,
+    refetchOnWindowFocus: false,
+    enabled: enabled,
+  });
+
+export const UpdatesQueryOptions = (enabled: boolean) =>
+  queryOptions({
+    queryKey: SettingsKeys.updates(),
+    queryFn: () => APIClient.updates.getLatestRelease(),
+    retry: false,
+    refetchOnWindowFocus: false,
+    enabled: enabled,
+  });
+
+export const IndexersQueryOptions = () =>
+  queryOptions({
+    queryKey: IndexerKeys.lists(),
+    queryFn: () => APIClient.indexers.getAll()
+  });
+
+export const IndexersOptionsQueryOptions = () =>
+  queryOptions({
+    queryKey: IndexerKeys.options(),
+    queryFn: () => APIClient.indexers.getOptions(),
+    refetchOnWindowFocus: false,
+    staleTime: Infinity
+  });
+
+export const IndexersSchemaQueryOptions = (enabled: boolean) =>
+  queryOptions({
+    queryKey: IndexerKeys.schema(),
+    queryFn: () => APIClient.indexers.getSchema(),
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+    enabled: enabled
+  });
+
+export const IrcQueryOptions = () =>
+  queryOptions({
+    queryKey: IrcKeys.lists(),
+    queryFn: () => APIClient.irc.getNetworks(),
+    refetchOnWindowFocus: false,
+    refetchInterval: 3000 // Refetch every 3 seconds
+  });
+
+export const FeedsQueryOptions = () =>
+  queryOptions({
+    queryKey: FeedKeys.lists(),
+    queryFn: () => APIClient.feeds.find(),
+  });
+
+export const DownloadClientsQueryOptions = () =>
+  queryOptions({
+    queryKey: DownloadClientKeys.lists(),
+    queryFn: () => APIClient.download_clients.getAll(),
+  });
+
+export const NotificationsQueryOptions = () =>
+  queryOptions({
+    queryKey: NotificationKeys.lists(),
+    queryFn: () => APIClient.notifications.getAll()
+  });
+
+export const ApikeysQueryOptions = () =>
+  queryOptions({
+    queryKey: ApiKeys.lists(),
+    queryFn: () => APIClient.apikeys.getAll(),
+    refetchOnWindowFocus: false,
+  });
+
+export const ReleasesListQueryOptions = (offset: number, limit: number, filters: ReleaseFilter[]) =>
+  queryOptions({
+    queryKey: ReleaseKeys.list(offset, limit, filters),
+    queryFn: () => APIClient.release.findQuery(offset, limit, filters),
+    staleTime: 5000
+  });
+
+export const ReleasesLatestQueryOptions = () =>
+  queryOptions({
+    queryKey: ReleaseKeys.latestActivity(),
+    queryFn: () => APIClient.release.findRecent(),
+    refetchOnWindowFocus: false
+  });
+
+export const ReleasesStatsQueryOptions = () =>
+  queryOptions({
+    queryKey: ReleaseKeys.stats(),
+    queryFn: () => APIClient.release.stats(),
+    refetchOnWindowFocus: false
+  });
+
+// ReleasesIndexersQueryOptions get basic list of used indexers by identifier
+export const ReleasesIndexersQueryOptions = () =>
+  queryOptions({
+    queryKey: ReleaseKeys.indexers(),
+    queryFn: () => APIClient.release.indexerOptions(),
+    placeholderData: keepPreviousData,
+    staleTime: Infinity
+  });

web/src/api/query_keys.ts

@@ -0,0 +1,77 @@
+export const SettingsKeys = {
+  all: ["settings"] as const,
+  updates: () => [...SettingsKeys.all, "updates"] as const,
+  config: () => [...SettingsKeys.all, "config"] as const,
+  lists: () => [...SettingsKeys.all, "list"] as const,
+};
+
+export const FilterKeys = {
+  all: ["filters"] as const,
+  lists: () => [...FilterKeys.all, "list"] as const,
+  list: (indexers: string[], sortOrder: string) => [...FilterKeys.lists(), {indexers, sortOrder}] as const,
+  details: () => [...FilterKeys.all, "detail"] as const,
+  detail: (id: number) => [...FilterKeys.details(), id] as const
+};
+
+export const ReleaseKeys = {
+  all: ["releases"] as const,
+  lists: () => [...ReleaseKeys.all, "list"] as const,
+  list: (pageIndex: number, pageSize: number, filters: ReleaseFilter[]) => [...ReleaseKeys.lists(), {
+    pageIndex,
+    pageSize,
+    filters
+  }] as const,
+  details: () => [...ReleaseKeys.all, "detail"] as const,
+  detail: (id: number) => [...ReleaseKeys.details(), id] as const,
+  indexers: () => [...ReleaseKeys.all, "indexers"] as const,
+  stats: () => [...ReleaseKeys.all, "stats"] as const,
+  latestActivity: () => [...ReleaseKeys.all, "latest-activity"] as const,
+};
+
+export const ApiKeys = {
+  all: ["api_keys"] as const,
+  lists: () => [...ApiKeys.all, "list"] as const,
+  details: () => [...ApiKeys.all, "detail"] as const,
+  detail: (id: string) => [...ApiKeys.details(), id] as const
+};
+
+export const DownloadClientKeys = {
+  all: ["download_clients"] as const,
+  lists: () => [...DownloadClientKeys.all, "list"] as const,
+  // list: (indexers: string[], sortOrder: string) => [...clientKeys.lists(), { indexers, sortOrder }] as const,
+  details: () => [...DownloadClientKeys.all, "detail"] as const,
+  detail: (id: number) => [...DownloadClientKeys.details(), id] as const
+};
+
+export const FeedKeys = {
+  all: ["feeds"] as const,
+  lists: () => [...FeedKeys.all, "list"] as const,
+  // list: (indexers: string[], sortOrder: string) => [...feedKeys.lists(), { indexers, sortOrder }] as const,
+  details: () => [...FeedKeys.all, "detail"] as const,
+  detail: (id: number) => [...FeedKeys.details(), id] as const
+};
+
+export const IndexerKeys = {
+  all: ["indexers"] as const,
+  schema: () => [...IndexerKeys.all, "indexer-definitions"] as const,
+  options: () => [...IndexerKeys.all, "options"] as const,
+  lists: () => [...IndexerKeys.all, "list"] as const,
+  // list: (indexers: string[], sortOrder: string) => [...indexerKeys.lists(), { indexers, sortOrder }] as const,
+  details: () => [...IndexerKeys.all, "detail"] as const,
+  detail: (id: number) => [...IndexerKeys.details(), id] as const
+};
+
+export const IrcKeys = {
+  all: ["irc_networks"] as const,
+  lists: () => [...IrcKeys.all, "list"] as const,
+  // list: (indexers: string[], sortOrder: string) => [...ircKeys.lists(), { indexers, sortOrder }] as const,
+  details: () => [...IrcKeys.all, "detail"] as const,
+  detail: (id: number) => [...IrcKeys.details(), id] as const
+};
+
+export const NotificationKeys = {
+  all: ["notifications"] as const,
+  lists: () => [...NotificationKeys.all, "list"] as const,
+  details: () => [...NotificationKeys.all, "detail"] as const,
+  detail: (id: number) => [...NotificationKeys.details(), id] as const
+};