From 24af83923df4bdb7ed7b6efeb4a9d7336b7be8b7 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Mon, 16 Oct 2023 12:20:57 +1100 Subject: [PATCH] refactor: extract toast --- .../documents/data-table-action-button.tsx | 12 +++++++++- .../documents/data-table-action-dropdown.tsx | 12 +++++++++- .../client-only/hooks/use-copy-share-link.ts | 22 +++++++------------ packages/lib/constants/toast.ts | 13 +++++++++++ .../document/document-share-button.tsx | 12 +++++++++- packages/ui/primitives/use-toast.ts | 2 +- 6 files changed, 55 insertions(+), 18 deletions(-) create mode 100644 packages/lib/constants/toast.ts diff --git a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx index 7acd21b4a..1a58d19cd 100644 --- a/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx +++ b/apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx @@ -7,8 +7,13 @@ import { useSession } from 'next-auth/react'; import { match } from 'ts-pattern'; import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link'; +import { + TOAST_DOCUMENT_SHARE_ERROR, + TOAST_DOCUMENT_SHARE_SUCCESS, +} from '@documenso/lib/constants/toast'; import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client'; import { Button } from '@documenso/ui/primitives/button'; +import { useToast } from '@documenso/ui/primitives/use-toast'; export type DataTableActionButtonProps = { row: Document & { @@ -20,7 +25,12 @@ export type DataTableActionButtonProps = { export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => { const { data: session } = useSession(); - const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink(); + const { toast } = useToast(); + + const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({ + onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS), + onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR), + }); if (!session) { return null; diff --git a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx index 5b2a8c44c..0b4a98bab 100644 --- a/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx +++ b/apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx @@ -19,6 +19,10 @@ import { import { useSession } from 'next-auth/react'; import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link'; +import { + TOAST_DOCUMENT_SHARE_ERROR, + TOAST_DOCUMENT_SHARE_SUCCESS, +} from '@documenso/lib/constants/toast'; import { getFile } from '@documenso/lib/universal/upload/get-file'; import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client'; import { DocumentWithData } from '@documenso/prisma/types/document-with-data'; @@ -30,6 +34,7 @@ import { DropdownMenuLabel, DropdownMenuTrigger, } from '@documenso/ui/primitives/dropdown-menu'; +import { useToast } from '@documenso/ui/primitives/use-toast'; import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog'; @@ -43,7 +48,12 @@ export type DataTableActionDropdownProps = { export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => { const { data: session } = useSession(); - const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink(); + const { toast } = useToast(); + + const { createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({ + onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS), + onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR), + }); const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false); diff --git a/packages/lib/client-only/hooks/use-copy-share-link.ts b/packages/lib/client-only/hooks/use-copy-share-link.ts index 754b21851..255949e3c 100644 --- a/packages/lib/client-only/hooks/use-copy-share-link.ts +++ b/packages/lib/client-only/hooks/use-copy-share-link.ts @@ -1,12 +1,14 @@ import { trpc } from '@documenso/trpc/react'; import { TCreateOrGetShareLinkMutationSchema } from '@documenso/trpc/server/share-link-router/schema'; -import { useToast } from '@documenso/ui/primitives/use-toast'; import { useCopyToClipboard } from './use-copy-to-clipboard'; -export function useCopyShareLink() { - const { toast } = useToast(); +export type UseCopyShareLinkOptions = { + onSuccess?: () => void; + onError?: () => void; +}; +export function useCopyShareLink({ onSuccess, onError }: UseCopyShareLinkOptions) { const [, copyToClipboard] = useCopyToClipboard(); const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } = @@ -37,17 +39,9 @@ export function useCopyShareLink() { throw new Error('Copy to clipboard failed'); } - toast({ - title: 'Copied to clipboard', - description: 'The sharing link has been copied to your clipboard.', - }); - } catch { - toast({ - variant: 'destructive', - title: 'Something went wrong', - description: 'The sharing link could not be created at this time. Please try again.', - duration: 5000, - }); + onSuccess?.(); + } catch (e) { + onError?.(); } }; diff --git a/packages/lib/constants/toast.ts b/packages/lib/constants/toast.ts new file mode 100644 index 000000000..d07d273a1 --- /dev/null +++ b/packages/lib/constants/toast.ts @@ -0,0 +1,13 @@ +import { Toast } from '@documenso/ui/primitives/use-toast'; + +export const TOAST_DOCUMENT_SHARE_SUCCESS: Toast = { + title: 'Copied to clipboard', + description: 'The sharing link has been copied to your clipboard.', +} as const; + +export const TOAST_DOCUMENT_SHARE_ERROR: Toast = { + variant: 'destructive', + title: 'Something went wrong', + description: 'The sharing link could not be created at this time. Please try again.', + duration: 5000, +}; diff --git a/packages/ui/components/document/document-share-button.tsx b/packages/ui/components/document/document-share-button.tsx index 28e2fb2c2..7e77ff1a3 100644 --- a/packages/ui/components/document/document-share-button.tsx +++ b/packages/ui/components/document/document-share-button.tsx @@ -6,6 +6,10 @@ import { Copy, Share } from 'lucide-react'; import { FaXTwitter } from 'react-icons/fa6'; import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link'; +import { + TOAST_DOCUMENT_SHARE_ERROR, + TOAST_DOCUMENT_SHARE_SUCCESS, +} from '@documenso/lib/constants/toast'; import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent'; import { trpc } from '@documenso/trpc/react'; import { cn } from '@documenso/ui/lib/utils'; @@ -18,6 +22,7 @@ import { DialogTitle, DialogTrigger, } from '@documenso/ui/primitives/dialog'; +import { useToast } from '@documenso/ui/primitives/use-toast'; export type DocumentShareButtonProps = HTMLAttributes & { token: string; @@ -25,7 +30,12 @@ export type DocumentShareButtonProps = HTMLAttributes & { }; export const DocumentShareButton = ({ token, documentId, className }: DocumentShareButtonProps) => { - const { copyShareLink, createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink(); + const { toast } = useToast(); + + const { copyShareLink, createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({ + onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS), + onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR), + }); const [isOpen, setIsOpen] = useState(false); diff --git a/packages/ui/primitives/use-toast.ts b/packages/ui/primitives/use-toast.ts index 45f4eb41f..6524baf30 100644 --- a/packages/ui/primitives/use-toast.ts +++ b/packages/ui/primitives/use-toast.ts @@ -133,7 +133,7 @@ function dispatch(action: Action) { }); } -type Toast = Omit; +export type Toast = Omit; function toast({ ...props }: Toast) { const id = genId();