2023-10-30 14:20:15 -05:00
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
import {
|
|
|
|
faPen,
|
|
|
|
faBoxesStacked,
|
|
|
|
faTrashCan,
|
|
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
import { useRouter } from "next/router";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import useModalStore from "@/store/modals";
|
|
|
|
import useLinkStore from "@/store/links";
|
|
|
|
import {
|
|
|
|
CollectionIncludingMembersAndLinkCount,
|
|
|
|
LinkIncludingShortenedCollectionAndTags,
|
|
|
|
} from "@/types/global";
|
|
|
|
import { useSession } from "next-auth/react";
|
|
|
|
import useCollectionStore from "@/store/collections";
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
className?: string;
|
|
|
|
onClick?: Function;
|
|
|
|
};
|
|
|
|
|
2023-11-19 07:12:37 -06:00
|
|
|
export default function LinkSidebar({ className, onClick }: Props) {
|
2023-10-30 14:20:15 -05:00
|
|
|
const session = useSession();
|
|
|
|
const userId = session.data?.user.id;
|
|
|
|
|
|
|
|
const { setModal } = useModalStore();
|
|
|
|
|
|
|
|
const { links, removeLink } = useLinkStore();
|
|
|
|
const { collections } = useCollectionStore();
|
|
|
|
|
|
|
|
const [linkCollection, setLinkCollection] =
|
|
|
|
useState<CollectionIncludingMembersAndLinkCount>();
|
|
|
|
|
|
|
|
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
|
|
|
|
}, [links]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (link)
|
2023-11-20 14:58:32 -06:00
|
|
|
setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
|
2023-10-30 14:20:15 -05:00
|
|
|
}, [link]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={`dark:bg-neutral-900 bg-white h-full lg:w-10 w-62 overflow-y-auto lg:p-0 p-5 border-solid border-white border dark:border-neutral-900 dark:lg:border-r-neutral-900 lg:border-r-white border-r-sky-100 dark:border-r-neutral-700 z-20 flex flex-col gap-5 lg:justify-center justify-start ${
|
|
|
|
className || ""
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
<div className="flex flex-col gap-5">
|
|
|
|
{link?.collection.ownerId === userId ||
|
|
|
|
linkCollection?.members.some(
|
|
|
|
(e) => e.userId === userId && e.canUpdate
|
|
|
|
) ? (
|
|
|
|
<div
|
|
|
|
title="Edit"
|
|
|
|
onClick={() => {
|
|
|
|
link
|
|
|
|
? setModal({
|
|
|
|
modal: "LINK",
|
|
|
|
state: true,
|
|
|
|
active: link,
|
|
|
|
method: "UPDATE",
|
|
|
|
})
|
|
|
|
: undefined;
|
|
|
|
onClick && onClick();
|
|
|
|
}}
|
2023-10-31 04:39:05 -05:00
|
|
|
className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
|
2023-10-30 14:20:15 -05:00
|
|
|
>
|
|
|
|
<FontAwesomeIcon
|
|
|
|
icon={faPen}
|
|
|
|
className="w-6 h-6 text-gray-500 dark:text-gray-300"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<p className="text-black dark:text-white truncate w-full lg:hidden">
|
|
|
|
Edit
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
) : undefined}
|
|
|
|
|
|
|
|
<div
|
|
|
|
onClick={() => {
|
|
|
|
link
|
|
|
|
? setModal({
|
|
|
|
modal: "LINK",
|
|
|
|
state: true,
|
|
|
|
active: link,
|
|
|
|
method: "FORMATS",
|
|
|
|
})
|
|
|
|
: undefined;
|
|
|
|
onClick && onClick();
|
|
|
|
}}
|
|
|
|
title="Preserved Formats"
|
2023-10-31 04:39:05 -05:00
|
|
|
className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
|
2023-10-30 14:20:15 -05:00
|
|
|
>
|
|
|
|
<FontAwesomeIcon
|
|
|
|
icon={faBoxesStacked}
|
|
|
|
className="w-6 h-6 text-gray-500 dark:text-gray-300"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<p className="text-black dark:text-white truncate w-full lg:hidden">
|
|
|
|
Preserved Formats
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{link?.collection.ownerId === userId ||
|
|
|
|
linkCollection?.members.some(
|
|
|
|
(e) => e.userId === userId && e.canDelete
|
|
|
|
) ? (
|
|
|
|
<div
|
|
|
|
onClick={() => {
|
|
|
|
if (link?.id) {
|
|
|
|
removeLink(link.id);
|
|
|
|
router.back();
|
|
|
|
onClick && onClick();
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
title="Delete"
|
2023-10-31 04:39:05 -05:00
|
|
|
className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
|
2023-10-30 14:20:15 -05:00
|
|
|
>
|
|
|
|
<FontAwesomeIcon
|
|
|
|
icon={faTrashCan}
|
|
|
|
className="w-6 h-6 text-gray-500 dark:text-gray-300"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<p className="text-black dark:text-white truncate w-full lg:hidden">
|
|
|
|
Delete
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
) : undefined}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|