Add bulk actions to pinned and all links pages

pages/collections/[id].tsx

@@ -374,7 +374,6 @@ export default function Index() {
           </div>
         )}
 
-
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <LinkComponent
             editMode={editMode}

pages/links/index.tsx

@@ -9,18 +9,55 @@ import { Sort, ViewMode } from "@/types/global";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import toast from "react-hot-toast";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 
 export default function Links() {
-  const { links } = useLinkStore();
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore();
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
   );
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
+
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const collectivePermissions = useCollectivePermissions(selectedLinks.map((link) => link.collectionId as number));
+
   useLinks({ sort: sortBy });
 
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
   const linkView = {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
@@ -41,17 +78,94 @@ export default function Links() {
           />
 
           <div className="mt-2 flex items-center justify-end gap-2">
+            <div
+              role="button"
+              onClick={() => {
+                setEditMode(!editMode)
+                setSelectedLinks([])
+              }}
+              className={`btn btn-square btn-sm btn-ghost ${editMode
+                ? "bg-primary/20 hover:bg-primary/20"
+                : "hover:bg-neutral/20"
+                }`}
+            >
+              <i className="bi-pencil-fill text-neutral text-xl"></i>
+            </div>
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
+        {editMode && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              {selectedLinks.length > 0 &&
+                (collectivePermissions === true || collectivePermissions?.canUpdate) && (
+                  <button
+                    onClick={() => setBulkEditLinksModal(true)}
+                    className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
+                  >
+                    Edit
+                  </button>
+                )}
+              {selectedLinks.length > 0 &&
+                (collectivePermissions === true || collectivePermissions?.canDelete) && (
+                  <button
+                    onClick={(e) => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      e.shiftKey
+                        ? bulkDeleteLinks()
+                        : setBulkDeleteLinksModal(true);
+                    }}
+                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                  >
+                    Delete
+                  </button>
+                )}
+            </div>
+          </div>
+        )}
+
         {links[0] ? (
-          <LinkComponent links={links} />
+          <LinkComponent editMode={editMode} links={links} />
         ) : (
           <NoLinksFound text="You Haven't Created Any Links Yet" />
         )}
       </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+            setEditMode(false);
+          }}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal onClose={() => {
+          setBulkEditLinksModal(false);
+          setEditMode(false);
+        }} />
+      )}
     </MainLayout>
   );
 }

pages/links/pinned.tsx

@@ -8,10 +8,14 @@ import { Sort, ViewMode } from "@/types/global";
 import ViewDropdown from "@/components/ViewDropdown";
 import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import toast from "react-hot-toast";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 
 export default function PinnedLinks() {
-  const { links } = useLinkStore();
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore();
 
   const [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
@@ -20,6 +24,40 @@ export default function PinnedLinks() {
 
   useLinks({ sort: sortBy, pinnedOnly: true });
 
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const collectivePermissions = useCollectivePermissions(selectedLinks.map((link) => link.collectionId as number));
+
+  useLinks({ sort: sortBy });
+
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(
+      `Deleting ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+      }...`
+    );
+
+    const response = await deleteLinksById(
+      selectedLinks.map((link) => link.id as number)
+    );
+
+    toast.dismiss(load);
+
+    response.ok &&
+      toast.success(
+        `Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""
+        }!`
+      );
+  };
+
   const linkView = {
     [ViewMode.Card]: CardView,
     // [ViewMode.Grid]: GridView,
@@ -39,13 +77,76 @@ export default function PinnedLinks() {
             description={"Pinned Links from your Collections"}
           />
           <div className="mt-2 flex items-center justify-end gap-2">
+            <div
+              role="button"
+              onClick={() => {
+                setEditMode(!editMode)
+                setSelectedLinks([])
+              }}
+              className={`btn btn-square btn-sm btn-ghost ${editMode
+                ? "bg-primary/20 hover:bg-primary/20"
+                : "hover:bg-neutral/20"
+                }`}
+            >
+              <i className="bi-pencil-fill text-neutral text-xl"></i>
+            </div>
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
 
+        {editMode && (
+          <div className="w-full flex justify-between items-center min-h-[32px]">
+            {links.length > 0 && (
+              <div className="flex gap-3 ml-3">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-primary"
+                  onChange={() => handleSelectAll()}
+                  checked={
+                    selectedLinks.length === links.length && links.length > 0
+                  }
+                />
+                {selectedLinks.length > 0 ? (
+                  <span>
+                    {selectedLinks.length}{" "}
+                    {selectedLinks.length === 1 ? "link" : "links"} selected
+                  </span>
+                ) : (
+                  <span>Nothing selected</span>
+                )}
+              </div>
+            )}
+            <div className="flex gap-3">
+              {selectedLinks.length > 0 &&
+                (collectivePermissions === true || collectivePermissions?.canUpdate) && (
+                  <button
+                    onClick={() => setBulkEditLinksModal(true)}
+                    className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto"
+                  >
+                    Edit
+                  </button>
+                )}
+              {selectedLinks.length > 0 &&
+                (collectivePermissions === true || collectivePermissions?.canDelete) && (
+                  <button
+                    onClick={(e) => {
+                      (document?.activeElement as HTMLElement)?.blur();
+                      e.shiftKey
+                        ? bulkDeleteLinks()
+                        : setBulkDeleteLinksModal(true);
+                    }}
+                    className="btn btn-sm bg-red-400 border-red-400 hover:border-red-500 hover:bg-red-500 text-white w-fit ml-auto"
+                  >
+                    Delete
+                  </button>
+                )}
+            </div>
+          </div>
+        )}
+
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
-          <LinkComponent links={links} />
+          <LinkComponent editMode={editMode} links={links} />
         ) : (
           <div
             style={{ flex: "1 1 auto" }}
@@ -62,6 +163,20 @@ export default function PinnedLinks() {
           </div>
         )}
       </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+            setEditMode(false);
+          }}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal onClose={() => {
+          setBulkEditLinksModal(false);
+          setEditMode(false);
+        }} />
+      )}
     </MainLayout>
   );
 }