@yogiswara/honcho-editor-ui 1.1.0 → 1.2.2

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

@@ -7,7 +7,7 @@ declare global {
 }
 export interface Controller {
     onGetImage(firebaseUid: string, imageID: string): Promise<Gallery>;
-    getImageList(firebaseUid: string): Promise<Gallery[]>;
+    getImageList(firebaseUid: string, eventId: string): Promise<Gallery[]>;
     syncConfig(firebaseUid: string): Promise<void>;
     handleBack(firebaseUid: string, imageID: string): void;
     getPresets(firebaseUid: string): Promise<Preset[]>;
@@ -38,7 +38,7 @@ export type ImageItem = {
     name: string;
     file: File;
 };
-export declare function useHonchoEditor(controller: Controller, initImageId: string, firebaseUid: string): {
+export declare function useHonchoEditor(controller: Controller, initImageId: string, firebaseUid: string, eventId: string): {
     canvasRef: import("react").MutableRefObject<HTMLCanvasElement | null>;
     canvasContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     fileInputRef: import("react").MutableRefObject<HTMLInputElement | null>;

package/dist/hooks/editor/useHonchoEditor.js

@@ -6,7 +6,7 @@ const initialAdjustments = {
     whitesScore: 0, blacksScore: 0, saturationScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
 };
 const clamp = (value) => Math.max(-100, Math.min(100, value));
-export function useHonchoEditor(controller, initImageId, firebaseUid) {
+export function useHonchoEditor(controller, initImageId, firebaseUid, eventId) {
     const [currentImageId, setCurrentImageId] = useState(initImageId);
     // MARK: - Core Editor State & Refs
     const editorRef = useRef(null);
@@ -172,6 +172,29 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         }, 50);
         return () => clearTimeout(timeoutId);
     }, [activeSubPanel, isBulkEditing]);
+    useEffect(() => {
+        const fetchAndSetImageList = async () => {
+            if (controller && firebaseUid && eventId && imageList.length === 0) {
+                try {
+                    console.log("Hook is fetching image list for event:", eventId);
+                    // The controller now requires eventId, adjust the interface if needed
+                    const galleryList = await controller.getImageList(firebaseUid, eventId);
+                    const items = galleryList.map(g => ({
+                        id: g.id,
+                        url: g.raw_edited?.path || g.download?.path || '',
+                        name: g.uid,
+                        file: new File([], g.id),
+                    }));
+                    setImageList(items);
+                    console.log("Image list state updated in hook:", items);
+                }
+                catch (error) {
+                    console.error("Hook failed to fetch image list:", error);
+                }
+            }
+        };
+        fetchAndSetImageList();
+    }, [controller, firebaseUid, eventId, imageList.length]);
     // Effect for keyboard shortcuts
     useEffect(() => {
         window.addEventListener('keydown', handleKeyDown);
@@ -311,15 +334,25 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         }
     }, [imageList, currentImageId]);
     useEffect(() => {
-        if (initImageId) {
-            setCurrentImageId(initImageId);
-        }
-    }, [initImageId]);
-    useEffect(() => {
-        if (currentImageId && firebaseUid) {
-            loadImageFromId(firebaseUid, currentImageId);
+        // This is now the single point of control for loading an image based on the initial props.
+        // 1. First, check if all conditions are met to even attempt loading.
+        //    We ensure the editor itself is ready before doing anything.
+        const canLoad = initImageId && firebaseUid && controller && isEditorReady;
+        if (!canLoad) {
+            return;
         }
-    }, [currentImageId, firebaseUid, loadImageFromId]);
+        // 2. Define the loading sequence as an async function inside the effect.
+        const loadInitialImage = async () => {
+            console.log(`[EFFECT] Starting to load initial image ID: ${initImageId}`);
+            // This directly calls the loading function. We don't need to set
+            // an intermediate 'currentImageId' state, which avoids an extra re-render and potential loop.
+            await loadImageFromId(firebaseUid, initImageId);
+        };
+        // 3. Execute the loading sequence.
+        loadInitialImage();
+        // Dependencies: The external props and readiness flags that trigger this logic.
+        // Whenever any of these change, this effect will re-evaluate.
+    }, [initImageId, firebaseUid, controller, isEditorReady, loadImageFromId]);
     const handleFileChange = (event) => {
         const files = event.target?.files;
         if (!files || files.length === 0)

package/package.json

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