@yogiswara/honcho-editor-ui 2.5.9 → 2.5.10

package/dist/hooks/editor/useHonchoEditorBulk.d.ts

@@ -30,6 +30,8 @@ export declare function useHonchoEditorBulk(controller: Controller, eventID: str
     handleBackCallbackBulk: () => void;
     selectedBulkPreset: string;
     handleToggleImageSelection: (imageId: string) => void;
+    handleLoadMore: () => Promise<void>;
+    handleRefresh: () => Promise<void>;
     handleSelectBulkPreset: (event: SelectChangeEvent<string>) => void;
     handleBulkTempDecreaseMax: () => void;
     handleBulkTempDecrease: () => void;

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -1,6 +1,7 @@
 'use client';
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAdjustmentHistoryBatch } from '../useAdjustmentHistoryBatch';
+import { usePaging } from "../usePaging";
 // Helper function to map the API response to the format our UI component needs
 const mapGalleryToPhotoData = (gallery, selectedIds) => {
     return {
@@ -40,24 +41,36 @@ function mapColorAdjustmentToAdjustmentState(adj) {
 }
 export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
     const { currentBatch, selectedIds, actions: batchActions } = useAdjustmentHistoryBatch();
-    // State for Bulk Editing
-    const [imageCollection, setImageCollection] = useState([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [page, setPage] = useState(1);
-    const [isFetchingMore, setIsFetchingMore] = useState(false);
-    const [hasMore, setHasMore] = useState(true);
+    const { images, info, actions } = usePaging(controller, firebaseUid, eventID);
+    // Track which images have been synced to prevent loops
+    const lastSyncedImageIds = useRef(new Set());
+    // State for Bulk Editing  
     const [selectedBulkPreset, setSelectedBulkPreset] = useState('preset1');
+    // Use loading states from usePaging instead of local state
+    const isLoading = info.isLoading;
+    const error = info.error;
+    const hasMore = info.hasMore;
     const imageData = useMemo(() => {
-        return imageCollection.map(item => {
-            console.log("item FROM USEHONCHOBULK: ", item);
-            return mapGalleryToPhotoData(item, selectedIds);
-        }).map(item => {
-            const adjustment = currentBatch.allImages[item.key];
-            console.log("adjustment FROM USEHONCHOBULK: ", adjustment);
-            return adjustment ? { ...item, ...adjustment } : item;
+        return images.map(item => {
+            const basePhoto = mapGalleryToPhotoData(item, selectedIds);
+            const batchAdjustment = currentBatch.allImages[item.id];
+            // Merge batch adjustments over backend adjustments
+            return batchAdjustment ? { ...basePhoto, ...batchAdjustment } : basePhoto;
         });
-    }, [imageCollection, selectedIds, currentBatch.allImages]);
+    }, [images, selectedIds, currentBatch.allImages]);
+    // Safe sync: Only sync new images to prevent infinite loops
+    useEffect(() => {
+        if (images.length === 0)
+            return;
+        // Check if we have new images that haven't been synced
+        const currentImageIds = new Set(images.map(img => img.id));
+        const hasNewImages = images.some(img => !lastSyncedImageIds.current.has(img.id));
+        if (hasNewImages) {
+            console.log('[useHonchoEditorBulk] Syncing new images to batch:', images.length);
+            batchActions.syncAdjustment(images.map(mapToImageAdjustmentConfig));
+            lastSyncedImageIds.current = currentImageIds;
+        }
+    }, [images, batchActions]);
     const handleBackCallbackBulk = useCallback(() => {
         const lastSelectedId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : "";
         controller.handleBack(firebaseUid, lastSelectedId);
@@ -148,26 +161,8 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
     //         loadImages(page + 1);
     //     }
     // }, [isFetchingMore, hasMore, page, loadImages]);
-    useEffect(() => {
-        if (eventID && firebaseUid) {
-            setIsLoading(true);
-            setError(null);
-            controller.getImageList(firebaseUid, eventID, 2)
-                .then(response => {
-                // TODO need do pagination for this one
-                batchActions.syncAdjustment(response.gallery.map(mapToImageAdjustmentConfig));
-                setImageCollection(response.gallery);
-            })
-                .catch(err => {
-                console.error("Failed to fetch image list:", err);
-                setError("Could not load images.");
-            })
-                .finally(() => {
-                setIsLoading(false);
-            });
-            console.log("Image data FROM USEHONCHOBULK: ", imageData);
-        }
-    }, [eventID, firebaseUid, controller]);
+    // Note: Image loading is now handled by usePaging hook
+    // The sync logic above handles syncing loaded images to batch state
     // useEffect(() => {
     //     if (eventID && firebaseUid) {
     //         setImageCollection([]); // reset when event changes
@@ -186,6 +181,8 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
         handleBackCallbackBulk,
         selectedBulkPreset,
         handleToggleImageSelection: batchActions.toggleSelection,
+        handleLoadMore: actions.loadMore,
+        handleRefresh: actions.refresh,
         handleSelectBulkPreset,
         // Adjustment
         handleBulkTempDecreaseMax,

package/dist/hooks/usePaging.d.ts

@@ -0,0 +1,89 @@
+import { Gallery } from './editor/type';
+import { Controller } from "./editor/useHonchoEditor";
+/**
+ * Configuration options for the paging hook
+ */
+export interface PagingOptions {
+    /** Enable development warnings for debugging */
+    devWarnings?: boolean;
+    /** Auto-load first page on hook initialization */
+    autoLoad?: boolean;
+    /** Reset pagination when dependencies change */
+    autoReset?: boolean;
+}
+/**
+ * Information about the current paging state
+ */
+export interface PagingInfo {
+    /** Whether images are currently being loaded */
+    isLoading: boolean;
+    /** Whether more pages are being loaded */
+    isLoadingMore: boolean;
+    /** Error message if any operation failed */
+    error: string | null;
+    /** Current page number */
+    currentPage: number;
+    /** Whether there are more pages to load */
+    hasMore: boolean;
+    /** Total number of images loaded */
+    totalImages: number;
+    /** Whether the hook has been initialized */
+    isInitialized: boolean;
+}
+/**
+ * Actions available for paging management
+ */
+export interface PagingActions {
+    /** Load more images (next page) - only one instance can run at a time */
+    loadMore: () => Promise<void>;
+    /** Refresh/reload from first page */
+    refresh: () => Promise<void>;
+    /** Reset pagination state */
+    reset: () => void;
+}
+/**
+ * Return type for the usePaging hook
+ */
+export interface UsePagingReturn {
+    /** Current list of images */
+    images: Gallery[];
+    /** Information about paging state */
+    info: PagingInfo;
+    /** Available paging actions */
+    actions: PagingActions;
+}
+/**
+ * Hook for managing paginated image loading with ControllerBulk.
+ *
+ * **Key Features:**
+ * - **Paginated Loading**: Handles page-by-page image loading
+ * - **State Management**: Maintains image list and pagination state
+ * - **Load More**: Seamlessly loads and appends next pages
+ * - **Mutation**: Update specific images without full reload
+ * - **Error Handling**: Provides error states for failed operations
+ * - **Auto-loading**: Optional automatic first page loading
+ *
+ * **Typical Usage:**
+ * ```typescript
+ * const { images, info, actions } = usePaging(controller, firebaseUid, eventId, {
+ *   autoLoad: true,
+ *   autoReset: true
+ * });
+ *
+ * // Load more images
+ * await actions.loadMore();
+ *
+ * // Refresh from beginning
+ * await actions.refresh();
+ *
+ * // Update specific image
+ * actions.mutateImage(imageId, (img) => ({ ...img, isSelected: true }));
+ * ```
+ *
+ * @param controller - Backend controller for API communication
+ * @param firebaseUid - User identifier for backend operations
+ * @param eventId - Event identifier for image list
+ * @param options - Configuration options
+ * @returns Object with images, info, and actions
+ */
+export declare function usePaging(controller: Controller | null, firebaseUid: string, eventId: string, options?: PagingOptions): UsePagingReturn;

package/dist/hooks/usePaging.js

@@ -0,0 +1,211 @@
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+/**
+ * Hook for managing paginated image loading with ControllerBulk.
+ *
+ * **Key Features:**
+ * - **Paginated Loading**: Handles page-by-page image loading
+ * - **State Management**: Maintains image list and pagination state
+ * - **Load More**: Seamlessly loads and appends next pages
+ * - **Mutation**: Update specific images without full reload
+ * - **Error Handling**: Provides error states for failed operations
+ * - **Auto-loading**: Optional automatic first page loading
+ *
+ * **Typical Usage:**
+ * ```typescript
+ * const { images, info, actions } = usePaging(controller, firebaseUid, eventId, {
+ *   autoLoad: true,
+ *   autoReset: true
+ * });
+ *
+ * // Load more images
+ * await actions.loadMore();
+ *
+ * // Refresh from beginning
+ * await actions.refresh();
+ *
+ * // Update specific image
+ * actions.mutateImage(imageId, (img) => ({ ...img, isSelected: true }));
+ * ```
+ *
+ * @param controller - Backend controller for API communication
+ * @param firebaseUid - User identifier for backend operations
+ * @param eventId - Event identifier for image list
+ * @param options - Configuration options
+ * @returns Object with images, info, and actions
+ */
+export function usePaging(controller, firebaseUid, eventId, options = {}) {
+    // Memoize options to prevent re-renders when object is recreated with same values
+    const memoizedOptions = useMemo(() => ({
+        devWarnings: options.devWarnings ?? false,
+        autoLoad: options.autoLoad ?? false,
+        autoReset: options.autoReset ?? true
+    }), [options.devWarnings, options.autoLoad, options.autoReset]);
+    // Core state
+    const [images, setImages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [error, setError] = useState(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [hasMore, setHasMore] = useState(true);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Track if loadMore is currently running to prevent spam
+    const isLoadMoreRunningRef = useRef(false);
+    // Track dependencies with stable refs
+    const controllerRef = useRef(controller);
+    const firebaseUidRef = useRef(firebaseUid);
+    const eventIdRef = useRef(eventId);
+    // Only update refs when values actually change
+    if (controllerRef.current !== controller) {
+        controllerRef.current = controller;
+    }
+    if (firebaseUidRef.current !== firebaseUid) {
+        firebaseUidRef.current = firebaseUid;
+    }
+    if (eventIdRef.current !== eventId) {
+        eventIdRef.current = eventId;
+    }
+    // Helper function to log debug messages
+    const debugLog = useCallback((message, data) => {
+        if (memoizedOptions.devWarnings) {
+            console.log(`[usePaging] ${message}`, data || '');
+        }
+    }, [memoizedOptions.devWarnings]);
+    // Helper function to handle errors
+    const handleError = useCallback((operation, error) => {
+        const errorMessage = `Failed to ${operation}: ${error?.message || error}`;
+        setError(errorMessage);
+        debugLog(`Error in ${operation}`, error);
+    }, [debugLog]);
+    // Load images for a specific page
+    const loadPage = useCallback(async (pageNum, isLoadMore = false) => {
+        if (!controllerRef.current || !firebaseUidRef.current || !eventIdRef.current) {
+            debugLog('Load skipped: missing controller, firebaseUid, or eventId');
+            return;
+        }
+        // Set appropriate loading state
+        if (isLoadMore) {
+            setIsLoadingMore(true);
+        }
+        else {
+            setIsLoading(true);
+        }
+        setError(null);
+        try {
+            debugLog(`Loading page ${pageNum}...`, { isLoadMore });
+            const response = await controllerRef.current.getImageList(firebaseUidRef.current, eventIdRef.current, pageNum);
+            debugLog('Page loaded successfully', {
+                page: response.current_page,
+                imageCount: response.gallery.length,
+                hasNext: response.next_page > 0
+            });
+            // Update images list
+            setImages(prev => {
+                if (isLoadMore) {
+                    // Append new images for load more
+                    return [...prev, ...response.gallery];
+                }
+                else {
+                    // Replace all images for initial load or refresh
+                    return response.gallery;
+                }
+            });
+            // Update pagination state
+            setCurrentPage(response.current_page);
+            setHasMore(response.next_page > 0 && response.gallery.length > 0);
+            if (!isInitialized) {
+                setIsInitialized(true);
+            }
+        }
+        catch (err) {
+            handleError(`load page ${pageNum}`, err);
+            // On error, don't change images if it's load more
+            if (!isLoadMore) {
+                setImages([]);
+            }
+        }
+        finally {
+            if (isLoadMore) {
+                setIsLoadingMore(false);
+            }
+            else {
+                setIsLoading(false);
+            }
+        }
+    }, [debugLog, handleError, isInitialized]);
+    // Load more images (next page) - spam-protected
+    const loadMore = useCallback(async () => {
+        // Prevent multiple concurrent loadMore calls
+        if (isLoadMoreRunningRef.current || isLoadingMore || !hasMore) {
+            debugLog('Load more skipped', {
+                isLoadMoreRunning: isLoadMoreRunningRef.current,
+                isLoadingMore,
+                hasMore
+            });
+            return;
+        }
+        // Mark as running to prevent spam
+        isLoadMoreRunningRef.current = true;
+        try {
+            debugLog('Loading more images...', { nextPage: currentPage + 1 });
+            await loadPage(currentPage + 1, true);
+        }
+        finally {
+            // Always reset the running flag
+            isLoadMoreRunningRef.current = false;
+        }
+    }, [isLoadingMore, hasMore, currentPage, loadPage, debugLog]);
+    // Refresh from first page
+    const refresh = useCallback(async () => {
+        debugLog('Refreshing from first page...');
+        setCurrentPage(1);
+        setHasMore(true);
+        await loadPage(1, false);
+    }, [loadPage, debugLog]);
+    // Reset pagination state
+    const reset = useCallback(() => {
+        debugLog('Resetting pagination state');
+        setImages([]);
+        setCurrentPage(1);
+        setHasMore(true);
+        setError(null);
+        setIsInitialized(false);
+        // Reset loadMore running flag when page changes
+        isLoadMoreRunningRef.current = false;
+    }, [debugLog]);
+    // Auto-load first page on initialization
+    useEffect(() => {
+        if (memoizedOptions.autoLoad && controller && firebaseUid && eventId && !isInitialized) {
+            debugLog('Auto-loading first page...');
+            loadPage(1, false);
+        }
+    }, [memoizedOptions.autoLoad, controller, firebaseUid, eventId, isInitialized, loadPage, debugLog]);
+    // Reset when dependencies change (if autoReset is enabled)
+    useEffect(() => {
+        if (memoizedOptions.autoReset && isInitialized) {
+            debugLog('Dependencies changed, resetting state');
+            reset();
+        }
+    }, [controller, firebaseUid, eventId, memoizedOptions.autoReset, isInitialized, reset, debugLog]);
+    // Paging info object - memoized to prevent re-renders
+    const info = useMemo(() => ({
+        isLoading,
+        isLoadingMore,
+        error,
+        currentPage,
+        hasMore,
+        totalImages: images.length,
+        isInitialized
+    }), [isLoading, isLoadingMore, error, currentPage, hasMore, images.length, isInitialized]);
+    // Actions object - memoized to prevent re-renders
+    const actions = useMemo(() => ({
+        loadMore,
+        refresh,
+        reset
+    }), [loadMore, refresh, reset]);
+    // Return object - memoized to prevent re-renders
+    return useMemo(() => ({
+        images,
+        info,
+        actions
+    }), [images, info, actions]);
+}

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { useEditorHeadless } from './lib/hooks/useEditorHeadless';
 export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
 export { usePreset, type UsePresetReturn, type PresetInfo, type PresetActions, type PresetOptions } from './hooks/usePreset';
+export { usePaging, type UsePagingReturn, type PagingInfo, type PagingActions, type PagingOptions } from './hooks/usePaging';
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';
 export { default as useIsMobile } from './utils/isMobile';

package/dist/index.js

@@ -28,6 +28,8 @@ export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';
 // --- Preset Hook ---
 export { usePreset } from './hooks/usePreset';
+// --- Paging Hook ---
+export { usePaging } from './hooks/usePaging';
 // --- Theme & Utils ---
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.5.9",
+  "version": "2.5.10",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",