@yogiswara/honcho-editor-ui 1.4.21 → 1.4.23

package/dist/hooks/useGallerySwipe.js

@@ -28,29 +28,15 @@ 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);
-    // Refs to track current state values for use in callbacks
-    // This prevents stale closure issues with useCallback
-    const currentImageIdRef = useRef(currentImageId);
-    const currentImageListRef = useRef(currentImageList);
-    const currentEventIdRef = useRef(currentEventId);
-    const currentPageRef = useRef(currentPage);
-    const hasNextPageRef = useRef(hasNextPage);
-    // Update refs whenever state changes
-    useEffect(() => {
-        currentImageIdRef.current = currentImageId;
-    }, [currentImageId]);
-    useEffect(() => {
-        currentImageListRef.current = currentImageList;
-    }, [currentImageList]);
-    useEffect(() => {
-        currentEventIdRef.current = currentEventId;
-    }, [currentEventId]);
-    useEffect(() => {
-        currentPageRef.current = currentPage;
-    }, [currentPage]);
-    useEffect(() => {
-        hasNextPageRef.current = hasNextPage;
-    }, [hasNextPage]);
+    /**
+     * 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
@@ -104,12 +90,12 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
      */
     const loadNextPage = useCallback(async () => {
         // Check prerequisites before attempting to load next page
-        if (!hasNextPageRef.current || !currentEventIdRef.current || !controller || !firebaseUid) {
+        if (!hasNextPage || !currentEventId || !controller || !firebaseUid) {
             return [];
         }
         try {
-            const nextPageNum = currentPageRef.current + 1;
-            const response = await controller.getImageList(firebaseUid, currentEventIdRef.current, nextPageNum);
+            const nextPageNum = currentPage + 1;
+            const response = await controller.getImageList(firebaseUid, currentEventId, nextPageNum);
             if (response.gallery && response.gallery.length > 0) {
                 // Update pagination state with new page information
                 setCurrentPage(nextPageNum);
@@ -121,7 +107,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             console.error('Error loading next page:', err);
         }
         return [];
-    }, [controller, firebaseUid]);
+    }, [hasNextPage, currentEventId, controller, firebaseUid, currentPage]);
     /**
      * Initialize or re-initialize the gallery when parameters change
      * This function:
@@ -187,39 +173,35 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
      */
     const onSwipeNext = useCallback(async () => {
         // Prevent action if no current image or already loading
-        if (!currentImageIdRef.current || isLoading)
+        if (!currentImageId || isLoading)
             return;
         setIsLoading(true);
         setError(null);
         try {
-            // Debug logging using ref values
+            // Debug logging
             console.log("=== SWIPE NEXT DEBUG ===");
-            console.log("currentImageId (ref):", currentImageIdRef.current);
-            console.log("currentImageList length (ref):", currentImageListRef.current.length);
-            console.log("currentImageList IDs (ref):", currentImageListRef.current.map(img => img.id).join(", "));
-            // Calculate current index using ref values
-            const currentIndex = currentImageListRef.current.findIndex(img => img.id === currentImageIdRef.current);
+            console.log("currentImageId:", currentImageId);
+            console.log("currentImageList length:", currentImageList.length);
+            console.log("currentImageList IDs:", currentImageList.map(img => img.id).join(", "));
+            // Calculate current index
+            const currentIndex = getCurrentImageIndex();
             console.log("Current index: ", currentIndex);
             if (currentIndex === -1) {
                 throw new Error('Current image not found in list');
             }
             // Scenario 1: At the last image of current list
-            if (currentIndex === currentImageListRef.current.length - 1) {
-                console.log("[SCENARIO 1] if last image: " + currentImageListRef.current.length);
+            if (currentIndex === currentImageList.length - 1) {
+                console.log("[SCENARIO 1] if last image: " + currentImageList.length);
                 // Try to load next page for more images
                 const newImages = await loadNextPage();
                 if (newImages.length > 0) {
                     // Extend current list with new images
-                    const updatedList = [...currentImageListRef.current, ...newImages];
+                    const updatedList = [...currentImageList, ...newImages];
                     setCurrentImageList(updatedList);
-                    // Immediately update the ref to prevent stale closure issues
-                    currentImageListRef.current = updatedList;
                     // Navigate to first image of the new page
                     const nextImage = newImages[0];
                     console.log("Setting currentImageId to:", nextImage.id);
                     setCurrentImageId(nextImage.id);
-                    // Immediately update the ref to prevent stale closure issues
-                    currentImageIdRef.current = nextImage.id;
                     // Fetch complete data for the new current image
                     const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
                     if (nextImageData) {
@@ -233,12 +215,10 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             }
             else {
                 // Scenario 2: Navigate to next image in current list
-                const nextImage = currentImageListRef.current[currentIndex + 1];
+                const nextImage = currentImageList[currentIndex + 1];
                 console.log("[SCENARIO 2] Navigating to next image:", nextImage.id);
-                console.log("Setting currentImageId from", currentImageIdRef.current, "to", nextImage.id);
+                console.log("Setting currentImageId from", currentImageId, "to", nextImage.id);
                 setCurrentImageId(nextImage.id);
-                // Immediately update the ref to prevent stale closure issues
-                currentImageIdRef.current = nextImage.id;
                 // Fetch complete data for the next image
                 const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
                 if (nextImageData) {
@@ -254,7 +234,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         finally {
             setIsLoading(false);
         }
-    }, [isLoading, loadNextPage, controller, firebaseUid]);
+    }, [currentImageId, isLoading, getCurrentImageIndex, currentImageList, loadNextPage, controller, firebaseUid]);
     /**
      * Navigate to the previous image in the gallery
      * Only works within the currently loaded image list
@@ -264,22 +244,20 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
      */
     const onSwipePrev = useCallback(async () => {
         // Prevent action if no current image or already loading
-        if (!currentImageIdRef.current || isLoading)
+        if (!currentImageId || isLoading)
             return;
         setIsLoading(true);
         setError(null);
         try {
-            // Calculate current index using ref values
-            const currentIndex = currentImageListRef.current.findIndex(img => img.id === currentImageIdRef.current);
+            // Calculate current index
+            const currentIndex = getCurrentImageIndex();
             if (currentIndex === -1) {
                 throw new Error('Current image not found in list');
             }
             if (currentIndex > 0) {
                 // Navigate to previous image in the current list
-                const prevImage = currentImageListRef.current[currentIndex - 1];
+                const prevImage = currentImageList[currentIndex - 1];
                 setCurrentImageId(prevImage.id);
-                // Immediately update the ref to prevent stale closure issues
-                currentImageIdRef.current = prevImage.id;
                 // Fetch complete data for the previous image
                 const prevImageData = await controller.onGetImage(firebaseUid, prevImage.id);
                 if (prevImageData) {
@@ -299,7 +277,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         finally {
             setIsLoading(false);
         }
-    }, [isLoading, controller, firebaseUid]);
+    }, [currentImageId, isLoading, getCurrentImageIndex, currentImageList, controller, firebaseUid]);
     /**
      * Calculate if next image navigation is available
      * Returns true if:
@@ -309,18 +287,18 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
      * @returns Boolean indicating if next navigation is possible
      */
     const isNextAvailable = useCallback(() => {
-        if (isLoading || !currentImageIdRef.current)
+        if (isLoading || !currentImageId)
             return false;
-        // Calculate current index using ref values
-        const currentIndex = currentImageListRef.current.findIndex(img => img.id === currentImageIdRef.current);
+        // Calculate current index
+        const currentIndex = getCurrentImageIndex();
         if (currentIndex === -1)
             return false;
         // If we're not at the last image, next is definitely available
-        if (currentIndex < currentImageListRef.current.length - 1)
+        if (currentIndex < currentImageList.length - 1)
             return true;
         // If we're at the last image but there are more pages, next is still available
-        return hasNextPageRef.current;
-    }, [isLoading]);
+        return hasNextPage;
+    }, [isLoading, getCurrentImageIndex, currentImageList.length, hasNextPage]);
     /**
      * Calculate if previous image navigation is available
      * Returns true if there's a previous image in the currently loaded list
@@ -328,23 +306,31 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
      * @returns Boolean indicating if previous navigation is possible
      */
     const isPrevAvailable = useCallback(() => {
-        if (isLoading || !currentImageIdRef.current)
+        if (isLoading || !currentImageId)
             return false;
-        // Calculate current index using ref values
-        const currentIndex = currentImageListRef.current.findIndex(img => img.id === currentImageIdRef.current);
+        // Calculate current index
+        const currentIndex = getCurrentImageIndex();
         return currentIndex > 0;
-    }, [isLoading]);
+    }, [isLoading, getCurrentImageIndex]);
     // Initialize when dependencies change
     useEffect(() => {
         initializeGallery();
     }, [initializeGallery]);
-    // Update currentImageId when initImageId changes (but only if different)
+    // Update currentImageId when initImageId changes from external source
     // This allows the hook to respond to external changes to the initial image ID
+    // but should not interfere with internal navigation
     useEffect(() => {
-        if (initImageId && initImageId !== currentImageId) {
-            setCurrentImageId(initImageId);
+        // Only update if initImageId actually changed and we're not currently loading
+        // (loading indicates we're in the middle of navigation)
+        if (initImageId && initImageId !== currentImageId && !isLoading) {
+            // Additional check: only update if this is truly an external change
+            // If prevInitImageId is different from initImageId, it's an external change
+            if (prevInitImageId.current !== initImageId) {
+                console.log("External initImageId change detected, updating currentImageId");
+                setCurrentImageId(initImageId);
+            }
         }
-    }, [initImageId, currentImageId]);
+    }, [initImageId]);
     // Return all the functionality and state that components need
     return {
         currentImageData,

package/package.json

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