mirror of
https://github.com/idanoo/autobrr
synced 2025-07-25 09:49:13 +00:00
refactor(web): replace pkg react-query with tanstack/react-query (#868)
* refactor: move to tanstack/react-query and fix cache * refactor(releases): move to tanstack/react-query * refactor(logs): move to tanstack/react-query * refactor(base): move to tanstack/react-query * refactor(base): move to tanstack/react-query * refactor(dashboard): move to tanstack/react-query * refactor(auth): move to tanstack/react-query * refactor(filters): move to tanstack/react-query * refactor(settings): move to tanstack/react-query * chore(pkg): add tanstack/react-query * refactor(filters): move to tanstack/react-query * refactor: move to tanstack/react-query * refactor: invalidate queries * chore(pkg): remove old react-query * chore: change imports to root prefixes * build: remove needs web from test * set enableReinitialize to true to fix formik caching issues * fix all property for apiKeys const * fix toast when enabling/disabling feed --------- Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>
This commit is contained in:
ze0s
GitHub
parent
0be92bef65
commit
6e5385a490
54 changed files with 1101 additions and 1117 deletions
|
|
@ -1,20 +1,31 @@
|
|||
import { useRef } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { KeyField } from "../../components/fields/text";
|
||||
import { DeleteModal } from "../../components/modals";
|
||||
import APIKeyAddForm from "../../forms/settings/APIKeyAddForm";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { classNames } from "../../utils";
|
||||
import { TrashIcon } from "@heroicons/react/24/outline";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
|
||||
import { KeyField } from "@components/fields/text";
|
||||
import { DeleteModal } from "@components/modals";
|
||||
import APIKeyAddForm from "@forms/settings/APIKeyAddForm";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { classNames } from "@utils";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
|
||||
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 { data } = useQuery(["apikeys"], () => APIClient.apikeys.getAll(), {
|
||||
const { data } = useQuery({
|
||||
queryKey: apiKeys.lists(),
|
||||
queryFn: APIClient.apikeys.getAll,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: (err) => console.log(err)
|
||||
|
|
@ -57,7 +68,7 @@ function APISettings() {
|
|||
</div>
|
||||
</li>
|
||||
|
||||
{data && data.map((k) => <APIListItem key={k.key} apikey={k} />)}
|
||||
{data && data.map((k, idx) => <APIListItem key={idx} apikey={k} />)}
|
||||
</ol>
|
||||
</section>
|
||||
) : (
|
||||
|
|
@ -83,23 +94,21 @@ function APIListItem({ apikey }: ApiKeyItemProps) {
|
|||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const deleteMutation = useMutation(
|
||||
(key: string) => APIClient.apikeys.delete(key),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["apikeys"]);
|
||||
queryClient.invalidateQueries(["apikeys", apikey.key]);
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (key: string) => APIClient.apikeys.delete(key),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: apiKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: apiKeys.detail(apikey.key) });
|
||||
|
||||
toast.custom((t) => (
|
||||
<Toast
|
||||
type="success"
|
||||
body={`API key ${apikey?.name} was deleted`}
|
||||
t={t}
|
||||
/>
|
||||
));
|
||||
}
|
||||
toast.custom((t) => (
|
||||
<Toast
|
||||
type="success"
|
||||
body={`API key ${apikey?.name} was deleted`}
|
||||
t={t}
|
||||
/>
|
||||
));
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<li className="text-gray-500 dark:text-gray-400">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { Checkbox } from "../../components/Checkbox";
|
||||
import { SettingsContext } from "../../utils/Context";
|
||||
import { GithubRelease } from "../../types/Update";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "react-hot-toast";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { Checkbox } from "@components/Checkbox";
|
||||
import { SettingsContext } from "@utils/Context";
|
||||
import { GithubRelease } from "@app/types/Update";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
|
||||
interface RowItemProps {
|
||||
label: string;
|
||||
|
|
@ -47,8 +48,9 @@ const RowItemNumber = ({ label, value, title, unit }: RowItemNumberProps) => {
|
|||
};
|
||||
|
||||
const RowItemVersion = ({ label, value, title, newUpdate }: RowItemProps) => {
|
||||
if (!value)
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
|
||||
|
|
@ -68,49 +70,41 @@ const RowItemVersion = ({ label, value, title, newUpdate }: RowItemProps) => {
|
|||
function ApplicationSettings() {
|
||||
const [settings, setSettings] = SettingsContext.use();
|
||||
|
||||
const { isLoading, data } = useQuery(
|
||||
["config"],
|
||||
() => APIClient.config.get(),
|
||||
{
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: err => console.log(err)
|
||||
}
|
||||
);
|
||||
const { isLoading, data } = useQuery({
|
||||
queryKey: ["config"],
|
||||
queryFn: APIClient.config.get,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: err => console.log(err)
|
||||
});
|
||||
|
||||
const { data: updateData } = useQuery(
|
||||
["updates"],
|
||||
() => APIClient.updates.getLatestRelease(),
|
||||
{
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: err => console.log(err)
|
||||
}
|
||||
);
|
||||
const { data: updateData } = useQuery({
|
||||
queryKey: ["updates"],
|
||||
queryFn: APIClient.updates.getLatestRelease,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: err => console.log(err)
|
||||
});
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const checkUpdateMutation = useMutation(
|
||||
() => APIClient.updates.check(),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["updates"]);
|
||||
}
|
||||
const checkUpdateMutation = useMutation({
|
||||
mutationFn: APIClient.updates.check,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["updates"] });
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const toggleCheckUpdateMutation = useMutation(
|
||||
(value: boolean) => APIClient.config.update({ check_for_updates: value }),
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.custom((t) => <Toast type="success" body={"Config successfully updated!"} t={t}/>);
|
||||
const toggleCheckUpdateMutation = useMutation({
|
||||
mutationFn: (value: boolean) => APIClient.config.update({ check_for_updates: value }),
|
||||
onSuccess: () => {
|
||||
toast.custom((t) => <Toast type="success" body={"Config successfully updated!"} t={t}/>);
|
||||
|
||||
queryClient.invalidateQueries(["config"]);
|
||||
queryClient.invalidateQueries({ queryKey: ["config"] });
|
||||
|
||||
checkUpdateMutation.mutate();
|
||||
}
|
||||
checkUpdateMutation.mutate();
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,23 @@
|
|||
import { useToggle } from "../../hooks/hooks";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { classNames } from "../../utils";
|
||||
import { DownloadClientAddForm, DownloadClientUpdateForm } from "../../forms";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { DownloadClientTypeNameMap } from "../../domain/constants";
|
||||
import toast from "react-hot-toast";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import { useState, useMemo } from "react";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { classNames } from "@utils";
|
||||
import { DownloadClientAddForm, DownloadClientUpdateForm } from "@forms";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { DownloadClientTypeNameMap } from "@domain/constants";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
|
||||
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;
|
||||
|
|
@ -61,7 +70,6 @@ function useSort(items: ListItemProps["clients"][], config?: SortConfig) {
|
|||
}
|
||||
setSortConfig({ key, direction });
|
||||
};
|
||||
|
||||
|
||||
const getSortIndicator = (key: keyof ListItemProps["clients"]) => {
|
||||
if (!sortConfig || sortConfig.key !== key) {
|
||||
|
|
@ -79,15 +87,14 @@ function DownloadClientSettingsListItem({ client }: DLSettingsItemProps) {
|
|||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation(
|
||||
(client: DownloadClient) => APIClient.download_clients.update(client),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["downloadClients"]);
|
||||
toast.custom((t) => <Toast type="success" body={`${client.name} was updated successfully`} t={t}/>);
|
||||
}
|
||||
const mutation = useMutation({
|
||||
mutationFn: (client: DownloadClient) => APIClient.download_clients.update(client),
|
||||
onSuccess: () => {
|
||||
toast.custom((t) => <Toast type="success" body={`${client.name} was updated successfully`} t={t}/>);
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.lists() });
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const onToggleMutation = (newState: boolean) => {
|
||||
mutation.mutate({
|
||||
|
|
@ -139,11 +146,11 @@ function DownloadClientSettingsListItem({ client }: DLSettingsItemProps) {
|
|||
function DownloadClientSettings() {
|
||||
const [addClientIsOpen, toggleAddClient] = useToggle(false);
|
||||
|
||||
const { error, data } = useQuery(
|
||||
"downloadClients",
|
||||
() => APIClient.download_clients.getAll(),
|
||||
{ refetchOnWindowFocus: false }
|
||||
);
|
||||
const { error, data } = useQuery({
|
||||
queryKey: clientKeys.lists(),
|
||||
queryFn: APIClient.download_clients.getAll,
|
||||
refetchOnWindowFocus: false
|
||||
});
|
||||
|
||||
const sortedClients = useSort(data || []);
|
||||
|
||||
|
|
@ -151,10 +158,8 @@ function DownloadClientSettings() {
|
|||
return <p>Failed to fetch download clients</p>;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="lg:col-span-9">
|
||||
|
||||
<DownloadClientAddForm isOpen={addClientIsOpen} toggle={toggleAddClient} />
|
||||
|
||||
<div className="py-6 px-2 lg:pb-8">
|
||||
|
|
@ -177,8 +182,8 @@ function DownloadClientSettings() {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col mt-6 px-4">
|
||||
{sortedClients.items.length > 0 ?
|
||||
<section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-sm">
|
||||
{sortedClients.items.length > 0
|
||||
? <section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-sm">
|
||||
<ol className="min-w-full relative">
|
||||
<li className="grid grid-cols-12 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex col-span-2 sm:col-span-1 px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer"
|
||||
|
|
@ -213,7 +218,6 @@ function DownloadClientSettings() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
import { useToggle } from "../../hooks/hooks";
|
||||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { Menu, Switch, Transition } from "@headlessui/react";
|
||||
|
||||
import { baseUrl, classNames, IsEmptyDate, simplifyDate } from "../../utils";
|
||||
import { Fragment, useRef, useState, useMemo } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Menu, Switch, Transition } from "@headlessui/react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import { DeleteModal } from "../../components/modals";
|
||||
import {
|
||||
ArrowsRightLeftIcon,
|
||||
DocumentTextIcon,
|
||||
|
|
@ -15,10 +9,24 @@ import {
|
|||
PencilSquareIcon,
|
||||
TrashIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { FeedUpdateForm } from "../../forms/settings/FeedForms";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { baseUrl, classNames, IsEmptyDate, simplifyDate } from "@utils";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { DeleteModal } from "@components/modals";
|
||||
import { FeedUpdateForm } from "@forms/settings/FeedForms";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { ImplementationBadges } from "./Indexer";
|
||||
|
||||
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";
|
||||
|
|
@ -27,8 +35,6 @@ interface SortConfig {
|
|||
function useSort(items: ListItemProps["feed"][], config?: SortConfig) {
|
||||
const [sortConfig, setSortConfig] = useState(config);
|
||||
|
||||
|
||||
|
||||
const sortedItems = useMemo(() => {
|
||||
if (!sortConfig) {
|
||||
return items;
|
||||
|
|
@ -76,11 +82,11 @@ function useSort(items: ListItemProps["feed"][], config?: SortConfig) {
|
|||
}
|
||||
|
||||
function FeedSettings() {
|
||||
const { data } = useQuery(
|
||||
"feeds",
|
||||
() => APIClient.feeds.find(),
|
||||
{ refetchOnWindowFocus: false }
|
||||
);
|
||||
const { data } = useQuery({
|
||||
queryKey: feedKeys.lists(),
|
||||
queryFn: APIClient.feeds.find,
|
||||
refetchOnWindowFocus: false
|
||||
});
|
||||
|
||||
const sortedFeeds = useSort(data || []);
|
||||
|
||||
|
|
@ -142,19 +148,15 @@ function ListItem({ feed }: ListItemProps) {
|
|||
const [enabled, setEnabled] = useState(feed.enabled);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const updateMutation = useMutation(
|
||||
(status: boolean) => APIClient.feeds.toggleEnable(feed.id, status),
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.custom((t) => <Toast type="success"
|
||||
body={`${feed.name} was ${enabled ? "disabled" : "enabled"} successfully`}
|
||||
t={t}/>);
|
||||
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(["feeds"]);
|
||||
queryClient.invalidateQueries(["feeds", feed?.id]);
|
||||
}
|
||||
toast.custom((t) => <Toast type="success" body={`${feed.name} was ${!enabled ? "disabled" : "enabled"} successfully`} t={t}/>);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const toggleActive = (status: boolean) => {
|
||||
setEnabled(status);
|
||||
|
|
@ -227,17 +229,15 @@ const FeedItemDropdown = ({
|
|||
const queryClient = useQueryClient();
|
||||
|
||||
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
|
||||
const deleteMutation = useMutation(
|
||||
(id: number) => APIClient.feeds.delete(id),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["feeds"]);
|
||||
queryClient.invalidateQueries(["feeds", feed.id]);
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => APIClient.feeds.delete(id),
|
||||
onSuccess: () => {
|
||||
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}/>);
|
||||
}
|
||||
toast.custom((t) => <Toast type="success" body={`Feed ${feed?.name} was deleted`} t={t}/>);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Menu as="div">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,21 @@
|
|||
import { useToggle } from "../../hooks/hooks";
|
||||
import { useQuery } from "react-query";
|
||||
import { IndexerAddForm, IndexerUpdateForm } from "../../forms";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { classNames } from "../../utils";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { componentMapType } from "../../forms/settings/DownloadClientForms";
|
||||
import { useState, useMemo } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Switch } from "@headlessui/react";
|
||||
|
||||
import { IndexerAddForm, IndexerUpdateForm } from "@forms";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { classNames } from "@utils";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { componentMapType } from "@forms/settings/DownloadClientForms";
|
||||
|
||||
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";
|
||||
|
|
@ -149,16 +158,17 @@ const ListItem = ({ indexer }: ListItemProps) => {
|
|||
function IndexerSettings() {
|
||||
const [addIndexerIsOpen, toggleAddIndexer] = useToggle(false);
|
||||
|
||||
const { error, data } = useQuery(
|
||||
"indexer",
|
||||
() => APIClient.indexers.getAll(),
|
||||
{ refetchOnWindowFocus: false }
|
||||
);
|
||||
const { error, data } = useQuery({
|
||||
queryKey: indexerKeys.lists(),
|
||||
queryFn: APIClient.indexers.getAll,
|
||||
refetchOnWindowFocus: false
|
||||
});
|
||||
|
||||
const sortedIndexers = useSort(data || []);
|
||||
|
||||
if (error)
|
||||
if (error) {
|
||||
return (<p>An error has occurred</p>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="lg:col-span-9">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,8 @@
|
|||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { classNames, IsEmptyDate, simplifyDate } from "../../utils";
|
||||
import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "../../forms";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
import { Fragment, useRef, useState, useMemo } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/solid";
|
||||
import { Menu, Switch, Transition } from "@headlessui/react";
|
||||
import { Fragment, useRef } from "react";
|
||||
import { DeleteModal } from "../../components/modals";
|
||||
import { useState, useMemo } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import {
|
||||
ArrowsPointingInIcon,
|
||||
ArrowsPointingOutIcon,
|
||||
|
|
@ -20,6 +12,22 @@ import {
|
|||
TrashIcon
|
||||
} from "@heroicons/react/24/outline";
|
||||
|
||||
import { classNames, IsEmptyDate, simplifyDate } from "@utils";
|
||||
import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "@forms";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { DeleteModal } from "@components/modals";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
|
||||
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";
|
||||
|
|
@ -79,10 +87,11 @@ const IrcSettings = () => {
|
|||
const [expandNetworks, toggleExpand] = useToggle(false);
|
||||
const [addNetworkIsOpen, toggleAddNetwork] = useToggle(false);
|
||||
|
||||
const { data } = useQuery("networks", () => APIClient.irc.getNetworks(), {
|
||||
const { data } = useQuery({
|
||||
queryKey: ircKeys.lists(),
|
||||
queryFn: APIClient.irc.getNetworks,
|
||||
refetchOnWindowFocus: false,
|
||||
// Refetch every 3 seconds
|
||||
refetchInterval: 3000
|
||||
refetchInterval: 3000 // Refetch every 3 seconds
|
||||
});
|
||||
|
||||
const sortedNetworks = useSort(data || []);
|
||||
|
|
@ -204,18 +213,17 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
|
|||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation(
|
||||
(network: IrcNetwork) => APIClient.irc.updateNetwork(network),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["networks"]);
|
||||
toast.custom((t) => <Toast type="success" body={`${network.name} was updated successfully`} t={t}/>);
|
||||
}
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (network: IrcNetwork) => APIClient.irc.updateNetwork(network),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`${network.name} was updated successfully`} t={t}/>);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const onToggleMutation = (newState: boolean) => {
|
||||
mutation.mutate({
|
||||
updateMutation.mutate({
|
||||
...network,
|
||||
enabled: newState
|
||||
});
|
||||
|
|
@ -399,37 +407,30 @@ const ListItemDropdown = ({
|
|||
const queryClient = useQueryClient();
|
||||
|
||||
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
|
||||
const deleteMutation = useMutation(
|
||||
(id: number) => APIClient.irc.deleteNetwork(id),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["networks"]);
|
||||
queryClient.invalidateQueries(["networks", network.id]);
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`Network ${network.name} was deleted`} t={t}/>);
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => APIClient.irc.deleteNetwork(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.detail(network.id) });
|
||||
|
||||
toggleDeleteModal();
|
||||
}
|
||||
toast.custom((t) => <Toast type="success" body={`Network ${network.name} was deleted`} t={t}/>);
|
||||
|
||||
toggleDeleteModal();
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const restartMutation = useMutation(
|
||||
(id: number) => APIClient.irc.restartNetwork(id),
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.custom((t) => <Toast type="success"
|
||||
body={`${network.name} was successfully restarted`}
|
||||
t={t}/>);
|
||||
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(["networks"]);
|
||||
queryClient.invalidateQueries(["networks", network.id]);
|
||||
}
|
||||
toast.custom((t) => <Toast type="success" body={`${network.name} was successfully restarted`} t={t}/>);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const restart = (id: number) => {
|
||||
restartMutation.mutate(id);
|
||||
};
|
||||
const restart = (id: number) => restartMutation.mutate(id);
|
||||
|
||||
return (
|
||||
<Menu as="div">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { useMutation, useQuery, useQueryClient } from "react-query";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { GithubRelease } from "../../types/Update";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "react-hot-toast";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
|
||||
import { LogLevelOptions, SelectOption } from "../../domain/constants";
|
||||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { GithubRelease } from "@app/types/Update";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { LogLevelOptions, SelectOption } from "@domain/constants";
|
||||
import { LogFiles } from "../Logs";
|
||||
|
||||
interface RowItemProps {
|
||||
|
|
@ -121,28 +122,24 @@ const RowItemSelect = ({ id, title, label, value, options, onChange }: any) => {
|
|||
};
|
||||
|
||||
function LogSettings() {
|
||||
const { isLoading, data } = useQuery(
|
||||
["config"],
|
||||
() => APIClient.config.get(),
|
||||
{
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: err => console.log(err)
|
||||
}
|
||||
);
|
||||
const { isLoading, data } = useQuery({
|
||||
queryKey: ["config"],
|
||||
queryFn: APIClient.config.get,
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: err => console.log(err)
|
||||
});
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const setLogLevelUpdateMutation = useMutation(
|
||||
(value: string) => APIClient.config.update({ log_level: value }),
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.custom((t) => <Toast type="success" body={"Config successfully updated!"} t={t}/>);
|
||||
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(["config"]);
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ["config"] });
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
|
||||
|
|
|
|||
|
|
@ -1,19 +1,27 @@
|
|||
import { useQuery } from "react-query";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { NotificationAddForm, NotificationUpdateForm } from "../../forms/settings/NotificationForms";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { classNames } from "../../utils";
|
||||
import { componentMapType } from "../../forms/settings/DownloadClientForms";
|
||||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { EmptySimple } from "@components/emptystates";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { NotificationAddForm, NotificationUpdateForm } from "@forms/settings/NotificationForms";
|
||||
import { classNames } from "@utils";
|
||||
import { componentMapType } from "@forms/settings/DownloadClientForms";
|
||||
|
||||
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 } = useQuery(
|
||||
"notifications",
|
||||
() => APIClient.notifications.getAll(),
|
||||
{ refetchOnWindowFocus: false }
|
||||
const { data } = useQuery({
|
||||
queryKey: notificationKeys.lists(),
|
||||
queryFn: APIClient.notifications.getAll,
|
||||
refetchOnWindowFocus: false }
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,29 +1,30 @@
|
|||
import { useRef } from "react";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { DeleteModal } from "../../components/modals";
|
||||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { DeleteModal } from "@components/modals";
|
||||
import { releaseKeys } from "@screens/releases/ReleaseTable";
|
||||
|
||||
function ReleaseSettings() {
|
||||
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const deleteMutation = useMutation(() => APIClient.release.delete(), {
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: APIClient.release.delete,
|
||||
onSuccess: () => {
|
||||
toast.custom((t) => (
|
||||
<Toast type="success" body={"All releases were deleted"} t={t}/>
|
||||
));
|
||||
|
||||
// Invalidate filters just in case, most likely not necessary but can't hurt.
|
||||
queryClient.invalidateQueries("releases");
|
||||
queryClient.invalidateQueries({ queryKey: releaseKeys.lists() });
|
||||
}
|
||||
});
|
||||
|
||||
const deleteAction = () => {
|
||||
deleteMutation.mutate();
|
||||
};
|
||||
const deleteAction = () => deleteMutation.mutate();
|
||||
|
||||
const cancelModalButtonRef = useRef(null);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue