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

33
web/src/forms/filters/FilterAddForm.tsx
View file

@ -1,16 +1,17 @@
import { Fragment } from "react";
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 { Dialog, Transition } from "@headlessui/react";
import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
import { APIClient } from "../../api/APIClient";
import DEBUG from "../../components/debug";
import Toast from "../../components/notifications/Toast";
import { useNavigate } from "react-router-dom";
import { APIClient } from "@api/APIClient";
import DEBUG from "@components/debug";
import Toast from "@components/notifications/Toast";
import { filterKeys } from "@screens/filters/list";
interface filterAddFormProps {
isOpen: boolean;
toggle: () => void;
@ -19,22 +20,22 @@ interface filterAddFormProps {
function FilterAddForm({ isOpen, toggle }: filterAddFormProps) {
const queryClient = useQueryClient();
const navigate = useNavigate();
const mutation = useMutation(
(filter: Filter) => APIClient.filters.create(filter),
{
onSuccess: (filter) => {
queryClient.invalidateQueries("filters");
toast.custom((t) => <Toast type="success" body={`Filter ${filter.name} was added`} t={t} />);
const mutation = useMutation({
mutationFn: (filter: Filter) => APIClient.filters.create(filter),
onSuccess: (filter) => {
queryClient.invalidateQueries({ queryKey: filterKeys.lists() });
toggle();
if (filter.id) {
navigate(filter.id.toString());
}
toast.custom((t) => <Toast type="success" body={`Filter ${filter.name} was added`} t={t} />);
toggle();
if (filter.id) {
navigate(filter.id.toString());
}
}
);
});
const handleSubmit = (data: unknown) => mutation.mutate(data as Filter);
const validate = (values: FormikValues) => {
const errors = {} as FormikErrors<FormikValues>;
if (!values.name) {

32
web/src/forms/settings/APIKeyAddForm.tsx
View file

@ -1,14 +1,15 @@
import { Fragment } from "react";
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 { Dialog, Transition } from "@headlessui/react";
import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
import { APIClient } from "../../api/APIClient";
import DEBUG from "../../components/debug";
import Toast from "../../components/notifications/Toast";
import { APIClient } from "@api/APIClient";
import DEBUG from "@components/debug";
import Toast from "@components/notifications/Toast";
import { apiKeys } from "@screens/settings/Api";
interface apiKeyAddFormProps {
isOpen: boolean;
@ -18,17 +19,16 @@ interface apiKeyAddFormProps {
function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
const queryClient = useQueryClient();
const mutation = useMutation(
(apikey: APIKey) => APIClient.apikeys.create(apikey),
{
onSuccess: (_, key) => {
queryClient.invalidateQueries("apikeys");
toast.custom((t) => <Toast type="success" body={`API key ${key.name} was added`} t={t}/>);
const mutation = useMutation({
mutationFn: (apikey: APIKey) => APIClient.apikeys.create(apikey),
onSuccess: (_, key) => {
queryClient.invalidateQueries({ queryKey: apiKeys.lists() });
toast.custom((t) => <Toast type="success" body={`API key ${key.name} was added`} t={t}/>);
toggle();
}
toggle();
}
);
});
const handleSubmit = (data: unknown) => mutation.mutate(data as APIKey);
const validate = (values: FormikValues) => {
@ -56,7 +56,6 @@ function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
leaveTo="translate-x-full"
>
<div className="w-screen max-w-2xl border-l dark:border-gray-700">
<Formik
initialValues={{
name: "",
@ -114,10 +113,7 @@ function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
type="text"
className="block w-full shadow-sm dark:bg-gray-800 border-gray-300 dark:border-gray-700 sm:text-sm dark:text-white focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 rounded-md"
/>
{meta.touched && meta.error &&
<span className="block mt-2 text-red-500">{meta.error}</span>}
{meta.touched && meta.error && <span className="block mt-2 text-red-500">{meta.error}</span>}
</div>
)}
</Field>

229
web/src/forms/settings/DownloadClientForms.tsx
View file

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

118
web/src/forms/settings/FeedForms.tsx
View file

@ -1,16 +1,18 @@
import { useMutation, useQueryClient } from "react-query";
import { APIClient } from "../../api/APIClient";
import { toast } from "react-hot-toast";
import Toast from "../../components/notifications/Toast";
import { SlideOver } from "../../components/panels";
import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs";
import { SelectFieldBasic } from "../../components/inputs/select_wide";
import { componentMapType } from "./DownloadClientForms";
import { sleep } from "../../utils";
import { useState } from "react";
import { ImplementationBadges } from "../../screens/settings/Indexer";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-hot-toast";
import { useFormikContext } from "formik";
import { FeedDownloadTypeOptions } from "../../domain/constants";
import { APIClient } from "@api/APIClient";
import Toast from "@components/notifications/Toast";
import { SlideOver } from "@components/panels";
import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "@components/inputs";
import { SelectFieldBasic } from "@components/inputs/select_wide";
import { componentMapType } from "./DownloadClientForms";
import { sleep } from "@utils";
import { ImplementationBadges } from "@screens/settings/Indexer";
import { FeedDownloadTypeOptions } from "@domain/constants";
import { feedKeys } from "@screens/settings/Feed";
interface UpdateProps {
isOpen: boolean;
@ -40,68 +42,58 @@ export function FeedUpdateForm({ isOpen, toggle, feed }: UpdateProps) {
const queryClient = useQueryClient();
const mutation = useMutation(
(feed: Feed) => APIClient.feeds.update(feed),
{
onSuccess: () => {
queryClient.invalidateQueries(["feeds"]);
toast.custom((t) => <Toast type="success" body={`${feed.name} was updated successfully`} t={t} />);
toggle();
}
const mutation = useMutation({
mutationFn: (feed: Feed) => APIClient.feeds.update(feed),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
toast.custom((t) => <Toast type="success" body={`${feed.name} was updated successfully`} t={t} />);
toggle();
}
);
});
const onSubmit = (formData: unknown) => {
mutation.mutate(formData as Feed);
};
const onSubmit = (formData: unknown) => mutation.mutate(formData as Feed);
const deleteMutation = useMutation(
(feedID: number) => APIClient.feeds.delete(feedID),
{
onSuccess: () => {
queryClient.invalidateQueries(["feeds"]);
toast.custom((t) => <Toast type="success" body={`${feed.name} was deleted.`} t={t} />);
}
const deleteMutation = useMutation({
mutationFn: (feedID: number) => APIClient.feeds.delete(feedID),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
toast.custom((t) => <Toast type="success" body={`${feed.name} was deleted.`} t={t} />);
}
);
});
const deleteAction = () => {
deleteMutation.mutate(feed.id);
};
const deleteAction = () => deleteMutation.mutate(feed.id);
const testFeedMutation = useMutation(
(feed: Feed) => APIClient.feeds.test(feed),
{
onMutate: () => {
setIsTesting(true);
setIsErrorTest(false);
setIsSuccessfulTest(false);
},
onSuccess: () => {
sleep(1000)
.then(() => {
setIsTesting(false);
setIsSuccessfulTest(true);
})
.then(() => {
sleep(2500).then(() => {
setIsSuccessfulTest(false);
});
const testFeedMutation = useMutation({
mutationFn: (feed: Feed) => APIClient.feeds.test(feed),
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);
});
}
},
onError: () => {
setIsTesting(false);
setIsErrorTest(true);
sleep(2500).then(() => {
setIsErrorTest(false);
});
}
);
});
const testFeed = (data: unknown) => {
testFeedMutation.mutate(data as Feed);
};
const testFeed = (data: unknown) => testFeedMutation.mutate(data as Feed);
const initialValues: InitialValues = {
id: feed.id,

163
web/src/forms/settings/IndexerForms.tsx
View file

@ -1,20 +1,23 @@
import React, { Fragment, useState } from "react";
import { toast } from "react-hot-toast";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikValues } from "formik";
import { XMarkIcon } from "@heroicons/react/24/solid";
import { Dialog, Transition } from "@headlessui/react";
import { classNames, sleep } from "../../utils";
import DEBUG from "../../components/debug";
import { APIClient } from "../../api/APIClient";
import { PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs";
import { SlideOver } from "../../components/panels";
import Toast from "../../components/notifications/Toast";
import { SelectFieldBasic, SelectFieldCreatable } from "../../components/inputs/select_wide";
import { CustomTooltip } from "../../components/tooltips/CustomTooltip";
import { FeedDownloadTypeOptions } from "../../domain/constants";
import { classNames, sleep } from "@utils";
import DEBUG from "@components/debug";
import { APIClient } from "@api/APIClient";
import { PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "@components/inputs";
import { SlideOver } from "@components/panels";
import Toast from "@components/notifications/Toast";
import { SelectFieldBasic, SelectFieldCreatable } from "@components/inputs/select_wide";
import { CustomTooltip } from "@components/tooltips/CustomTooltip";
import { FeedDownloadTypeOptions } from "@domain/constants";
import { feedKeys } from "@screens/settings/Feed";
import { indexerKeys } from "@screens/settings/Indexer";
const Input = (props: InputProps) => (
<components.Input
@ -244,35 +247,37 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
const [indexer, setIndexer] = useState<IndexerDefinition>({} as IndexerDefinition);
const queryClient = useQueryClient();
const { data } = useQuery(
"indexerDefinition",
() => APIClient.indexers.getSchema(),
{
enabled: isOpen,
refetchOnWindowFocus: false
const { data } = useQuery({
queryKey: ["indexerDefinition"],
queryFn: APIClient.indexers.getSchema,
enabled: isOpen,
refetchOnWindowFocus: false
});
const mutation = useMutation({
mutationFn: (indexer: Indexer) => APIClient.indexers.create(indexer),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: indexerKeys.lists() });
toast.custom((t) => <Toast type="success" body="Indexer was added" t={t} />);
sleep(1500);
toggle();
},
onError: () => {
toast.custom((t) => <Toast type="error" body="Indexer could not be added" t={t} />);
}
);
});
const mutation = useMutation(
(indexer: Indexer) => APIClient.indexers.create(indexer), {
onSuccess: () => {
queryClient.invalidateQueries(["indexer"]);
toast.custom((t) => <Toast type="success" body="Indexer was added" t={t} />);
sleep(1500);
toggle();
},
onError: () => {
toast.custom((t) => <Toast type="error" body="Indexer could not be added" t={t} />);
}
});
const ircMutation = useMutation({
mutationFn: (network: IrcNetworkCreate) => APIClient.irc.createNetwork(network)
});
const ircMutation = useMutation(
(network: IrcNetworkCreate) => APIClient.irc.createNetwork(network)
);
const feedMutation = useMutation(
(feed: FeedCreate) => APIClient.feeds.create(feed)
);
const feedMutation = useMutation({
mutationFn: (feed: FeedCreate) => APIClient.feeds.create(feed),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
}
});
const onSubmit = (formData: FormikValues) => {
const ind = data && data.find(i => i.identifier === formData.identifier);
@ -587,39 +592,37 @@ function TestApiButton({ values, show }: TestApiButtonProps) {
return null;
}
const testApiMutation = useMutation(
(req: IndexerTestApiReq) => APIClient.indexers.testApi(req),
{
onMutate: () => {
setIsTesting(true);
setIsErrorTest(false);
setIsSuccessfulTest(false);
},
onSuccess: () => {
toast.custom((t) => <Toast type="success" body="API test successful!" t={t} />);
const testApiMutation = useMutation({
mutationFn: (req: IndexerTestApiReq) => APIClient.indexers.testApi(req),
onMutate: () => {
setIsTesting(true);
setIsErrorTest(false);
setIsSuccessfulTest(false);
},
onSuccess: () => {
toast.custom((t) => <Toast type="success" body="API test successful!" t={t} />);
sleep(1000)
.then(() => {
setIsTesting(false);
setIsSuccessfulTest(true);
})
.then(() => {
sleep(2500).then(() => {
setIsSuccessfulTest(false);
});
sleep(1000)
.then(() => {
setIsTesting(false);
setIsSuccessfulTest(true);
})
.then(() => {
sleep(2500).then(() => {
setIsSuccessfulTest(false);
});
},
onError: (error: Error) => {
toast.custom((t) => <Toast type="error" body={error.message} t={t} />);
setIsTesting(false);
setIsErrorTest(true);
sleep(2500).then(() => {
setIsErrorTest(false);
});
}
},
onError: (error: Error) => {
toast.custom((t) => <Toast type="error" body={error.message} t={t} />);
setIsTesting(false);
setIsErrorTest(true);
sleep(2500).then(() => {
setIsErrorTest(false);
});
}
);
});
const testApi = () => {
const req: IndexerTestApiReq = {
@ -706,9 +709,11 @@ interface UpdateProps {
export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
const queryClient = useQueryClient();
const mutation = useMutation((indexer: Indexer) => APIClient.indexers.update(indexer), {
const mutation = useMutation({
mutationFn: (indexer: Indexer) => APIClient.indexers.update(indexer),
onSuccess: () => {
queryClient.invalidateQueries(["indexer"]);
queryClient.invalidateQueries({ queryKey: indexerKeys.lists() });
toast.custom((t) => <Toast type="success" body={`${indexer.name} was updated successfully`} t={t} />);
sleep(1500);
@ -716,23 +721,23 @@ export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
}
});
const deleteMutation = useMutation((id: number) => APIClient.indexers.delete(id), {
onSuccess: () => {
queryClient.invalidateQueries(["indexer"]);
toast.custom((t) => <Toast type="success" body={`${indexer.name} was deleted.`} t={t} />);
toggle();
}
});
const onSubmit = (data: unknown) => {
// TODO clear data depending on type
mutation.mutate(data as Indexer);
};
const deleteAction = () => {
deleteMutation.mutate(indexer.id ?? 0);
};
const deleteMutation = useMutation({
mutationFn: (id: number) => APIClient.indexers.delete(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: indexerKeys.lists() });
toast.custom((t) => <Toast type="success" body={`${indexer.name} was deleted.`} t={t} />);
toggle();
}
});
const deleteAction = () => deleteMutation.mutate(indexer.id ?? 0);
const renderSettingFields = (settings: IndexerSetting[]) => {
if (settings === undefined) {

139
web/src/forms/settings/IrcForms.tsx
View file

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

117
web/src/forms/settings/NotificationForms.tsx
View file

@ -4,15 +4,17 @@ import type { FieldProps } from "formik";
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
import { XMarkIcon } from "@heroicons/react/24/solid";
import Select, { components, ControlProps, InputProps, MenuProps, OptionProps } from "react-select";
import { PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs";
import DEBUG from "../../components/debug";
import { EventOptions, NotificationTypeOptions, SelectOption } from "../../domain/constants";
import { useMutation, useQueryClient } from "react-query";
import { APIClient } from "../../api/APIClient";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-hot-toast";
import Toast from "../../components/notifications/Toast";
import { SlideOver } from "../../components/panels";
import { PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "@components/inputs";
import DEBUG from "@components/debug";
import { EventOptions, NotificationTypeOptions, SelectOption } from "@domain/constants";
import { APIClient } from "@api/APIClient";
import Toast from "@components/notifications/Toast";
import { SlideOver } from "@components/panels";
import { componentMapType } from "./DownloadClientForms";
import { notificationKeys } from "@screens/settings/Notifications";
const Input = (props: InputProps) => {
return (
@ -137,36 +139,29 @@ interface AddProps {
export function NotificationAddForm({ isOpen, toggle }: AddProps) {
const queryClient = useQueryClient();
const mutation = useMutation(
(notification: Notification) => APIClient.notifications.create(notification),
{
onSuccess: () => {
queryClient.invalidateQueries(["notifications"]);
toast.custom((t) => <Toast type="success" body="Notification added!" t={t} />);
toggle();
},
onError: () => {
toast.custom((t) => <Toast type="error" body="Notification could not be added" t={t} />);
}
const createMutation = useMutation({
mutationFn: (notification: Notification) => APIClient.notifications.create(notification),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: notificationKeys.lists() });
toast.custom((t) => <Toast type="success" body="Notification added!" t={t} />);
toggle();
},
onError: () => {
toast.custom((t) => <Toast type="error" body="Notification could not be added" t={t} />);
}
);
});
const onSubmit = (formData: unknown) => {
mutation.mutate(formData as Notification);
};
const onSubmit = (formData: unknown) => createMutation.mutate(formData as Notification);
const testMutation = useMutation(
(n: Notification) => APIClient.notifications.test(n),
{
onError: (err) => {
console.error(err);
}
const testMutation = useMutation({
mutationFn: (n: Notification) => APIClient.notifications.test(n),
onError: (err) => {
console.error(err);
}
);
});
const testNotification = (data: unknown) => {
testMutation.mutate(data as Notification);
};
const testNotification = (data: unknown) => testMutation.mutate(data as Notification);
const validate = (values: NotificationAddFormValues) => {
const errors = {} as FormikErrors<FormikValues>;
@ -410,47 +405,37 @@ interface InitialValues {
export function NotificationUpdateForm({ isOpen, toggle, notification }: UpdateProps) {
const queryClient = useQueryClient();
const mutation = useMutation(
(notification: Notification) => APIClient.notifications.update(notification),
{
onSuccess: () => {
queryClient.invalidateQueries(["notifications"]);
toast.custom((t) => <Toast type="success" body={`${notification.name} was updated successfully`} t={t}/>);
toggle();
}
const mutation = useMutation({
mutationFn: (notification: Notification) => APIClient.notifications.update(notification),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: notificationKeys.lists() });
toast.custom((t) => <Toast type="success" body={`${notification.name} was updated successfully`} t={t}/>);
toggle();
}
);
});
const deleteMutation = useMutation(
(notificationID: number) => APIClient.notifications.delete(notificationID),
{
onSuccess: () => {
queryClient.invalidateQueries(["notifications"]);
toast.custom((t) => <Toast type="success" body={`${notification.name} was deleted.`} t={t}/>);
}
const onSubmit = (formData: unknown) => mutation.mutate(formData as Notification);
const deleteMutation = useMutation({
mutationFn: (notificationID: number) => APIClient.notifications.delete(notificationID),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: notificationKeys.lists() });
toast.custom((t) => <Toast type="success" body={`${notification.name} was deleted.`} t={t}/>);
}
);
});
const onSubmit = (formData: unknown) => {
mutation.mutate(formData as Notification);
};
const deleteAction = () => deleteMutation.mutate(notification.id);
const deleteAction = () => {
deleteMutation.mutate(notification.id);
};
const testMutation = useMutation(
(n: Notification) => APIClient.notifications.test(n),
{
onError: (err) => {
console.error(err);
}
const testMutation = useMutation({
mutationFn: (n: Notification) => APIClient.notifications.test(n),
onError: (err) => {
console.error(err);
}
);
});
const testNotification = (data: unknown) => {
testMutation.mutate(data as Notification);
};
const testNotification = (data: unknown) => testMutation.mutate(data as Notification);
const initialValues: InitialValues = {
id: notification.id,