@yogiswara/honcho-editor-ui 1.4.15 → 1.4.17

package/dist/hooks/useGallerySwipe.js

@@ -28,15 +28,6 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
     // This prevents the hook from re-initializing when the same values are passed
     const prevFirebaseUid = useRef(null);
     const prevInitImageId = useRef(null);
-    /**
-     * Get the index of the current image in the loaded image list
-     * Returns -1 if the current image is not found in the list
-     */
-    const getCurrentImageIndex = useCallback(() => {
-        if (!currentImageId || currentImageList.length === 0)
-            return -1;
-        return currentImageList.findIndex(img => img.id === currentImageId);
-    }, [currentImageId, currentImageList]);
     /**
      * Fetch image pages sequentially until the target image is found
      * This is necessary because we don't know which page contains the initial image
@@ -178,7 +169,13 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         setIsLoading(true);
         setError(null);
         try {
-            const currentIndex = getCurrentImageIndex();
+            // Debug logging
+            console.log("=== SWIPE NEXT DEBUG ===");
+            console.log("currentImageId:", currentImageId);
+            console.log("currentImageList length:", currentImageList.length);
+            console.log("currentImageList IDs:", currentImageList.map(img => img.id).join(", "));
+            // Calculate current index directly to avoid stale closure issues
+            const currentIndex = currentImageList.findIndex(img => img.id === currentImageId);
             console.log("Current index: ", currentIndex);
             if (currentIndex === -1) {
                 throw new Error('Current image not found in list');
@@ -194,6 +191,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
                     setCurrentImageList(updatedList);
                     // Navigate to first image of the new page
                     const nextImage = newImages[0];
+                    console.log("Setting currentImageId to:", nextImage.id);
                     setCurrentImageId(nextImage.id);
                     // Fetch complete data for the new current image
                     const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
@@ -210,6 +208,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
                 // Scenario 2: Navigate to next image in current list
                 const nextImage = currentImageList[currentIndex + 1];
                 console.log("[SCENARIO 2] Navigating to next image:", nextImage.id);
+                console.log("Setting currentImageId from", currentImageId, "to", nextImage.id);
                 setCurrentImageId(nextImage.id);
                 // Fetch complete data for the next image
                 const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
@@ -226,7 +225,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         finally {
             setIsLoading(false);
         }
-    }, [currentImageId, isLoading, getCurrentImageIndex, currentImageList, loadNextPage, controller, firebaseUid]);
+    }, [currentImageId, isLoading, currentImageList, loadNextPage, controller, firebaseUid]);
     /**
      * Navigate to the previous image in the gallery
      * Only works within the currently loaded image list
@@ -241,7 +240,8 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         setIsLoading(true);
         setError(null);
         try {
-            const currentIndex = getCurrentImageIndex();
+            // Calculate current index directly to avoid stale closure issues
+            const currentIndex = currentImageList.findIndex(img => img.id === currentImageId);
             if (currentIndex === -1) {
                 throw new Error('Current image not found in list');
             }
@@ -268,7 +268,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         finally {
             setIsLoading(false);
         }
-    }, [currentImageId, isLoading, getCurrentImageIndex, currentImageList, controller, firebaseUid]);
+    }, [currentImageId, isLoading, currentImageList, controller, firebaseUid]);
     /**
      * Calculate if next image navigation is available
      * Returns true if:
@@ -278,9 +278,10 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
      * @returns Boolean indicating if next navigation is possible
      */
     const isNextAvailable = useCallback(() => {
-        if (isLoading)
+        if (isLoading || !currentImageId)
             return false;
-        const currentIndex = getCurrentImageIndex();
+        // Calculate current index directly to avoid stale closure issues
+        const currentIndex = currentImageList.findIndex(img => img.id === currentImageId);
         if (currentIndex === -1)
             return false;
         // If we're not at the last image, next is definitely available
@@ -288,7 +289,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             return true;
         // If we're at the last image but there are more pages, next is still available
         return hasNextPage;
-    }, [isLoading, getCurrentImageIndex, currentImageList.length, hasNextPage]);
+    }, [isLoading, currentImageId, currentImageList, hasNextPage]);
     /**
      * Calculate if previous image navigation is available
      * Returns true if there's a previous image in the currently loaded list
@@ -296,11 +297,12 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
      * @returns Boolean indicating if previous navigation is possible
      */
     const isPrevAvailable = useCallback(() => {
-        if (isLoading)
+        if (isLoading || !currentImageId)
             return false;
-        const currentIndex = getCurrentImageIndex();
+        // Calculate current index directly to avoid stale closure issues
+        const currentIndex = currentImageList.findIndex(img => img.id === currentImageId);
         return currentIndex > 0;
-    }, [isLoading, getCurrentImageIndex]);
+    }, [isLoading, currentImageId, currentImageList]);
     // Initialize when dependencies change
     useEffect(() => {
         initializeGallery();

package/package.json

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