Only show checkbox if the user has perms

components/LinkViews/LinkCard.tsx

@@ -16,7 +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";
+import usePermissions from "@/hooks/usePermissions";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -43,8 +43,6 @@ export default function LinkCard({
     }
   };
 
-  console.log(selectedLinks)
-
   let shortendURL;
 
   try {
@@ -70,6 +68,7 @@ export default function LinkCard({
 
   const ref = useRef<HTMLDivElement>(null);
   const isVisible = useOnScreen(ref);
+  const permissions = usePermissions(collection.id as number);
 
   useEffect(() => {
     let interval: any;
@@ -98,7 +97,7 @@ export default function LinkCard({
       ref={ref}
       className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
     >
-      {showCheckbox &&
+      {showCheckbox && (permissions === true || permissions?.canCreate || permissions?.canDelete) &&
         <input
           type="checkbox"
           className="checkbox checkbox-primary my-auto ml-3 mt-3 absolute z-20 bg-white dark:bg-base-200"

components/LinkViews/LinkList.tsx

@@ -13,6 +13,7 @@ import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
 import Link from "next/link";
 import { isPWA } from "@/lib/client/utils";
 import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import usePermissions from "@/hooks/usePermissions";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -30,8 +31,12 @@ export default function LinkCardCompact({
   const { collections } = useCollectionStore();
   const { links, setSelectedLinks, selectedLinks } = useLinkStore();
 
-  const handleCheckboxClick = (checkboxId: number) => {
-    setSelectedLinks((selectedLinks.includes(checkboxId) ? selectedLinks.filter((id) => id !== checkboxId) : [...selectedLinks, checkboxId]));
+  const handleCheckboxClick = (link: LinkIncludingShortenedCollectionAndTags) => {
+    if (selectedLinks.includes(link)) {
+      setSelectedLinks(selectedLinks.filter((e) => e !== link));
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
   };
 
   let shortendURL;
@@ -57,6 +62,8 @@ export default function LinkCardCompact({
     );
   }, [collections, links]);
 
+  const permissions = usePermissions(collection.id as number);
+
   const [showInfo, setShowInfo] = useState(false);
 
   return (
@@ -65,12 +72,12 @@ export default function LinkCardCompact({
         className={`border-neutral-content relative items-center flex ${!showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
           } duration-200 rounded-lg`}
       >
-        {showCheckbox &&
+        {showCheckbox && (permissions === true || permissions?.canCreate || permissions?.canDelete) &&
           <input
             type="checkbox"
             className="checkbox checkbox-primary my-auto mr-2"
-            checked={selectedLinks.includes(link.id)}
-            onChange={() => handleCheckboxClick(link.id)}
+            checked={selectedLinks.includes(link)}
+            onChange={() => handleCheckboxClick(link)}
           />
         }
         <Link

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -17,7 +17,7 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
 
 		toast.dismiss(load);
 
-		response.ok && toast.success(`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}!`);
+		response.ok && toast.success(`Deleted ${selectedLinks.length} Link${selectedLinks.length > 1 ? "s" : ""}`);
 
 		setSelectedLinks([]);
 		onClose();
@@ -25,7 +25,7 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
 
 	return (
 		<Modal toggleModal={onClose}>
-			<p className="text-xl font-thin text-red-500">Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}!</p>
+			<p className="text-xl font-thin text-red-500">Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}</p>
 
 			<div className="divider mb-3 mt-1"></div>
 

pages/collections/[id].tsx

@@ -42,6 +42,7 @@ export default function Index() {
     useState<CollectionIncludingMembersAndLinkCount>();
 
   const permissions = usePermissions(activeCollection?.id as number);
+  console.log(permissions)
 
   useLinks({ collectionId: Number(router.query.id), sort: sortBy });
 
@@ -316,19 +317,21 @@ export default function Index() {
               </span>
             )}
           </div>
-          {selectedLinks.length > 0 && permissions &&
-            <div className="flex gap-3">
+          <div className="flex gap-3">
+            {selectedLinks.length > 0 && (permissions === true || permissions?.canUpdate) &&
               <button className="btn btn-sm btn-accent dark:border-violet-400 text-white w-fit ml-auto">
-                Edit Links
+                Edit
               </button>
+            }
+            {selectedLinks.length > 0 && (permissions === true || permissions?.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>
         </div>
 
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (