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; +}