Fix/profile photo upload issues #11093
Conversation
WalkthroughThis pull request performs cosmetic and functional updates. It removes extra blank lines from the configuration file, adds a new dependency ( Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant M as AvatarEditModal
participant C as Cropper (react-easy-crop)
participant G as getCroppedImg
participant A as Canvas
U->>M: Upload/select image
M->>M: Set cropping state and render Cropper
M->>C: Display image for cropping
C-->>M: Return cropped area pixels via onCropComplete
M->>G: Invoke handleCropImage(imageSrc, croppedAreaPixels)
G->>A: Configure canvas and draw cropped section
A-->>G: Return Blob URL of the cropped image
G-->>M: Pass cropped image URL back
M->>U: Update UI with cropped image preview
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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. |
| image.addEventListener("load", () => resolve(image)); | ||
| image.addEventListener("error", (error) => reject(error)); | ||
| image.setAttribute("crossOrigin", "anonymous"); // needed to avoid cross-origin issues on some browsers | ||
| image.src = url; |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
| /> | ||
| ) : ( | ||
| <img | ||
| src={preview || imageUrl} |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/Utils/getCroppedImg.tsx (1)
1-8: Check for potential large image handling.The
createImagefunction correctly loads an image and manages load/error events, but for large image URLs, memory usage could be high. Consider adding checks or constraints for image dimensions if this utility is used in memory-intensive contexts.🧰 Tools
🪛 GitHub Check: CodeQL
[warning] 7-7: DOM text reinterpreted as HTML
DOM text is reinterpreted as HTML without escaping meta-characters.src/components/Common/AvatarEditModal.tsx (3)
134-151: Add more specific error feedback for cropping.While the
try...catchincludes a generic error toast, consider logging the actual error for debugging.
153-166: Cropped image fetch logic.Fetching the Blob for conversion works well. Optionally wrap in a try-catch to handle fetch exceptions or typed array errors if the file is large.
188-200: Enable cropping on file selection.Automatically setting
isCroppingto true on file import fosters a cohesive workflow. You might also integrate additional file size checks if needed (enforced limit is only documented, not programmatically validated).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
care.config.ts(0 hunks)package.json(1 hunks)public/locale/en.json(3 hunks)src/Utils/getCroppedImg.tsx(1 hunks)src/components/Common/AvatarEditModal.tsx(14 hunks)
💤 Files with no reviewable changes (1)
- care.config.ts
🧰 Additional context used
🪛 GitHub Check: CodeQL
src/components/Common/AvatarEditModal.tsx
[warning] 323-323: DOM text reinterpreted as HTML
DOM text is reinterpreted as HTML without escaping meta-characters.
src/Utils/getCroppedImg.tsx
[warning] 7-7: DOM text reinterpreted as HTML
DOM text is reinterpreted as HTML without escaping meta-characters.
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Test
- GitHub Check: OSSAR-Scan
- GitHub Check: cypress-run (1)
🔇 Additional comments (17)
package.json (1)
110-110: Add a note to verify the new dependency version.Adding
"react-easy-crop": "^5.4.1"looks valid, but it's good to verify the library’s version for security patches and feature stability.public/locale/en.json (6)
1500-1500: Translation key addition confirmed.
"min_length_error": "Minimum length of {{min}} characters required"is well-structured with placeholders.
1503-1503: Translation key addition confirmed.
"min_value_error": "Value should be greater than or equal to {{min}}"is consistent and clear for user messages.
1505-1505: Translation key addition confirmed.
"minimum_age_should_be": "Minimum age should be {{age}} years"is meaningful for validations.
1506-1506: Translation key addition confirmed.
"minimum_image_dimensions": "Minimum image dimensions required: {{width}} × {{height}}"properly indicates dimension constraints.
1893-1893: Key removal or update check.
"preview_form": "Preview form"is marked as changed. Ensure this removal (or modification) is intentional and does not affect references in the codebase.
2022-2022: Translation key addition confirmed.
"resend_otp_timer": "Resend OTP in {{time}} seconds"handles dynamic text well.src/components/Common/AvatarEditModal.tsx (10)
8-8: New import for the Cropper component.The import statement is correct. Confirm that
'react-easy-crop'is installed and properly peer-dependent.
26-26: Ensure the getCroppedImg utility matches expected usage.
import { getCroppedImg }is consistent with the new utility. Verify that the function’s signature aligns with the new states set in this component.
44-50: Reduced video resolution from 1280 to 720.This change improves performance but may lower image quality. Confirm if 720×720 meets project needs, especially on large screens or high-resolution devices.
82-92: Comprehensive state management for cropping.Introducing
crop,zoom,croppedAreaPixels,croppedImage,isCropping, anderrorMessageeffectively centralizes the cropping logic. Ensure that multiple re-renders do not cause performance bottlenecks.
100-115: Crop callback setup.
handleSwitchCameratoggles constraints, andonCropCompleteupdatescroppedAreaPixels. The approach is straightforward and maintainable.
168-177: Clear resets upon modal closing.The
closeModalfunction properly resets the new cropping states, preventing stale data on re-open.
248-254: Drag and drop triggers cropping workflow.Setting
isCropping = trueon drop is consistent with line 188. Same note about optional file size checks.
302-345: Conditional rendering of Cropper for normal preview.Utilizing a dedicated Cropper section ensures a smooth user experience. The absolute-positioned bottom controls are a nice touch for confirm/cancel. Consider verifying mobile styling.
🧰 Tools
🪛 GitHub Check: CodeQL
[warning] 323-323: DOM text reinterpreted as HTML
DOM text is reinterpreted as HTML without escaping meta-characters.
438-445: Inline “Crop” button.Toggling the cropping state is straightforward. Code is concise.
492-616: Camera capture and cropping integration for webcam mode.The logic to retake or confirm the photo is user-friendly. Remember to manage camera permission errors gracefully. The fallback to environment mode is stable.
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Screenshots :
Image 01 :
Image 02 :
Image 03 :
Summary by CodeRabbit
New Features
Documentation