Many improvements.

components/AddLinkModal.tsx

@@ -3,26 +3,22 @@ import CollectionSelection from "./InputSelect/CollectionSelection";
 import TagSelection from "./InputSelect/TagSelection";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
-interface NewLink {
-  name: string;
-  url: string;
-  tags: string[];
-  collectionId:
-    | {
-        id: string | number;
-        isNew: boolean | undefined;
-      }
-    | object;
-}
+import { useRouter } from "next/router";
+import { NewLink } from "@/types/global";
+import useLinkSlice from "@/store/links";
 
 export default function () {
+  const router = useRouter();
+
   const [newLink, setNewLink] = useState<NewLink>({
     name: "",
     url: "",
     tags: [],
-    collectionId: {},
+    collectionId: { id: Number(router.query.id) },
   });
 
+  const { addLink } = useLinkSlice();
+
   const setTags = (e: any) => {
     const tagNames = e.map((e: any) => {
       return e.label;
@@ -54,7 +50,7 @@ export default function () {
   };
 
   return (
-    <div className="border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
+    <div className="slide-up border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
       <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
 
       <div className="flex gap-5 items-center justify-between">
@@ -64,8 +60,7 @@ export default function () {
           onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
           type="text"
           placeholder="e.g. Example Link"
-          className="w-60 rounded p-2 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
-          autoFocus
+          className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -76,7 +71,7 @@ export default function () {
           onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
           type="text"
           placeholder="e.g. http://example.com/"
-          className="w-60 rounded p-2 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -92,7 +87,7 @@ export default function () {
 
       <div
         className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
-        onClick={() => postLink()}
+        onClick={() => addLink(newLink)}
       >
         <FontAwesomeIcon icon={faPlus} className="h-5" />
         Add Link

components/ClickAwayHandler.tsx

@@ -19,10 +19,8 @@ function useOutsideAlerter(
         onClickOutside();
       }
     }
-    // Bind the event listener
     document.addEventListener("mouseup", handleClickOutside);
     return () => {
-      // Unbind the event listener on clean up
       document.removeEventListener("mouseup", handleClickOutside);
     };
   }, [ref, onClickOutside]);

components/CollectionCard.tsx

@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { Collection } from "@prisma/client";
+import Link from "next/link";
 
 export default function ({ collection }: { collection: Collection }) {
   const formattedDate = new Date(collection.createdAt).toLocaleString("en-US", {
@@ -10,12 +11,14 @@ export default function ({ collection }: { collection: Collection }) {
   });
 
   return (
-    <div className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
-      <div className="flex justify-between text-sky-900 items-center">
-        <p className="text-lg w-max">{collection.name}</p>
-        <FontAwesomeIcon icon={faChevronRight} className="w-3" />
+    <Link href={`/collections/${collection.id}`}>
+      <div className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
+        <div className="flex justify-between text-sky-900 items-center">
+          <p className="text-lg w-max">{collection.name}</p>
+          <FontAwesomeIcon icon={faChevronRight} className="w-3" />
+        </div>
+        <p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
       </div>
-      <p className="text-sm text-sky-300 font-bold">{formattedDate}</p>
-    </div>
+    </Link>
   );
 }

components/InputSelect/CollectionSelection.tsx

@@ -1,4 +1,4 @@
-import useCollectionSlice from "@/store/collection";
+import useCollectionSlice from "@/store/collections";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import CreatableSelect from "react-select/creatable";

components/LinkList.tsx

@@ -0,0 +1,23 @@
+import { LinkAndTags } from "@/types/global";
+
+export default function ({
+  link,
+  count,
+}: {
+  link: LinkAndTags;
+  count: number;
+}) {
+  return (
+    <div className="border border-sky-100 mb-5 bg-gray-100 p-5 rounded">
+      <div className="flex items-baseline gap-1">
+        <p className="text-sm text-sky-600">{count + 1}.</p>
+        <p className="text-lg text-sky-500">{link.name}</p>
+      </div>
+      <div className="flex gap-1 items-baseline">
+        {link.tags.map((e, i) => (
+          <p key={i}>{e.name}</p>
+        ))}
+      </div>
+    </div>
+  );
+}

components/Navbar.tsx

@@ -1,22 +1,63 @@
 import { signOut } from "next-auth/react";
 import { useRouter } from "next/router";
-import useCollectionSlice from "@/store/collection";
-import { Collection } from "@prisma/client";
+import useCollectionSlice from "@/store/collections";
+import { Collection, Tag } from "@prisma/client";
 import ClickAwayHandler from "./ClickAwayHandler";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { useState } from "react";
+import {
+  faPlus,
+  faFolder,
+  faBox,
+  faTag,
+  faBookmark,
+  faMagnifyingGlass,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
+import { useEffect, useState } from "react";
 import AddLinkModal from "./AddLinkModal";
+import useTagSlice from "@/store/tags";
 
 export default function () {
   const router = useRouter();
-  const collectionId = router.query.id;
+  const [pageName, setPageName] = useState<string | null>("");
+  const [pageIcon, setPageIcon] = useState<IconDefinition | null>(null);
 
   const { collections } = useCollectionSlice();
+  const { tags } = useTagSlice();
 
-  const activeCollection: Collection | undefined = collections.find(
-    (e) => e.id.toString() == collectionId
-  );
+  useEffect(() => {
+    if (router.route === "/collections/[id]") {
+      const collectionId = router.query.id;
+
+      const activeCollection: Collection | undefined = collections.find(
+        (e) => e.id.toString() == collectionId
+      );
+
+      if (activeCollection) {
+        setPageName(activeCollection?.name);
+      }
+
+      setPageIcon(faFolder);
+    } else if (router.route === "/tags/[id]") {
+      const tagId = router.query.id;
+
+      const activeTag: Tag | undefined = tags.find(
+        (e) => e.id.toString() == tagId
+      );
+
+      if (activeTag) {
+        setPageName(activeTag?.name);
+      }
+
+      setPageIcon(faTag);
+    } else if (router.route === "/collections") {
+      setPageName("All Collections");
+      setPageIcon(faBox);
+    } else if (router.route === "/links") {
+      setPageName("All Links");
+      setPageIcon(faBookmark);
+    }
+  }, [router, collections, tags]);
 
   const [collectionInput, setCollectionInput] = useState(false);
 
@@ -26,7 +67,12 @@ export default function () {
 
   return (
     <div className="flex justify-between items-center p-5 border-solid border-b-sky-100 border border-l-white">
-      <p>{activeCollection?.name}</p>
+      <div className="text-sky-900 rounded my-1 flex items-center gap-2 font-bold">
+        {pageIcon ? (
+          <FontAwesomeIcon icon={pageIcon} className="w-4 text-sky-300" />
+        ) : null}
+        <p>{pageName}</p>
+      </div>
       <div className="flex items-center gap-3">
         <FontAwesomeIcon
           icon={faPlus}
@@ -45,7 +91,7 @@ export default function () {
         </div>
 
         {collectionInput ? (
-          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center">
+          <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in">
             <ClickAwayHandler
               onClickOutside={toggleCollectionInput}
               className="w-fit mx-auto"

components/Sidebar/SidebarItem.tsx

@@ -1,26 +1,21 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Collection } from "@prisma/client";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { MouseEventHandler } from "react";
-
-interface TextObject {
-  name: string;
-}
+import Link from "next/link";
 
 interface SidebarItemProps {
-  item: Collection | TextObject;
+  text: string;
   icon: IconProp;
-  onClick?: MouseEventHandler;
+  path: string;
 }
 
-export default function ({ item, icon, onClick }: SidebarItemProps) {
+export default function ({ text, icon, path }: SidebarItemProps) {
   return (
-    <div
-      onClick={onClick}
-      className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2"
-    >
-      <FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
-      <p>{item.name}</p>
-    </div>
+    <Link href={path}>
+      <div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
+        <p>{text}</p>
+      </div>
+    </Link>
   );
 }

components/Sidebar/index.tsx

@@ -1,19 +1,20 @@
 import { useSession } from "next-auth/react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { useState } from "react";
-import useCollectionSlice from "@/store/collection";
+import useCollectionSlice from "@/store/collections";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faPlus,
   faChevronDown,
   faFolder,
-  faBoxesStacked,
-  faHashtag,
+  faBox,
+  faTag,
   faBookmark,
 } from "@fortawesome/free-solid-svg-icons";
 import SidebarItem from "./SidebarItem";
 import useTagSlice from "@/store/tags";
+import Link from "next/link";
 
 export default function () {
   const { data: session } = useSession();
@@ -51,9 +52,19 @@ export default function () {
         </div>
       </div>
 
-      <SidebarItem item={{ name: "All Links" }} icon={faBookmark} />
+      <Link href="links">
+        <div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+          <FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
+          <p>All Links</p>
+        </div>
+      </Link>
 
-      <SidebarItem item={{ name: "All Collections" }} icon={faBoxesStacked} />
+      <Link href="/collections">
+        <div className="hover:bg-gray-50 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+          <FontAwesomeIcon icon={faBox} className="w-4 text-sky-300" />
+          <p>All Collections</p>
+        </div>
+      </Link>
 
       <div className="text-gray-500 flex items-center justify-between mt-5">
         <p className="text-sm p-3">Collections</p>
@@ -80,7 +91,14 @@ export default function () {
       </div>
       <div>
         {collections.map((e, i) => {
-          return <SidebarItem key={i} item={e} icon={faFolder} />;
+          return (
+            <SidebarItem
+              key={i}
+              text={e.name}
+              icon={faFolder}
+              path={`/collections/${e.id}`}
+            />
+          );
         })}
       </div>
       <div className="text-gray-500 flex items-center justify-between mt-5">
@@ -88,7 +106,14 @@ export default function () {
       </div>
       <div>
         {tags.map((e, i) => {
-          return <SidebarItem key={i} item={e} icon={faHashtag} />;
+          return (
+            <SidebarItem
+              key={i}
+              text={e.name}
+              icon={faTag}
+              path={`/tags/${e.id}`}
+            />
+          );
         })}
       </div>
     </div>

lib/api/controllers/links/getLinks.ts

@@ -0,0 +1,33 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { prisma } from "@/lib/api/db";
+import { Session } from "next-auth";
+
+export default async function (
+  req: NextApiRequest,
+  res: NextApiResponse,
+  session: Session
+) {
+  const tags = await prisma.link.findMany({
+    where: {
+      collection: {
+        OR: [
+          {
+            ownerId: session?.user.id,
+          },
+          {
+            members: {
+              some: {
+                userId: session?.user.id,
+              },
+            },
+          },
+        ],
+      },
+    },
+    include: { tags: true },
+  });
+
+  return res.status(200).json({
+    response: tags || [],
+  });
+}

lib/api/controllers/links/postLink.ts

@@ -1,18 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "@/lib/api/db";
 import { Session } from "next-auth";
-import { Link } from "@prisma/client";
-
-interface LinkObject {
-  id: number;
-  name: string;
-  url: string;
-  tags: string[];
-  collectionId: {
-    id: string | number;
-    isNew: boolean | undefined;
-  };
-}
+import { LinkAndTags, NewLink } from "@/types/global";
 
 export default async function (
   req: NextApiRequest,
@@ -24,7 +13,7 @@ export default async function (
   }
 
   const email: string = session.user.email;
-  const link: LinkObject = req?.body;
+  const link: NewLink = req?.body;
 
   if (!link.name) {
     return res
@@ -70,10 +59,10 @@ export default async function (
 
   const collectionId = link.collectionId.id as number;
 
-  const createLink: Link = await prisma.link.create({
+  const createLink: LinkAndTags = await prisma.link.create({
     data: {
       name: link.name,
-      url: "https://www.example.com",
+      url: link.url,
       collection: {
         connect: {
           id: collectionId,
@@ -98,6 +87,7 @@ export default async function (
         })),
       },
     },
+    include: { tags: true },
   });
 
   return res.status(200).json({

lib/client/getInitialData.ts

@@ -1,17 +1,20 @@
-import useCollectionSlice from "@/store/collection";
+import useCollectionSlice from "@/store/collections";
 import { useEffect } from "react";
 import { useSession } from "next-auth/react";
 import useTagSlice from "@/store/tags";
+import useLinkSlice from "@/store/links";
 
 export default function () {
   const { status } = useSession();
   const { setCollections } = useCollectionSlice();
   const { setTags } = useTagSlice();
+  const { setLinks } = useLinkSlice();
 
   useEffect(() => {
     if (status === "authenticated") {
       setCollections();
       setTags();
+      setLinks();
     }
   }, [status]);
 }

pages/api/routes/links/index.ts

@@ -1,6 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "pages/api/auth/[...nextauth]";
+import getLinks from "@/lib/api/controllers/links/getLinks";
 import postLink from "@/lib/api/controllers/links/postLink";
 
 type Data = {
@@ -20,5 +21,6 @@ export default async function (
   // Check if user is unauthorized to the collection (If isn't owner or doesn't has the required permission...)
   // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
+  if (req.method === "GET") return await getLinks(req, res, session);
   if (req.method === "POST") return await postLink(req, res, session);
 }

pages/collections/[id].tsx

@@ -1,11 +1,24 @@
+import LinkList from "@/components/LinkList";
+import useLinkSlice from "@/store/links";
 import { useRouter } from "next/router";
 
 export default function () {
   const router = useRouter();
+  const { links } = useLinkSlice();
 
-  const collectionId = Number(router.query.id);
+  const linksByCollection = links.filter(
+    (e) => e.collectionId === Number(router.query.id)
+  );
 
-  console.log(collectionId);
-
-  return <div>{"HI"}</div>;
+  return (
+    // ml-80
+    <div className="p-5">
+      <p className="text-center mb-5 text-gray-500 font-bold text-sm">
+        {linksByCollection.length || 0} Links Found
+      </p>
+      {linksByCollection.map((e, i) => {
+        return <LinkList key={i} link={e} count={i} />;
+      })}
+    </div>
+  );
 }

pages/collections/index.tsx

@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import useCollectionSlice from "@/store/collection";
+import useCollectionSlice from "@/store/collections";
 
 import CollectionCard from "@/components/CollectionCard";
 

pages/tags/[id].tsx

@@ -0,0 +1,9 @@
+import { useRouter } from "next/router";
+
+export default function () {
+  const router = useRouter();
+
+  const tagId = Number(router.query.id);
+
+  return <div>{"HI"}</div>;
+}

store/links.ts

@@ -0,0 +1,48 @@
+import { create } from "zustand";
+import { LinkAndTags, NewLink } from "@/types/global";
+
+type LinkSlice = {
+  links: LinkAndTags[];
+  setLinks: () => void;
+  addLink: (linkName: NewLink) => void;
+  updateLink: (link: LinkAndTags) => void;
+  removeLink: (linkId: number) => void;
+};
+
+const useLinkSlice = create<LinkSlice>()((set) => ({
+  links: [],
+  setLinks: async () => {
+    const response = await fetch("/api/routes/links");
+
+    const data = await response.json();
+
+    if (response.ok) set({ links: data.response });
+  },
+  addLink: async (newLink) => {
+    const response = await fetch("/api/routes/links", {
+      body: JSON.stringify(newLink),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+
+    const data = await response.json();
+
+    if (response.ok)
+      set((state) => ({
+        links: [...state.links, data.response],
+      }));
+  },
+  updateLink: (link) =>
+    set((state) => ({
+      links: state.links.map((c) => (c.id === link.id ? link : c)),
+    })),
+  removeLink: (linkId) => {
+    set((state) => ({
+      links: state.links.filter((c) => c.id !== linkId),
+    }));
+  },
+}));
+
+export default useLinkSlice;

styles/globals.css

@@ -10,3 +10,40 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+::selection {
+  background-color: #0ea5e9;
+  color: white;
+}
+
+.hyphens {
+  hyphens: auto;
+}
+
+.slide-up {
+  animation: slide-up-animation 70ms;
+}
+
+.fade-in {
+  animation: fade-in-animation 100ms;
+}
+
+@keyframes fade-in-animation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up-animation {
+  0% {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}

types/global.ts

@@ -0,0 +1,15 @@
+import { Link, Tag } from "@prisma/client";
+
+export interface LinkAndTags extends Link {
+  tags: Tag[];
+}
+
+export interface NewLink {
+  name: string;
+  url: string;
+  tags: string[];
+  collectionId: {
+    id: string | number;
+    isNew?: boolean;
+  };
+}