Finished bulk delete links

components/LinkViews/Layouts/CardView.tsx

@@ -3,8 +3,10 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 
 export default function CardView({
   links,
+  showCheckbox = true,
 }: {
   links: LinkIncludingShortenedCollectionAndTags[];
+  showCheckbox?: boolean;
 }) {
   return (
     <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -15,6 +17,7 @@ export default function CardView({
             link={e}
             count={i}
             flipDropdown={i === links.length - 1}
+            showCheckbox={showCheckbox}
           />
         );
       })}

components/LinkViews/Layouts/ListView.tsx

@@ -3,8 +3,10 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 
 export default function ListView({
   links,
+  showCheckbox = true
 }: {
   links: LinkIncludingShortenedCollectionAndTags[];
+  showCheckbox?: boolean;
 }) {
   return (
     <div className="flex flex-col">
@@ -14,6 +16,7 @@ export default function ListView({
             key={i}
             link={e}
             count={i}
+            showCheckbox={showCheckbox}
             flipDropdown={i === links.length - 1}
           />
         );

components/LinkViews/LinkCard.tsx

@@ -16,6 +16,7 @@ import Link from "next/link";
 import LinkIcon from "./LinkComponents/LinkIcon";
 import useOnScreen from "@/hooks/useOnScreen";
 import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import useAccountStore from "@/store/account";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -28,7 +29,7 @@ type Props = {
 export default function LinkCard({
   link,
   flipDropdown,
-  showCheckbox,
+  showCheckbox = true,
 }: Props) {
   const { collections } = useCollectionStore();
 

components/LinkViews/LinkList.tsx

@@ -25,7 +25,7 @@ type Props = {
 export default function LinkCardCompact({
   link,
   flipDropdown,
-  showCheckbox,
+  showCheckbox = true,
 }: Props) {
   const { collections } = useCollectionStore();
   const { links, setSelectedLinks, selectedLinks } = useLinkStore();

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>