Finished bulk delete links

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import useLinkStore from "@/store/links";
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+
+type Props = {
+	onClose: Function;
+};
+
+export default function BulkDeleteLinksModal({ onClose }: Props) {
+	const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
+
+	const deleteLink = async () => {
+		const load = toast.loading(`Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}...`);
+
+		const response = await deleteLinksById(selectedLinks);
+
+		toast.dismiss(load);
+
+		response.ok && toast.success(`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}!`);
+
+		setSelectedLinks([]);
+		onClose();
+	};
+
+	return (
+		<Modal toggleModal={onClose}>
+			<p className="text-xl font-thin text-red-500">Delete {selectedLinks.length}</p>
+
+			<div className="divider mb-3 mt-1"></div>
+
+			<div className="flex flex-col gap-3">
+				{selectedLinks.length > 1 ? (
+					<p>
+						Are you sure you want to delete {selectedLinks.length} links?
+					</p>
+				) : (
+					<p>
+						Are you sure you want to delete this link?
+					</p>
+				)}
+
+				<div role="alert" className="alert alert-warning">
+					<i className="bi-exclamation-triangle text-xl" />
+					<span>
+						<b>Warning:</b> This action is irreversible!
+					</span>
+				</div>
+
+				<p>
+					Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
+					&apos;Delete&apos; to bypass this confirmation in the future.
+				</p>
+
+				<button
+					className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
+					onClick={deleteLink}
+				>
+					<i className="bi-trash text-xl" />
+					Delete
+				</button>
+			</div>
+		</Modal>
+	);
+}

components/ModalContent/DeleteLinkModal.tsx

@@ -15,7 +15,6 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
     useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
 
   const { removeLink } = useLinkStore();
-  const [submitLoader, setSubmitLoader] = useState(false);
 
   const router = useRouter();
 

components/ModalContent/NewLinkModal.tsx

@@ -20,6 +20,7 @@ export default function NewLinkModal({ onClose }: Props) {
   const { data } = useSession();
 
   const initial = {
+    id: 0,
     name: "",
     url: "",
     description: "",
@@ -196,9 +197,8 @@ export default function NewLinkModal({ onClose }: Props) {
             {optionsExpanded ? "Hide" : "More"} Options
           </p>
           <i
-            className={`${
-              optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
-            }`}
+            className={`${optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
+              }`}
           ></i>
         </div>