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

* 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

web/src/screens/settings/Application.tsx

@@ -100,13 +100,10 @@ function ApplicationSettings() {
     }
   });
 
-  const toggleCheckUpdateMutation = useMutation({
-    mutationFn: (value: boolean) => APIClient.config.update({ check_for_updates: value }),
-    onSuccess: () => {
-      toast.custom((t) => <Toast type="success" body={"Config successfully updated!"} t={t}/>);
-
+  const toggleCheckUpdateMutation = useMutation((value: boolean) => APIClient.config.update({ check_for_updates: value }).then(() => value), {
+    onSuccess: (value: boolean) => {
+      toast.custom(t => <Toast type="success" body={`${value ? "You will now be notified of new updates." : "You will no longer be notified of new updates."}`} t={t} />);
       queryClient.invalidateQueries({ queryKey: ["config"] });
-
       checkUpdateMutation.mutate();
     }
   });

web/src/screens/settings/DownloadClient.tsx

@@ -93,10 +93,9 @@ function DownloadClientSettingsListItem({ client }: DLSettingsItemProps) {
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
-    mutationFn: (client: DownloadClient) => APIClient.download_clients.update(client),
-    onSuccess: () => {
-      toast.custom((t) => <Toast type="success" body={`${client.name} was updated successfully`} t={t}/>);
-
+    mutationFn: (client: DownloadClient) => APIClient.download_clients.update(client).then(() => client),
+    onSuccess: (client: DownloadClient) => {
+      toast.custom(t => <Toast type="success" body={`${client.name} was ${client.enabled ? "enabled" : "disabled"} successfully.`} t={t} />);
       queryClient.invalidateQueries({ queryKey: clientKeys.lists() });
     }
   });

web/src/screens/settings/Feed.tsx

@@ -159,7 +159,7 @@ function ListItem({ feed }: ListItemProps) {
       queryClient.invalidateQueries({ queryKey: feedKeys.lists() });
       queryClient.invalidateQueries({ queryKey: feedKeys.detail(feed.id) });
 
-      toast.custom((t) => <Toast type="success" body={`${feed.name} was ${!enabled ? "disabled" : "enabled"} successfully`} t={t}/>);
+      toast.custom((t) => <Toast type="success" body={`${feed.name} was ${!enabled ? "disabled" : "enabled"} successfully.`} t={t}/>);
     }
   });
 

web/src/screens/settings/Irc.tsx

@@ -219,11 +219,10 @@ const ListItem = ({ idx, network, expanded }: ListItemProps) => {
   const queryClient = useQueryClient();
 
   const updateMutation = useMutation({
-    mutationFn: (network: IrcNetwork) => APIClient.irc.updateNetwork(network),
-    onSuccess: () => {
+    mutationFn: (network: IrcNetwork) => APIClient.irc.updateNetwork(network).then(() => network),
+    onSuccess: (network: IrcNetwork) => {
       queryClient.invalidateQueries({ queryKey: ircKeys.lists() });
-
-      toast.custom((t) => <Toast type="success" body={`${network.name} was updated successfully`} t={t}/>);
+      toast.custom(t => <Toast type="success" body={`${network.name} was ${network.enabled ? "enabled" : "disabled"} successfully.`} t={t} />);
     }
   });
 

web/src/screens/settings/Notifications.tsx

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