feat: implement gallery drafts hook

package.json

@@ -137,6 +137,7 @@
         "react-chartjs-2": "^5.2.0",
         "react-i18next": "^12.3.1",
         "react-in-viewport": "1.0.0-alpha.30",
+        "react-indexed-db-hook": "^1.0.14",
         "react-loading-skeleton": "^3.3.1",
         "react-popper": "^2.3.0",
         "react-resize-detector": "^8.1.0",

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

@@ -0,0 +1,142 @@
+import { useEffect, useState } from "react";
+import { useIndexedDB } from "react-indexed-db-hook";
+import { useAuth } from "@/Contexts/AuthContext";
+import { useDebounce } from "@/Hooks/useDebounce";
+import { useIsFirstRender } from "@/Hooks/useIsFirstRender";
+
+interface DraftNft {
+    nftId: number;
+    image: string;
+    collectionSlug: string;
+}
+
+interface GalleryDraft {
+    title: string;
+    cover: ArrayBuffer | null;
+    coverType: string | null;
+    nfts: DraftNft[];
+    walletAddress?: string;
+    id: number | null;
+}
+
+const initialGalleryDraft: GalleryDraft = {
+    title: "",
+    cover: null,
+    coverType: null,
+    nfts: [],
+    id: null,
+};
+
+const MAX_DRAFT_LIMIT_PER_WALLET = 6;
+
+interface GalleryDraftsState {
+    reachedLimit: boolean;
+    draft: GalleryDraft;
+    setDraftCover: (image: ArrayBuffer | null, type: string | null) => void;
+    setDraftNfts: (nfts: App.Data.Gallery.GalleryNftData[]) => void;
+    setDraftTitle: (title: string) => void;
+}
+
+export const useGalleryDrafts = (givenDraftId?: number): GalleryDraftsState => {
+    const { wallet } = useAuth();
+
+    const database = useIndexedDB("gallery-drafts");
+
+    const [draft, setDraft] = useState<GalleryDraft>({
+        ...initialGalleryDraft,
+        walletAddress: wallet?.address,
+    });
+
+    const [save, setSave] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+
+    const [title, setTitle] = useState<string>("");
+    const [debouncedValue] = useDebounce(title, 400);
+
+    const isFirstRender = useIsFirstRender();
+
+    const [reachedLimit, setReachedLimit] = useState(false);
+
+    // populate `draft` state if `givenDraftId` is present
+    useEffect(() => {
+        if (givenDraftId === undefined) return;
+        const getDraft = async (): Promise<void> => {
+            const draft: GalleryDraft = await database.getByID(givenDraftId);
+
+            if (draft.walletAddress === wallet?.address) {
+                setDraft(draft);
+            }
+        };
+
+        void getDraft();
+    }, []);
+
+    // handle debounced title
+    useEffect(() => {
+        if (isFirstRender) return;
+
+        setDraft({ ...draft, title: debouncedValue });
+        setSave(true);
+    }, [debouncedValue]);
+
+    useEffect(() => {
+        if (!save || isSaving || reachedLimit) return;
+
+        void saveDraft();
+    }, [save]);
+
+    const saveDraft = async (): Promise<void> => {
+        setIsSaving(true);
+
+        if (draft.id === null) {
+            const walletDrafts = await getWalletDrafts();
+
+            if (walletDrafts.length >= MAX_DRAFT_LIMIT_PER_WALLET) {
+                setReachedLimit(true);
+                return;
+            }
+
+            const draftToCreate: Partial<GalleryDraft> = { ...draft };
+            delete draftToCreate.id;
+
+            const id = await database.add(draftToCreate);
+            setDraft({ ...draft, id });
+        } else {
+            await database.update(draft);
+        }
+
+        setSave(false);
+        setIsSaving(false);
+    };
+
+    const getWalletDrafts = async (): Promise<GalleryDraft[]> => {
+        const allDrafts: GalleryDraft[] = await database.getAll();
+
+        return allDrafts.filter((draft) => draft.walletAddress === wallet?.address);
+    };
+
+    const setDraftCover = (image: ArrayBuffer | null, type: string | null): void => {
+        setDraft({ ...draft, cover: image, coverType: type });
+        setSave(true);
+    };
+
+    const setDraftNfts = (nfts: App.Data.Gallery.GalleryNftData[]): void => {
+        setDraft({
+            ...draft,
+            nfts: nfts.map((nft) => ({
+                nftId: nft.id,
+                image: nft.images.large ?? "",
+                collectionSlug: nft.collectionSlug,
+            })),
+        });
+        setSave(true);
+    };
+
+    return {
+        reachedLimit,
+        draft,
+        setDraftCover,
+        setDraftNfts,
+        setDraftTitle: setTitle,
+    };
+};

resources/js/app.tsx

@@ -21,12 +21,14 @@ import {
 import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
 import { createRoot } from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
+import { initDB } from "react-indexed-db-hook";
 import { AuthContextProvider } from "./Contexts/AuthContext";
 import DarkModeContextProvider from "./Contexts/DarkModeContex";
 import EnvironmentContextProvider from "./Contexts/EnvironmentContext";
 import { CookieConsent } from "./cookieConsent";
 import MetaMaskContextProvider from "@/Contexts/MetaMaskContext";
 import { TransactionSliderProvider } from "@/Contexts/TransactionSliderContext";
+import { databaseConfig } from "@/databaseConfig";
 import { i18n } from "@/I18n";
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
@@ -55,6 +57,8 @@ const appName = window.document.querySelector("title")?.innerText ?? "Dashbrd";
 
 const queryClient = new QueryClient();
 
+initDB(databaseConfig);
+
 void createInertiaApp({
     title: (title) => (title !== "" ? title : appName),
 

resources/js/databaseConfig.ts

@@ -0,0 +1,17 @@
+export const databaseConfig = {
+    name: "dashbrd",
+    version: 1,
+    objectStoresMeta: [
+        {
+            store: "gallery-drafts",
+            storeConfig: { keyPath: "id", autoIncrement: true },
+            storeSchema: [
+                { name: "walletAddress", keypath: "walletAddress", options: { unique: false } },
+                { name: "title", keypath: "title", options: { unique: false } },
+                { name: "cover", keypath: "cover", options: { unique: false } },
+                { name: "coverType", keypath: "coverType", options: { unique: false } },
+                { name: "nfts", keypath: "nfts", options: { unique: false } },
+            ],
+        },
+    ],
+};