renamed a type + small improvements

components/CollectionCard.tsx

@@ -1,8 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEllipsis, faLink } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
-import { CollectionIncludingMembers } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import useLinkStore from "@/store/links";
 import Dropdown from "./Dropdown";
 import { useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
@@ -10,14 +9,13 @@ import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import useModalStore from "@/store/modals";
 
 type Props = {
-  collection: CollectionIncludingMembers;
+  collection: CollectionIncludingMembersAndLinkCount;
   className?: string;
 };
 
 export default function CollectionCard({ collection, className }: Props) {
   const { setModal } = useModalStore();
 
-  const { links } = useLinkStore();
   const formattedDate = new Date(collection.createdAt as string).toLocaleString(
     "en-US",
     {
@@ -74,7 +72,7 @@ export default function CollectionCard({ collection, className }: Props) {
           <div className="text-right w-40">
             <div className="text-sky-500 font-bold text-sm flex justify-end gap-1 items-center">
               <FontAwesomeIcon icon={faLink} className="w-5 h-5 text-sky-600" />
-              {links.filter((e) => e.collectionId === collection.id).length}
+              {collection._count.links}
             </div>
             <div className="flex items-center justify-end gap-1 text-gray-600">
               <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />

components/LinkCard.tsx

@@ -1,5 +1,5 @@
 import {
-  CollectionIncludingMembers,
+  CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import {
@@ -34,17 +34,18 @@ export default function LinkCard({ link, count, className }: Props) {
 
   const { account } = useAccountStore();
 
-  const [collection, setCollection] = useState<CollectionIncludingMembers>(
+  const [collection, setCollection] =
-    collections.find(
+    useState<CollectionIncludingMembersAndLinkCount>(
-      (e) => e.id === link.collection.id
+      collections.find(
-    ) as CollectionIncludingMembers
+        (e) => e.id === link.collection.id
-  );
+      ) as CollectionIncludingMembersAndLinkCount
+    );
 
   useEffect(() => {
     setCollection(
       collections.find(
         (e) => e.id === link.collection.id
-      ) as CollectionIncludingMembers
+      ) as CollectionIncludingMembersAndLinkCount
     );
   }, [collections]);
 

components/Modal/Collection/CollectionInfo.tsx

@@ -5,7 +5,7 @@ import {
   faPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
-import { CollectionIncludingMembers } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import RequiredBadge from "../../RequiredBadge";
 import SubmitButton from "@/components/SubmitButton";
 import { HexColorPicker } from "react-colorful";
@@ -13,8 +13,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props = {
   toggleCollectionModal: Function;
-  setCollection: Dispatch<SetStateAction<CollectionIncludingMembers>>;
+  setCollection: Dispatch<
-  collection: CollectionIncludingMembers;
+    SetStateAction<CollectionIncludingMembersAndLinkCount>
+  >;
+  collection: CollectionIncludingMembersAndLinkCount;
   method: "CREATE" | "UPDATE";
 };
 

components/Modal/Collection/DeleteCollection.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
-import { CollectionIncludingMembers } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 
 type Props = {
   toggleDeleteCollectionModal: Function;
-  collection: CollectionIncludingMembers;
+  collection: CollectionIncludingMembersAndLinkCount;
 };
 
 export default function DeleteCollection({

components/Modal/Collection/TeamManagement.tsx

@@ -7,7 +7,7 @@ import {
   faUserPlus,
 } from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
-import { CollectionIncludingMembers, Member } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import { useSession } from "next-auth/react";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
 import Checkbox from "../../Checkbox";
@@ -16,8 +16,10 @@ import ProfilePhoto from "@/components/ProfilePhoto";
 
 type Props = {
   toggleCollectionModal: Function;
-  setCollection: Dispatch<SetStateAction<CollectionIncludingMembers>>;
+  setCollection: Dispatch<
-  collection: CollectionIncludingMembers;
+    SetStateAction<CollectionIncludingMembersAndLinkCount>
+  >;
+  collection: CollectionIncludingMembersAndLinkCount;
   method: "CREATE" | "UPDATE";
 };
 

components/Modal/Collection/index.tsx

@@ -1,13 +1,13 @@
 import { Tab } from "@headlessui/react";
 import CollectionInfo from "./CollectionInfo";
-import { CollectionIncludingMembers } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import TeamManagement from "./TeamManagement";
 import { useState } from "react";
 import DeleteCollection from "./DeleteCollection";
 
 type Props = {
   toggleCollectionModal: Function;
-  activeCollection: CollectionIncludingMembers;
+  activeCollection: CollectionIncludingMembersAndLinkCount;
   method: "CREATE" | "UPDATE";
   className?: string;
   defaultIndex?: number;
@@ -21,7 +21,7 @@ export default function CollectionModal({
   method,
 }: Props) {
   const [collection, setCollection] =
-    useState<CollectionIncludingMembers>(activeCollection);
+    useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
 
   return (
     <div className={className}>

components/ModalManagement.tsx

@@ -3,7 +3,7 @@ import Modal from "./Modal";
 import LinkModal from "./Modal/LinkModal";
 import {
   AccountSettings,
-  CollectionIncludingMembers,
+  CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import CollectionModal from "./Modal/Collection";
@@ -33,7 +33,9 @@ export default function ModalManagement() {
           toggleCollectionModal={toggleModal}
           method={modal.method}
           defaultIndex={modal.defaultIndex}
-          activeCollection={modal.active as CollectionIncludingMembers}
+          activeCollection={
+            modal.active as CollectionIncludingMembersAndLinkCount
+          }
         />
       </Modal>
     );

hooks/useSort.tsx

@@ -1,12 +1,14 @@
 import {
-  CollectionIncludingMembers,
+  CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
   Sort,
 } from "@/types/global";
 import { SetStateAction, useEffect } from "react";
 
 type Props<
-  T extends CollectionIncludingMembers | LinkIncludingShortenedCollectionAndTags
+  T extends
+    | CollectionIncludingMembersAndLinkCount
+    | LinkIncludingShortenedCollectionAndTags
 > = {
   sortBy: Sort;
 
@@ -15,7 +17,9 @@ type Props<
 };
 
 export default function useSort<
-  T extends CollectionIncludingMembers | LinkIncludingShortenedCollectionAndTags
+  T extends
+    | CollectionIncludingMembersAndLinkCount
+    | LinkIncludingShortenedCollectionAndTags
 >({ sortBy, data, setData }: Props<T>) {
   useEffect(() => {
     const dataArray = [...data];

lib/api/controllers/collections/getCollections.ts

@@ -9,6 +9,9 @@ export default async function getCollection(userId: number) {
       ],
     },
     include: {
+      _count: {
+        select: { links: true },
+      },
       members: {
         include: {
           user: {

lib/api/controllers/collections/postCollection.ts

@@ -1,9 +1,9 @@
 import { prisma } from "@/lib/api/db";
-import { CollectionIncludingMembers } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { existsSync, mkdirSync } from "fs";
 
 export default async function postCollection(
-  collection: CollectionIncludingMembers,
+  collection: CollectionIncludingMembersAndLinkCount,
   userId: number
 ) {
   if (!collection || collection.name.trim() === "")
@@ -50,6 +50,9 @@ export default async function postCollection(
       },
     },
     include: {
+      _count: {
+        select: { links: true },
+      },
       members: {
         include: {
           user: {

lib/api/controllers/collections/updateCollection.ts

@@ -1,9 +1,9 @@
 import { prisma } from "@/lib/api/db";
-import { CollectionIncludingMembers } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import getPermission from "@/lib/api/getPermission";
 
 export default async function updateCollection(
-  collection: CollectionIncludingMembers,
+  collection: CollectionIncludingMembersAndLinkCount,
   userId: number
 ) {
   if (!collection.id)
@@ -27,6 +27,7 @@ export default async function updateCollection(
       where: {
         id: collection.id,
       },
+
       data: {
         name: collection.name,
         description: collection.description,
@@ -42,6 +43,9 @@ export default async function updateCollection(
         },
       },
       include: {
+        _count: {
+          select: { links: true },
+        },
         members: {
           include: {
             user: {

lib/client/addMemberToCollection.ts

@@ -1,10 +1,10 @@
-import { CollectionIncludingMembers, Member } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import getPublicUserDataByEmail from "./getPublicUserDataByEmail";
 
 const addMemberToCollection = async (
   ownerEmail: string,
   memberEmail: string,
-  collection: CollectionIncludingMembers,
+  collection: CollectionIncludingMembersAndLinkCount,
   setMember: (newMember: Member) => null | undefined
 ) => {
   console.log(collection.members);

pages/api/hello.ts

@@ -1,26 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "pages/api/auth/[...nextauth]";
-
-type Data = {
-  message: string;
-  data?: object;
-};
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  const session = await getServerSession(req, res, authOptions);
-
-  console.log(session);
-
-  if (!session) {
-    res.status(401).json({ message: "You must be logged in." });
-    return;
-  }
-
-  return res.json({
-    message: "Success",
-  });
-}

pages/collections/[id].tsx

@@ -2,7 +2,7 @@ import Dropdown from "@/components/Dropdown";
 import LinkCard from "@/components/LinkCard";
 import useCollectionStore from "@/store/collections";
 import useLinkStore from "@/store/links";
-import { CollectionIncludingMembers, Sort } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";
 import {
   faEllipsis,
   faFolder,
@@ -33,7 +33,7 @@ export default function Index() {
   const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
 
   const [activeCollection, setActiveCollection] =
-    useState<CollectionIncludingMembers>();
+    useState<CollectionIncludingMembersAndLinkCount>();
 
   useLinks({ collectionId: Number(router.query.id), sort: sortBy });
 

pages/dashboard.tsx

@@ -77,7 +77,11 @@ export default function Dashboard() {
         <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
           <div className="flex items-baseline gap-2">
             <p className="font-bold text-6xl bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
-              {links.length}
+              {collections.reduce(
+                (accumulator, collection) =>
+                  accumulator + collection._count.links,
+                0
+              )}
             </p>
             <p className="text-sky-900 text-xl">
               Links

store/collections.ts

@@ -1,13 +1,15 @@
 import { create } from "zustand";
-import { CollectionIncludingMembers } from "@/types/global";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import useTagStore from "./tags";
 
 type CollectionStore = {
-  collections: CollectionIncludingMembers[];
+  collections: CollectionIncludingMembersAndLinkCount[];
   setCollections: () => void;
-  addCollection: (body: CollectionIncludingMembers) => Promise<boolean>;
+  addCollection: (
+    body: CollectionIncludingMembersAndLinkCount
+  ) => Promise<boolean>;
   updateCollection: (
-    collection: CollectionIncludingMembers
+    collection: CollectionIncludingMembersAndLinkCount
   ) => Promise<boolean>;
   removeCollection: (collectionId: number) => Promise<boolean>;
 };

store/modals.ts

@@ -1,6 +1,6 @@
 import {
   AccountSettings,
-  CollectionIncludingMembers,
+  CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import { create } from "zustand";
@@ -28,7 +28,7 @@ type Modal =
       modal: "COLLECTION";
       state: boolean;
       method: "CREATE" | "UPDATE";
-      active: CollectionIncludingMembers;
+      active: CollectionIncludingMembersAndLinkCount;
       defaultIndex?: number;
     }
   | null;

types/global.ts

@@ -27,10 +27,11 @@ export interface Member {
   user: OptionalExcluding<User, "email" | "name">;
 }
 
-export interface CollectionIncludingMembers
+export interface CollectionIncludingMembersAndLinkCount
   extends Omit<Collection, "id" | "createdAt"> {
   id?: number;
   createdAt?: string;
+  _count: { links: number };
   members: Member[];
 }