From 9cc3a7206e26a368bd751a8590a952c4962cd131 Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Wed, 14 Aug 2024 15:22:28 -0400 Subject: [PATCH] changes and improvements --- components/CollectionListing.tsx | 25 +++++--- components/LinkListOptions.tsx | 14 +++- .../LinkViews/LinkComponents/LinkActions.tsx | 44 +++++++++++-- .../ModalContent/BulkDeleteLinksModal.tsx | 16 ++++- .../ModalContent/BulkEditLinksModal.tsx | 15 ++++- .../ModalContent/DeleteCollectionModal.tsx | 16 ++++- components/ModalContent/DeleteLinkModal.tsx | 21 ++++-- .../ModalContent/EditCollectionModal.tsx | 14 +++- .../EditCollectionSharingModal.tsx | 13 +++- components/ModalContent/EditLinkModal.tsx | 14 +++- .../ModalContent/NewCollectionModal.tsx | 14 +++- components/ModalContent/NewLinkModal.tsx | 14 +++- components/ModalContent/NewTokenModal.tsx | 12 +++- components/ModalContent/RevokeTokenModal.tsx | 14 +++- components/ModalContent/UploadFileModal.tsx | 13 +++- hooks/store/collections.tsx | 29 --------- hooks/store/links.tsx | 64 +------------------ hooks/store/tags.tsx | 20 ------ hooks/store/tokens.tsx | 20 ------ hooks/store/user.tsx | 11 ---- pages/settings/account.tsx | 16 +++++ pages/settings/password.tsx | 16 ++++- pages/settings/preference.tsx | 17 ++++- pages/tags/[id].tsx | 43 ++++++++++--- 24 files changed, 292 insertions(+), 203 deletions(-) diff --git a/components/CollectionListing.tsx b/components/CollectionListing.tsx index 8abc080..e83d388 100644 --- a/components/CollectionListing.tsx +++ b/components/CollectionListing.tsx @@ -155,15 +155,22 @@ const CollectionListing = () => { const updatedCollectionOrder = [...user.collectionOrder]; if (source.parentId !== destination.parentId) { - await updateCollection.mutateAsync({ - ...movedCollection, - parentId: - destination.parentId && destination.parentId !== "root" - ? Number(destination.parentId) - : destination.parentId === "root" - ? "root" - : null, - } as any); + await updateCollection.mutateAsync( + { + ...movedCollection, + parentId: + destination.parentId && destination.parentId !== "root" + ? Number(destination.parentId) + : destination.parentId === "root" + ? "root" + : null, + }, + { + onError: (error) => { + toast.error(error.message); + }, + } + ); } if ( diff --git a/components/LinkListOptions.tsx b/components/LinkListOptions.tsx index 6ec063d..8a2c0fb 100644 --- a/components/LinkListOptions.tsx +++ b/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: () => { - setSelectedLinks([]); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + setSelectedLinks([]); + toast.success(t("deleted")); + } }, } ); diff --git a/components/LinkViews/LinkComponents/LinkActions.tsx b/components/LinkViews/LinkComponents/LinkActions.tsx index 6d55d85..d795f5e 100644 --- a/components/LinkViews/LinkComponents/LinkActions.tsx +++ b/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({ - ...link, - pinnedBy: isAlreadyPinned ? undefined : [{ id: user.id }], - }); + 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); }} > diff --git a/components/ModalContent/BulkDeleteLinksModal.tsx b/components/ModalContent/BulkDeleteLinksModal.tsx index c97553e..22d402b 100644 --- a/components/ModalContent/BulkDeleteLinksModal.tsx +++ b/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: () => { - setSelectedLinks([]); - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + setSelectedLinks([]); + onClose(); + toast.success(t("deleted")); + } }, } ); diff --git a/components/ModalContent/BulkEditLinksModal.tsx b/components/ModalContent/BulkEditLinksModal.tsx index 3797e38..c2eab0f 100644 --- a/components/ModalContent/BulkEditLinksModal.tsx +++ b/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: () => { - setSelectedLinks([]); - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + setSelectedLinks([]); + onClose(); + toast.success(t("updated")); + } }, } ); diff --git a/components/ModalContent/DeleteCollectionModal.tsx b/components/ModalContent/DeleteCollectionModal.tsx index 907f1c0..359209e 100644 --- a/components/ModalContent/DeleteCollectionModal.tsx +++ b/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: () => { - onClose(); - router.push("/collections"); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + onClose(); + router.push("/collections"); + toast.success(t("deleted")); + } }, }); diff --git a/components/ModalContent/DeleteLinkModal.tsx b/components/ModalContent/DeleteLinkModal.tsx index ba5e5ed..5a21075 100644 --- a/components/ModalContent/DeleteLinkModal.tsx +++ b/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 () => { - await deleteLink.mutateAsync(link.id as number, { - onSuccess: () => { - if (router.pathname.startsWith("/links/[id]")) { - router.push("/dashboard"); - } + const load = toast.loading(t("deleting")); - onClose(); + await deleteLink.mutateAsync(link.id as number, { + 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")); + } }, }); }; diff --git a/components/ModalContent/EditCollectionModal.tsx b/components/ModalContent/EditCollectionModal.tsx index 3009122..f8dfd20 100644 --- a/components/ModalContent/EditCollectionModal.tsx +++ b/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: () => { - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + onClose(); + toast.success(t("updated")); + } }, }); diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx index ae52ef8..84dae82 100644 --- a/components/ModalContent/EditCollectionSharingModal.tsx +++ b/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: () => { - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + onClose(); + toast.success(t("updated")); + } }, }); diff --git a/components/ModalContent/EditLinkModal.tsx b/components/ModalContent/EditLinkModal.tsx index 7613c25..2d9711b 100644 --- a/components/ModalContent/EditLinkModal.tsx +++ b/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: () => { - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + onClose(); + toast.success(t("updated")); + } }, }); diff --git a/components/ModalContent/NewCollectionModal.tsx b/components/ModalContent/NewCollectionModal.tsx index 24284e2..df9d9bb 100644 --- a/components/ModalContent/NewCollectionModal.tsx +++ b/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: () => { - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + onClose(); + toast.success(t("created")); + } }, }); diff --git a/components/ModalContent/NewLinkModal.tsx b/components/ModalContent/NewLinkModal.tsx index 05350a5..660c1e4 100644 --- a/components/ModalContent/NewLinkModal.tsx +++ b/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: () => { - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + onClose(); + toast.success(t("link_created")); + } }, }); diff --git a/components/ModalContent/NewTokenModal.tsx b/components/ModalContent/NewTokenModal.tsx index 90e98a7..0528270 100644 --- a/components/ModalContent/NewTokenModal.tsx +++ b/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) => { - setNewToken(data.secretKey); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + setNewToken(data.secretKey); + } }, }); diff --git a/components/ModalContent/RevokeTokenModal.tsx b/components/ModalContent/RevokeTokenModal.tsx index 0e128c9..6964d3d 100644 --- a/components/ModalContent/RevokeTokenModal.tsx +++ b/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: () => { - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + onClose(); + toast.success(t("token_revoked")); + } }, }); }; diff --git a/components/ModalContent/UploadFileModal.tsx b/components/ModalContent/UploadFileModal.tsx index 2e43d56..bbb1577 100644 --- a/components/ModalContent/UploadFileModal.tsx +++ b/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: () => { - onClose(); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + onClose(); + toast.success(t("created_success")); + } }, } ); diff --git a/hooks/store/collections.tsx b/hooks/store/collections.tsx index 4d0a93f..e16a326 100644 --- a/hooks/store/collections.tsx +++ b/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); - }, }); }; diff --git a/hooks/store/links.tsx b/hooks/store/links.tsx index 2fd7c2b..da503f4 100644 --- a/hooks/store/links.tsx +++ b/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); - }, }); }; diff --git a/hooks/store/tags.tsx b/hooks/store/tags.tsx index c9738fe..deab456 100644 --- a/hooks/store/tags.tsx +++ b/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); }, }); }; diff --git a/hooks/store/tokens.tsx b/hooks/store/tokens.tsx index 18bcd9d..b48fce0 100644 --- a/hooks/store/tokens.tsx +++ b/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) => { - 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) => token.id !== variables) ); - toast.success(t("token_revoked")); - }, - onError: (error) => { - toast.error(error.message); }, }); }; diff --git a/hooks/store/user.tsx b/hooks/store/user.tsx index a470cc5..98ba03c 100644 --- a/hooks/store/user.tsx +++ b/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); - }, }); }; diff --git a/pages/settings/account.tsx b/pages/settings/account.tsx index c392596..06d1172 100644 --- a/pages/settings/account.tsx +++ b/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")); + } + }, } ); diff --git a/pages/settings/password.tsx b/pages/settings/password.tsx index 4b0d3e8..808be7a 100644 --- a/pages/settings/password.tsx +++ b/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: () => { - setNewPassword(""); - setOldPassword(""); + onSettled: (data, error) => { + toast.dismiss(load); + + if (error) { + toast.error(error.message); + } else { + setNewPassword(""); + setOldPassword(""); + + toast.success(t("settings_applied")); + } }, } ); diff --git a/pages/settings/preference.tsx b/pages/settings/preference.tsx index 2e33ca1..4d93d02 100644 --- a/pages/settings/preference.tsx +++ b/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); }; diff --git a/pages/tags/[id].tsx b/pages/tags/[id].tsx index e71fe84..1d00b81 100644 --- a/pages/tags/[id].tsx +++ b/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) - await updateTag.mutateAsync({ - ...activeTag, - name: newTagName, - }); + if (activeTag && newTagName) { + 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: () => { - router.push("/links"); + 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);