diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index dffec26..fa4c372 100644
--- a/components/Dropdown.tsx
+++ b/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 && (
{e.name}
@@ -35,14 +36,16 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
);
- return e.href ? (
+ return e && e.href ? (
{inner}
) : (
-
- {inner}
-
+ e && (
+
+ {inner}
+
+ )
);
})}
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index 0769a69..c7cd323 100644
--- a/components/LinkCard.tsx
+++ b/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) {
-
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"
- >
- 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"
+ >
+
+
+ )}
{
@@ -126,42 +132,48 @@ export default function LinkCard({ link, count, className }: Props) {
{expandDropdown ? (
{
- 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;
diff --git a/hooks/usePermissions.tsx b/hooks/usePermissions.tsx
new file mode 100644
index 0000000..a2fb4e4
--- /dev/null
+++ b/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();
+ 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;
+}