Fix/profile photo upload issues #11092
Conversation
WalkthroughThis update adds a new image cropping feature to the application. It introduces the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant M as AvatarEditModal
participant C as Cropper Component
participant G as getCroppedImg Utility
U->>M: Select image for upload
M->>C: Activate cropping interface
C->>M: Return cropped area coordinates (onCropComplete)
M->>G: Call getCroppedImg(imageSrc, croppedAreaPixels)
G-->>M: Return cropped image Blob URL
M->>M: Update state with cropped image and preview
M->>U: Display 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. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/Utils/getCroppedImg.tsx (1)
10-35: Improve type safety in the getCroppedImg function.The function implementation is good but uses
anytype forcroppedAreaPixels. Consider creating a proper interface for this parameter.- // eslint-disable-next-line @typescript-eslint/no-explicit-any - export async function getCroppedImg(imageSrc: string, croppedAreaPixels: any) { + interface CroppedAreaPixels { + x: number; + y: number; + width: number; + height: number; + } + export async function getCroppedImg(imageSrc: string, croppedAreaPixels: CroppedAreaPixels) {src/components/Common/AvatarEditModal.tsx (3)
68-88: Consider applying file size validation to uploaded images.State variables for cropping functionality are well-defined, but the component should validate that uploaded files don't exceed the 1MB size limit mentioned in the hint text.
const onSelectFile: ChangeEventHandler<HTMLInputElement> = (e) => { if (!e.target.files || e.target.files.length === 0) { setSelectedFile(undefined); return; } if (!isImageFile(e.target.files[0])) { toast.warning(t("please_upload_an_image_file")); return; } + // Check file size (1MB = 1048576 bytes) + if (e.target.files[0].size > 1048576) { + toast.warning(t("max_size_for_image_uploaded_should_be", { maxSize: "1MB" })); + return; + } setSelectedFile(e.target.files[0]); setIsCropping(true); };
143-156: Consider cleanup for the object URL in the cropped image effect.The useEffect that processes the cropped image should revoke the object URL when it's no longer needed to prevent memory leaks.
useEffect(() => { if (croppedImage) { fetch(croppedImage) .then((res) => res.blob()) .then((blob) => { const myFile = new File([blob], "cropped_image.png", { type: blob.type, }); setSelectedFile(myFile); setPreview(croppedImage); setCroppedImage(null); + // Revoke the object URL to free memory + URL.revokeObjectURL(croppedImage); }); } }, [croppedImage]);
527-588: Consider extracting UI components to reduce complexity.The camera controls section is getting quite complex with multiple conditional renders. Consider extracting these into separate components for better maintainability.
You could create separate components like
CameraControls,CroppingControls, andPreviewControlsto make the main component more focused and easier to maintain.
📜 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 (4)
package.json(1 hunks)public/locale/en.json(1 hunks)src/Utils/getCroppedImg.tsx(1 hunks)src/components/Common/AvatarEditModal.tsx(14 hunks)
🔇 Additional comments (12)
package.json (1)
109-109: Adding the react-easy-crop dependency for image cropping functionality.The new dependency has been properly added with the correct version specification.
src/Utils/getCroppedImg.tsx (1)
1-8: Well-implemented utility for creating and handling image elements.The
createImagehelper function is well-structured using promises to handle asynchronous image loading.public/locale/en.json (1)
1339-1345: New translation strings for user feedback and validation.The added strings improve user experience by providing specific feedback for validation errors related to length, value, age, and image dimensions.
src/components/Common/AvatarEditModal.tsx (9)
8-25: Good import organization for the new cropping functionality.The imports for
Cropperfromreact-easy-cropand the utility functiongetCroppedImgare properly placed.
37-48: Consistent camera constraints for square image capture.The video constraints are correctly set to capture images in a 1:1 aspect ratio (720x720), which aligns well with the cropping functionality.
98-111: Well-implemented crop completion handler.The
onCropCompletecallback is correctly implemented as a memoized function that updates the cropped area pixels state.
124-141: Good error handling in the crop image function.The
handleCropImagefunction properly manages loading states and handles errors with user feedback.
158-167: Complete state reset in the closeModal function.The closeModal function properly resets all states, including the new cropping-related states.
285-319: Well-implemented cropping UI with intuitive controls.The cropping interface displays properly and provides clear actions for the user to crop or cancel.
412-419: Good UX with a dedicated crop button for uploaded images.Adding a separate crop button when an image is previewed gives users clear control over the cropping process.
466-480: Responsive webcam implementation with good error handling.The webcam container is properly styled with a fixed aspect ratio, and errors are handled with user feedback.
484-504: Consistent UI pattern for cropping captured images.The cropping interface for captured images follows the same pattern as for uploaded images, providing a consistent user experience.
ead55f0 to
1fdd91f
Compare
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Summary by CodeRabbit
New Features
Chores