mirror of
https://github.com/idanoo/autobrr
synced 2025-07-25 09:49:13 +00:00
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>
This commit is contained in:
martylukyy
GitHub
parent
cc9656cd41
commit
1a23b69bcf
64 changed files with 2543 additions and 2091 deletions
|
|
@ -4,15 +4,17 @@
|
|||
*/
|
||||
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { Section } from "./_components";
|
||||
import { Form, Formik } from "formik";
|
||||
import { PasswordField, TextField } from "@components/inputs";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
import toast from "react-hot-toast";
|
||||
import { UserIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
import { SettingsAccountRoute } from "@app/routes";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { Section } from "./_components";
|
||||
import { PasswordField, TextField } from "@components/inputs";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
|
||||
const AccountSettings = () => (
|
||||
<Section
|
||||
title="Account"
|
||||
|
|
@ -33,8 +35,7 @@ interface InputValues {
|
|||
}
|
||||
|
||||
function Credentials() {
|
||||
const [ getAuthContext ] = AuthContext.use();
|
||||
|
||||
const ctx = SettingsAccountRoute.useRouteContext()
|
||||
|
||||
const validate = (values: InputValues) => {
|
||||
const errors: Record<string, string> = {};
|
||||
|
|
@ -51,7 +52,8 @@ function Credentials() {
|
|||
const logoutMutation = useMutation({
|
||||
mutationFn: APIClient.auth.logout,
|
||||
onSuccess: () => {
|
||||
AuthContext.reset();
|
||||
AuthContext.logout();
|
||||
|
||||
toast.custom((t) => (
|
||||
<Toast type="success" body="User updated successfully. Please sign in again!" t={t} />
|
||||
));
|
||||
|
|
@ -76,7 +78,7 @@ function Credentials() {
|
|||
<div className="px-2 pb-6 bg-white dark:bg-gray-800">
|
||||
<Formik
|
||||
initialValues={{
|
||||
username: getAuthContext.username,
|
||||
username: ctx.auth.username!,
|
||||
newUsername: "",
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
|
|
|
|||
|
|
@ -13,33 +13,19 @@ import { DeleteModal } from "@components/modals";
|
|||
import { APIKeyAddForm } from "@forms/settings/APIKeyAddForm";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { ApikeysQueryOptions } from "@api/queries";
|
||||
import { ApiKeys } from "@api/query_keys";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { classNames } from "@utils";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { Section } from "./_components";
|
||||
import { PlusIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
export const apiKeys = {
|
||||
all: ["api_keys"] as const,
|
||||
lists: () => [...apiKeys.all, "list"] as const,
|
||||
details: () => [...apiKeys.all, "detail"] as const,
|
||||
// detail: (id: number) => [...apiKeys.details(), id] as const
|
||||
detail: (id: string) => [...apiKeys.details(), id] as const
|
||||
};
|
||||
|
||||
function APISettings() {
|
||||
const [addFormIsOpen, toggleAddForm] = useToggle(false);
|
||||
|
||||
const { isError, error, data } = useSuspenseQuery({
|
||||
queryKey: apiKeys.lists(),
|
||||
queryFn: APIClient.apikeys.getAll,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false
|
||||
});
|
||||
|
||||
if (isError) {
|
||||
console.log(error);
|
||||
}
|
||||
const apikeysQuery = useSuspenseQuery(ApikeysQueryOptions())
|
||||
|
||||
return (
|
||||
<Section
|
||||
|
|
@ -58,7 +44,7 @@ function APISettings() {
|
|||
>
|
||||
<APIKeyAddForm isOpen={addFormIsOpen} toggle={toggleAddForm} />
|
||||
|
||||
{data && data.length > 0 ? (
|
||||
{apikeysQuery.data && apikeysQuery.data.length > 0 ? (
|
||||
<ul className="min-w-full relative">
|
||||
<li className="hidden sm:grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
|
|
@ -69,7 +55,7 @@ function APISettings() {
|
|||
</div>
|
||||
</li>
|
||||
|
||||
{data.map((k, idx) => <APIListItem key={idx} apikey={k} />)}
|
||||
{apikeysQuery.data.map((k, idx) => <APIListItem key={idx} apikey={k} />)}
|
||||
</ul>
|
||||
) : (
|
||||
<EmptySimple
|
||||
|
|
@ -96,8 +82,8 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
|
|||
const deleteMutation = useMutation({
|
||||
mutationFn: (key: string) => APIClient.apikeys.delete(key),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: apiKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: apiKeys.detail(apikey.key) });
|
||||
queryClient.invalidateQueries({ queryKey: ApiKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: ApiKeys.detail(apikey.key) });
|
||||
|
||||
toast.custom((t) => (
|
||||
<Toast
|
||||
|
|
|
|||
|
|
@ -3,10 +3,13 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
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";
|
||||
import { SettingsContext } from "@utils/Context";
|
||||
import { Checkbox } from "@components/Checkbox";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
|
|
@ -17,34 +20,23 @@ import { Section, RowItem } from "./_components";
|
|||
function ApplicationSettings() {
|
||||
const [settings, setSettings] = SettingsContext.use();
|
||||
|
||||
const { isError:isConfigError, error: configError, data } = useQuery({
|
||||
queryKey: ["config"],
|
||||
queryFn: APIClient.config.get,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false
|
||||
});
|
||||
const ctx = SettingsIndexRoute.useRouteContext()
|
||||
const queryClient = ctx.queryClient
|
||||
|
||||
const { isError:isConfigError, error: configError, data } = useQuery(ConfigQueryOptions());
|
||||
if (isConfigError) {
|
||||
console.log(configError);
|
||||
}
|
||||
|
||||
const { isError, error, data: updateData } = useQuery({
|
||||
queryKey: ["updates"],
|
||||
queryFn: APIClient.updates.getLatestRelease,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
enabled: data?.check_for_updates === true
|
||||
});
|
||||
|
||||
const { isError, error, data: updateData } = useQuery(UpdatesQueryOptions(data?.check_for_updates === true));
|
||||
if (isError) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const checkUpdateMutation = useMutation({
|
||||
mutationFn: APIClient.updates.check,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["updates"] });
|
||||
queryClient.invalidateQueries({ queryKey: SettingsKeys.updates() });
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -52,7 +44,7 @@ function ApplicationSettings() {
|
|||
mutationFn: (value: boolean) => APIClient.config.update({ check_for_updates: value }).then(() => value),
|
||||
onSuccess: (_, value: boolean) => {
|
||||
toast.custom(t => <Toast type="success" body={`${value ? "You will now be notified of new updates." : "You will no longer be notified of new updates."}`} t={t} />);
|
||||
queryClient.invalidateQueries({ queryKey: ["config"] });
|
||||
queryClient.invalidateQueries({ queryKey: SettingsKeys.config() });
|
||||
checkUpdateMutation.mutate();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { PlusIcon } from "@heroicons/react/24/solid";
|
||||
import toast from "react-hot-toast";
|
||||
|
|
@ -12,20 +12,14 @@ import { useToggle } from "@hooks/hooks";
|
|||
import { DownloadClientAddForm, DownloadClientUpdateForm } from "@forms";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { DownloadClientKeys } from "@api/query_keys";
|
||||
import { DownloadClientsQueryOptions } from "@api/queries";
|
||||
import { ActionTypeNameMap } from "@domain/constants";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { Checkbox } from "@components/Checkbox";
|
||||
|
||||
import { Section } from "./_components";
|
||||
|
||||
export const clientKeys = {
|
||||
all: ["download_clients"] as const,
|
||||
lists: () => [...clientKeys.all, "list"] as const,
|
||||
// list: (indexers: string[], sortOrder: string) => [...clientKeys.lists(), { indexers, sortOrder }] as const,
|
||||
details: () => [...clientKeys.all, "detail"] as const,
|
||||
detail: (id: number) => [...clientKeys.details(), id] as const
|
||||
};
|
||||
|
||||
interface DLSettingsItemProps {
|
||||
client: DownloadClient;
|
||||
}
|
||||
|
|
@ -97,7 +91,7 @@ function ListItem({ client }: DLSettingsItemProps) {
|
|||
mutationFn: (client: DownloadClient) => APIClient.download_clients.update(client).then(() => client),
|
||||
onSuccess: (client: DownloadClient) => {
|
||||
toast.custom(t => <Toast type="success" body={`${client.name} was ${client.enabled ? "enabled" : "disabled"} successfully.`} t={t} />);
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: DownloadClientKeys.lists() });
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -140,17 +134,9 @@ function ListItem({ client }: DLSettingsItemProps) {
|
|||
function DownloadClientSettings() {
|
||||
const [addClientIsOpen, toggleAddClient] = useToggle(false);
|
||||
|
||||
const { error, data } = useSuspenseQuery({
|
||||
queryKey: clientKeys.lists(),
|
||||
queryFn: APIClient.download_clients.getAll,
|
||||
refetchOnWindowFocus: false
|
||||
});
|
||||
const downloadClientsQuery = useSuspenseQuery(DownloadClientsQueryOptions())
|
||||
|
||||
const sortedClients = useSort(data || []);
|
||||
|
||||
if (error) {
|
||||
return <p>Failed to fetch download clients</p>;
|
||||
}
|
||||
const sortedClients = useSort(downloadClientsQuery.data || []);
|
||||
|
||||
return (
|
||||
<Section
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { PlusIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { IndexerKeys } from "@api/query_keys";
|
||||
import { IndexersQueryOptions } from "@api/queries";
|
||||
import { Checkbox } from "@components/Checkbox";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
|
|
@ -18,14 +20,6 @@ import { componentMapType } from "@forms/settings/DownloadClientForms";
|
|||
|
||||
import { Section } from "./_components";
|
||||
|
||||
export const indexerKeys = {
|
||||
all: ["indexers"] 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
|
||||
};
|
||||
|
||||
interface SortConfig {
|
||||
key: keyof ListItemProps["indexer"] | "enabled";
|
||||
direction: "ascending" | "descending";
|
||||
|
|
@ -123,7 +117,7 @@ const ListItem = ({ indexer }: ListItemProps) => {
|
|||
const updateMutation = useMutation({
|
||||
mutationFn: (enabled: boolean) => APIClient.indexers.toggleEnable(indexer.id, enabled),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: indexerKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: IndexerKeys.lists() });
|
||||
toast.custom((t) => <Toast type="success" body={`${indexer.name} was updated successfully`} t={t} />);
|
||||
}
|
||||
});
|
||||
|
|
@ -169,17 +163,13 @@ const ListItem = ({ indexer }: ListItemProps) => {
|
|||
function IndexerSettings() {
|
||||
const [addIndexerIsOpen, toggleAddIndexer] = useToggle(false);
|
||||
|
||||
const { error, data } = useSuspenseQuery({
|
||||
queryKey: indexerKeys.lists(),
|
||||
queryFn: APIClient.indexers.getAll,
|
||||
refetchOnWindowFocus: false
|
||||
});
|
||||
const indexersQuery = useSuspenseQuery(IndexersQueryOptions())
|
||||
const indexers = indexersQuery.data
|
||||
const sortedIndexers = useSort(indexers || []);
|
||||
|
||||
const sortedIndexers = useSort(data || []);
|
||||
|
||||
if (error) {
|
||||
return (<p>An error has occurred</p>);
|
||||
}
|
||||
// if (error) {
|
||||
// return (<p>An error has occurred</p>);
|
||||
// }
|
||||
|
||||
return (
|
||||
<Section
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { Fragment, useRef, useState, useMemo, useEffect, MouseEvent } from "react";
|
||||
import { Fragment, MouseEvent, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { LockClosedIcon, LockOpenIcon, PlusIcon } from "@heroicons/react/24/solid";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
|
|
@ -22,23 +22,16 @@ import { classNames, IsEmptyDate, simplifyDate } from "@utils";
|
|||
import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "@forms";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { IrcKeys } from "@api/query_keys";
|
||||
import { IrcQueryOptions } from "@api/queries";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { DeleteModal } from "@components/modals";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { SettingsContext } from "@utils/Context";
|
||||
import { Checkbox } from "@components/Checkbox";
|
||||
// import { useForm } from "react-hook-form";
|
||||
|
||||
import { Section } from "./_components";
|
||||
|
||||
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
|
||||
};
|
||||
|
||||
interface SortConfig {
|
||||
key: keyof ListItemProps["network"] | "enabled";
|
||||
direction: "ascending" | "descending";
|
||||
|
|
@ -98,14 +91,9 @@ const IrcSettings = () => {
|
|||
const [expandNetworks, toggleExpand] = useToggle(false);
|
||||
const [addNetworkIsOpen, toggleAddNetwork] = useToggle(false);
|
||||
|
||||
const { data } = useSuspenseQuery({
|
||||
queryKey: ircKeys.lists(),
|
||||
queryFn: APIClient.irc.getNetworks,
|
||||
refetchOnWindowFocus: false,
|
||||
refetchInterval: 3000 // Refetch every 3 seconds
|
||||
});
|
||||
const ircQuery = useSuspenseQuery(IrcQueryOptions())
|
||||
|
||||
const sortedNetworks = useSort(data || []);
|
||||
const sortedNetworks = useSort(ircQuery.data || []);
|
||||
|
||||
return (
|
||||
<Section
|
||||
|
|
@ -168,7 +156,7 @@ const IrcSettings = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{data && data.length > 0 ? (
|
||||
{ircQuery.data && ircQuery.data.length > 0 ? (
|
||||
<ul className="mt-6 min-w-full relative text-sm">
|
||||
<li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700 text-xs font-medium text-gray-500 dark:text-gray-400">
|
||||
<div className="flex col-span-2 md:col-span-1 pl-2 sm:px-3 py-3 text-left uppercase tracking-wider cursor-pointer"
|
||||
|
|
@ -218,7 +206,7 @@ const ListItem = ({ network, expanded }: ListItemProps) => {
|
|||
const updateMutation = useMutation({
|
||||
mutationFn: (network: IrcNetwork) => APIClient.irc.updateNetwork(network).then(() => network),
|
||||
onSuccess: (network: IrcNetwork) => {
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: IrcKeys.lists() });
|
||||
toast.custom(t => <Toast type="success" body={`${network.name} was ${network.enabled ? "enabled" : "disabled"} successfully.`} t={t} />);
|
||||
}
|
||||
});
|
||||
|
|
@ -431,8 +419,8 @@ const ListItemDropdown = ({
|
|||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => APIClient.irc.deleteNetwork(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.detail(network.id) });
|
||||
queryClient.invalidateQueries({ queryKey: IrcKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: IrcKeys.detail(network.id) });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`Network ${network.name} was deleted`} t={t} />);
|
||||
|
||||
|
|
@ -443,8 +431,8 @@ const ListItemDropdown = ({
|
|||
const restartMutation = useMutation({
|
||||
mutationFn: (id: number) => APIClient.irc.restartNetwork(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.detail(network.id) });
|
||||
queryClient.invalidateQueries({ queryKey: IrcKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: IrcKeys.detail(network.id) });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`${network.name} was successfully restarted`} t={t} />);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,15 @@
|
|||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*/
|
||||
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { Link } from "react-router-dom";
|
||||
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";
|
||||
|
||||
|
|
@ -56,25 +59,19 @@ const SelectWrapper = ({ id, value, onChange, options }: SelectWrapperProps) =>
|
|||
);
|
||||
|
||||
function LogSettings() {
|
||||
const { isError, error, isLoading, data } = useSuspenseQuery({
|
||||
queryKey: ["config"],
|
||||
queryFn: APIClient.config.get,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false
|
||||
});
|
||||
const ctx = SettingsLogRoute.useRouteContext()
|
||||
const queryClient = ctx.queryClient
|
||||
|
||||
if (isError) {
|
||||
console.log(error);
|
||||
}
|
||||
const configQuery = useSuspenseQuery(ConfigQueryOptions())
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const config = configQuery.data
|
||||
|
||||
const setLogLevelUpdateMutation = useMutation({
|
||||
mutationFn: (value: string) => APIClient.config.update({ log_level: value }),
|
||||
onSuccess: () => {
|
||||
toast.custom((t) => <Toast type="success" body={"Config successfully updated!"} t={t} />);
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["config"] });
|
||||
queryClient.invalidateQueries({ queryKey: SettingsKeys.config() });
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -86,7 +83,7 @@ function LogSettings() {
|
|||
Configure log level, log size rotation, etc. You can download your old log files
|
||||
{" "}
|
||||
<Link
|
||||
to="/logs"
|
||||
to="/settings/logs"
|
||||
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-blue-500 decoration hover:text-black hover:dark:text-gray-100"
|
||||
>
|
||||
on the Logs page
|
||||
|
|
@ -96,9 +93,9 @@ function LogSettings() {
|
|||
>
|
||||
<div className="-mx-4 lg:col-span-9">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-750">
|
||||
{!isLoading && data && (
|
||||
{!configQuery.isLoading && config && (
|
||||
<form className="divide-y divide-gray-200 dark:divide-gray-750" action="#" method="POST">
|
||||
<RowItem label="Path" value={data?.log_path} title="Set in config.toml" emptyText="Not set!"/>
|
||||
<RowItem label="Path" value={config?.log_path} title="Set in config.toml" emptyText="Not set!"/>
|
||||
<RowItem
|
||||
className="sm:col-span-1"
|
||||
label="Level"
|
||||
|
|
@ -106,14 +103,14 @@ function LogSettings() {
|
|||
value={
|
||||
<SelectWrapper
|
||||
id="log_level"
|
||||
value={data?.log_level}
|
||||
value={config?.log_level}
|
||||
options={LogLevelOptions}
|
||||
onChange={(value: SelectOption) => setLogLevelUpdateMutation.mutate(value.value)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<RowItem label="Max Size" value={data?.log_max_size} title="Set in config.toml" rightSide="MB"/>
|
||||
<RowItem label="Max Backups" value={data?.log_max_backups} title="Set in config.toml"/>
|
||||
<RowItem label="Max Size" value={config?.log_max_size} title="Set in config.toml" rightSide="MB"/>
|
||||
<RowItem label="Max Backups" value={config?.log_max_backups} title="Set in config.toml"/>
|
||||
</form>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,35 +4,33 @@
|
|||
*/
|
||||
|
||||
import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { PlusIcon } from "@heroicons/react/24/solid";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { NotificationKeys } from "@api/query_keys";
|
||||
import { NotificationsQueryOptions } from "@api/queries";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { NotificationAddForm, NotificationUpdateForm } from "@forms/settings/NotificationForms";
|
||||
import { componentMapType } from "@forms/settings/DownloadClientForms";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import toast from "react-hot-toast";
|
||||
import { Section } from "./_components";
|
||||
import { PlusIcon } from "@heroicons/react/24/solid";
|
||||
import {
|
||||
DiscordIcon,
|
||||
GotifyIcon,
|
||||
LunaSeaIcon,
|
||||
NotifiarrIcon,
|
||||
NtfyIcon,
|
||||
PushoverIcon,
|
||||
Section,
|
||||
TelegramIcon
|
||||
} from "./_components";
|
||||
import { Checkbox } from "@components/Checkbox";
|
||||
import { DiscordIcon, GotifyIcon, LunaSeaIcon, NotifiarrIcon, NtfyIcon, PushoverIcon, TelegramIcon } from "./_components";
|
||||
|
||||
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
|
||||
};
|
||||
|
||||
function NotificationSettings() {
|
||||
const [addNotificationsIsOpen, toggleAddNotifications] = useToggle(false);
|
||||
|
||||
const { data } = useSuspenseQuery({
|
||||
queryKey: notificationKeys.lists(),
|
||||
queryFn: APIClient.notifications.getAll,
|
||||
refetchOnWindowFocus: false
|
||||
}
|
||||
);
|
||||
const notificationsQuery = useSuspenseQuery(NotificationsQueryOptions())
|
||||
|
||||
return (
|
||||
<Section
|
||||
|
|
@ -51,7 +49,7 @@ function NotificationSettings() {
|
|||
>
|
||||
<NotificationAddForm isOpen={addNotificationsIsOpen} toggle={toggleAddNotifications} />
|
||||
|
||||
{data && data.length > 0 ? (
|
||||
{notificationsQuery.data && notificationsQuery.data.length > 0 ? (
|
||||
<ul className="min-w-full">
|
||||
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="col-span-2 sm:col-span-1 pl-1 sm:pl-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Enabled</div>
|
||||
|
|
@ -60,7 +58,7 @@ function NotificationSettings() {
|
|||
<div className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Events</div>
|
||||
</li>
|
||||
|
||||
{data.map((n) => <ListItem key={n.id} notification={n} />)}
|
||||
{notificationsQuery.data.map((n) => <ListItem key={n.id} notification={n} />)}
|
||||
</ul>
|
||||
) : (
|
||||
<EmptySimple title="No notifications" subtitle="" buttonText="Create new notification" buttonAction={toggleAddNotifications} />
|
||||
|
|
@ -94,7 +92,7 @@ function ListItem({ notification }: ListItemProps) {
|
|||
mutationFn: (notification: ServiceNotification) => APIClient.notifications.update(notification).then(() => notification),
|
||||
onSuccess: (notification: ServiceNotification) => {
|
||||
toast.custom(t => <Toast type="success" body={`${notification.name} was ${notification.enabled ? "enabled" : "disabled"} successfully.`} t={t} />);
|
||||
queryClient.invalidateQueries({ queryKey: notificationKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: NotificationKeys.lists() });
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|||
import { toast } from "react-hot-toast";
|
||||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { ReleaseKeys } from "@api/query_keys";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { releaseKeys } from "@screens/releases/ReleaseTable";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { DeleteModal } from "@components/modals";
|
||||
import { Section } from "./_components";
|
||||
|
|
@ -74,7 +74,7 @@ function DeleteReleases() {
|
|||
}
|
||||
|
||||
// Invalidate filters just in case, most likely not necessary but can't hurt.
|
||||
queryClient.invalidateQueries({ queryKey: releaseKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: ReleaseKeys.lists() });
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue