feat: hidden collections toggle for create a gallery page

app/Http/Controllers/MyGalleryCollectionController.php

@@ -20,8 +20,11 @@ public function index(Request $request): JsonResponse
         /** @var User $user */
         $user = $request->user();
 
-        $collections = $user
-            ->collections()
+        $collectionsQuery = $request->get('showHidden') === 'true'
+            ? $user->hiddenCollections()
+            : $user->collections()->whereNotIn('collections.id', $user->hiddenCollections()->pluck('id')->toArray());
+
+        $collections = $collectionsQuery
             ->where('collections.name', 'ilike', sprintf('%%%s%%', $request->get('query')))
             ->withUserNftsCount($user)
             ->orderBy('id')

app/Http/Controllers/MyGalleryController.php

@@ -35,12 +35,17 @@ public function index(Request $request, GalleryRepository $galleries): Response
         /** @var PaginatedDataCollection<int, GalleryCardData> */
         $collection = GalleryCardData::collection($galleries);
 
+        $userCollectionsCount = $user->collections()->count();
+        $hiddenCollectionsCount = $user->hiddenCollections()->count();
+        $areAllCollectionsHidden = $userCollectionsCount > 0 && $hiddenCollectionsCount == $userCollectionsCount;
+
         return Inertia::render('Galleries/MyGalleries/Index', [
             'title' => $showDrafts ? trans('metatags.my_galleries.title_draft') : trans('metatags.my_galleries.title'),
             'galleries' => $showDrafts ? null : new GalleriesCardData($collection),
             'nftCount' => $user->nfts()->count(),
             'galleryCount' => $user->galleries()->count(),
             'showDrafts' => $showDrafts,
+            'areAllCollectionsHidden' => $areAllCollectionsHidden,
         ]);
     }
 

lang/en/pages.php

@@ -168,11 +168,13 @@
             'subtitle' => 'Manage your galleries',
             'new_gallery' => 'New Gallery',
             'no_galleries' => 'You have not created any galleries yet. To create a gallery, click on the "Create Gallery" button.',
+            'no_available_collections' => 'You have hidden all your collections. If you want to create a gallery, make sure you have at least 1 collection available.',
             'no_draft_galleries' => 'You have no draft galleries yet. To create a gallery, click on the "Create Gallery" button.',
             'succesfully_deleted' => 'Gallery successfully deleted',
             'successfully_created' => 'Gallery has been successfully created',
             'successfully_updated' => 'Gallery has been successfully updated',
             'new_gallery_no_nfts' => 'Creating a Gallery requires you to own an NFT.',
+            'new_gallery_all_collections_hidden' => 'Creating a Gallery requires you to have at least 1 collection available.',
             'delete_modal' => [
                 'title' => 'Delete Draft',
                 'text' => 'Are you sure you want to delete the draft? Everything you\'ve done will be deleted and you won\'t be able to get it back.',
@@ -181,6 +183,7 @@
         ],
         'copy_gallery_link' => 'Copy Gallery Link',
         'my_nfts' => 'My NFTs',
+        'show_hidden_collections' => 'Show hidden collections',
         'value' => 'Value',
         'floor_price' => 'Floor Price',
         'nfts' => 'NFTs',

resources/js/Components/Galleries/Hooks/useGalleryNftsContext.tsx

@@ -4,14 +4,14 @@ import { useGalleryNtfs } from "@/Components/Galleries/Hooks/useGalleryNtfs";
 export interface GalleryNftsState {
     nfts: App.Data.Gallery.GalleryNftData[];
     remainingCollectionCount: () => number;
-    loadMoreCollections: (query?: string) => void;
+    loadMoreCollections: (showHidden: boolean, query?: string) => void;
     loadingCollections: boolean;
     isSearchingCollections: boolean;
     allNftsLoaded: (nft: App.Data.Gallery.GalleryNftData) => boolean;
     loadMoreNfts: (nft: App.Data.Gallery.GalleryNftData) => void;
     loadingNfts: (nft: App.Data.Gallery.GalleryNftData) => boolean;
     getLoadingNftsCount: (nft: App.Data.Gallery.GalleryNftData) => number;
-    searchNfts: (query?: string) => Promise<void>;
+    searchNfts: (showHidden: boolean, query?: string) => Promise<void>;
 }
 
 interface GalleryNftsProperties {

resources/js/Components/Galleries/Hooks/useGalleryNtfs.tsx

@@ -140,15 +140,15 @@ export const useGalleryNtfs = ({ nftsPerPage, collectionsPerPage }: GalleryNftsP
             : pageMeta.total - collectionsLength;
     };
 
-    const loadMoreCollections = (query?: string): void => {
+    const loadMoreCollections = (showHidden: boolean, query?: string): void => {
         const nextPageUrl = pageMeta.next_page_url;
 
         if (!loadingCollections && nextPageUrl !== null) {
-            void fetchCollections(nextPageUrl, query);
+            void fetchCollections(nextPageUrl, showHidden, query);
         }
     };
 
-    const fetchCollections = async (nextPageUrl: string, query?: string): Promise<void> => {
+    const fetchCollections = async (nextPageUrl: string, showHidden: boolean, query?: string): Promise<void> => {
         cancelPreviousRequest();
 
         setLoadingCollections(true);
@@ -159,6 +159,10 @@ export const useGalleryNtfs = ({ nftsPerPage, collectionsPerPage }: GalleryNftsP
             url.searchParams.append("query", query);
         }
 
+        if (showHidden) {
+            url.searchParams.append("showHidden", showHidden.toString());
+        }
+
         await authenticatedAction(async () => {
             let data: CollectionsResponse;
 
@@ -197,9 +201,9 @@ export const useGalleryNtfs = ({ nftsPerPage, collectionsPerPage }: GalleryNftsP
         });
     };
 
-    const searchNfts = async (query?: string): Promise<void> => {
+    const searchNfts = async (showHidden: boolean, query?: string): Promise<void> => {
         setIsSearchingCollections(true);
-        await fetchCollections(pageMeta.first_page_url, query);
+        await fetchCollections(pageMeta.first_page_url, showHidden, query);
         setIsSearchingCollections(false);
     };
 

resources/js/Components/Galleries/Hooks/useGallerysNftsContext.test.tsx

@@ -1,7 +1,7 @@
 import { groupBy } from "@ardenthq/sdk-helpers";
 import { act, fireEvent, screen, waitFor } from "@testing-library/react";
 import axios from "axios";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { beforeEach, expect } from "vitest";
 import GalleryNftData = App.Data.Gallery.GalleryNftData;
 import { GalleryNfts, useGalleryNftsContext } from "@/Components/Galleries/Hooks/useGalleryNftsContext";
@@ -28,6 +28,8 @@ describe("useGalleryNftsContext", () => {
     const nfts = [...firstCollectionNfts, ...secondCollectionNfts].flat();
 
     const HookTestComponent = (): JSX.Element => {
+        const [showHidden, setShowHidden] = useState<boolean>(false);
+
         const {
             nfts,
             remainingCollectionCount,
@@ -46,9 +48,13 @@ describe("useGalleryNftsContext", () => {
         >;
 
         useEffect(() => {
-            void searchNfts();
+            void searchNfts(showHidden);
         }, []);
 
+        useEffect(() => {
+            void searchNfts(showHidden);
+        }, [showHidden]);
+
         const collections = Object.entries(collectionGroups);
 
         return (
@@ -97,13 +103,22 @@ describe("useGalleryNftsContext", () => {
                 {remainingCollectionCount() > 0 && (
                     <button
                         onClick={() => {
-                            loadMoreCollections();
+                            loadMoreCollections(showHidden);
                         }}
                         data-testid="TestGallery__loadCollections"
                     >
                         load {remainingCollectionCount()} more collections
                     </button>
                 )}
+
+                <button
+                    onClick={() => {
+                        setShowHidden(!showHidden);
+                    }}
+                    data-testid="TestGallery__toggleHidden"
+                >
+                    toggle hidden
+                </button>
             </div>
         );
     };
@@ -433,4 +448,26 @@ describe("useGalleryNftsContext", () => {
             expect(screen.queryAllByTestId(`NFT_Skeleton--${newNftSlug}`).length).toBe(0);
         });
     });
+
+    it("should append showHidden to the collections endpoint when toggled", async () => {
+        const axiosSpy = vi.spyOn(axios, "get");
+
+        const { container } = render(
+            <Component
+                collectionsPerPage={10}
+                nftsPerPage={10}
+            />,
+        );
+
+        await waitFor(() => {
+            expect(container.getElementsByClassName("TestGallery_Collection").length).toBe(2);
+        });
+
+        act(() => {
+            fireEvent.click(screen.getByTestId("TestGallery__toggleHidden"));
+        });
+
+        expect(axiosSpy).toHaveBeenCalled();
+        expect(axiosSpy).toHaveBeenCalledWith(`${BASE_URL}/my-galleries/collections`, expect.objectContaining({}));
+    });
 });

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

@@ -11,7 +11,7 @@ import { useDebounce } from "@/Hooks/useDebounce";
 
 const debounceTimeout = 400;
 
-export const NftCollectionSearch = (): JSX.Element => {
+export const NftCollectionSearch = ({ showHidden }: { showHidden: boolean }): JSX.Element => {
     const { t } = useTranslation();
     const { clearSelection } = useNftSelectableContext();
     const [searchQuery, setSearchQuery] = useState<string>("");
@@ -40,8 +40,8 @@ export const NftCollectionSearch = (): JSX.Element => {
     const remainingCollections = remainingCollectionCount();
 
     useEffect(() => {
-        void searchNfts(debouncedQuery);
-    }, [debouncedQuery]);
+        void searchNfts(showHidden, debouncedQuery);
+    }, [debouncedQuery, showHidden]);
 
     return (
         <>
@@ -79,7 +79,7 @@ export const NftCollectionSearch = (): JSX.Element => {
                                 variant="secondary"
                                 className="inline-flex w-full flex-1 justify-center sm:flex-none"
                                 onClick={() => {
-                                    loadMoreCollections(debouncedQuery);
+                                    loadMoreCollections(showHidden, debouncedQuery);
                                 }}
                             >
                                 {t("pages.galleries.create.load_more_collections", {

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

@@ -1,12 +1,15 @@
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { NftCollectionSearch } from "./NftCollectionSearch";
+import { NftHiddenCollectionsToggle } from "./NftHiddenCollectionsToggle";
 import { Button } from "@/Components/Buttons";
 import { useEditableGalleryContext } from "@/Components/Galleries/Hooks/useEditableGalleryContext";
 import { useNftSelectableContext } from "@/Components/Galleries/Hooks/useNftSelectableContext";
 import { Slider, useSliderContext } from "@/Components/Slider";
 import { useMetaMaskContext } from "@/Contexts/MetaMaskContext";
 
 export const NftCollectionSlider = (): JSX.Element => {
+    const [showHidden, setShowHidden] = useState<boolean>(false);
     const { t } = useTranslation();
     const { isOpen, setOpen } = useSliderContext();
     const { nfts } = useEditableGalleryContext();
@@ -23,10 +26,22 @@ export const NftCollectionSlider = (): JSX.Element => {
             }}
         >
             <Slider.Header>
-                <span className="text-lg font-medium leading-8">{t("pages.galleries.my_nfts")}</span>
+                <div className="flex w-full items-center justify-between">
+                    <span className="text-lg font-medium leading-8">{t("pages.galleries.my_nfts")}</span>
+                    <NftHiddenCollectionsToggle
+                        setShowHidden={setShowHidden}
+                        showHidden={showHidden}
+                        className="hidden md:flex"
+                    />
+                </div>
             </Slider.Header>
             <Slider.Content className="relative pb-28">
-                <NftCollectionSearch />
+                <NftHiddenCollectionsToggle
+                    setShowHidden={setShowHidden}
+                    showHidden={showHidden}
+                    className="mb-4 flex w-full items-center justify-between border-b border-theme-secondary-300 pb-4 dark:border-theme-dark-700 md:hidden"
+                />
+                <NftCollectionSearch showHidden={showHidden} />
 
                 <div className="fixed inset-x-0 bottom-0 flex w-full items-center justify-end space-x-3 border-t border-theme-secondary-300 bg-white px-8 py-4 dark:border-theme-dark-700 dark:bg-theme-dark-900">
                     <Button

resources/js/Components/Galleries/NftCollection/NftHiddenCollectionsToggle.test.tsx

@@ -0,0 +1,66 @@
+import { NftHiddenCollectionsToggle } from "./NftHiddenCollectionsToggle";
+import { render, screen } from "@/Tests/testing-library";
+
+describe("NftHiddenCollectionsToggle", () => {
+    it("should render", () => {
+        render(
+            <NftHiddenCollectionsToggle
+                showHidden={true}
+                setShowHidden={vi.fn()}
+            />,
+        );
+
+        expect(screen.getByTestId("NftHiddenCollectionsToggle")).toBeInTheDocument();
+    });
+
+    it("should display the toggle as checked if showHidden is true", () => {
+        const { asFragment } = render(
+            <NftHiddenCollectionsToggle
+                showHidden={true}
+                setShowHidden={vi.fn()}
+            />,
+        );
+
+        expect(screen.getByTestId("Toggle")).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should display the toggle as unchecked if showHidden is false", () => {
+        const { asFragment } = render(
+            <NftHiddenCollectionsToggle
+                showHidden={false}
+                setShowHidden={vi.fn()}
+            />,
+        );
+
+        expect(screen.getByTestId("Toggle")).toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should call setShowHidden when the toggle is clicked", () => {
+        const setShowHidden = vi.fn();
+
+        render(
+            <NftHiddenCollectionsToggle
+                showHidden={false}
+                setShowHidden={setShowHidden}
+            />,
+        );
+
+        screen.getByTestId("Toggle").click();
+
+        expect(setShowHidden).toHaveBeenCalled();
+    });
+
+    it("should render a custom class name", () => {
+        render(
+            <NftHiddenCollectionsToggle
+                showHidden={false}
+                setShowHidden={vi.fn()}
+                className="custom-class"
+            />,
+        );
+
+        expect(screen.getByTestId("NftHiddenCollectionsToggle")).toHaveClass("custom-class");
+    });
+});

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

@@ -0,0 +1,34 @@
+import cn from "classnames";
+import React, { type Dispatch, type SetStateAction } from "react";
+import { useTranslation } from "react-i18next";
+import { Toggle } from "@/Components/Form/Toggle";
+
+export const NftHiddenCollectionsToggle = ({
+    showHidden,
+    setShowHidden,
+    className,
+}: {
+    showHidden: boolean;
+    setShowHidden: Dispatch<SetStateAction<boolean>>;
+    className?: string;
+}): JSX.Element => {
+    const { t } = useTranslation();
+
+    return (
+        <div
+            className={cn("flex items-center gap-3", className)}
+            data-testid="NftHiddenCollectionsToggle"
+        >
+            <span className="text-base font-medium text-theme-secondary-700 dark:text-theme-dark-200">
+                {t("pages.galleries.show_hidden_collections")}
+            </span>
+
+            <Toggle
+                checked={showHidden}
+                onChange={() => {
+                    setShowHidden(!showHidden);
+                }}
+            />
+        </div>
+    );
+};