diff --git a/components/CompactLinkCard.tsx b/components/CompactLinkCard.tsx deleted file mode 100644 index b2c013e..0000000 --- a/components/CompactLinkCard.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import { - CollectionIncludingMembersAndLinkCount, - LinkIncludingShortenedCollectionAndTags, -} from "@/types/global"; -import { faFolder, faEllipsis } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useEffect, useState } from "react"; -import Image from "next/image"; -import Dropdown from "./Dropdown"; -import useLinkStore from "@/store/links"; -import useCollectionStore from "@/store/collections"; -import useAccountStore from "@/store/account"; -import useModalStore from "@/store/modals"; - -type Props = { - link: LinkIncludingShortenedCollectionAndTags; - count: number; - className?: string; -}; - -export default function LinkCard({ link, count, className }: Props) { - const { setModal } = useModalStore(); - - const [expandDropdown, setExpandDropdown] = useState(false); - - const { collections } = useCollectionStore(); - - const { account } = useAccountStore(); - - const [collection, setCollection] = - useState( - collections.find( - (e) => e.id === link.collection.id - ) as CollectionIncludingMembersAndLinkCount - ); - - useEffect(() => { - setCollection( - collections.find( - (e) => e.id === link.collection.id - ) as CollectionIncludingMembersAndLinkCount - ); - }, [collections]); - - const { removeLink, updateLink } = useLinkStore(); - - const url = new URL(link.url); - const formattedDate = new Date(link.createdAt as string).toLocaleString( - "en-US", - { - year: "numeric", - month: "short", - day: "numeric", - } - ); - - return ( -
-
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" - > - -
- -
console.log("hi!")} - className="flex items-start gap-5 sm:gap-10 h-full w-full" - > - { - const target = e.target as HTMLElement; - target.style.opacity = "0"; - }} - /> - -
-
-
-

{count + 1}.

-

- {link.name} -

-
-
-
- -

- {collection?.name} -

-
-
-

{formattedDate}

