fix: count nft collections upon saving draft

resources/js/Components/Drafts/NftGalleryDraftCard.blocks.test.tsx

@@ -8,7 +8,7 @@ import {
     NftGalleryDraftStats,
 } from "./NftGalleryDraftCard.blocks";
 import * as useAuthorizedActionMock from "@/Hooks/useAuthorizedAction";
-import { type DraftNft, type GalleryDraft } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
+import { type DraftNft, type GallerySavedDraft } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
 import UserDataFactory from "@/Tests/Factories/UserDataFactory";
 import { mockAuthContext, render, screen } from "@/Tests/testing-library";
 
@@ -56,7 +56,7 @@ describe("NftGalleryDraftHeading", () => {
 });
 
 describe("NftGalleryDraftStats", () => {
-    const draft: GalleryDraft = {
+    const draft: GallerySavedDraft = {
         id: 1,
         title: "Test draft",
         cover: null,

resources/js/Components/Drafts/NftGalleryDraftCard.blocks.tsx

@@ -10,7 +10,7 @@ import { Skeleton } from "@/Components/Skeleton";
 import { Tooltip } from "@/Components/Tooltip";
 import { useAuth } from "@/Contexts/AuthContext";
 import { useIsTruncated } from "@/Hooks/useIsTruncated";
-import { type DraftNft, type GalleryDraft } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
+import { type DraftNft, type GallerySavedDraft } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
 import { formatAddress } from "@/Utils/format-address";
 import { isTruthy } from "@/Utils/is-truthy";
 import { TruncateMiddle } from "@/Utils/TruncateMiddle";
@@ -104,7 +104,7 @@ export const NftGalleryDraftStats = ({
     draft,
     onDelete,
 }: {
-    draft: GalleryDraft;
+    draft: GallerySavedDraft;
     onDelete: () => void;
 }): JSX.Element => {
     const { user } = useAuth();
@@ -184,7 +184,7 @@ export const NftGalleryDraftImageGrid = ({
     minimumToShow = 6,
     skeletonCount,
 }: {
-    nfts: GalleryDraft["nfts"];
+    nfts: GallerySavedDraft["nfts"];
     minimumToShow?: number;
     skeletonCount?: number;
 }): JSX.Element => {

resources/js/Components/Drafts/NftGalleryDraftCard.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { type SpyInstance } from "vitest";
 import { NftGalleryDraftCard } from "./NftGalleryDraftCard";
 import * as useMetaMaskContext from "@/Contexts/MetaMaskContext";
-import { type GalleryDraft } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
+import { type GallerySavedDraft } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
 import UserDataFactory from "@/Tests/Factories/UserDataFactory";
 import { getSampleMetaMaskState } from "@/Tests/SampleData/SampleMetaMaskState";
 import { mockAuthContext, render, screen, userEvent } from "@/Tests/testing-library";
@@ -12,16 +12,16 @@ let resetAuthContextMock: () => void;
 let useMetaMaskContextSpy: SpyInstance;
 
 describe("NftGalleryDraftCard", () => {
-    const draft: GalleryDraft = {
+    const draft: GallerySavedDraft = {
         id: 1,
         title: "Test draft",
         cover: null,
         coverType: null,
         coverFileName: null,
         walletAddress: "0x22Fd644149ea87ca26237183ad6A66f91dfcFB87",
+        collectionsCount: 1,
         nfts: [],
         value: "0",
-        collectionsCount: 0,
         updatedAt: 123,
     };
 

resources/js/Components/Drafts/NftGalleryDraftCard.tsx

@@ -2,14 +2,14 @@ import { Link } from "@inertiajs/react";
 import cn from "classnames";
 import { NftGalleryDraftHeading, NftGalleryDraftImageGrid, NftGalleryDraftStats } from "./NftGalleryDraftCard.blocks";
 import { GalleryCoverImage } from "@/Components/Galleries/GalleryPage/GalleryCoverImage";
-import { type GalleryDraft } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
+import { type GallerySavedDraft } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
 import { isTruthy } from "@/Utils/is-truthy";
 
 export const NftGalleryDraftCard = ({
     draft,
     onDelete,
 }: {
-    draft: GalleryDraft;
+    draft: GallerySavedDraft;
     onDelete: () => void;
 }): JSX.Element => {
     let coverImage: string | null = null;
@@ -21,8 +21,7 @@ export const NftGalleryDraftCard = ({
     return (
         <Link
             href={route("my-galleries.create", {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                draftId: draft.id!,
+                draftId: draft.id,
                 editDraft: 1,
             })}
             className="group focus-visible:outline-none focus-visible:ring-0"

resources/js/Pages/Galleries/MyGalleries/Index.tsx

@@ -12,7 +12,7 @@ import { DraftGalleryDeleteModal } from "@/Components/Galleries/GalleryPage/Draf
 import { Heading } from "@/Components/Heading";
 import { Pagination } from "@/Components/Pagination";
 import { useAuthorizedAction } from "@/Hooks/useAuthorizedAction";
-import { type GalleryDraft, useWalletDraftGalleries } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
+import { type GallerySavedDraft, useWalletDraftGalleries } from "@/Pages/Galleries/hooks/useWalletDraftGalleries";
 import { assertWallet } from "@/Utils/assertions";
 import { isTruthy } from "@/Utils/is-truthy";
 
@@ -31,7 +31,7 @@ const Drafts = ({
     onRemove,
 }: {
     isLoading: boolean;
-    drafts: GalleryDraft[];
+    drafts: GallerySavedDraft[];
     onRemove?: (id: number) => void;
 }): JSX.Element => {
     const { t } = useTranslation();

resources/js/Pages/Galleries/hooks/useWalletDraftGalleries.test.ts

@@ -12,7 +12,6 @@ const defaultGalleryDraft = {
     nfts: [],
     walletAddress: "mockedAddress",
     value: "test",
-    collectionsCount: 1,
     updatedAt: new Date().getTime(),
 };
 
@@ -25,7 +24,6 @@ const expiredGalleryDraft = {
     nfts: [],
     walletAddress: "mockedAddress",
     value: "test",
-    collectionsCount: 1,
     updatedAt: 169901639000,
 };
 
@@ -98,7 +96,6 @@ describe("useWalletDraftGalleries", () => {
                 nfts: [],
                 walletAddress: "mockedAddress",
                 value: "test",
-                collectionsCount: 1,
                 updatedAt: new Date().getTime(),
             });
         });
@@ -131,7 +128,6 @@ describe("useWalletDraftGalleries", () => {
                 nfts: [],
                 walletAddress: "mockedAddress",
                 value: "test",
-                collectionsCount: 1,
                 updatedAt: new Date().getTime(),
             });
         });

resources/js/Pages/Galleries/hooks/useWalletDraftGalleries.ts

@@ -1,3 +1,4 @@
+import uniqBy from "lodash/uniqBy";
 import { useCallback, useEffect, useState } from "react";
 import { useIndexedDB } from "react-indexed-db-hook";
 import { isTruthy } from "@/Utils/is-truthy";
@@ -24,28 +25,47 @@ export interface GalleryDraft {
     walletAddress?: string;
     id?: number | null;
     value: string | null;
-    collectionsCount: number;
     updatedAt: number | null;
     coverFileName: string | null;
 }
 
-interface GallerySavedDraft extends GalleryDraft {
+export interface GallerySavedDraft extends GalleryDraft {
     id: number;
+    collectionsCount: number;
 }
 
 interface WalletDraftGalleriesState {
     upsert: (draft: GalleryDraft) => Promise<GallerySavedDraft>;
     add: (draft: GalleryDraft) => Promise<GallerySavedDraft>;
     remove: (id?: number | null) => Promise<void>;
     removeExpired: () => Promise<void>;
-    drafts: GalleryDraft[];
+    drafts: GallerySavedDraft[];
     findWalletDraftById: (id: number | string) => Promise<GallerySavedDraft | undefined>;
     isLoading: boolean;
     isSaving: boolean;
     hasReachedLimit: boolean;
     allDrafts: () => Promise<GallerySavedDraft[]>;
 }
 
+/**
+ * Calculate collections count based on saved nfts.
+ *
+ * @param {GalleryDraft} draft
+ * @returns {number}
+ */
+const calculateCollectionsCount = (draft: GalleryDraft): number => uniqBy(draft.nfts, "collectionSlug").length;
+
+/**
+ * Determine if gallery is expired.
+ *
+ * @param {GalleryDraft} draft
+ * @returns {boolean}
+ */
+const isExpired = (draft: GalleryDraft): boolean => {
+    const thresholdDaysAgo = new Date().getTime() - DRAFT_TTL_DAYS * 86400 * 1000;
+    return (draft.updatedAt ?? 0) < thresholdDaysAgo;
+};
+
 /**
  * Note: The react-indexed-db-hook package that is used under the hood in this hook
  *       is not reactive. That means that if this hook is used in multiple components,
@@ -58,7 +78,7 @@ interface WalletDraftGalleriesState {
  */
 export const useWalletDraftGalleries = ({ address }: Properties): WalletDraftGalleriesState => {
     const database = useIndexedDB("gallery-drafts");
-    const [drafts, setDrafts] = useState<GalleryDraft[]>([]);
+    const [drafts, setDrafts] = useState<GallerySavedDraft[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isSaving, setIsSaving] = useState(false);
     const [hasReachedLimit, setHasReachedLimit] = useState(false);
@@ -86,6 +106,7 @@ export const useWalletDraftGalleries = ({ address }: Properties): WalletDraftGal
      */
     const add = async (draft: GalleryDraft): Promise<GallerySavedDraft> => {
         const allDraftsCount = await allDrafts();
+
         if (allDraftsCount.length >= MAX_DRAFT_LIMIT_PER_WALLET) {
             throw new Error("[useWalletDraftGalleries:upsert] Reached limit");
         }
@@ -97,6 +118,7 @@ export const useWalletDraftGalleries = ({ address }: Properties): WalletDraftGal
         const id = await database.add({
             ...draftToSave,
             updatedAt: new Date().getTime(),
+            collectionsCount: calculateCollectionsCount(draft),
         });
 
         setIsSaving(false);
@@ -120,6 +142,7 @@ export const useWalletDraftGalleries = ({ address }: Properties): WalletDraftGal
         await database.update({
             ...draft,
             updatedAt: new Date().getTime(),
+            collectionsCount: calculateCollectionsCount(draft),
         });
 
         setIsSaving(false);
@@ -197,17 +220,6 @@ export const useWalletDraftGalleries = ({ address }: Properties): WalletDraftGal
         return draft;
     };
 
-    /**
-     * Determine if gallery is expired.
-     *
-     * @param {GalleryDraft} draft
-     * @returns {boolean}
-     */
-    const isExpired = (draft: GalleryDraft): boolean => {
-        const thresholdDaysAgo = new Date().getTime() - DRAFT_TTL_DAYS * 86400 * 1000;
-        return (draft.updatedAt ?? 0) < thresholdDaysAgo;
-    };
-
     /**
      * Find draft or throw. Used internally for add/remove.
      *