refactor: prevent the user from selecting more than 16 nfts (#373)

lang/en/pages.php

@@ -203,6 +203,7 @@
             'title_too_long' => 'Gallery name must not exceed :max characters.',
             'already_selected_nft' => 'NFT already exists in this gallery',
             'nft_missing_image' => 'Only NFTs with images can be added to galleries',
+            'nft_gallery_limit' => 'You can only add 16 NFTs per gallery',
             'gallery_cover' => 'Gallery Cover',
             'gallery_cover_description' => 'The cover is used for the card on the gallery list page. While the cover is not a requirement it will allow you to add personality and stand out from the crowd.',
             'gallery_cover_information' => 'Image dimensions must be at least 287px x 190px, with a max size of 2 MB (JPG, PNG or GIF)',

resources/js/Components/Galleries/NftCollection/NftCollections.tsx

@@ -80,7 +80,7 @@ export const NftCollections = ({
     getLoadingNftsCount,
 }: NftCollectionsProperties): JSX.Element => {
     const { selected, addToSelection, removeFromSelection } = useNftSelectableContext();
-    const { nfts: addedNfts } = useEditableGalleryContext();
+    const { nfts: addedNfts, nftLimit } = useEditableGalleryContext();
 
     const items = Object.entries(
         groupBy(nfts, (nft: App.Data.Gallery.GalleryNftData) => `${nft.chainId}-${nft.tokenAddress}`),
@@ -111,6 +111,8 @@ export const NftCollections = ({
                                 onDeselectNft={removeFromSelection}
                                 onSelectNft={addToSelection}
                                 validateImage={true}
+                                storedNfts={addedNfts.selected}
+                                nftLimit={nftLimit}
                             />
 
                             {!allNftsLoaded(nfts[0]) && (

resources/js/Components/Galleries/NftGalleryCard.blocks.test.tsx

@@ -286,6 +286,52 @@ describe("NftImageGrid", () => {
         expect(screen.getByTestId(`NftImageGrid__container--1--invalid_image`)).toBeInTheDocument();
         expect(screen.getByTestId(`NftImageGrid__container--4--invalid_image`)).toBeInTheDocument();
     });
+
+    it("should show a limit reached message if the limit is reached", () => {
+        const nftList = [
+            ...nfts,
+            {
+                id: 5,
+                name: "nft_5",
+                images: { thumb: "nft_image_5", small: "nft_image_5", large: "nft_image_5" },
+                tokenNumber: "5",
+                ownedByCurrentUser: true,
+                ...collectionInfo,
+            },
+        ];
+
+        render(
+            <NftImageGrid
+                nfts={{
+                    paginated: {
+                        data: nftList,
+                        ...paginationData,
+                    },
+                }}
+                storedNfts={nfts}
+                nftLimit={1}
+            />,
+        );
+
+        expect(screen.getByTestId(`NftImageGrid__container--5--limit_reached`)).toBeInTheDocument();
+        expect(screen.getByTestId(`NftImageGrid__image--5`)).toHaveClass("blur-sm");
+    });
+
+    it("should not show a limit reached message if the limit is not reached", () => {
+        render(
+            <NftImageGrid
+                nfts={{
+                    paginated: {
+                        data: nfts,
+                        ...paginationData,
+                    },
+                }}
+                nftLimit={1}
+            />,
+        );
+
+        expect(screen.queryByTestId("NftImageGrid__container--5--limit_reached")).not.toBeInTheDocument();
+    });
 });
 
 describe("GalleryHeading", () => {

resources/js/Components/Galleries/NftGalleryCard.blocks.tsx

@@ -30,6 +30,9 @@ interface NftImageContainerProperties {
     isSelected?: boolean;
     isAdded?: boolean;
     validateImage?: boolean;
+    combinedNfts?: App.Data.Gallery.GalleryNftData[];
+    nftLimit?: number;
+    reachedLimit: boolean;
 }
 
 interface NftImageGridProperties {
@@ -43,6 +46,8 @@ interface NftImageGridProperties {
     selectedNfts?: App.Data.Gallery.GalleryNftData[];
     addedNfts?: App.Data.Gallery.GalleryNftData[];
     validateImage?: boolean;
+    storedNfts?: App.Data.Gallery.GalleryNftData[];
+    nftLimit?: number;
 }
 
 const NftImage = ({
@@ -94,6 +99,7 @@ const NftImageContainer = ({
     isSelected,
     isAdded,
     validateImage,
+    reachedLimit,
 }: NftImageContainerProperties): JSX.Element => {
     const { t } = useTranslation();
 
@@ -130,6 +136,25 @@ const NftImageContainer = ({
         );
     }
 
+    if (isTruthy(reachedLimit) && !isTruthy(isSelected)) {
+        return (
+            <div
+                data-testid={`NftImageGrid__container--${nft.tokenNumber}--limit_reached`}
+                className="relative overflow-hidden rounded-xl"
+            >
+                <Tooltip content={t("pages.galleries.create.nft_gallery_limit")}>
+                    <div>
+                        <NftImage
+                            nft={nft}
+                            allowSelection={false}
+                            className="blur-sm grayscale"
+                        />
+                    </div>
+                </Tooltip>
+            </div>
+        );
+    }
+
     return (
         <div
             data-testid={`NftImageGrid__container--${nft.tokenNumber}`}
@@ -158,8 +183,11 @@ export const NftImageGrid = ({
     onSelectNft,
     onDeselectNft,
     validateImage,
+    storedNfts = [],
+    nftLimit,
 }: NftImageGridProperties): JSX.Element => {
     const nftData = "paginated" in nfts ? nfts.paginated.data : nfts;
+    const combinedNfts = [...storedNfts, ...(isTruthy(selectedNfts) ? selectedNfts : [])];
 
     return (
         <div
@@ -169,6 +197,7 @@ export const NftImageGrid = ({
             {nftData.map((nft, index) => {
                 const isSelected = selectedNfts?.some((selectedNft) => selectedNft.tokenNumber === nft.tokenNumber);
                 const isAdded = addedNfts?.some((addedNft) => addedNft.tokenNumber === nft.tokenNumber);
+                const reachedLimit = isTruthy(nftLimit) && combinedNfts.length >= nftLimit && !isTruthy(isSelected);
 
                 return (
                     <NftImageContainer
@@ -184,6 +213,7 @@ export const NftImageGrid = ({
                         }}
                         isSelected={isSelected}
                         isAdded={isAdded}
+                        reachedLimit={reachedLimit}
                         validateImage={validateImage}
                     />
                 );