-
-
-
- {expandDropdown ? ( - { - updateLink({ - ...link, - pinnedBy: - link?.pinnedBy && link.pinnedBy[0] - ? undefined - : [{ id: account.id }], - }); - setExpandDropdown(false); - }, - }, - { - name: "Edit", - onClick: () => { - setModal({ - modal: "LINK", - state: true, - method: "UPDATE", - active: link, - }); - setExpandDropdown(false); - }, - }, - { - name: "Delete", - onClick: () => { - removeLink(link); - setExpandDropdown(false); - }, - }, - ]} - onClickOutside={(e: Event) => { - const target = e.target as HTMLInputElement; - if (target.id !== "expand-dropdown" + link.id) - setExpandDropdown(false); - }} - className="absolute top-12 right-5 w-36" - /> - ) : null} -
- ); -} diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx index f4aca69..0769a69 100644 --- a/components/LinkCard.tsx +++ b/components/LinkCard.tsx @@ -2,22 +2,16 @@ import { CollectionIncludingMembersAndLinkCount, LinkIncludingShortenedCollectionAndTags, } from "@/types/global"; -import { - faFolder, - faArrowUpRightFromSquare, - faEllipsis, - faThumbTack, -} from "@fortawesome/free-solid-svg-icons"; -import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons"; +import { faFolder, faEllipsis } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useEffect, useState } from "react"; import Image from "next/image"; import Dropdown from "./Dropdown"; import useLinkStore from "@/store/links"; -import Link from "next/link"; import useCollectionStore from "@/store/collections"; import useAccountStore from "@/store/account"; import useModalStore from "@/store/modals"; +import { faCalendarDays } from "@fortawesome/free-regular-svg-icons"; type Props = { link: LinkIncludingShortenedCollectionAndTags; @@ -63,39 +57,38 @@ export default function LinkCard({ link, count, className }: Props) { return (
-
- { - const target = e.target as HTMLElement; - target.style.opacity = "0"; - }} +
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" + > + +
- {link?.pinnedBy && link.pinnedBy[0] && ( -
- -
- )} +
{ + setModal({ + modal: "LINK", + state: true, + method: "UPDATE", + active: link, + }); + }} + className="flex items-start gap-5 sm:gap-10 h-full w-full" + > { const target = e.target as HTMLElement; @@ -107,146 +100,77 @@ export default function LinkCard({ link, count, className }: Props) {

{count + 1}.

-

+

{link.name}

-

- {link.description} -

- -
- -

- {collection?.name} -

-
- - -
- {link.tags.map((e, i) => ( - -

- {e.name} -

- - ))} +
+ +

+ {collection?.name} +

-
-

{formattedDate}

- -
-

{url.host}

- -
-
+
+ +

{formattedDate}

- -
-
setExpandDropdown(!expandDropdown)} - id={"expand-dropdown" + link.id} - className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1" - > - -
-
- -
- - {expandDropdown ? ( - { - updateLink({ - ...link, - pinnedBy: - link?.pinnedBy && link.pinnedBy[0] - ? undefined - : [{ id: account.id }], - }); - setExpandDropdown(false); - }, - }, - { - name: "Edit", - onClick: () => { - setModal({ - modal: "LINK", - state: true, - method: "UPDATE", - active: link, - }); - setExpandDropdown(false); - }, - }, - { - name: "Delete", - onClick: () => { - removeLink(link); - setExpandDropdown(false); - }, - }, - ]} - onClickOutside={(e: Event) => { - const target = e.target as HTMLInputElement; - if (target.id !== "expand-dropdown" + link.id) - setExpandDropdown(false); - }} - className="absolute top-8 right-0 w-36" - /> - ) : null} -
+ {expandDropdown ? ( + { + updateLink({ + ...link, + pinnedBy: + 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); + }, + }, + ]} + onClickOutside={(e: Event) => { + const target = e.target as HTMLInputElement; + if (target.id !== "expand-dropdown" + link.id) + setExpandDropdown(false); + }} + className="absolute top-12 right-5 w-36" + /> + ) : null}
); } diff --git a/components/Modal/Collection/CollectionInfo.tsx b/components/Modal/Collection/CollectionInfo.tsx index 23139a6..5f8dd7b 100644 --- a/components/Modal/Collection/CollectionInfo.tsx +++ b/components/Modal/Collection/CollectionInfo.tsx @@ -102,7 +102,7 @@ export default function CollectionInfo({ diff --git a/components/Modal/Collection/TeamManagement.tsx b/components/Modal/Collection/TeamManagement.tsx index 9b68b70..7fa79d5 100644 --- a/components/Modal/Collection/TeamManagement.tsx +++ b/components/Modal/Collection/TeamManagement.tsx @@ -305,7 +305,7 @@ export default function TeamManagement({ diff --git a/components/Modal/Collection/index.tsx b/components/Modal/Collection/index.tsx index 20314c6..d10b5c5 100644 --- a/components/Modal/Collection/index.tsx +++ b/components/Modal/Collection/index.tsx @@ -42,15 +42,10 @@ export default function CollectionModal({ return (
-

- {method === "CREATE" && "Add"} Collection{" "} - {method === "UPDATE" && "Settings"} -

- + {method === "CREATE" && ( +

New Collection

+ )} + {method === "UPDATE" && ( <> ( - method === "UPDATE" - ? activeLink - : { - name: "", - url: "", - description: "", - tags: [], - collection: { - name: "", - ownerId: data?.user.id as number, - }, - } + activeLink || { + name: "", + url: "", + description: "", + tags: [], + collection: { + name: "", + ownerId: data?.user.id as number, + }, + } ); const { updateLink, addLink } = useLinkStore(); @@ -100,13 +98,12 @@ export default function EditLink({ return (
-

- {method === "UPDATE" ? "Edit" : "New"} Link -

- {method === "UPDATE" ? ( -

- {shortendURL} | {link.description} +

+ Edit {link.url}

) : null} @@ -172,11 +169,24 @@ export default function EditLink({ })} />
+
+

Description

+