fix(web): circular dependencies (#1882)

This commit is contained in:
ze0s 2024-12-19 13:34:13 +01:00 committed by GitHub
parent 4432dfb099
commit 80423d6273
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 24 additions and 23 deletions

View file

@ -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

View file

@ -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) => {

View file

@ -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: "" },

View file

@ -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

View file

@ -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">

View file

@ -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) {

View file

@ -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())