{
(document?.activeElement as HTMLElement)?.blur();
@@ -194,11 +193,10 @@ export default function LinkCard({ link, count, className }: Props) {
{
+ onClick={(e) => {
(document?.activeElement as HTMLElement)?.blur();
- deleteLink();
+ e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
}}
>
Delete
@@ -297,6 +295,12 @@ export default function LinkCard({ link, count, className }: Props) {
activeLink={link}
/>
) : undefined}
+ {deleteLinkModal ? (
+ setDeleteLinkModal(false)}
+ activeLink={link}
+ />
+ ) : undefined}
);
}
diff --git a/components/ModalContent/DeleteLinkModal.tsx b/components/ModalContent/DeleteLinkModal.tsx
new file mode 100644
index 0000000..3a2654e
--- /dev/null
+++ b/components/ModalContent/DeleteLinkModal.tsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import { Toaster } from "react-hot-toast";
+import CollectionSelection from "@/components/InputSelect/CollectionSelection";
+import TagSelection from "@/components/InputSelect/TagSelection";
+import TextInput from "@/components/TextInput";
+import unescapeString from "@/lib/client/unescapeString";
+import useLinkStore from "@/store/links";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import toast from "react-hot-toast";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLink, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import Modal from "../Modal";
+
+type Props = {
+ onClose: Function;
+ activeLink: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function DeleteLinkModal({ onClose, activeLink }: Props) {
+ const [link, setLink] =
+ useState(activeLink);
+
+ let shortendURL;
+
+ try {
+ shortendURL = new URL(link.url).host.toLowerCase();
+ } catch (error) {
+ console.log(error);
+ }
+
+ const { removeLink } = useLinkStore();
+ const [submitLoader, setSubmitLoader] = useState(false);
+
+ useEffect(() => {
+ setLink(activeLink);
+ }, []);
+
+ const deleteLink = async () => {
+ const load = toast.loading("Deleting...");
+
+ const response = await removeLink(link.id as number);
+
+ toast.dismiss(load);
+
+ response.ok && toast.success(`Link Deleted.`);
+
+ onClose();
+ };
+
+ return (
+
+ Delete Link
+
+
Are you sure you want to delete this Link?
+
+
+
+
Warning: This action is irreversible!
+
+
+
+ Hold the Shift key while clicking
+ 'Delete' to bypass this confirmation in the future.
+
+
+
+