Fix infinite fetching from API #213
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixed two critical issues causing infinite fetching from Firebase: 1. Changed loadProgress to use .once() instead of .on() - prevents setting up continuous Firebase listeners that keep fetching data 2. Removed loadProgress from useEffect dependencies - prevents effect from re-running every time untutorial state changes This eliminates the infinite loop while maintaining correct functionality.
The LazyImage component was causing infinite fetching because it depended on the file object reference in useEffect. Every render of parent components created new Firebase Reference objects, even for the same path, triggering the effect repeatedly. Changes: - Extract file.fullPath as a stable string dependency - Use filePath instead of file object in useEffect dependencies - Remove console.log that was spamming the console - Add null check for file before calling getDownloadURL This ensures the effect only runs when the actual path changes, not when a new Reference object is created for the same path.
Added proper error handling to prevent unhandled promise rejections that were causing "[object Object]" runtime errors when editing. Changes: - Added .catch() handlers for Firebase promise chains - Added check for untutorial.steps existence before calling loadProgress - Added Array.isArray check before forEach to prevent crashes - Errors are now logged to console and displayed to user This fixes the runtime errors that occurred during editing operations.
Added missing error handlers that were causing "[object Object]" runtime errors during editing and other operations. Changes: - Added .catch() to main Firebase listener for author profile fetch - Added error handling to deleteProjectHandler - Added error handling to chooseLang language preference save - All errors now logged to console and displayed to user - Prevented navigation on delete errors This completes the error handling coverage for all Firebase operations in the Untutorial component.
Added missing error handler for Firebase Storage getDownloadURL() promise that was causing "[object Object]" runtime errors when images failed to load. Changes: - Added .catch() handler to getDownloadURL() promise - Log errors to console for debugging - Keep loading.gif as fallback when image fails to load - Set loading to false even on error to prevent stuck loading state This fixes the unhandled promise rejections that occurred when Firebase Storage couldn't fetch image URLs (e.g., missing files, permission issues, network errors).
Fixed critical bug in saveChangesHandler where Author.key was being accessed on a string, resulting in undefined Author values and broken image URLs (/public/undefined/...). Root cause: - First save: Author object → Author.key extracts string correctly - Second save: Author already string → Author.key returns undefined - Saved undefined to Firebase → broke image loading and author profile Solution: - Check if Author is object or string before accessing .key - Save Author as string to Firebase (as expected) - Keep Author as object in local state (to support .key access) - This maintains compatibility with all code expecting Author.key This fixes the "[object Object]" errors and "Uncaught FirebaseStorageError" errors that occurred when editing and saving content.
…tions Fixed persistent undefined Author issues by: 1. Prevented immediate state update in saveChangesHandler - Don't update local state after save - Let Firebase listener handle state updates properly - Eliminates race conditions between save and listener 2. Added strict Author validation in Firebase listener - Check Author exists before fetching profile - Validate fetched profile has valid key - Prevent setting state with invalid Author data 3. Added detailed diagnostic logging - Log Author value when received from Firebase - Log errors when Author is missing or invalid - Helps identify if data corruption is in Firebase This should prevent "/public/undefined/" image URL errors by ensuring Author is always a valid object with a key before any renders occur.
…ionality Fixed issues with step screenshot uploads: 1. Duplicate input IDs - Both English and Spanish screenshot uploads had the same ID, causing only one to work - Changed Spanish upload ID to include "-sp" suffix - Now each upload button has a unique ID 2. Incorrect status checks - Spanish upload button was checking ThumbnailFilename instead of ThumbnailFilenameSp - Fixed className logic to check correct field - Fixed button text to check correct field 3. Added visual distinction - Spanish upload now shows "(ES)" label to differentiate from English upload 4. Cleanup - Removed debug console.log statements This ensures both English and Spanish screenshot uploads work independently and can be updated after initial upload.
- Added handleThumbnailDelete function to remove main untutorial image - Added handleStepThumbnailDelete function to remove step screenshots (English and Spanish) - Implemented delete buttons with proper visibility conditions (only show when authorized and image exists) - Delete buttons styled consistently with red background for clear user indication - All delete operations properly mark content as dirty and trigger auto-save Delete buttons added: 1. Main untutorial thumbnail (top-right overlay button) 2. English step screenshots (inline delete button) 3. Spanish step screenshots (inline delete button with isSpanish=true parameter)
- Added type="button" to all delete buttons to prevent triggering file uploads - Fixed duplicate delete buttons in Spanish mode by restricting English section to show only when lang !== "Español" Issues fixed: 1. Delete buttons now properly delete images instead of prompting upload dialog 2. Spanish mode now shows only one delete button (Spanish) instead of two
- Added e.preventDefault() and e.stopPropagation() to all delete handlers
- Updated delete button onClick handlers to pass event object
- This prevents event bubbling that was causing file upload to trigger
Changes:
- handleThumbnailDelete now accepts event parameter
- handleStepThumbnailDelete now accepts event as first parameter
- All onClick handlers updated to pass event: onClick={(e) => handler(e, ...)}
The upload label elements were overlaying and capturing clicks meant for delete buttons. Fixed by: - Added pointerEvents: "none" to all upload labels - Added pointerEvents: "auto" to all file inputs - Added pointerEvents: "auto" to all delete buttons This allows delete buttons to receive clicks while maintaining upload functionality. Affected areas: - Main thumbnail upload/delete - English step screenshot upload/delete - Spanish step screenshot upload/delete
Wrapped the <p> tags containing "Add Screenshot" and "Update Screenshot" text in clickable <label> elements that point to the file inputs. Changes: - English step screenshots: wrapped <p> in label with cursor pointer - Spanish step screenshots: wrapped <p> in label with cursor pointer - Maintains the pointer-events fix for delete buttons This allows users to click the text to trigger file upload while keeping the delete button functional.
Removed duplicate labels and pointer-events manipulation that was causing white space and layout issues. Changes: - Put label inside <p> tag for clickable text (instead of wrapping p in label) - Removed pointer-events CSS that was breaking layout - Increased z-index on delete buttons to ensure they're clickable - Simplified structure back to single label per input This restores the original layout while maintaining delete functionality.
The upload label with class "upload replace" was displaying as an overlay on top of images, causing: - Black/covered images in both English and Spanish - Hidden delete buttons that couldn't be clicked Solution: Added display: "none" style to the upload label when an image exists (ThumbnailFilename or ThumbnailFilenameSp is set). The label is only shown when there's no image, allowing users to add a new screenshot. Once an image exists, the label is hidden to reveal the image and delete button.
The black background was caused by the CSS class "change" on the <p> tag and the upload label overlay. Fixed by: 1. Conditionally render upload label only when NO image exists 2. When image exists, render hidden file input + delete button instead 3. Override background to transparent on <p.change> when image exists 4. Applied fix to both English and Spanish screenshot sections This completely removes the overlay elements when an image is present, allowing the image and delete button to be visible and clickable.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixed two critical issues causing infinite fetching from Firebase:
This eliminates the infinite loop while maintaining correct functionality.