From 80423d62735e8e49e41563e17c3a326afe93938a Mon Sep 17 00:00:00 2001 From: ze0s <43699394+zze0s@users.noreply.github.com> Date: Thu, 19 Dec 2024 13:34:13 +0100 Subject: [PATCH] fix(web): circular dependencies (#1882) --- web/src/api/QueryClient.tsx | 6 +++--- web/src/components/header/Header.tsx | 6 +++--- web/src/screens/auth/Login.tsx | 7 ++++--- web/src/screens/filters/Details.tsx | 10 +++++----- web/src/screens/filters/NotFound.tsx | 6 +++--- web/src/screens/settings/Application.tsx | 6 +++--- web/src/screens/settings/Logs.tsx | 6 +++--- 7 files changed, 24 insertions(+), 23 deletions(-) diff --git a/web/src/api/QueryClient.tsx b/web/src/api/QueryClient.tsx index 1ef3b68..fa0e85b 100644 --- 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 index 4ed9aa0..c45e35a 100644 --- 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 index e0cc5de..9628910 100644 --- 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({ defaultValues: { username: "", password: "" }, diff --git a/web/src/screens/filters/Details.tsx b/web/src/screens/filters/Details.tsx index e656cbf..111a9aa 100644 --- 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 index 3d89e59..3df7a19 100644 --- 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 (
diff --git a/web/src/screens/settings/Application.tsx b/web/src/screens/settings/Application.tsx index 4d94067..8baebb9 100644 --- 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 index aac10d2..53b1006 100644 --- 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())