feat: confirm to delete dialog

apps/web/src/components/forms/token.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useState } from 'react';
-
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -14,14 +12,6 @@ import { trpc } from '@documenso/trpc/react';
 import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
 import {
   Form,
   FormControl,
@@ -33,6 +23,8 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
+
 export type ApiTokenFormProps = {
   className?: string;
 };
@@ -43,12 +35,9 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
   const router = useRouter();
   const [, copy] = useCopyToClipboard();
   const { toast } = useToast();
-  const [isOpen, setIsOpen] = useState(false);
-  const [tokenIdToDelete, setTokenIdToDelete] = useState<number>(0);
 
   const { data: tokens } = trpc.apiToken.getTokens.useQuery();
   const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation();
-  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation();
 
   const form = useForm<TCreateTokenMutationSchema>({
     resolver: zodResolver(ZCreateTokenMutationSchema),
@@ -57,25 +46,6 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
     },
   });
 
-  const deleteToken = async (id: number) => {
-    try {
-      await deleteTokenMutation({
-        id,
-      });
-
-      toast({
-        title: 'Token deleted',
-        description: 'The token was deleted successfully.',
-        duration: 5000,
-      });
-
-      setIsOpen(false);
-      router.refresh();
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
   const copyToken = (token: string) => {
     void copy(token).then(() => {
       toast({
@@ -97,6 +67,7 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
         duration: 5000,
       });
 
+      form.reset();
       router.refresh();
     } catch (error) {
       if (error instanceof TRPCClientError && error.data?.code === 'BAD_REQUEST') {
@@ -109,6 +80,7 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
         toast({
           title: 'An unknown error occurred',
           variant: 'destructive',
+          duration: 5000,
           description:
             'We encountered an unknown error while attempting create the new token. Please try again later.',
         });
@@ -118,35 +90,6 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
 
   return (
     <div className={cn(className)}>
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Are you sure you want to delete this token?</DialogTitle>
-
-            <DialogDescription>
-              Please note that this action is irreversible. Once confirmed, your token will be
-              permanently deleted.
-            </DialogDescription>
-          </DialogHeader>
-
-          <DialogFooter>
-            <div className="flex w-full flex-1 flex-nowrap gap-4">
-              <Button
-                type="button"
-                variant="secondary"
-                className="flex-1"
-                onClick={(prev) => setIsOpen(!prev)}
-              >
-                Cancel
-              </Button>
-
-              <Button variant="destructive" onClick={async () => deleteToken(tokenIdToDelete)}>
-                I'm sure! Delete it
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
       <h2 className="mt-6 text-xl">Your existing tokens</h2>
       <ul className="mb-4 flex flex-col gap-2">
         {tokens?.map((token) => (
@@ -181,16 +124,7 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
                     })
                   : 'N/A'}
               </p>
-              <Button
-                variant="destructive"
-                className="mr-4"
-                onClick={() => {
-                  setTokenIdToDelete(token.id);
-                  setIsOpen(true);
-                }}
-              >
-                Delete
-              </Button>
+              <DeleteTokenDialog tokenId={token.id} tokenName={token.name} />
               <Button variant="outline" className="mt-4" onClick={() => copyToken(token.token)}>
                 Copy token
               </Button>
@@ -217,7 +151,11 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
             />
 
             <div className="mt-4">
-              <Button type="submit" loading={form.formState.isSubmitting}>
+              <Button
+                type="submit"
+                disabled={!form.formState.isDirty}
+                loading={form.formState.isSubmitting}
+              >
                 Create token
               </Button>
             </div>