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

enhancement(web): mutation improvements and toast updates (#913)

Browse source 
* make notification switch take onToggleMutation

Instead of opening it like the edit button, it now enables/disables it directly.

* improved toast for update checks

* improved toast for download clients

it now mentions what client is enabled/disabled

* improved irc network toast

* added toast when copying apikey

* added toast to log download

implemented an info variant for the toasts

* improved feed toast

* improved toast for update checks

* Merge branch 'develop' into enhancement/mutation-improvements-toast-updates
This commit is contained in:
soup 2023-05-06 18:19:43 +02:00 • committed by GitHub
parent 96e38e649a
commit 8acf33589d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 68 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

25
web/src/screens/settings/Notifications.tsx
View file

@ -3,7 +3,7 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import { useQuery } from "@tanstack/react-query";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Switch } from "@headlessui/react";
import { APIClient } from "@api/APIClient";
@ -12,6 +12,8 @@ import { useToggle } from "@hooks/hooks";
import { NotificationAddForm, NotificationUpdateForm } from "@forms/settings/NotificationForms";
import { classNames } from "@utils";
import { componentMapType } from "@forms/settings/DownloadClientForms";
import Toast from "@components/notifications/Toast";
import toast from "react-hot-toast";
export const notificationKeys = {
all: ["notifications"] as const,
@ -106,12 +108,29 @@ const iconComponentMap: componentMapType = {
};
interface ListItemProps {
notification: Notification;
notification: Notification;
}
function ListItem({ notification }: ListItemProps) {
const [updateFormIsOpen, toggleUpdateForm] = useToggle(false);
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: (notification: Notification) => APIClient.notifications.update(notification).then(() => notification),
onSuccess: (notification: Notification) => {
toast.custom(t => <Toast type="success" body={`${notification.name} was ${notification.enabled ? "enabled" : "disabled"} successfully.`} t={t} />);
queryClient.invalidateQueries({ queryKey: notificationKeys.lists() });
}
});
const onToggleMutation = (newState: boolean) => {
mutation.mutate({
...notification,
enabled: newState
});
};
return (
<li key={notification.id} className="text-gray-500 dark:text-gray-400">
<NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
@ -120,7 +139,7 @@ function ListItem({ notification }: ListItemProps) {
<div className="col-span-2 sm:col-span-1 px-6 flex items-center ">
<Switch
checked={notification.enabled}
onChange={toggleUpdateForm}
onChange={onToggleMutation}
className={classNames(
notification.enabled ? "bg-blue-500" : "bg-gray-200 dark:bg-gray-600",
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"