changes and improvements

components/CollectionListing.tsx

@@ -155,7 +155,8 @@ const CollectionListing = () => {
     const updatedCollectionOrder = [...user.collectionOrder];
 
     if (source.parentId !== destination.parentId) {
-      await updateCollection.mutateAsync({
+      await updateCollection.mutateAsync(
+        {
           ...movedCollection,
           parentId:
             destination.parentId && destination.parentId !== "root"
@@ -163,7 +164,13 @@ const CollectionListing = () => {
               : destination.parentId === "root"
                 ? "root"
                 : null,
-      } as any);
+        },
+        {
+          onError: (error) => {
+            toast.error(error.message);
+          },
+        }
+      );
     }
 
     if (

components/LinkListOptions.tsx

@@ -10,6 +10,7 @@ import { useRouter } from "next/router";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
 import { useBulkDeleteLinks, useLinks } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   children: React.ReactNode;
@@ -76,11 +77,20 @@ const LinkListOptions = ({
   };
 
   const bulkDeleteLinks = async () => {
+    const load = toast.loading(t("deleting"));
+
     await deleteLinksById.mutateAsync(
       selectedLinks.map((link) => link.id as number),
       {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             setSelectedLinks([]);
+            toast.success(t("deleted"));
+          }
         },
       }
     );

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -11,6 +11,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUser } from "@/hooks/store/user";
 import { useDeleteLink, useUpdateLink } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -44,12 +45,29 @@ export default function LinkActions({
   const deleteLink = useDeleteLink();
 
   const pinLink = async () => {
-    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
+    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
 
-    await updateLink.mutateAsync({
+    const load = toast.loading(t("updating"));
+
+    await updateLink.mutateAsync(
+      {
         ...link,
         pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }],
-    });
+      },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            toast.success(
+              isAlreadyPinned ? t("link_unpinned") : t("link_pinned")
+            );
+          }
+        },
+      }
+    );
   };
 
   return (
@@ -136,7 +154,21 @@ export default function LinkActions({
                 onClick={async (e) => {
                   (document?.activeElement as HTMLElement)?.blur();
                   e.shiftKey
-                    ? await deleteLink.mutateAsync(link.id as number)
+                    ? async () => {
+                        const load = toast.loading(t("deleting"));
+
+                        await deleteLink.mutateAsync(link.id as number, {
+                          onSettled: (data, error) => {
+                            toast.dismiss(load);
+
+                            if (error) {
+                              toast.error(error.message);
+                            } else {
+                              toast.success(t("deleted"));
+                            }
+                          },
+                        });
+                      }
                     : setDeleteLinkModal(true);
                 }}
               >

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -4,6 +4,7 @@ import Modal from "../Modal";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
 import { useBulkDeleteLinks } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -16,12 +17,21 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
   const deleteLinksById = useBulkDeleteLinks();
 
   const deleteLink = async () => {
+    const load = toast.loading(t("deleting"));
+
     await deleteLinksById.mutateAsync(
       selectedLinks.map((link) => link.id as number),
       {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             setSelectedLinks([]);
             onClose();
+            toast.success(t("deleted"));
+          }
         },
       }
     );

components/ModalContent/BulkEditLinksModal.tsx

@@ -36,6 +36,8 @@ export default function BulkEditLinksModal({ onClose }: Props) {
     if (!submitLoader) {
       setSubmitLoader(true);
 
+      const load = toast.loading(t("updating"));
+
       await updateLinks.mutateAsync(
         {
           links: selectedLinks,
@@ -43,9 +45,16 @@ export default function BulkEditLinksModal({ onClose }: Props) {
           removePreviousTags,
         },
         {
-          onSuccess: () => {
+          onSettled: (data, error) => {
+            toast.dismiss(load);
+
+            if (error) {
+              toast.error(error.message);
+            } else {
               setSelectedLinks([]);
               onClose();
+              toast.success(t("updated"));
+            }
           },
         }
       );

components/ModalContent/DeleteCollectionModal.tsx

@@ -7,6 +7,7 @@ import Modal from "../Modal";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
 import { useDeleteCollection } from "@/hooks/store/collections";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -39,10 +40,19 @@ export default function DeleteCollectionModal({
 
       setSubmitLoader(true);
 
+      const load = toast.loading(t("deleting_collection"));
+
       deleteCollection.mutateAsync(collection.id as number, {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             onClose();
             router.push("/collections");
+            toast.success(t("deleted"));
+          }
         },
       });
 

components/ModalContent/DeleteLinkModal.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
 import { useDeleteLink } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -24,13 +25,21 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
   }, []);
 
   const submit = async () => {
+    const load = toast.loading(t("deleting"));
+
     await deleteLink.mutateAsync(link.id as number, {
-      onSuccess: () => {
+      onSettled: (data, error) => {
+        toast.dismiss(load);
+
+        if (error) {
+          toast.error(error.message);
+        } else {
           if (router.pathname.startsWith("/links/[id]")) {
             router.push("/dashboard");
           }
-
           onClose();
+          toast.success(t("deleted"));
+        }
       },
     });
   };

components/ModalContent/EditCollectionModal.tsx

@@ -5,6 +5,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useUpdateCollection } from "@/hooks/store/collections";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -29,9 +30,18 @@ export default function EditCollectionModal({
 
       setSubmitLoader(true);
 
+      const load = toast.loading(t("updating_collection"));
+
       await updateCollection.mutateAsync(collection, {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             onClose();
+            toast.success(t("updated"));
+          }
         },
       });
 

components/ModalContent/EditCollectionSharingModal.tsx

@@ -36,9 +36,18 @@ export default function EditCollectionSharingModal({
 
       setSubmitLoader(true);
 
+      const load = toast.loading(t("updating_collection"));
+
       await updateCollection.mutateAsync(collection, {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             onClose();
+            toast.success(t("updated"));
+          }
         },
       });
 

components/ModalContent/EditLinkModal.tsx

@@ -8,6 +8,7 @@ import Link from "next/link";
 import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useUpdateLink } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -51,9 +52,18 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
     if (!submitLoader) {
       setSubmitLoader(true);
 
+      const load = toast.loading(t("updating"));
+
       await updateLink.mutateAsync(link, {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             onClose();
+            toast.success(t("updated"));
+          }
         },
       });
 

components/ModalContent/NewCollectionModal.tsx

@@ -6,6 +6,7 @@ import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useTranslation } from "next-i18next";
 import { useCreateCollection } from "@/hooks/store/collections";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -37,9 +38,18 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     setSubmitLoader(true);
 
+    const load = toast.loading(t("creating"));
+
     await createCollection.mutateAsync(collection, {
-      onSuccess: () => {
+      onSettled: (data, error) => {
+        toast.dismiss(load);
+
+        if (error) {
+          toast.error(error.message);
+        } else {
           onClose();
+          toast.success(t("created"));
+        }
       },
     });
 

components/ModalContent/NewLinkModal.tsx

@@ -10,6 +10,7 @@ import Modal from "../Modal";
 import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useAddLink } from "@/hooks/store/links";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -88,9 +89,18 @@ export default function NewLinkModal({ onClose }: Props) {
     if (!submitLoader) {
       setSubmitLoader(true);
 
+      const load = toast.loading(t("creating_link"));
+
       await addLink.mutateAsync(link, {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             onClose();
+            toast.success(t("link_created"));
+          }
         },
       });
 

components/ModalContent/NewTokenModal.tsx

@@ -29,9 +29,17 @@ export default function NewTokenModal({ onClose }: Props) {
     if (!submitLoader) {
       setSubmitLoader(true);
 
+      const load = toast.loading(t("creating_token"));
+
       await addToken.mutateAsync(token, {
-        onSuccess: (data) => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             setNewToken(data.secretKey);
+          }
         },
       });
 

components/ModalContent/RevokeTokenModal.tsx

@@ -4,6 +4,7 @@ import Button from "../ui/Button";
 import { useTranslation } from "next-i18next";
 import { AccessToken } from "@prisma/client";
 import { useRevokeToken } from "@/hooks/store/tokens";
+import toast from "react-hot-toast";
 
 type Props = {
   onClose: Function;
@@ -21,9 +22,18 @@ export default function DeleteTokenModal({ onClose, activeToken }: Props) {
   }, [activeToken]);
 
   const deleteLink = async () => {
+    const load = toast.loading(t("deleting"));
+
     await revokeToken.mutateAsync(token.id, {
-      onSuccess: () => {
+      onSettled: (data, error) => {
+        toast.dismiss(load);
+
+        if (error) {
+          toast.error(error.message);
+        } else {
           onClose();
+          toast.success(t("token_revoked"));
+        }
       },
     });
   };

components/ModalContent/UploadFileModal.tsx

@@ -116,11 +116,20 @@ export default function UploadFileModal({ onClose }: Props) {
 
       setSubmitLoader(true);
 
+      const load = toast.loading(t("creating"));
+
       await uploadFile.mutateAsync(
         { link, file },
         {
-          onSuccess: () => {
+          onSettled: (data, error) => {
+            toast.dismiss(load);
+
+            if (error) {
+              toast.error(error.message);
+            } else {
               onClose();
+              toast.success(t("created_success"));
+            }
           },
         }
       );

hooks/store/collections.tsx

@@ -1,7 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import { useTranslation } from "next-i18next";
-import toast from "react-hot-toast";
 
 const useCollections = () => {
   return useQuery({
@@ -15,13 +13,10 @@ const useCollections = () => {
 };
 
 const useCreateCollection = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (body: any) => {
-      const load = toast.loading(t("creating"));
-
       const response = await fetch("/api/v1/collections", {
         body: JSON.stringify(body),
         headers: {
@@ -30,8 +25,6 @@ const useCreateCollection = () => {
         method: "POST",
       });
 
-      toast.dismiss(load);
-
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -39,25 +32,18 @@ const useCreateCollection = () => {
       return data.response;
     },
     onSuccess: (data) => {
-      toast.success(t("created"));
       return queryClient.setQueryData(["collections"], (oldData: any) => {
         return [...oldData, data];
       });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 
 const useUpdateCollection = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (body: any) => {
-      const load = toast.loading(t("updating_collection"));
-
       const response = await fetch(`/api/v1/collections/${body.id}`, {
         method: "PUT",
         headers: {
@@ -66,8 +52,6 @@ const useUpdateCollection = () => {
         body: JSON.stringify(body),
       });
 
-      toast.dismiss(load);
-
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -76,7 +60,6 @@ const useUpdateCollection = () => {
     },
     onSuccess: (data) => {
       {
-        toast.success(t("updated"));
         return queryClient.setQueryData(["collections"], (oldData: any) => {
           return oldData.map((collection: any) =>
             collection.id === data.id ? data : collection
@@ -92,20 +75,14 @@ const useUpdateCollection = () => {
     //       )
     //   });
     // },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 
 const useDeleteCollection = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (id: number) => {
-      const load = toast.loading(t("deleting_collection"));
-
       const response = await fetch(`/api/v1/collections/${id}`, {
         method: "DELETE",
         headers: {
@@ -113,8 +90,6 @@ const useDeleteCollection = () => {
         },
       });
 
-      toast.dismiss(load);
-
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -122,14 +97,10 @@ const useDeleteCollection = () => {
       return data.response;
     },
     onSuccess: (data) => {
-      toast.success(t("deleted"));
       return queryClient.setQueryData(["collections"], (oldData: any) => {
         return oldData.filter((collection: any) => collection.id !== data.id);
       });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 

hooks/store/links.tsx

@@ -5,14 +5,12 @@ import {
   useQueryClient,
   useMutation,
 } from "@tanstack/react-query";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import {
   ArchivedFormat,
   LinkIncludingShortenedCollectionAndTags,
   LinkRequestQuery,
 } from "@/types/global";
-import toast from "react-hot-toast";
-import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 
 const useLinks = (params: LinkRequestQuery = {}) => {
@@ -98,13 +96,10 @@ const buildQueryString = (params: LinkRequestQuery) => {
 };
 
 const useAddLink = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (link: LinkIncludingShortenedCollectionAndTags) => {
-      const load = toast.loading(t("creating_link"));
-
       const response = await fetch("/api/v1/links", {
         method: "POST",
         headers: {
@@ -113,8 +108,6 @@ const useAddLink = () => {
         body: JSON.stringify(link),
       });
 
-      toast.dismiss(load);
-
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -122,8 +115,6 @@ const useAddLink = () => {
       return data.response;
     },
     onSuccess: (data) => {
-      toast.success(t("link_created"));
-
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
         if (!oldData) return undefined;
         return [data, ...oldData];
@@ -141,20 +132,14 @@ const useAddLink = () => {
       queryClient.invalidateQueries({ queryKey: ["tags"] });
       queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 
 const useUpdateLink = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (link: LinkIncludingShortenedCollectionAndTags) => {
-      const load = toast.loading(t("updating"));
-
       const response = await fetch(`/api/v1/links/${link.id}`, {
         method: "PUT",
         headers: {
@@ -163,8 +148,6 @@ const useUpdateLink = () => {
         body: JSON.stringify(link),
       });
 
-      toast.dismiss(load);
-
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -172,8 +155,6 @@ const useUpdateLink = () => {
       return data.response;
     },
     onSuccess: (data) => {
-      toast.success(t("updated"));
-
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
         if (!oldData) return undefined;
         return oldData.map((e: any) => (e.id === data.id ? data : e));
@@ -193,26 +174,18 @@ const useUpdateLink = () => {
       queryClient.invalidateQueries({ queryKey: ["tags"] });
       queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 
 const useDeleteLink = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (id: number) => {
-      const load = toast.loading(t("deleting"));
-
       const response = await fetch(`/api/v1/links/${id}`, {
         method: "DELETE",
       });
 
-      toast.dismiss(load);
-
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -220,8 +193,6 @@ const useDeleteLink = () => {
       return data.response;
     },
     onSuccess: (data) => {
-      toast.success(t("deleted"));
-
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
         if (!oldData) return undefined;
         return oldData.filter((e: any) => e.id !== data.id);
@@ -241,9 +212,6 @@ const useDeleteLink = () => {
       queryClient.invalidateQueries({ queryKey: ["tags"] });
       queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 
@@ -281,13 +249,10 @@ const useGetLink = () => {
 };
 
 const useBulkDeleteLinks = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (linkIds: number[]) => {
-      const load = toast.loading(t("deleting"));
-
       const response = await fetch("/api/v1/links", {
         method: "DELETE",
         headers: {
@@ -296,8 +261,6 @@ const useBulkDeleteLinks = () => {
         body: JSON.stringify({ linkIds }),
       });
 
-      toast.dismiss(load);
-
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -305,8 +268,6 @@ const useBulkDeleteLinks = () => {
       return linkIds;
     },
     onSuccess: (data) => {
-      toast.success(t("deleted"));
-
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
         if (!oldData) return undefined;
         return oldData.filter((e: any) => !data.includes(e.id));
@@ -326,14 +287,10 @@ const useBulkDeleteLinks = () => {
       queryClient.invalidateQueries({ queryKey: ["tags"] });
       queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 
 const useUploadFile = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -354,8 +311,6 @@ const useUploadFile = () => {
         return { ok: false, data: "Invalid file type." };
       }
 
-      const load = toast.loading(t("creating"));
-
       const response = await fetch("/api/v1/links", {
         body: JSON.stringify({
           ...link,
@@ -385,13 +340,9 @@ const useUploadFile = () => {
         );
       }
 
-      toast.dismiss(load);
-
       return data.response;
     },
     onSuccess: (data) => {
-      toast.success(t("created_success"));
-
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
         if (!oldData) return undefined;
         return [data, ...oldData];
@@ -409,14 +360,10 @@ const useUploadFile = () => {
       queryClient.invalidateQueries({ queryKey: ["tags"] });
       queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 
 const useBulkEditLinks = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -432,8 +379,6 @@ const useBulkEditLinks = () => {
       >;
       removePreviousTags: boolean;
     }) => {
-      const load = toast.loading(t("updating"));
-
       const response = await fetch("/api/v1/links", {
         method: "PUT",
         headers: {
@@ -442,8 +387,6 @@ const useBulkEditLinks = () => {
         body: JSON.stringify({ links, newData, removePreviousTags }),
       });
 
-      toast.dismiss(load);
-
       const data = await response.json();
 
       if (!response.ok) throw new Error(data.response);
@@ -451,8 +394,6 @@ const useBulkEditLinks = () => {
       return data.response;
     },
     onSuccess: (data, { links, newData, removePreviousTags }) => {
-      toast.success(t("updated"));
-
       queryClient.setQueryData(["dashboardData"], (oldData: any) => {
         if (!oldData) return undefined;
         return oldData.map((e: any) =>
@@ -477,9 +418,6 @@ const useBulkEditLinks = () => {
       queryClient.invalidateQueries({ queryKey: ["tags"] });
       queryClient.invalidateQueries({ queryKey: ["publicLinks"] });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 

hooks/store/tags.tsx

@@ -1,6 +1,4 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import toast from "react-hot-toast";
-import { useTranslation } from "next-i18next";
 import { TagIncludingLinkCount } from "@/types/global";
 
 const useTags = () => {
@@ -18,12 +16,9 @@ const useTags = () => {
 
 const useUpdateTag = () => {
   const queryClient = useQueryClient();
-  const { t } = useTranslation();
 
   return useMutation({
     mutationFn: async (tag: TagIncludingLinkCount) => {
-      const load = toast.loading(t("applying_changes"));
-
       const response = await fetch(`/api/v1/tags/${tag.id}`, {
         body: JSON.stringify(tag),
         headers: {
@@ -35,8 +30,6 @@ const useUpdateTag = () => {
       const data = await response.json();
       if (!response.ok) throw new Error(data.response);
 
-      toast.dismiss(load);
-
       return data.response;
     },
     onSuccess: (data) => {
@@ -45,22 +38,15 @@ const useUpdateTag = () => {
           tag.id === data.id ? data : tag
         )
       );
-      toast.success(t("tag_renamed"));
-    },
-    onError: (error) => {
-      toast.error(error.message);
     },
   });
 };
 
 const useRemoveTag = () => {
   const queryClient = useQueryClient();
-  const { t } = useTranslation();
 
   return useMutation({
     mutationFn: async (tagId: number) => {
-      const load = toast.loading(t("applying_changes"));
-
       const response = await fetch(`/api/v1/tags/${tagId}`, {
         method: "DELETE",
       });
@@ -68,18 +54,12 @@ const useRemoveTag = () => {
       const data = await response.json();
       if (!response.ok) throw new Error(data.response);
 
-      toast.dismiss(load);
-
       return data.response;
     },
     onSuccess: (data, variables) => {
       queryClient.setQueryData(["tags"], (oldData: any) =>
         oldData.filter((tag: TagIncludingLinkCount) => tag.id !== variables)
       );
-      toast.success(t("tag_deleted"));
-    },
-    onError: (error) => {
-      toast.error(error.message);
     },
   });
 };

hooks/store/tokens.tsx

@@ -1,6 +1,4 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import toast from "react-hot-toast";
-import { useTranslation } from "next-i18next";
 import { AccessToken } from "@prisma/client";
 
 const useTokens = () => {
@@ -19,12 +17,9 @@ const useTokens = () => {
 
 const useAddToken = () => {
   const queryClient = useQueryClient();
-  const { t } = useTranslation();
 
   return useMutation({
     mutationFn: async (body: Partial<AccessToken>) => {
-      const load = toast.loading(t("creating_token"));
-
       const response = await fetch("/api/v1/tokens", {
         body: JSON.stringify(body),
         method: "POST",
@@ -33,8 +28,6 @@ const useAddToken = () => {
       const data = await response.json();
       if (!response.ok) throw new Error(data.response);
 
-      toast.dismiss(load);
-
       return data.response;
     },
     onSuccess: (data) => {
@@ -42,22 +35,15 @@ const useAddToken = () => {
         ...oldData,
         data.token,
       ]);
-      toast.success(t("token_added"));
-    },
-    onError: (error) => {
-      toast.error(error.message);
     },
   });
 };
 
 const useRevokeToken = () => {
   const queryClient = useQueryClient();
-  const { t } = useTranslation();
 
   return useMutation({
     mutationFn: async (tokenId: number) => {
-      const load = toast.loading(t("deleting"));
-
       const response = await fetch(`/api/v1/tokens/${tokenId}`, {
         method: "DELETE",
       });
@@ -65,18 +51,12 @@ const useRevokeToken = () => {
       const data = await response.json();
       if (!response.ok) throw new Error(data.response);
 
-      toast.dismiss(load);
-
       return data.response;
     },
     onSuccess: (data, variables) => {
       queryClient.setQueryData(["tokens"], (oldData: AccessToken[]) =>
         oldData.filter((token: Partial<AccessToken>) => token.id !== variables)
       );
-      toast.success(t("token_revoked"));
-    },
-    onError: (error) => {
-      toast.error(error.message);
     },
   });
 };

hooks/store/user.tsx

@@ -1,6 +1,4 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import toast from "react-hot-toast";
-import { useTranslation } from "next-i18next";
 import { useSession } from "next-auth/react";
 
 const useUser = () => {
@@ -24,13 +22,10 @@ const useUser = () => {
 };
 
 const useUpdateUser = () => {
-  const { t } = useTranslation();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (user: any) => {
-      const load = toast.loading(t("applying_settings"));
-
       const response = await fetch(`/api/v1/users/${user.id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
@@ -39,14 +34,11 @@ const useUpdateUser = () => {
 
       const data = await response.json();
 
-      toast.dismiss(load);
-
       if (!response.ok) throw new Error(data.response);
 
       return data;
     },
     onSuccess: (data) => {
-      toast.success(t("settings_applied"));
       queryClient.setQueryData(["user"], data.response);
     },
     onMutate: async (user) => {
@@ -55,9 +47,6 @@ const useUpdateUser = () => {
         return { ...oldData, ...user };
       });
     },
-    onError: (error) => {
-      toast.error(error.message);
-    },
   });
 };
 

pages/settings/account.tsx

@@ -80,6 +80,8 @@ export default function Account() {
   const submit = async (password?: string) => {
     setSubmitLoader(true);
 
+    const load = toast.loading(t("applying_settings"));
+
     await updateUser.mutateAsync(
       {
         ...user,
@@ -92,6 +94,20 @@ export default function Account() {
             setEmailChangeVerificationModal(false);
           }
         },
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            if (data.response.email !== user.email) {
+              toast.success(t("email_change_request"));
+              setEmailChangeVerificationModal(false);
+            }
+
+            toast.success(t("settings_applied"));
+          }
+        },
       }
     );
 

pages/settings/password.tsx

@@ -24,6 +24,8 @@ export default function Password() {
 
     setSubmitLoader(true);
 
+    const load = toast.loading(t("applying_settings"));
+
     await updateUser.mutateAsync(
       {
         ...account,
@@ -31,9 +33,17 @@ export default function Password() {
         oldPassword,
       },
       {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             setNewPassword("");
             setOldPassword("");
+
+            toast.success(t("settings_applied"));
+          }
         },
       }
     );

pages/settings/preference.tsx

@@ -74,7 +74,22 @@ export default function Appearance() {
   const submit = async () => {
     setSubmitLoader(true);
 
-    await updateUser.mutateAsync({ ...user });
+    const load = toast.loading(t("applying_settings"));
+
+    await updateUser.mutateAsync(
+      { ...user },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            toast.success(t("settings_applied"));
+          }
+        },
+      }
+    );
 
     setSubmitLoader(false);
   };

pages/tags/[id].tsx

@@ -11,6 +11,7 @@ import getServerSideProps from "@/lib/client/getServerSideProps";
 import LinkListOptions from "@/components/LinkListOptions";
 import { useRemoveTag, useTags, useUpdateTag } from "@/hooks/store/tags";
 import Links from "@/components/LinkViews/Links";
+import toast from "react-hot-toast";
 
 export default function Index() {
   const { t } = useTranslation();
@@ -74,11 +75,27 @@ export default function Index() {
 
     setSubmitLoader(true);
 
-    if (activeTag && newTagName)
+    if (activeTag && newTagName) {
-      await updateTag.mutateAsync({
+      const load = toast.loading(t("applying_changes"));
+
+      await updateTag.mutateAsync(
+        {
           ...activeTag,
           name: newTagName,
-      });
+        },
+        {
+          onSettled: (data, error) => {
+            toast.dismiss(load);
+
+            if (error) {
+              toast.error(error.message);
+            } else {
+              toast.success(t("tag_renamed"));
+            }
+          },
+        }
+      );
+    }
 
     setSubmitLoader(false);
     setRenameTag(false);
@@ -87,12 +104,22 @@ export default function Index() {
   const remove = async () => {
     setSubmitLoader(true);
 
-    if (activeTag?.id)
+    if (activeTag?.id) {
+      const load = toast.loading(t("applying_changes"));
+
       await removeTag.mutateAsync(activeTag?.id, {
-        onSuccess: () => {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
             router.push("/links");
+            toast.success(t("tag_deleted"));
+          }
         },
       });
+    }
 
     setSubmitLoader(false);
     setRenameTag(false);