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/screens/settings/Feed.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { Fragment, useRef, useState, useMemo } from "react";
+import { Fragment, useMemo, useRef, useState } from "react";
 import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
 import { Menu, Transition } from "@headlessui/react";
 import { toast } from "react-hot-toast";
@@ -11,12 +11,14 @@ import {
   ArrowsRightLeftIcon,
   DocumentTextIcon,
   EllipsisHorizontalIcon,
-  PencilSquareIcon,
   ForwardIcon,
+  PencilSquareIcon,
   TrashIcon
 } from "@heroicons/react/24/outline";
 
 import { APIClient } from "@api/APIClient";
+import { FeedsQueryOptions } from "@api/queries";
+import { FeedKeys } from "@api/query_keys";
 import { useToggle } from "@hooks/hooks";
 import { baseUrl, classNames, IsEmptyDate, simplifyDate } from "@utils";
 import Toast from "@components/notifications/Toast";
@@ -29,14 +31,6 @@ import { ExternalLink } from "@components/ExternalLink";
 import { Section } from "./_components";
 import { Checkbox } from "@components/Checkbox";
 
-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
-};
-
 interface SortConfig {
   key: keyof ListItemProps["feed"] | "enabled";
   direction: "ascending" | "descending";
@@ -97,20 +91,16 @@ function useSort(items: ListItemProps["feed"][], config?: SortConfig) {
 }
 
 function FeedSettings() {
-  const { data } = useSuspenseQuery({
-    queryKey: feedKeys.lists(),
-    queryFn: APIClient.feeds.find,
-    refetchOnWindowFocus: false
-  });
+  const feedsQuery = useSuspenseQuery(FeedsQueryOptions())
 
-  const sortedFeeds = useSort(data || []);
+  const sortedFeeds = useSort(feedsQuery.data || []);
 
   return (
     <Section
       title="Feeds"
       description="Manage RSS, Newznab, and Torznab feeds."
     >
-      {data && data.length > 0 ? (
+      {feedsQuery.data && feedsQuery.data.length > 0 ? (
         <ul className="min-w-full relative">
           <li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 font-medium uppercase tracking-wider">
             <div
@@ -163,8 +153,8 @@ function ListItem({ feed }: ListItemProps) {
   const updateMutation = useMutation({
     mutationFn: (status: boolean) => APIClient.feeds.toggleEnable(feed.id, status),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
-      queryClient.invalidateQueries({ queryKey: feedKeys.detail(feed.id) });
+      queryClient.invalidateQueries({ queryKey: FeedKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: FeedKeys.detail(feed.id) });
 
       toast.custom((t) => <Toast type="success" body={`${feed.name} was ${!enabled ? "disabled" : "enabled"} successfully.`} t={t} />);
     }
@@ -240,8 +230,8 @@ const FeedItemDropdown = ({
   const deleteMutation = useMutation({
     mutationFn: (id: number) => APIClient.feeds.delete(id),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
-      queryClient.invalidateQueries({ queryKey: feedKeys.detail(feed.id) });
+      queryClient.invalidateQueries({ queryKey: FeedKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: FeedKeys.detail(feed.id) });
 
       toast.custom((t) => <Toast type="success" body={`Feed ${feed?.name} was deleted`} t={t} />);
     }
@@ -257,7 +247,7 @@ const FeedItemDropdown = ({
   const forceRunMutation = useMutation({
     mutationFn: (id: number) => APIClient.feeds.forceRun(id),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: FeedKeys.lists() });
       toast.custom((t) => <Toast type="success" body={`Feed ${feed?.name} was force run successfully.`} t={t} />);
       toggleForceRunModal();
     },