bulk actions on tags page

hooks/useCollectivePermissions.ts

@@ -0,0 +1,34 @@
+import useAccountStore from "@/store/account";
+import useCollectionStore from "@/store/collections";
+import { Member } from "@/types/global";
+import { useEffect, useState } from "react";
+
+export default function useCollectivePermissions(collectionIds: number[]) {
+	const { collections } = useCollectionStore();
+
+	const { account } = useAccountStore();
+
+	const [permissions, setPermissions] = useState<Member | true>();
+	useEffect(() => {
+		for (const collectionId of collectionIds) {
+			const collection = collections.find((e) => e.id === collectionId);
+
+			if (collection) {
+				let getPermission: Member | undefined = collection.members.find(
+					(e) => e.userId === account.id
+				);
+
+				if (
+					getPermission?.canCreate === false &&
+					getPermission?.canUpdate === false &&
+					getPermission?.canDelete === false
+				)
+					getPermission = undefined;
+
+				setPermissions(account.id === collection.ownerId || getPermission);
+			}
+		}
+	}, [account, collections, collectionIds]);
+
+	return permissions;
+}

hooks/usePermissions.tsx

@@ -1,13 +1,15 @@
 import useAccountStore from "@/store/account";
 import useCollectionStore from "@/store/collections";
 import { Member } from "@/types/global";
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 
 export default function usePermissions(collectionId: number) {
   const { collections } = useCollectionStore();
+
   const { account } = useAccountStore();
 
-  const permissions = useMemo(() => {
+  const [permissions, setPermissions] = useState<Member | true>();
+  useEffect(() => {
     const collection = collections.find((e) => e.id === collectionId);
 
     if (collection) {
@@ -19,11 +21,10 @@ export default function usePermissions(collectionId: number) {
         getPermission?.canCreate === false &&
         getPermission?.canUpdate === false &&
         getPermission?.canDelete === false
-      ) {
+      )
         getPermission = undefined;
-      }
 
-      return account.id === collection.ownerId || getPermission;
+      setPermissions(account.id === collection.ownerId || getPermission);
     }
   }, [account, collections, collectionId]);
 

pages/collections/[id].tsx

@@ -312,7 +312,10 @@ export default function Index() {
           <div className="flex items-center gap-2">
             <div
               role="button"
-              onClick={() => setEditMode(!editMode)}
+              onClick={() => {
+                setEditMode(!editMode)
+                setSelectedLinks([])
+              }}
               className={`btn btn-square btn-sm btn-ghost ${editMode
                 ? "bg-primary/20 hover:bg-primary/20"
                 : "hover:bg-neutral/20"
@@ -371,7 +374,6 @@ export default function Index() {
                 )}
             </div>
           </div>
-
         )}
 
 
@@ -414,11 +416,18 @@ export default function Index() {
           )}
           {bulkDeleteLinksModal && (
             <BulkDeleteLinksModal
-              onClose={() => setBulkDeleteLinksModal(false)}
+              onClose={() => {
+                setBulkDeleteLinksModal(false)
+                setEditMode(false)
+              }}
             />
           )}
           {bulkEditLinksModal && (
-            <BulkEditLinksModal onClose={() => setBulkEditLinksModal(false)} />
+            <BulkEditLinksModal
+              onClose={() => {
+                setBulkEditLinksModal(false)
+                setEditMode(false)
+              }} />
           )}
         </>
       )}

pages/tags/[id].tsx

@@ -12,11 +12,14 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
 // import GridView from "@/components/LinkViews/Layouts/GridView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
+import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
 
 export default function Index() {
   const router = useRouter();
 
-  const { links } = useLinkStore();
+  const { links, selectedLinks, deleteLinksById, setSelectedLinks } = useLinkStore();
   const { tags, updateTag, removeTag } = useTagStore();
 
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
@@ -26,6 +29,11 @@ export default function Index() {
 
   const [activeTag, setActiveTag] = useState<TagIncludingLinkCount>();
 
+  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({ tagId: Number(router.query.id), sort: sortBy });
 
   useEffect(() => {
@@ -91,6 +99,33 @@ export default function Index() {
     setRenameTag(false);
   };
 
+  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 [viewMode, setViewMode] = useState<string>(
     localStorage.getItem("viewMode") || ViewMode.Card
   );
@@ -145,11 +180,10 @@ export default function Index() {
                   </p>
                   <div className="relative">
                     <div
-                      className={`dropdown dropdown-bottom font-normal ${
-                        activeTag?.name.length && activeTag?.name.length > 8
-                          ? "dropdown-end"
-                          : ""
-                      }`}
+                      className={`dropdown dropdown-bottom font-normal ${activeTag?.name.length && activeTag?.name.length > 8
+                        ? "dropdown-end"
+                        : ""
+                        }`}
                     >
                       <div
                         tabIndex={0}
@@ -195,17 +229,85 @@ export default function Index() {
           </div>
 
           <div className="flex gap-2 items-center mt-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>
+                )}
+              </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>
+        )}
         <LinkComponent
-          showCheckbox={false}
+          editMode={editMode}
           links={links.filter((e) =>
             e.tags.some((e) => e.id === Number(router.query.id))
           )}
         />
       </div>
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => setBulkDeleteLinksModal(false)}
+        />
+      )}
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal onClose={() => setBulkEditLinksModal(false)} />
+      )}
     </MainLayout>
   );
 }