fix: use formatDisplayName on UserDashboard #10593
Conversation
…nsistent name formatting.
WalkthroughThis pull request makes two primary changes. In the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant A as Avatar Component
participant M as mutateAvatarDelete
participant O as onError Callback
U->>A: Request avatar deletion
A->>M: Invoke mutateAvatarDelete
alt Error occurs
M-->>A: Throws error
A->>O: Call onError callback
else No error
M-->>A: Return success
end
sequenceDiagram
participant D as UserDashboard
participant F as formatDisplayName Utility
D->>F: Send user object for formatting
F-->>D: Return formatted display name
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. |
![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 (2)
src/components/Users/UserAvatar.tsx (1)
85-91: Enhance error handling inhandleAvatarDelete.The error handling can be improved by logging the error and displaying a user-friendly message.
Apply this diff to enhance error handling:
const handleAvatarDelete = async (onError: () => void) => { try { mutateAvatarDelete(); - } catch { + } catch (error) { + console.error('Failed to delete avatar:', error); + toast.error(t('avatar_delete_error')); onError(); } };src/pages/UserDashboard.tsx (1)
25-29: Consider usingformatDisplayNamein welcome message for consistency.While the Avatar component now uses
formatDisplayName, the welcome message still usesuser.first_name. For consistency in name display across the UI, consider usingformatDisplayNamein the welcome message as well.Apply this diff to maintain consistency:
<h1 className="text-xl md:text-2xl font-bold"> - Welcome back, {user.first_name}! + Welcome back, {formatDisplayName(user).split(' ')[0]}! </h1>Also applies to: 31-33
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Users/UserAvatar.tsx(1 hunks)src/pages/UserDashboard.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (2)
src/components/Users/UserAvatar.tsx (1)
105-109: LGTM! Consistent avatar display and styling.The changes ensure consistent avatar display by using
formatDisplayNameand explicit styling.src/pages/UserDashboard.tsx (1)
11-11: LGTM! Clean import organization.The import is correctly placed and necessary for the Avatar component changes.
areebahmeddd
changed the title
There was a problem hiding this comment.
LGTM
Name your branches in this format issues/:issue_id/short_description, It is common/good practice followed when naming branches.
Example: issues/10375/dept-team-users
Also check the PR description generated by CodeRabbit and edit if there are any discrepancies.
Bug Fixes
Improved error handling during avatar deletion to offer a smoother experience.
I think the above is not valid, is it valid for this PR changes?
CC: @yash-learner |
There was a problem hiding this comment.
🤔 Why change/commit this? Do a self-review (whether before pushing commit/opening PR or even just starting PR as draft and then marking as ready for review - up to you how you want to approach the workflow).
There was a problem hiding this comment.
Also update the title 😅 It's a bit misleading when your change is only in UserDashboard.
There was a problem hiding this comment.
- Updated
UserAvatarto maintain consistency withUserDashboard, placingnamefirst andimageUrlafter. 😅 - Renamed title.
There was a problem hiding this comment.
- Updated
UserAvatarto maintain consistency withUserDashboard, placingnamefirst andimageUrlafter. 😅
🤔 That's not really important? If I'm importing a component in multiple places, I don't need to maintain the same order for props (like name, imageUrl etc).
There was a problem hiding this comment.
Anyways, I'll approve it, keep in mind for future.
areebahmeddd
changed the title
|
@areebahmeddd Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
Ensure consistent autogenerated avatar display by using formatDisplayName for the name prop in UserDashboard.
@ohcnetwork/care-fe-code-reviewers
Summary by CodeRabbit