mirror of
https://github.com/idanoo/autobrr
synced 2025-07-26 10:19: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,13 +1,18 @@
|
|||
import { useMutation, useQueryClient } from "react-query";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import type { FieldProps } from "formik";
|
||||
import { Field, FieldArray, FormikErrors, FormikValues } from "formik";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, SwitchGroupWideRed, TextFieldWide } from "../../components/inputs";
|
||||
import { SlideOver } from "../../components/panels";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
|
||||
import { Dialog } from "@headlessui/react";
|
||||
|
||||
import { IrcAuthMechanismTypeOptions, OptionBasicTyped } from "@domain/constants";
|
||||
import { ircKeys } from "@screens/settings/Irc";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, SwitchGroupWideRed, TextFieldWide } from "@components/inputs";
|
||||
import { SlideOver } from "@components/panels";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
|
||||
interface ChannelsFieldArrayProps {
|
||||
channels: IrcChannel[];
|
||||
|
|
@ -96,43 +101,21 @@ interface AddFormProps {
|
|||
|
||||
export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation(
|
||||
(network: IrcNetwork) => APIClient.irc.createNetwork(network),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["networks"]);
|
||||
toast.custom((t) => <Toast type="success" body="IRC Network added. Please allow up to 30 seconds for the network to come online." t={t} />);
|
||||
toggle();
|
||||
},
|
||||
onError: () => {
|
||||
toast.custom((t) => <Toast type="error" body="IRC Network could not be added" t={t} />);
|
||||
}
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (network: IrcNetwork) => APIClient.irc.createNetwork(network),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body="IRC Network added. Please allow up to 30 seconds for the network to come online." t={t} />);
|
||||
toggle();
|
||||
},
|
||||
onError: () => {
|
||||
toast.custom((t) => <Toast type="error" body="IRC Network could not be added" t={t} />);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const onSubmit = (data: unknown) => {
|
||||
mutation.mutate(data as IrcNetwork);
|
||||
};
|
||||
|
||||
const validate = (values: FormikValues) => {
|
||||
const errors = {} as FormikErrors<FormikValues>;
|
||||
if (!values.name)
|
||||
errors.name = "Required";
|
||||
|
||||
if (!values.port)
|
||||
errors.port = "Required";
|
||||
|
||||
if (!values.server)
|
||||
errors.server = "Required";
|
||||
|
||||
if (!values.nick)
|
||||
errors.nick = "Required";
|
||||
|
||||
// if (!values.auth || !values.auth.account)
|
||||
// errors.auth = { account: "Required" };
|
||||
|
||||
return errors;
|
||||
};
|
||||
const onSubmit = (data: unknown) => mutation.mutate(data as IrcNetwork);
|
||||
|
||||
const initialValues: IrcNetworkAddFormValues = {
|
||||
name: "",
|
||||
|
|
@ -157,7 +140,7 @@ export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
|
|||
toggle={toggle}
|
||||
onSubmit={onSubmit}
|
||||
initialValues={initialValues}
|
||||
validate={validate}
|
||||
validate={validateNetwork}
|
||||
>
|
||||
{(values) => (
|
||||
<div className="flex flex-col space-y-4 px-1 py-6 sm:py-0 sm:space-y-0">
|
||||
|
|
@ -214,6 +197,28 @@ export function IrcNetworkAddForm({ isOpen, toggle }: AddFormProps) {
|
|||
);
|
||||
}
|
||||
|
||||
const validateNetwork = (values: FormikValues) => {
|
||||
const errors = {} as FormikErrors<FormikValues>;
|
||||
|
||||
if (!values.name) {
|
||||
errors.name = "Required";
|
||||
}
|
||||
|
||||
if (!values.server) {
|
||||
errors.server = "Required";
|
||||
}
|
||||
|
||||
if (!values.port) {
|
||||
errors.port = "Required";
|
||||
}
|
||||
|
||||
if (!values.nick) {
|
||||
errors.nick = "Required";
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
interface IrcNetworkUpdateFormValues {
|
||||
id: number;
|
||||
name: string;
|
||||
|
|
@ -241,53 +246,31 @@ export function IrcNetworkUpdateForm({
|
|||
}: IrcNetworkUpdateFormProps) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation((network: IrcNetwork) => APIClient.irc.updateNetwork(network), {
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (network: IrcNetwork) => APIClient.irc.updateNetwork(network),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["networks"]);
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`${network.name} was updated successfully`} t={t} />);
|
||||
|
||||
toggle();
|
||||
}
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation((id: number) => APIClient.irc.deleteNetwork(id), {
|
||||
const onSubmit = (data: unknown) => updateMutation.mutate(data as IrcNetwork);
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => APIClient.irc.deleteNetwork(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["networks"]);
|
||||
queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`${network.name} was deleted.`} t={t} />);
|
||||
|
||||
toggle();
|
||||
}
|
||||
});
|
||||
|
||||
const onSubmit = (data: unknown) => {
|
||||
console.log("submit: ", data);
|
||||
mutation.mutate(data as IrcNetwork);
|
||||
};
|
||||
|
||||
const validate = (values: FormikValues) => {
|
||||
const errors = {} as FormikErrors<FormikValues>;
|
||||
|
||||
if (!values.name) {
|
||||
errors.name = "Required";
|
||||
}
|
||||
|
||||
if (!values.server) {
|
||||
errors.server = "Required";
|
||||
}
|
||||
|
||||
if (!values.port) {
|
||||
errors.port = "Required";
|
||||
}
|
||||
|
||||
if (!values.nick) {
|
||||
errors.nick = "Required";
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
const deleteAction = () => {
|
||||
deleteMutation.mutate(network.id);
|
||||
};
|
||||
const deleteAction = () => deleteMutation.mutate(network.id);
|
||||
|
||||
const initialValues: IrcNetworkUpdateFormValues = {
|
||||
id: network.id,
|
||||
|
|
@ -312,7 +295,7 @@ export function IrcNetworkUpdateForm({
|
|||
onSubmit={onSubmit}
|
||||
deleteAction={deleteAction}
|
||||
initialValues={initialValues}
|
||||
validate={validate}
|
||||
validate={validateNetwork}
|
||||
>
|
||||
{(values) => (
|
||||
<div className="flex flex-col space-y-4 px-1 py-6 sm:py-0 sm:space-y-0">
|
||||
|
|
@ -459,10 +442,6 @@ function SelectField<T>({ name, label, options }: SelectFieldProps<T>) {
|
|||
);
|
||||
}
|
||||
|
||||
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
|
||||
import { IrcAuthMechanismTypeOptions, OptionBasicTyped } from "../../domain/constants";
|
||||
import { Dialog } from "@headlessui/react";
|
||||
|
||||
const Input = (props: InputProps) => {
|
||||
return (
|
||||
<components.Input
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue