feat: persist gallery draft

lang/en/pages.php

@@ -201,6 +201,8 @@
             'can_purchase' => 'You can purchase NFTs with these top NFT Marketplaces:',
             'must_own_one_nft' => 'You must own at least one (1) NFT in order to create a gallery.',
             'back_to_galleries' => 'Back to Galleries',
+            'draft_saved' => 'Draft Saved',
+            'saving_to_draft' => 'Saving to draft',
         ],
         'delete_modal' => [
             'title' => 'Delete Gallery',

resources/js/Components/Galleries/GalleryPage/GalleryActionToolbar/GalleryActionToolbar.test.tsx

@@ -29,6 +29,31 @@ describe("GalleryActionToolbar", () => {
         expect(screen.getByTestId("GalleryActionToolbar__publish")).toBeDisabled();
     });
 
+    it("should show saving to draft icon", () => {
+        render(
+            <GalleryActionToolbar
+                galleryCoverUrl="/test"
+                isProcessing
+                isSavingDraft={true}
+            />,
+        );
+
+        expect(screen.getByTestId("Icon_SavingDraft")).toBeInTheDocument();
+    });
+
+    it("should show draft saved icon", () => {
+        render(
+            <GalleryActionToolbar
+                galleryCoverUrl="/test"
+                isProcessing
+                draftId={1}
+                isSavingDraft={false}
+            />,
+        );
+
+        expect(screen.getByTestId("Icon_DraftSaved")).toBeInTheDocument();
+    });
+
     it.each(allBreakpoints)("should render without delete button in %s screen", (breakpoint) => {
         render(<GalleryActionToolbar showDelete={false} />, { breakpoint });
 

resources/js/Components/Galleries/GalleryPage/GalleryActionToolbar/GalleryActionToolbar.tsx

@@ -1,6 +1,8 @@
 import { type FormEvent, type MouseEvent, useLayoutEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, IconButton } from "@/Components/Buttons";
+import { GalleryDraftStatus } from "@/Components/Galleries/GalleryPage/GalleryActionToolbar/GalleryDraftStatus";
+import { Icon } from "@/Components/Icon";
 import { Img } from "@/Components/Image";
 import { isTruthy } from "@/Utils/is-truthy";
 
@@ -13,6 +15,8 @@ export const GalleryActionToolbar = ({
     onCancel,
     isProcessing = false,
     showDelete = true,
+    draftId,
+    isSavingDraft,
 }: {
     onCoverClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     onTemplateClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -22,6 +26,8 @@ export const GalleryActionToolbar = ({
     galleryCoverUrl?: string;
     isProcessing?: boolean;
     showDelete?: boolean;
+    draftId?: number;
+    isSavingDraft?: boolean;
 }): JSX.Element => {
     const { t } = useTranslation();
     const [scrollbarWidth, setScrollbarWidth] = useState(0);
@@ -85,17 +91,48 @@ export const GalleryActionToolbar = ({
                                     )}
                                 </div>
 
+                                <div className="xs:hidden">
+                                    <div className="flex items-center">
+                                        {isTruthy(draftId) && isSavingDraft === false && (
+                                            <Icon
+                                                size="lg"
+                                                name="FatDoubleCheck"
+                                                data-testid="Icon_DraftSaved"
+                                                className="text-theme-secondary-700"
+                                            />
+                                        )}
+
+                                        {isSavingDraft === true && (
+                                            <Icon
+                                                size="lg"
+                                                name="Refresh"
+                                                data-testid="Icon_SavingDraft"
+                                                className="text-theme-secondary-700 dark:text-theme-dark-200"
+                                            />
+                                        )}
+                                    </div>
+                                </div>
+
                                 <div className="flex space-x-3 sm:hidden">
-                                    <IconButton
-                                        icon="DoorExit"
-                                        className="rotate-180"
-                                        onClick={onCancel}
-                                    />
-                                    <IconButton
-                                        icon="CheckSmall"
-                                        variant="primary"
-                                        onClick={onPublish}
-                                    />
+                                    <div className="hidden xs:flex">
+                                        <GalleryDraftStatus
+                                            isSavingDraft={isSavingDraft}
+                                            draftId={draftId}
+                                        />
+                                    </div>
+
+                                    <div className="flex space-x-3 sm:hidden">
+                                        <IconButton
+                                            icon="DoorExit"
+                                            className="rotate-180"
+                                            onClick={onCancel}
+                                        />
+                                        <IconButton
+                                            icon="CheckSmall"
+                                            variant="primary"
+                                            onClick={onPublish}
+                                        />
+                                    </div>
                                 </div>
 
                                 <div className="hidden w-auto flex-nowrap space-x-3 lg:flex">
@@ -158,6 +195,11 @@ export const GalleryActionToolbar = ({
                                 </div>
 
                                 <div className="hidden space-x-3 sm:flex">
+                                    <GalleryDraftStatus
+                                        isSavingDraft={isSavingDraft}
+                                        draftId={draftId}
+                                    />
+
                                     {showDelete && (
                                         <IconButton
                                             data-testid="GalleryActionToolbar__delete"

resources/js/Components/Galleries/GalleryPage/GalleryActionToolbar/GalleryDraftStatus.test.tsx

@@ -0,0 +1,34 @@
+import { expect } from "vitest";
+import { GalleryDraftStatus } from "@/Components/Galleries/GalleryPage/GalleryActionToolbar/GalleryDraftStatus";
+import { render, screen } from "@/Tests/testing-library";
+
+describe("GalleryDraftStatus", () => {
+    it("should show draft saved status", () => {
+        render(
+            <GalleryDraftStatus
+                draftId={1}
+                isSavingDraft={false}
+            />,
+        );
+
+        expect(screen.getByText(/Draft Saved/)).toBeInTheDocument();
+    });
+
+    it("should show saving status", () => {
+        render(
+            <GalleryDraftStatus
+                draftId={1}
+                isSavingDraft={true}
+            />,
+        );
+
+        expect(screen.getByText(/Saving to draft/)).toBeInTheDocument();
+    });
+
+    it("should not render any status message", () => {
+        render(<GalleryDraftStatus />);
+
+        expect(screen.queryByText(/Saving to draft/)).not.toBeInTheDocument();
+        expect(screen.queryByText(/Draft Saved/)).not.toBeInTheDocument();
+    });
+});

resources/js/Components/Galleries/GalleryPage/GalleryActionToolbar/GalleryDraftStatus.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import { Icon } from "@/Components/Icon";
+import { isTruthy } from "@/Utils/is-truthy";
+
+export const GalleryDraftStatus = ({
+    draftId,
+    isSavingDraft,
+}: {
+    draftId?: number;
+    isSavingDraft?: boolean;
+}): JSX.Element => {
+    const { t } = useTranslation();
+
+    if (isTruthy(draftId) && isSavingDraft === false) {
+        return (
+            <div className="flex items-center">
+                <Icon
+                    size="lg"
+                    name="FatDoubleCheck"
+                    className="text-theme-secondary-700"
+                />
+                <div className="ml-2 hidden text-sm font-medium leading-5.5 text-theme-secondary-700 xs:block">
+                    {t("pages.galleries.create.draft_saved")}
+                </div>
+            </div>
+        );
+    }
+
+    if (isSavingDraft === true) {
+        return (
+            <div className="flex items-center">
+                <Icon
+                    size="lg"
+                    name="Refresh"
+                    className="text-theme-secondary-700 dark:text-theme-dark-200"
+                />
+                <div className="ml-2 hidden text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200 xs:block">
+                    {t("pages.galleries.create.saving_to_draft")}
+                </div>
+            </div>
+        );
+    }
+
+    return <></>;
+};

resources/js/Pages/Galleries/Components/GalleryNameInput/GalleryNameInput.tsx

@@ -8,12 +8,14 @@ import { isTruthy } from "@/Utils/is-truthy";
 export const GalleryNameInput = ({
     name,
     onChange,
+    onBlur,
     error,
     maxLength = 50,
 }: {
     maxLength?: number;
     name: string;
     onChange?: (name: string) => void;
+    onBlur?: () => void;
     error?: string;
 }): JSX.Element => {
     const { t } = useTranslation();
@@ -48,6 +50,9 @@ export const GalleryNameInput = ({
                         type="text"
                         maxLength={maxLength + 1}
                         value={name}
+                        onBlur={() => {
+                            onBlur?.();
+                        }}
                         onChange={(event) => {
                             onChange?.(event.target.value);
                         }}

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

@@ -1,7 +1,7 @@
 import { type PageProps, type VisitOptions } from "@inertiajs/core";
 import { Head, router, usePage } from "@inertiajs/react";
 import uniqBy from "lodash/uniqBy";
-import { type FormEvent, type MouseEvent, useCallback, useMemo, useState } from "react";
+import { type FormEvent, type MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ConfirmDeletionDialog } from "@/Components/ConfirmDeletionDialog";
 import { FeaturedCollectionsBanner } from "@/Components/FeaturedCollectionsBanner";
@@ -17,9 +17,12 @@ import { NoNftsOverlay } from "@/Components/Layout/NoNftsOverlay";
 import { useMetaMaskContext } from "@/Contexts/MetaMaskContext";
 import { useAuthorizedAction } from "@/Hooks/useAuthorizedAction";
 import { GalleryNameInput } from "@/Pages/Galleries/Components/GalleryNameInput";
+import { useGalleryDrafts } from "@/Pages/Galleries/hooks/useGalleryDrafts";
 import { useGalleryForm } from "@/Pages/Galleries/hooks/useGalleryForm";
 import { assertUser, assertWallet } from "@/Utils/assertions";
+import { getQueryParameters } from "@/Utils/get-query-parameters";
 import { isTruthy } from "@/Utils/is-truthy";
+import { replaceUrlQuery } from "@/Utils/replace-url-query";
 
 interface Properties {
     auth: PageProps["auth"];
@@ -57,8 +60,22 @@ const Create = ({
     const [showDeleteModal, setShowDeleteModal] = useState(false);
     const [busy, setBusy] = useState(false);
 
+    const { draftId } = getQueryParameters();
+
+    const { setDraftCover, setDraftNfts, setDraftTitle, draft, isSaving } = useGalleryDrafts(
+        isTruthy(draftId) ? Number(draftId) : undefined,
+        isTruthy(gallery?.slug),
+    );
+
+    useEffect(() => {
+        if (draft.id !== null) {
+            replaceUrlQuery({ draftId: draft.id.toString() });
+        }
+    }, [draft.id]);
+
     const { selectedNfts, data, setData, errors, submit, updateSelectedNfts, processing } = useGalleryForm({
         gallery,
+        setDraftNfts,
     });
 
     const totalValue = 0;
@@ -119,6 +136,9 @@ const Create = ({
                     onChange={(name) => {
                         setData("name", name);
                     }}
+                    onBlur={() => {
+                        setDraftTitle(data.name);
+                    }}
                 />
 
                 <EditableGalleryHook
@@ -168,6 +188,8 @@ const Create = ({
                 showDelete={isTruthy(gallery)}
                 isProcessing={processing}
                 galleryCoverUrl={galleryCoverImageUrl}
+                isSavingDraft={isSaving}
+                draftId={draft.id ?? undefined}
                 onCoverClick={({ currentTarget }: MouseEvent<HTMLButtonElement>) => {
                     currentTarget.blur();
                     setGallerySliderActiveTab(GalleryFormSliderTabs.Cover);
@@ -198,8 +220,13 @@ const Create = ({
                     setGalleryCoverImageUrl(imageDataURI);
                     if (blob === undefined) {
                         setData("coverImage", null);
+                        setDraftCover(null, null);
                     } else {
                         setData("coverImage", new File([blob], blob.name, { type: blob.type }));
+                        // eslint-disable-next-line promise/prefer-await-to-then
+                        void blob.arrayBuffer().then((buf) => {
+                            setDraftCover(buf, blob.type);
+                        });
                     }
                     setIsGalleryFormSliderOpen(false);
                 }}

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

@@ -98,7 +98,7 @@ describe("useGalleryDrafts", () => {
         });
     });
 
-    it("should try to create a new row if draft hasn't been created yet", async () => {
+    it("should try to create a new record if draft hasn't been created yet", async () => {
         mocks.useIndexedDB().add.mockResolvedValue(2);
 
         const { result } = renderHook(() => useGalleryDrafts());
@@ -112,6 +112,20 @@ describe("useGalleryDrafts", () => {
         });
     });
 
+    it("should not create a new draft if disabled", async () => {
+        mocks.useIndexedDB().add.mockResolvedValue(2);
+
+        const { result } = renderHook(() => useGalleryDrafts(undefined, true));
+
+        act(() => {
+            result.current.setDraftTitle("hello");
+        });
+
+        await waitFor(() => {
+            expect(result.current.draft.id).toBe(null);
+        });
+    });
+
     it("should try to update the row if draft is present", async () => {
         const givenDraftId = 2;
         const updateMock = vi.fn();
@@ -188,6 +202,7 @@ describe("useGalleryDrafts", () => {
         await waitFor(() => {
             expect(addMock).not.toHaveBeenCalled();
             expect(result.current.reachedLimit).toBe(true);
+            expect(result.current.isSaving).toBe(false);
         });
     });