fix(web): circular dependencies (#1882)

autobrr · Dec 19, 2024 · 80423d6 · 80423d6
1 parent 4432dfb
commit 80423d6
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 23 deletions.
diff --git a/web/src/api/QueryClient.tsx b/web/src/api/QueryClient.tsx
@@ -7,20  7,20 @@ import { QueryCache, QueryClient } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
 import Toast from "@components/notifications/Toast";
 import { AuthContext } from "@utils/Context";
-import { redirect } from "@tanstack/react-router";
-import { LoginRoute } from "@app/routes";
 import { getRouteApi, redirect } from "@tanstack/react-router";
 
 const MAX_RETRIES = 6;
 
 export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: (error, query) => {
       const loginRoute = getRouteApi("/login");
       console.error(`Caught error for query '${query.queryKey}': `, error);
 
       if (error.message === "Cookie expired or invalid.") {
         AuthContext.reset();
         redirect({
-          to: LoginRoute.to,
           to: loginRoute.id,
           search: {
             // Use the current location to power a redirect after login
             // (Do not use `router.state.resolvedLocation` as it can

diff --git a/web/src/components/header/Header.tsx b/web/src/components/header/Header.tsx
@@ -5,7  5,7 @@
 
 import toast from "react-hot-toast";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { redirect } from "@tanstack/react-router";
 import { getRouteApi, redirect } from "@tanstack/react-router";
 import { Disclosure, DisclosureButton } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon, MegaphoneIcon } from "@heroicons/react/24/outline";
 
@@ -18,9  18,9 @@ import { MobileNav } from "./MobileNav";
 import { ExternalLink } from "@components/ExternalLink";
 import { ConfigQueryOptions, UpdatesQueryOptions } from "@api/queries";
 import { AuthContext } from "@utils/Context";
-import { LoginRoute } from "@app/routes.tsx";
 
 export const Header = () => {
   const loginRoute = getRouteApi("/login");
 
   const { isError:isConfigError, error: configError, data: config } = useQuery(ConfigQueryOptions(true));
   if (isConfigError) {
@@ -40,7  40,7 @@ export const Header = () => {
       ));
       AuthContext.reset();
       throw redirect({
-        to: LoginRoute.to,
         to: loginRoute.id,
       })
     },
     onError: (err) => {

diff --git a/web/src/screens/auth/Login.tsx b/web/src/screens/auth/Login.tsx
@@ -6,7  6,7 @@
 import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useMutation, useQueryErrorResetBoundary } from "@tanstack/react-query";
-import { useRouter, useSearch } from "@tanstack/react-router";
 import { getRouteApi, useRouter } from "@tanstack/react-router";
 import toast from "react-hot-toast";
 
 import { RocketLaunchIcon } from "@heroicons/react/24/outline";
@@ -15,7  15,6 @@ import { APIClient } from "@api/APIClient";
 import Toast from "@components/notifications/Toast";
 import { Tooltip } from "@components/tooltips/Tooltip";
 import { PasswordInput, TextInput } from "@components/inputs/text";
-import { LoginRoute } from "@app/routes";
 
 import Logo from "@app/logo.svg?react";
 import { AuthContext } from "@utils/Context";
@@ -32,7  31,9 @@ export const Login = () => {
   const queryErrorResetBoundary = useQueryErrorResetBoundary()
 
   const router = useRouter()
-  const search = useSearch({ from: LoginRoute.id })
 
   const loginRoute = getRouteApi('/login');
   const search = loginRoute.useSearch();
 
   const { handleSubmit, register, formState } = useForm<LoginFormFields>({
     defaultValues: { username: "", password: "" },

diff --git a/web/src/screens/filters/Details.tsx b/web/src/screens/filters/Details.tsx
@@ -5,6  5,7 @@
 
 import { useEffect, useRef } from "react";
 import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import { getRouteApi, Link, Outlet, useNavigate } from "@tanstack/react-router";
 import { Form, Formik, useFormikContext } from "formik";
 import type { FormikErrors, FormikValues } from "formik";
 import { z } from "zod";
@@ -23,8  24,6 @@ import { DEBUG } from "@components/debug";
 import Toast from "@components/notifications/Toast";
 import { DeleteModal } from "@components/modals";
 
-import { Link, Outlet, useNavigate } from "@tanstack/react-router";
-import { FilterGetByIdRoute } from "@app/routes";
 
 interface tabType {
   name: string;
@@ -305,10  304,11 @@ const schema = z.object({
 
 export const FilterDetails = () => {
   const navigate = useNavigate();
-  const ctx = FilterGetByIdRoute.useRouteContext()
-  const queryClient = ctx.queryClient
 
-  const params = FilterGetByIdRoute.useParams()
   const filterGetByIdRoute = getRouteApi("/auth/authenticated-routes/filters/$filterId");
   const { queryClient } =  filterGetByIdRoute.useRouteContext();
 
   const params = filterGetByIdRoute.useParams()
   const filterQuery = useSuspenseQuery(FilterByIdQueryOptions(params.filterId))
   const filter = filterQuery.data
 

diff --git a/web/src/screens/filters/NotFound.tsx b/web/src/screens/filters/NotFound.tsx
@@ -3,14  3,14 @@
  * SPDX-License-Identifier: GPL-2.0-or-later
  */
 
-import { Link } from "@tanstack/react-router";
-import { FilterGetByIdRoute } from "@app/routes";
 import { getRouteApi, Link } from "@tanstack/react-router";
 import { ExternalLink } from "@components/ExternalLink";
 
 import Logo from "@app/logo.svg?react";
 
 export const FilterNotFound = () => {
-  const { filterId } = FilterGetByIdRoute.useParams()
   const filterGetByIdRoute = getRouteApi("/auth/authenticated-routes/filters/$filterId");
   const { filterId } = filterGetByIdRoute.useParams()
 
   return (
     <div className="mt-20 flex flex-col justify-center">

diff --git a/web/src/screens/settings/Application.tsx b/web/src/screens/settings/Application.tsx
@@ -4,9  4,9 @@
  */
 
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
 import { toast } from "react-hot-toast";
 
-import { SettingsIndexRoute } from "@app/routes";
 import { APIClient } from "@api/APIClient";
 import { ConfigQueryOptions, UpdatesQueryOptions } from "@api/queries";
 import { SettingsKeys } from "@api/query_keys";
@@ -20,8  20,8 @@ import { Section, RowItem } from "./_components";
 function ApplicationSettings() {
   const [settings, setSettings] = SettingsContext.use();
 
-  const ctx = SettingsIndexRoute.useRouteContext()
-  const queryClient = ctx.queryClient
   const settingsIndexRoute = getRouteApi("/auth/authenticated-routes/settings/");
   const { queryClient } =  settingsIndexRoute.useRouteContext();
 
   const { isError:isConfigError, error: configError, data } = useQuery(ConfigQueryOptions());
   if (isConfigError) {

diff --git a/web/src/screens/settings/Logs.tsx b/web/src/screens/settings/Logs.tsx
@@ -4,13  4,13 @@
  */
 
 import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
 import { toast } from "react-hot-toast";
 import Select from "react-select";
 
 import { APIClient } from "@api/APIClient";
 import { ConfigQueryOptions } from "@api/queries";
 import { SettingsKeys } from "@api/query_keys";
-import { SettingsLogRoute } from "@app/routes";
 import Toast from "@components/notifications/Toast";
 import { LogLevelOptions, SelectOption } from "@domain/constants";
 
@@ -58,8  58,8 @@ const SelectWrapper = ({ id, value, onChange, options }: SelectWrapperProps) =>
 );
 
 function LogSettings() {
-  const ctx = SettingsLogRoute.useRouteContext()
-  const queryClient = ctx.queryClient
   const settingsLogRoute = getRouteApi("/auth/authenticated-routes/settings/logs");
   const { queryClient} =  settingsLogRoute.useRouteContext();
 
   const configQuery = useSuspenseQuery(ConfigQueryOptions())