diff options
Diffstat (limited to 'apps')
3 files changed, 94 insertions, 89 deletions
diff --git a/apps/web/components/dashboard/lists/DeleteListButton.tsx b/apps/web/components/dashboard/lists/DeleteListButton.tsx index 345c81d2..ee2a9ec7 100644 --- a/apps/web/components/dashboard/lists/DeleteListButton.tsx +++ b/apps/web/components/dashboard/lists/DeleteListButton.tsx @@ -1,18 +1,9 @@ "use client"; -import { useState } from "react"; import { useRouter } from "next/navigation"; import { ActionButton } from "@/components/ui/action-button"; +import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog"; import { Button } from "@/components/ui/button"; -import { - Dialog, - DialogClose, - DialogContent, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog"; import { toast } from "@/components/ui/use-toast"; import { api } from "@/lib/trpc"; import { Trash2 } from "lucide-react"; @@ -20,8 +11,6 @@ import { Trash2 } from "lucide-react"; import type { ZBookmarkList } from "@hoarder/trpc/types/lists"; export default function DeleteListButton({ list }: { list: ZBookmarkList }) { - const [isDialogOpen, setDialogOpen] = useState(false); - const router = useRouter(); const listsInvalidationFunction = api.useUtils().lists.list.invalidate; @@ -41,38 +30,24 @@ export default function DeleteListButton({ list }: { list: ZBookmarkList }) { }, }); return ( - <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}> - <DialogTrigger asChild> - <Button className="mt-auto flex gap-2" variant="destructiveOutline"> - <Trash2 className="size-5" /> - <span className="hidden md:block">Delete List</span> - </Button> - </DialogTrigger> - <DialogContent> - <DialogHeader> - <DialogTitle> - Delete {list.icon} {list.name}? - </DialogTitle> - </DialogHeader> - <span> - Are you sure you want to delete {list.icon} {list.name}? - </span> - <DialogFooter className="sm:justify-end"> - <DialogClose asChild> - <Button type="button" variant="secondary"> - Close - </Button> - </DialogClose> - <ActionButton - type="button" - variant="destructive" - loading={isPending} - onClick={() => deleteList({ listId: list.id })} - > - Delete - </ActionButton> - </DialogFooter> - </DialogContent> - </Dialog> + <ActionConfirmingDialog + title={`Delete ${list.icon} ${list.name}?`} + description={`Are you sure you want to delete ${list.icon} ${list.name}?`} + actionButton={() => ( + <ActionButton + type="button" + variant="destructive" + loading={isPending} + onClick={() => deleteList({ listId: list.id })} + > + Delete + </ActionButton> + )} + > + <Button className="mt-auto flex gap-2" variant="destructiveOutline"> + <Trash2 className="size-5" /> + <span className="hidden md:block">Delete List</span> + </Button> + </ActionConfirmingDialog> ); } diff --git a/apps/web/components/dashboard/settings/DeleteApiKey.tsx b/apps/web/components/dashboard/settings/DeleteApiKey.tsx index 091f352c..cbbe8320 100644 --- a/apps/web/components/dashboard/settings/DeleteApiKey.tsx +++ b/apps/web/components/dashboard/settings/DeleteApiKey.tsx @@ -1,19 +1,9 @@ "use client"; -import { useState } from "react"; import { useRouter } from "next/navigation"; import { ActionButton } from "@/components/ui/action-button"; +import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog"; import { Button } from "@/components/ui/button"; -import { - Dialog, - DialogClose, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog"; import { toast } from "@/components/ui/use-toast"; import { api } from "@/lib/trpc"; import { Trash } from "lucide-react"; @@ -25,49 +15,41 @@ export default function DeleteApiKey({ name: string; id: string; }) { - const [isDialogOpen, setDialogOpen] = useState(false); const router = useRouter(); const mutator = api.apiKeys.revoke.useMutation({ onSuccess: () => { toast({ description: "Key was successfully deleted", }); - setDialogOpen(false); router.refresh(); }, }); return ( - <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}> - <DialogTrigger asChild> - <Button variant="destructive"> - <Trash className="size-5" /> - </Button> - </DialogTrigger> - <DialogContent> - <DialogHeader> - <DialogTitle>Delete API Key</DialogTitle> - <DialogDescription> - Are you sure you want to delete the API key "{name}"? Any - service using this API key will lose access. - </DialogDescription> - </DialogHeader> - <DialogFooter className="sm:justify-end"> - <DialogClose asChild> - <Button type="button" variant="secondary"> - Close - </Button> - </DialogClose> - <ActionButton - type="button" - variant="destructive" - loading={mutator.isPending} - onClick={() => mutator.mutate({ id })} - > - Delete - </ActionButton> - </DialogFooter> - </DialogContent> - </Dialog> + <ActionConfirmingDialog + title={"Delete API Key"} + description={ + <p> + Are you sure you want to delete the API key "{name}"? Any + service using this API key will lose access. + </p> + } + actionButton={(setDialogOpen) => ( + <ActionButton + type="button" + variant="destructive" + loading={mutator.isPending} + onClick={() => + mutator.mutate({ id }, { onSuccess: () => setDialogOpen(false) }) + } + > + Delete + </ActionButton> + )} + > + <Button variant="destructive"> + <Trash className="size-5" /> + </Button> + </ActionConfirmingDialog> ); } diff --git a/apps/web/components/ui/action-confirming-dialog.tsx b/apps/web/components/ui/action-confirming-dialog.tsx new file mode 100644 index 00000000..980bdd60 --- /dev/null +++ b/apps/web/components/ui/action-confirming-dialog.tsx @@ -0,0 +1,48 @@ +"use client"; + +import { useState } from "react"; +import { + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; + +import { Button } from "./button"; + +export default function ActionConfirmingDialog({ + title, + description, + actionButton, + children, +}: { + title: React.ReactNode; + description: React.ReactNode; + actionButton: (setDialogOpen: (open: boolean) => void) => React.ReactNode; + children: React.ReactNode; +}) { + const [isDialogOpen, setDialogOpen] = useState(false); + + return ( + <Dialog open={isDialogOpen} onOpenChange={setDialogOpen}> + <DialogTrigger asChild>{children}</DialogTrigger> + <DialogContent> + <DialogHeader> + <DialogTitle>{title}</DialogTitle> + </DialogHeader> + {description} + <DialogFooter className="sm:justify-end"> + <DialogClose asChild> + <Button type="button" variant="secondary"> + Close + </Button> + </DialogClose> + {actionButton(setDialogOpen)} + </DialogFooter> + </DialogContent> + </Dialog> + ); +} |