@yogiswara/honcho-editor-ui 2.5.4 → 2.5.6

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

@@ -28,6 +28,7 @@ export declare function useHonchoEditorBulk(controller: Controller, eventID: str
     selectedIds: string[];
     hasMore: boolean;
     loadMoreImages: () => void;
+    isFetchingMore: boolean;
     handleBackCallbackBulk: () => void;
     selectedBulkPreset: string;
     handleToggleImageSelection: (imageId: string) => void;

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -45,6 +45,7 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
     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 [selectedBulkPreset, setSelectedBulkPreset] = useState('preset1');
     const imageData = useMemo(() => {
@@ -116,60 +117,68 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
     const handleBulkSharpnessIncrease = createRelativeAdjuster('sharpnessScore', 5);
     const handleBulkSharpnessIncreaseMax = createRelativeAdjuster('sharpnessScore', 20);
     const loadImages = useCallback(async (pageNum) => {
-        setIsLoading(true);
+        // Use the correct loading state
+        if (pageNum === 1) {
+            setIsLoading(true);
+        }
+        else {
+            setIsFetchingMore(true);
+        }
+        setError(null);
         try {
             const response = await controller.getImageList(firebaseUid, eventID, pageNum);
+            // Sync adjustments for the new images with the batch history
             batchActions.syncAdjustment(response.gallery.map(mapToImageAdjustmentConfig));
-            // append instead of replacing
-            setImageCollection(prev => [...prev, ...response.gallery]);
-            // track page & "more" status
+            // Append new images for page > 1, otherwise replace
+            setImageCollection(prev => pageNum === 1 ? response.gallery : [...prev, ...response.gallery]);
             setPage(response.current_page);
-            if (!response.next_page || response.gallery.length === 0) {
-                setHasMore(false);
-            }
-            else {
-                setHasMore(true);
-            }
+            setHasMore(response.next_page > 0 && response.gallery.length > 0);
         }
         catch (err) {
             console.error("Failed to fetch image list:", err);
-            setError("Could not load images.");
+            setError(err.message || "Could not load images.");
         }
         finally {
-            setIsLoading(false);
+            if (pageNum === 1) {
+                setIsLoading(false);
+            }
+            else {
+                setIsFetchingMore(false);
+            }
         }
     }, [controller, firebaseUid, eventID, batchActions]);
     const loadMoreImages = useCallback(() => {
-        if (!isLoading && hasMore) {
+        if (!isFetchingMore && hasMore) {
             loadImages(page + 1);
         }
-    }, [isLoading, hasMore, page, loadImages]);
-    // Extract selected image IDs for other operations (like applying bulk adjustments)
-    useEffect(() => {
-        if (eventID && firebaseUid) {
-            setIsLoading(true);
-            setError(null);
-            controller.getImageList(firebaseUid, eventID, page + 1)
-                .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]);
+    }, [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]);
     useEffect(() => {
         if (eventID && firebaseUid) {
-            setImageCollection([]); // reset when event changes
+            // Reset state when the event changes
+            setImageCollection([]);
             setPage(1);
-            loadImages(1);
+            setHasMore(true);
+            loadImages(1); // Load the first page
         }
     }, [eventID, firebaseUid, loadImages]);
     return {
@@ -179,7 +188,7 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
         selectedIds,
         hasMore,
         loadMoreImages,
-        // Gallery Handlers
+        isFetchingMore,
         handleBackCallbackBulk,
         selectedBulkPreset,
         handleToggleImageSelection: batchActions.toggleSelection,

package/package.json

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