rearchive protection

layouts/LinkLayout.tsx

@@ -8,6 +8,18 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
+import {
+  faPen,
+  faBoxesStacked,
+  faTrashCan,
+} from "@fortawesome/free-solid-svg-icons";
+import useLinkStore from "@/store/links";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useSession } from "next-auth/react";
+import useCollectionStore from "@/store/collections";
 
 interface Props {
   children: ReactNode;
@@ -40,6 +52,28 @@ export default function LinkLayout({ children }: Props) {
     setSidebar(!sidebar);
   };
 
+  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>();
+
+  useEffect(() => {
+    if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  useEffect(() => {
+    if (link)
+      setLinkCollection(collections.find((e) => e.id === link?.collection.id));
+  }, [link]);
+
   return (
     <>
       <ModalManagement />
@@ -50,21 +84,91 @@ export default function LinkLayout({ children }: Props) {
         </div>
 
         <div className="w-full flex flex-col min-h-screen max-w-screen-md mx-auto p-5">
-          <div className="flex gap-3 mb-5 duration-100">
-            <div
+          <div className="flex gap-3 mb-5 duration-100 items-center justify-between">
+            {/* <div
               onClick={toggleSidebar}
               className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
             >
               <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
-            </div>
+            </div> */}
 
             <div
               onClick={() => router.back()}
-              className="inline-flex gap-1 lg:hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700 lg:hover:bg-transparent lg:dark:hover:bg-transparent"
+              className="inline-flex gap-1 hover:opacity-60 items-center select-none cursor-pointer p-2 lg:p-0 lg:px-1 lg:my-2 text-gray-500 dark:text-gray-300 rounded-md duration-100"
             >
               <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
               Back
             </div>
+
+            <div className="lg:hidden">
+              <div className="flex 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;
+                    }}
+                    className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                  >
+                    <FontAwesomeIcon
+                      icon={faPen}
+                      className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                    />
+                  </div>
+                ) : undefined}
+
+                <div
+                  onClick={() => {
+                    link
+                      ? setModal({
+                          modal: "LINK",
+                          state: true,
+                          active: link,
+                          method: "FORMATS",
+                        })
+                      : undefined;
+                  }}
+                  title="Preserved Formats"
+                  className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                >
+                  <FontAwesomeIcon
+                    icon={faBoxesStacked}
+                    className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                  />
+                </div>
+
+                {link?.collection.ownerId === userId ||
+                linkCollection?.members.some(
+                  (e) => e.userId === userId && e.canDelete
+                ) ? (
+                  <div
+                    onClick={() => {
+                      if (link?.id) {
+                        removeLink(link.id);
+                        router.back();
+                      }
+                    }}
+                    title="Delete"
+                    className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
+                  >
+                    <FontAwesomeIcon
+                      icon={faTrashCan}
+                      className="w-6 h-6 text-gray-500 dark:text-gray-300"
+                    />
+                  </div>
+                ) : undefined}
+              </div>
+            </div>
           </div>
 
           {children}