Error messages should clearly specify the exact issue encountered during facility cover image uploads #9727
Conversation
WalkthroughThe pull request enhances the error handling for the cover image upload functionality in the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (7)
src/components/Facility/FacilityHome.tsx (7)
137-139: Consider externalizing constants and using i18n for user-facing text.The maximum file size and allowed image formats are defined as inline constants, and the text displayed in error messages is currently hard-coded in English. For better maintainability and localization, consider moving these constants to a configuration or environment variables, and placing user-facing error messages in i18n files.
140-144: Localize the file-size error message.Hard-coded strings like
"Max size for image uploaded should be 1MB."are not currently localized. Please consider adding this string to your i18n resources to ensure consistency with the rest of the application’s translation framework.
146-147: Revoke the object URL to free up memory.After using
URL.createObjectURL(file), it’s good practice to callURL.revokeObjectURL(img.src)insideimg.onloadandimg.onerrorcallbacks. This ensures no lingering references remain in the browser’s memory.🧰 Tools
🪛 GitHub Check: CodeQL
[warning] 147-147: DOM text reinterpreted as HTML
DOM text is reinterpreted as HTML without escaping meta-characters.
150-153: Localize the format error message.The message
"Allowed formats are jpg, png, jpeg."should be placed under i18n to ensure coverage for non-English locales.
156-162: Localize aspect ratio error.The aspect ratio warning,
"Aspect ratio for the image should be 1:1.", is another user-facing string that would benefit from localization.
164-188: Handle edge cases for more informative server-side errors.This implementation discards all non-200 responses without displaying the server’s error details (e.g., a 400 response with a specific validation message). Providing more descriptive feedback for failures may help users rectify the problem.
190-193: Add i18n coverage for the invalid image message.The error message
"Invalid image file."would also benefit from being localized in your i18n resources.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Facility/FacilityHome.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Check: CodeQL
src/components/Facility/FacilityHome.tsx
[warning] 147-147: DOM text reinterpreted as HTML
DOM text is reinterpreted as HTML without escaping meta-characters.
|
I really don't want us to replicate the BE validation in FE. The validation should have responded with the actual issue right 🤔 
We just have to show the errors right 🤔 |
|
Now Care_FE couldn't open, right? |
|
check now |
…odamaan/care_feAmaan into issues/9720/cover-image-upload
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Facility/FacilityHome.tsx(2 hunks)
🔇 Additional comments (2)
src/components/Facility/FacilityHome.tsx (2)
7-7: LGTM! Good choice of toast libraryThe addition of the
sonnertoast library is appropriate for improving error message notifications.
149-149: LGTM! Good migration from Notification to toastThe switch to
toast.successaligns with the modern notification approach.
Jacobjeevan
added
waiting for related PR
|
👋 Hi, @modamaan, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
…odamaan/care_feAmaan into issues/9720/cover-image-upload
|
|
|
Images taken from camera directly should be allowed to upload the image (currently its not working) We need to modify the backend code, update the error handling (e.g., pixel size errors) for mobile devices. |
|
|
…odamaan/care_feAmaan into issues/9720/cover-image-upload
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Users/UserAvatar.tsx(2 hunks)
🔇 Additional comments (2)
src/components/Users/UserAvatar.tsx (2)
18-18: LGTM! Import addition is well-placed.The import for
handleStructuredErrorsis appropriately grouped with other request-related utilities.
60-66: Verify consistency with facility cover image error handling.Since this PR primarily focuses on facility cover image uploads, ensure that the error handling implementation is consistent between
UserAvatarandFacilityHomecomponents.✅ Verification successful
Error handling implementation is consistent ✓
The error handling implementation in
UserAvatarfollows the same pattern asFacilityHome, using identical error parsing and structured error handling approach.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Compare error handling implementation between components # Find FacilityHome component and check its error handling echo "Checking FacilityHome component implementation:" rg -A 10 "handleCoverImageUpload.*=.*async" # Check for other image upload handlers echo "\nChecking other image upload implementations:" rg -l "handleStructuredErrors.*profile_picture|cover_image"Length of output: 1527
Script:
#!/bin/bash # Get complete implementation of FacilityHome error handling echo "FacilityHome error handling implementation:" rg -A 20 "handleCoverImageUpload.*=.*async" src/components/Facility/FacilityHome.tsx # Check handleStructuredErrors usage patterns echo "\nError handling patterns:" rg -A 5 "xhr\.responseText.*JSON\.parse|handleStructuredErrors" src/components/Facility/FacilityHome.tsx src/components/Users/UserAvatar.tsxLength of output: 3041
CARE.-.Google.Chrome.2025-01-22.00-34-11.mp4 |
|
@modamaan Bad request error message is not required in the frontend; hide them. |
|
Will be done along with #9882 |
Proposed Changes
loom-video.6.mp4
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit