many changes across the app

components/LinkList.tsx

@@ -19,6 +19,7 @@ import Dropdown from "./Dropdown";
 import useLinkStore from "@/store/links";
 import Modal from "./Modal";
 import EditLink from "./Modal/EditLink";
+import Link from "next/link";
 
 export default function ({
   link,
@@ -57,7 +58,7 @@ export default function ({
         width={32}
         height={32}
         alt=""
-        className="select-none mt-3 z-10 rounded-md"
+        className="select-none mt-3 z-10 rounded-md shadow"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;
@@ -84,18 +85,20 @@ export default function ({
           </div>
           <p className="text-sky-400 text-sm font-medium">{link.title}</p>
           <div className="flex gap-3 items-center flex-wrap my-3">
+            <Link href={`/collections/${link.collection.id}`}>
               <div className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100">
                 <FontAwesomeIcon icon={faFolder} className="w-4 text-sky-300" />
                 <p className="text-sky-900">{link.collection.name}</p>
               </div>
+            </Link>
+
             <div className="flex gap-1 items-center flex-wrap">
               {link.tags.map((e, i) => (
-                <p
-                  key={i}
-                  className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100"
-                >
+                <Link key={i} href={`/tags/${e.id}`}>
+                  <p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100">
                     # {e.name}
                   </p>
+                </Link>
               ))}
             </div>
           </div>

components/Modal/DeleteCollection.tsx

@@ -34,7 +34,7 @@ export default function AddCollection({
   };
 
   return (
-    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+    <div className="flex flex-col gap-3 sm:w-[33rem] w-72">
       <p className="font-bold text-sky-300 text-center">Delete Collection</p>
 
       <p className="text-sky-900 select-none text-center">

components/Modal/EditCollection.tsx

@@ -5,11 +5,17 @@
 
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+import {
+  faClose,
+  faPenToSquare,
+  faTrashCan,
+} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { ExtendedCollection } from "@/types/global";
 import { useSession } from "next-auth/react";
 import getPublicUserDataByEmail from "@/lib/client/getPublicUserDataByEmail";
+import Modal from "@/components/Modal";
+import DeleteCollection from "@/components/Modal/DeleteCollection";
 
 type Props = {
   toggleCollectionModal: Function;
@@ -27,6 +33,12 @@ export default function EditCollection({
 
   const { updateCollection } = useCollectionStore();
 
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
+
+  const toggleDeleteCollectionModal = () => {
+    setDeleteCollectionModal(!deleteCollectionModal);
+  };
+
   const session = useSession();
 
   const submit = async () => {
@@ -250,13 +262,41 @@ export default function EditCollection({
         );
       })}
 
+      <div className="flex flex-col justify-center items-center gap-2 mt-2">
         <div
-        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
           onClick={submit}
         >
           <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
           Edit Collection
         </div>
+
+        <div className="flex items-center justify-center gap-2">
+          <hr className="w-16 border" />
+
+          <p className="text-gray-400 font-bold">OR</p>
+
+          <hr className="w-16 border" />
+        </div>
+
+        <div
+          onClick={() => {
+            toggleDeleteCollectionModal();
+          }}
+          className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
+        >
+          <FontAwesomeIcon icon={faTrashCan} className="w-4 h-4 text-white" />
+        </div>
+      </div>
+
+      {deleteCollectionModal ? (
+        <Modal toggleModal={toggleDeleteCollectionModal}>
+          <DeleteCollection
+            collection={activeCollection}
+            toggleCollectionModal={toggleDeleteCollectionModal}
+          />
+        </Modal>
+      ) : null}
     </div>
   );
 }

components/Modal/EditLink.tsx

@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ExtendedLink } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
+import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   toggleLinkModal: Function;
@@ -19,7 +20,7 @@ type Props = {
 export default function EditLink({ toggleLinkModal, link }: Props) {
   const [currentLink, setCurrentLink] = useState<ExtendedLink>(link);
 
-  const { updateLink } = useLinkStore();
+  const { updateLink, removeLink } = useLinkStore();
 
   const shortendURL = new URL(link.url).host.toLowerCase();
 
@@ -85,13 +86,33 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
         />
       </div>
 
+      <div className="flex flex-col justify-center items-center gap-2 mt-2">
         <div
-        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+          className="bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
           onClick={submit}
         >
           <FontAwesomeIcon icon={faPenToSquare} className="h-5" />
           Edit Link
         </div>
+
+        <div className="flex items-center justify-center gap-2">
+          <hr className="w-16 border" />
+
+          <p className="text-gray-400 font-bold">OR</p>
+
+          <hr className="w-16 border" />
+        </div>
+
+        <div
+          onClick={() => {
+            removeLink(link);
+            toggleLinkModal();
+          }}
+          className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
+        >
+          <FontAwesomeIcon icon={faTrashCan} className="w-4 h-4 text-white" />
+        </div>
+      </div>
     </div>
   );
 }

components/Modal/index.tsx

@@ -3,8 +3,10 @@
 // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { ReactNode } from "react";
+import { MouseEventHandler, ReactNode } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   toggleModal: Function;
@@ -13,9 +15,18 @@ type Props = {
 
 export default function ({ toggleModal, children }: Props) {
   return (
-    <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
-      <ClickAwayHandler onClickOutside={toggleModal} className="w-fit mx-auto">
-        <div className="slide-up border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
+    <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
+      <ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto">
+        <div className="slide-up relative border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
+          <div
+            onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
+            className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
+          >
+            <FontAwesomeIcon
+              icon={faChevronLeft}
+              className="w-4 h-4 text-gray-500"
+            />
+          </div>
           {children}
         </div>
       </ClickAwayHandler>

components/Navbar.tsx

@@ -15,12 +15,13 @@ import {
   faChevronDown,
   faBars,
 } from "@fortawesome/free-solid-svg-icons";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Dropdown from "@/components/Dropdown";
 import Modal from "./Modal";
 import AddLink from "./Modal/AddLink";
 import ClickAwayHandler from "./ClickAwayHandler";
 import Sidebar from "./Sidebar";
+import { useRouter } from "next/router";
 
 export default function () {
   const { data: session } = useSession();
@@ -32,8 +33,14 @@ export default function () {
   const [linkModal, setLinkModal] = useState(false);
   const [sidebar, setSidebar] = useState(false);
 
+  const router = useRouter();
+
   window.addEventListener("resize", () => setSidebar(false));
 
+  useEffect(() => {
+    setSidebar(false);
+  }, [router]);
+
   const toggleSidebar = () => {
     setSidebar(!sidebar);
   };
@@ -123,7 +130,7 @@ export default function () {
           {sidebar ? (
             <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
               <ClickAwayHandler onClickOutside={toggleSidebar}>
-                <div className="slide-right">
+                <div className="slide-right shadow-lg">
                   <Sidebar />
                 </div>
               </ClickAwayHandler>

components/Sidebar/SidebarItem.tsx

@@ -4,7 +4,8 @@
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import Link from "next/link";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 
 interface SidebarItemProps {
   text: string;
@@ -13,13 +14,25 @@ interface SidebarItemProps {
 }
 
 export default function ({ text, icon, path }: SidebarItemProps) {
+  const router = useRouter();
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    if (router.asPath === path) setActive(true);
+    else setActive(false);
+  }, [router]);
+
   return (
     <Link href={path}>
-      <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
+      <div
+        className={`${
+          active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
+        } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+      >
         {React.cloneElement(icon, {
-          className: "w-4 text-sky-300",
+          className: `w-4 ${active ? "text-white" : "text-sky-300"}`,
         })}
-        <p className="text-sky-900">{text}</p>
+        <p className={`${active ? "text-white" : "text-sky-900"}`}>{text}</p>
       </div>
     </Link>
   );

components/Sidebar/index.tsx

@@ -14,12 +14,21 @@ import {
 import SidebarItem from "./SidebarItem";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 
 export default function () {
   const { collections } = useCollectionStore();
-
   const { tags } = useTagStore();
 
+  const router = useRouter();
+
+  const [active, setActive] = useState("");
+
+  useEffect(() => {
+    setActive(router.asPath);
+  }, [router]);
+
   return (
     <div className="bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20">
       <p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
@@ -27,16 +36,48 @@ export default function () {
       </p>
 
       <Link href="/links">
-        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
-          <FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
-          <p>All Links</p>
+        <div
+          className={`${
+            active === "/links"
+              ? "bg-sky-500"
+              : "hover:bg-gray-50 hover:outline bg-gray-100"
+          } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+        >
+          <FontAwesomeIcon
+            icon={faBookmark}
+            className={`w-4 ${
+              active === "/links" ? "text-white" : "text-sky-300"
+            }`}
+          />
+          <p
+            className={`${active === "/links" ? "text-white" : "text-sky-900"}`}
+          >
+            All Links
+          </p>
         </div>
       </Link>
 
       <Link href="/collections">
-        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
-          <FontAwesomeIcon icon={faBox} className="w-4 text-sky-300" />
-          <p>All Collections</p>
+        <div
+          className={`${
+            active === "/collections"
+              ? "bg-sky-500"
+              : "hover:bg-gray-50 hover:outline bg-gray-100"
+          } outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
+        >
+          <FontAwesomeIcon
+            icon={faBox}
+            className={`w-4 ${
+              active === "/collections" ? "text-white" : "text-sky-300"
+            }`}
+          />
+          <p
+            className={`${
+              active === "/collections" ? "text-white" : "text-sky-900"
+            }`}
+          >
+            All Collections
+          </p>
         </div>
       </Link>
 

layouts/AuthRedirect.tsx

@@ -41,5 +41,5 @@ export default function ({ children }: Props) {
   }, [status]);
 
   if (status !== "loading" && !redirect) return <>{children}</>;
-  else return <Loader />;
+  // else return <Loader />;
 }

layouts/Dashboard.tsx

@@ -36,5 +36,5 @@ export default function ({ children }: Props) {
     );
   else if ((status === "unauthenticated" && !redirect) || !routeExists)
     return <>{children}</>;
-  else return <Loader />;
+  else return <></>;
 }

lib/api/controllers/collections/deleteCollection.ts

@@ -33,7 +33,13 @@ export default async function (collection: { id: number }, userId: number) {
       },
     });
 
+    try {
       fs.rmdirSync(`data/archives/${collection.id}`, { recursive: true });
+    } catch (error) {
+      console.log(
+        "Collection's archive directory wasn't deleted most likely because it didn't exist..."
+      );
+    }
 
     return await prisma.collection.delete({
       where: {

lib/api/controllers/links/updateLink.ts

@@ -5,7 +5,7 @@
 
 import { prisma } from "@/lib/api/db";
 import { ExtendedLink } from "@/types/global";
-import { Link, UsersAndCollections } from "@prisma/client";
+import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 
 export default async function (link: ExtendedLink, userId: number) {
@@ -17,10 +17,23 @@ export default async function (link: ExtendedLink, userId: number) {
     (e: UsersAndCollections) => e.userId === userId && e.canUpdate
   );
 
+  if (link.collection.ownerId) {
+    const collectionIsAccessible = await getPermission(
+      userId,
+      link.collection.id
+    );
+
+    const memberHasAccess = collectionIsAccessible?.members.some(
+      (e: UsersAndCollections) => e.userId === userId && e.canCreate
+    );
+
     if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
       return { response: "Collection is not accessible.", status: 401 };
+  } else {
+    link.collection.ownerId = userId;
+  }
 
-  const updatedLink: Link = await prisma.link.update({
+  const updatedLink: ExtendedLink = await prisma.link.update({
     where: {
       id: link.id,
     },
@@ -60,6 +73,10 @@ export default async function (link: ExtendedLink, userId: number) {
         })),
       },
     },
+    include: {
+      tags: true,
+      collection: true,
+    },
   });
 
   return { response: updatedLink, status: 200 };

store/links.ts

@@ -63,9 +63,12 @@ const useLinkStore = create<LinkStore>()((set) => ({
 
     if (response.ok) {
       set((state) => ({
-        links: state.links.map((e) => (e.id === link.id ? link : e)),
+        links: state.links.map((e) =>
+          e.id === data.response.id ? data.response : e
+        ),
       }));
       useTagStore.getState().setTags();
+      useCollectionStore.getState().setCollections();
     }
   },
   removeLink: async (link) => {

styles/globals.css

@@ -63,16 +63,14 @@
 }
 
 .slide-right {
-  animation: slide-right-animation 100ms;
+  animation: slide-right-animation 200ms;
 }
 
 @keyframes slide-right-animation {
   0% {
-    transform: translateX(-25%);
-    opacity: 0;
+    transform: translateX(-100%);
   }
   100% {
     transform: translateX(0);
-    opacity: 1;
   }
 }