search

bluewave-labs / bluewave-onboarding

https://bluewavelabs.ca
GNU Affero General Public License v3.0
30 stars 24 forks source link

fix: Fix Image Upload Popup Behavior and Placeholder Image Issue #328

Closed aryanp-86 closed 1 month ago

aryanp-86 commented 1 month ago

Closes #324

PR Title:

Fix Image Upload Popup Behavior and Placeholder Image Issue

Description:

This PR addresses the following issues related to the image upload popup and the rendering of the user's profile picture:

  1. Popup Closure on Image Update: Previously, after clicking "update" in the image upload popup, the popup would remain open, leading to user inconvenience. This is resolved by adding a handleUploadImageModalClose() function that is triggered after a successful image upload, closing the popup as expected.
try {
  const response = await updateUser({ picture: base64Data });
  handleProfileUpdateSuccess(response, updateProfile);
  handleUploadImageModalClose();
} catch (e) {
  console.error('Error Updating image:', e);
}
  1. Profile Picture Persistence: The profile picture was not persisting after a page refresh, resulting in a fallback to the placeholder image. The root cause was traced to multiple points in the code:
    • useAuth Hook: The useEffect in useAuth was not properly extracting the picture property from the user object, causing userInfo to miss the picture data on initial load. This PR includes modifications to ensure the picture string is extracted and set correctly within userInfo. 
      const response = await apiClient.get('/users/current-user');
if (response.status === 200 && response.data.user) {
const { id, name, surname, email, role, picture } = response.data.user;
const payload = { id, name, surname, email, role, picture };
dispatch({ type: 'LOGIN_AND_SET_USER_INFO', payload });
} else {
dispatch({ type: 'LOGOUT' });
}
  2. HTML Entities in Base64 Image: To correctly handle Base64 image rendering, which was disrupted by unintended HTML entities, sanitization logic was added to decode and render the Base64 image accurately for image upload and previously present data. 
    
// HTML entity decoder function
const decodeHtmlEntities = (str) => {
if (!str) return str;
const textarea = document.createElement('textarea');
textarea.innerHTML = str;
return textarea.value;
};

// Function to handle user data processing const processUserData = (userData) => { return { ...userData, picture: userData.picture ? decodeHtmlEntities(userData.picture) : null }; };

4. Validation in Avatar to prevent src errors:
A validation check was added to prevent any src errors due to placeholder vendetta image and image uploaded by user.

//Validation check so that picture string follows base64 constraints const validSrc = src && (src.startsWith('data:image') || src.startsWith('/') || src.startsWith('http')) ? src : '/vendetta.png';



Let me know if any further refinements are required!
coderabbitai[bot] commented 1 month ago

Walkthrough

This pull request introduces changes across several files to enhance user profile management and data handling. The user.controller.js file now includes a picture property in the user response. The Avatar.jsx component adds validation for the image source, defaulting to a placeholder if invalid. The ProfileTab.jsx component updates the initial state to include the user's picture and improves the image upload handling. Additionally, authProvider.jsx introduces new functions to decode HTML entities and process user data, ensuring the picture property is correctly managed.

Changes

File Path Change Summary
backend/src/controllers/user.controller.js Added picture property to the response object in getCurrentUser function.
frontend/src/components/Avatar/Avatar.jsx Added validation for src prop; defaults to placeholder if invalid; minor formatting adjustments.
frontend/src/scenes/settings/ProfileTab/ProfileTab.jsx Updated formData to include user's picture; improved image upload handling and error logging.
frontend/src/services/authProvider.jsx Introduced decodeHtmlEntities and processUserData functions; updated authReducer to process user data.

Assessment against linked issues

Objective Addressed Explanation
Close popup after updating image (#324) ✅
Prevent reverting to placeholder after refresh (#324) ❌ The implementation does not ensure the image persists after a refresh.

Possibly related PRs

Suggested reviewers

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?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): > ‼️ **IMPORTANT** > Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged. - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` 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) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.