idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): replace pkg react-query with tanstack/react-query (#868)

Browse source 
* 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 2023-04-27 21:26:27 +02:00 • committed by GitHub
parent 0be92bef65
commit 6e5385a490
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 1101 additions and 1117 deletions
Download patch file Download diff file Expand all files Collapse all files

93
web/src/screens/settings/Irc.tsx
View file

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