managed how LinkCards are viewed by members

components/Dropdown.tsx

@@ -12,7 +12,8 @@ type MenuItem =
       name: string;
       onClick?: MouseEventHandler;
       href: string;
-    };
+    }
+  | undefined;
 
 type Props = {
   onClickOutside: Function;
@@ -27,7 +28,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
       className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
-        const inner = (
+        const inner = e && (
           <div className="cursor-pointer rounded-md">
             <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100">
               <p className="text-sky-900 select-none">{e.name}</p>
@@ -35,14 +36,16 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
           </div>
         );
 
-        return e.href ? (
+        return e && e.href ? (
           <Link key={i} href={e.href}>
             {inner}
           </Link>
         ) : (
-          <div key={i} onClick={e.onClick}>
-            {inner}
-          </div>
+          e && (
+            <div key={i} onClick={e.onClick}>
+              {inner}
+            </div>
+          )
         );
       })}
     </ClickAwayHandler>

components/LinkCard.tsx

@@ -1,6 +1,7 @@
 import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
+  Member,
 } from "@/types/global";
 import { faFolder, faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -12,6 +13,7 @@ import useCollectionStore from "@/store/collections";
 import useAccountStore from "@/store/account";
 import useModalStore from "@/store/modals";
 import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
+import usePermissions from "@/hooks/usePermissions";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -22,6 +24,8 @@ type Props = {
 export default function LinkCard({ link, count, className }: Props) {
   const { setModal } = useModalStore();
 
+  const permissions = usePermissions(link.collection.id as number);
+
   const [expandDropdown, setExpandDropdown] = useState(false);
 
   const { collections } = useCollectionStore();
@@ -59,18 +63,20 @@ export default function LinkCard({ link, count, className }: Props) {
     <div
       className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow hover:shadow-none cursor-pointer duration-100 p-5 rounded-2xl relative group ${className}`}
     >
-      <div
-        onClick={() => setExpandDropdown(!expandDropdown)}
-        id={"expand-dropdown" + link.id}
-        className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
-      >
-        <FontAwesomeIcon
-          icon={faEllipsis}
-          title="More"
-          className="w-5 h-5"
+      {permissions && (
+        <div
+          onClick={() => setExpandDropdown(!expandDropdown)}
           id={"expand-dropdown" + link.id}
-        />
-      </div>
+          className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
+        >
+          <FontAwesomeIcon
+            icon={faEllipsis}
+            title="More"
+            className="w-5 h-5"
+            id={"expand-dropdown" + link.id}
+          />
+        </div>
+      )}
 
       <div
         onClick={() => {
@@ -126,42 +132,48 @@ export default function LinkCard({ link, count, className }: Props) {
       {expandDropdown ? (
         <Dropdown
           items={[
-            {
-              name:
-                link?.pinnedBy && link.pinnedBy[0]
-                  ? "Unpin"
-                  : "Pin to Dashboard",
-              onClick: () => {
-                updateLink({
-                  ...link,
-                  pinnedBy:
+            permissions === true || permissions?.canUpdate
+              ? {
+                  name:
                     link?.pinnedBy && link.pinnedBy[0]
-                      ? undefined
-                      : [{ id: account.id }],
-                });
-                setExpandDropdown(false);
-              },
-            },
-            {
-              name: "Edit",
-              onClick: () => {
-                setModal({
-                  modal: "LINK",
-                  state: true,
-                  method: "UPDATE",
-                  active: link,
-                  defaultIndex: 1,
-                });
-                setExpandDropdown(false);
-              },
-            },
-            {
-              name: "Delete",
-              onClick: () => {
-                removeLink(link);
-                setExpandDropdown(false);
-              },
-            },
+                      ? "Unpin"
+                      : "Pin to Dashboard",
+                  onClick: () => {
+                    updateLink({
+                      ...link,
+                      pinnedBy:
+                        link?.pinnedBy && link.pinnedBy[0]
+                          ? undefined
+                          : [{ id: account.id }],
+                    });
+                    setExpandDropdown(false);
+                  },
+                }
+              : undefined,
+            permissions === true || permissions?.canUpdate
+              ? {
+                  name: "Edit",
+                  onClick: () => {
+                    setModal({
+                      modal: "LINK",
+                      state: true,
+                      method: "UPDATE",
+                      active: link,
+                      defaultIndex: 1,
+                    });
+                    setExpandDropdown(false);
+                  },
+                }
+              : undefined,
+            permissions === true || permissions?.canDelete
+              ? {
+                  name: "Delete",
+                  onClick: () => {
+                    removeLink(link);
+                    setExpandDropdown(false);
+                  },
+                }
+              : undefined,
           ]}
           onClickOutside={(e: Event) => {
             const target = e.target as HTMLInputElement;

hooks/usePermissions.tsx

@@ -0,0 +1,32 @@
+import useAccountStore from "@/store/account";
+import useCollectionStore from "@/store/collections";
+import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
+import React, { useEffect, useState } from "react";
+
+export default function usePermissions(collectionId: number) {
+  const { collections } = useCollectionStore();
+
+  const { account } = useAccountStore();
+
+  const [permissions, setPermissions] = useState<Member | true>();
+  useEffect(() => {
+    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);
+    }
+  }, [collections]);
+
+  return permissions;
+}