mirror of
https://github.com/idanoo/autobrr
synced 2025-07-24 01:09: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:
parent
0be92bef65
commit
6e5385a490
54 changed files with 1101 additions and 1117 deletions
|
@ -1,26 +1,26 @@
|
|||
import React, { Fragment, useRef, useState } from "react";
|
||||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import { classNames, sleep } from "../../utils";
|
||||
import { Form, Formik, useFormikContext } from "formik";
|
||||
import DEBUG from "../../components/debug";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { DownloadClientTypeOptions, DownloadRuleConditionOptions } from "../../domain/constants";
|
||||
|
||||
import { toast } from "react-hot-toast";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { DeleteModal } from "../../components/modals";
|
||||
|
||||
import { classNames, sleep } from "@utils";
|
||||
import DEBUG from "@components/debug";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { DownloadClientTypeOptions, DownloadRuleConditionOptions } from "@domain/constants";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { useToggle } from "@hooks/hooks";
|
||||
import { DeleteModal } from "@components/modals";
|
||||
import {
|
||||
NumberFieldWide,
|
||||
PasswordFieldWide,
|
||||
RadioFieldsetWide,
|
||||
SwitchGroupWide,
|
||||
TextFieldWide
|
||||
} from "../../components/inputs";
|
||||
import DownloadClient from "../../screens/settings/DownloadClient";
|
||||
import { SelectFieldWide } from "../../components/inputs/input_wide";
|
||||
} from "@components/inputs";
|
||||
import DownloadClient, { clientKeys } from "@screens/settings/DownloadClient";
|
||||
import { SelectFieldWide } from "@components/inputs/input_wide";
|
||||
|
||||
interface InitialValuesSettings {
|
||||
basic?: {
|
||||
|
@ -517,59 +517,51 @@ export function DownloadClientAddForm({ isOpen, toggle }: formProps) {
|
|||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation(
|
||||
(client: DownloadClient) => APIClient.download_clients.create(client),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["downloadClients"]);
|
||||
toast.custom((t) => <Toast type="success" body="Client was added" t={t}/>);
|
||||
const addMutation = useMutation({
|
||||
mutationFn: (client: DownloadClient) => APIClient.download_clients.create(client),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.lists() });
|
||||
toast.custom((t) => <Toast type="success" body="Client was added" t={t}/>);
|
||||
|
||||
toggle();
|
||||
},
|
||||
onError: () => {
|
||||
toast.custom((t) => <Toast type="error" body="Client could not be added" t={t}/>);
|
||||
}
|
||||
toggle();
|
||||
},
|
||||
onError: () => {
|
||||
toast.custom((t) => <Toast type="error" body="Client could not be added" t={t}/>);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const testClientMutation = useMutation(
|
||||
(client: DownloadClient) => APIClient.download_clients.test(client),
|
||||
{
|
||||
onMutate: () => {
|
||||
setIsTesting(true);
|
||||
setIsErrorTest(false);
|
||||
setIsSuccessfulTest(false);
|
||||
},
|
||||
onSuccess: () => {
|
||||
sleep(1000)
|
||||
.then(() => {
|
||||
setIsTesting(false);
|
||||
setIsSuccessfulTest(true);
|
||||
})
|
||||
.then(() => {
|
||||
sleep(2500).then(() => {
|
||||
setIsSuccessfulTest(false);
|
||||
});
|
||||
const onSubmit = (data: unknown) => addMutation.mutate(data as DownloadClient);
|
||||
|
||||
const testClientMutation = useMutation({
|
||||
mutationFn: (client: DownloadClient) => APIClient.download_clients.test(client),
|
||||
onMutate: () => {
|
||||
setIsTesting(true);
|
||||
setIsErrorTest(false);
|
||||
setIsSuccessfulTest(false);
|
||||
},
|
||||
onSuccess: () => {
|
||||
sleep(1000)
|
||||
.then(() => {
|
||||
setIsTesting(false);
|
||||
setIsSuccessfulTest(true);
|
||||
})
|
||||
.then(() => {
|
||||
sleep(2500).then(() => {
|
||||
setIsSuccessfulTest(false);
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
console.log("not added");
|
||||
setIsTesting(false);
|
||||
setIsErrorTest(true);
|
||||
sleep(2500).then(() => {
|
||||
setIsErrorTest(false);
|
||||
});
|
||||
}
|
||||
},
|
||||
onError: () => {
|
||||
console.log("not added");
|
||||
setIsTesting(false);
|
||||
setIsErrorTest(true);
|
||||
sleep(2500).then(() => {
|
||||
setIsErrorTest(false);
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const onSubmit = (data: unknown) => {
|
||||
mutation.mutate(data as DownloadClient);
|
||||
};
|
||||
|
||||
const testClient = (data: unknown) => {
|
||||
testClientMutation.mutate(data as DownloadClient);
|
||||
};
|
||||
const testClient = (data: unknown) => testClientMutation.mutate(data as DownloadClient);
|
||||
|
||||
const initialValues: InitialValues = {
|
||||
name: "",
|
||||
|
@ -692,74 +684,67 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: updateFormP
|
|||
const [isErrorTest, setIsErrorTest] = useState(false);
|
||||
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
|
||||
|
||||
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}/>);
|
||||
toggle();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const deleteMutation = useMutation(
|
||||
(clientID: number) => APIClient.download_clients.delete(clientID),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries();
|
||||
toast.custom((t) => <Toast type="success" body={`${client.name} was deleted.`} t={t}/>);
|
||||
toggleDeleteModal();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const testClientMutation = useMutation(
|
||||
(client: DownloadClient) => APIClient.download_clients.test(client),
|
||||
{
|
||||
onMutate: () => {
|
||||
setIsTesting(true);
|
||||
setIsErrorTest(false);
|
||||
setIsSuccessfulTest(false);
|
||||
},
|
||||
onSuccess: () => {
|
||||
sleep(1000)
|
||||
.then(() => {
|
||||
setIsTesting(false);
|
||||
setIsSuccessfulTest(true);
|
||||
})
|
||||
.then(() => {
|
||||
sleep(2500).then(() => {
|
||||
setIsSuccessfulTest(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
setIsTesting(false);
|
||||
setIsErrorTest(true);
|
||||
sleep(2500).then(() => {
|
||||
setIsErrorTest(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const onSubmit = (data: unknown) => {
|
||||
mutation.mutate(data as DownloadClient);
|
||||
};
|
||||
|
||||
const cancelButtonRef = useRef(null);
|
||||
const cancelModalButtonRef = useRef(null);
|
||||
|
||||
const deleteAction = () => {
|
||||
deleteMutation.mutate(client.id);
|
||||
};
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const testClient = (data: unknown) => {
|
||||
testClientMutation.mutate(data as DownloadClient);
|
||||
};
|
||||
const mutation = useMutation({
|
||||
mutationFn: (client: DownloadClient) => APIClient.download_clients.update(client),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.detail(client.id) });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`${client.name} was updated successfully`} t={t}/>);
|
||||
toggle();
|
||||
}
|
||||
});
|
||||
|
||||
const onSubmit = (data: unknown) => mutation.mutate(data as DownloadClient);
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (clientID: number) => APIClient.download_clients.delete(clientID),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.lists() });
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.detail(client.id) });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`${client.name} was deleted.`} t={t}/>);
|
||||
toggleDeleteModal();
|
||||
}
|
||||
});
|
||||
|
||||
const deleteAction = () => deleteMutation.mutate(client.id);
|
||||
|
||||
|
||||
const testClientMutation = useMutation({
|
||||
mutationFn: (client: DownloadClient) => APIClient.download_clients.test(client),
|
||||
onMutate: () => {
|
||||
setIsTesting(true);
|
||||
setIsErrorTest(false);
|
||||
setIsSuccessfulTest(false);
|
||||
},
|
||||
onSuccess: () => {
|
||||
sleep(1000)
|
||||
.then(() => {
|
||||
setIsTesting(false);
|
||||
setIsSuccessfulTest(true);
|
||||
})
|
||||
.then(() => {
|
||||
sleep(2500).then(() => {
|
||||
setIsSuccessfulTest(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
setIsTesting(false);
|
||||
setIsErrorTest(true);
|
||||
sleep(2500).then(() => {
|
||||
setIsErrorTest(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const testClient = (data: unknown) => testClientMutation.mutate(data as DownloadClient);
|
||||
|
||||
const initialValues = {
|
||||
id: client.id,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue