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 useLinkStore from "@/store/links";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 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>(
-    collections.find(
-      (e) => e.id === link.collection.id
-    ) as CollectionIncludingMembers
-  );
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (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>>;
-  collection: CollectionIncludingMembers;
+  setCollection: Dispatch<
+    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>>;
-  collection: CollectionIncludingMembers;
+  setCollection: Dispatch<
+    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>
     );