fix: add initials fallback for users without avatars to profile and s… - #31
Merged
Parvaggarwal01 merged 1 commit intoJun 21, 2026
Conversation
|
@anshika-guleria is attempting to deploy a commit to the Parv Aggarwal's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughA new shared ChangesShared getInitials utility and avatar fallback rollout
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
barterly-frontend/src/pages/user/Profile.jsx (1)
419-421: ⚡ Quick winKeep avatar fallback consistent inside the Edit Profile modal.
Line 420 still renders a generic person icon while the page now uses initials fallbacks elsewhere. Reusing
getInitialshere keeps the experience consistent.Suggested refactor
<div className="w-20 h-20 border-2 border-black bg-neutral-200 overflow-hidden shrink-0"> {avatarPreview ? ( <img src={avatarPreview} alt="Preview" className="w-full h-full object-cover" /> ) : ( <div className="w-full h-full flex items-center justify-center bg-primary"> - <span className="material-symbols-outlined text-4xl">person</span> + <span className="font-black text-2xl text-black uppercase select-none"> + {getInitials(editForm.name || user?.name)} + </span> </div> )} </div>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@barterly-frontend/src/pages/user/Profile.jsx` around lines 419 - 421, The avatar fallback in the Edit Profile modal is rendering a generic person icon instead of using initials like other parts of the application. Replace the span element that contains the material-symbols-outlined "person" icon with a text display that uses the getInitials function to show user initials, ensuring consistent fallback behavior throughout the component.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@barterly-frontend/src/utils/getInitials.js`:
- Around line 2-6: The getInitials function does not handle whitespace-only
names properly. After trimming the input name on the line with trim(), add a
check to verify that the trimmed result is not an empty string. If the trimmed
string is empty, return "?" as a fallback instead of continuing with the split
operation. This validation should occur immediately after the trim() assignment
and before the split(/\s+/) call to catch names that consist only of whitespace
characters.
---
Nitpick comments:
In `@barterly-frontend/src/pages/user/Profile.jsx`:
- Around line 419-421: The avatar fallback in the Edit Profile modal is
rendering a generic person icon instead of using initials like other parts of
the application. Replace the span element that contains the
material-symbols-outlined "person" icon with a text display that uses the
getInitials function to show user initials, ensuring consistent fallback
behavior throughout the component.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0f10aa1a-a2db-462a-a46b-c317de982315
📒 Files selected for processing (4)
barterly-frontend/src/components/layout/DashboardHeader.jsxbarterly-frontend/src/components/layout/Sidebar.jsxbarterly-frontend/src/pages/user/Profile.jsxbarterly-frontend/src/utils/getInitials.js
Comment on lines
+2
to
+6
| if (!name) return "?"; | ||
|
|
||
| const trimmed = name.trim(); | ||
|
|
||
| const parts = trimmed.split(/\s+/); |
There was a problem hiding this comment.
Handle whitespace-only names before splitting.
On Line 4, a whitespace-only string becomes empty after trim(), and Line 24 then returns an empty initials string instead of a visible fallback ("?").
Suggested fix
export const getInitials = (name) => {
- if (!name) return "?";
-
- const trimmed = name.trim();
+ if (typeof name !== "string") return "?";
+ const trimmed = name.trim();
+ if (!trimmed) return "?";Also applies to: 24-24
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@barterly-frontend/src/utils/getInitials.js` around lines 2 - 6, The
getInitials function does not handle whitespace-only names properly. After
trimming the input name on the line with trim(), add a check to verify that the
trimmed result is not an empty string. If the trimmed string is empty, return
"?" as a fallback instead of continuing with the split operation. This
validation should occur immediately after the trim() assignment and before the
split(/\s+/) call to catch names that consist only of whitespace characters.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What Changed
Added a reusable
getInitialsutility function.Updated the Dashboard Header avatar fallback to display user initials when no profile image is available.
Improved handling for:
Why
Previously, users without a profile picture saw a generic fallback. Displaying initials provides a more personalized and user-friendly experience. I updated it for Profile and Sidebar as well
How To Test
Run the frontend application.
Log in with a user that does not have a profile image.
Navigate to the dashboard.
Verify that the avatar in the header displays the correct initials.
Test with different name formats:
Related Issue
Closes #28
Notes
This update only affects the DashboardHeader, Profile, and Sidebar avatar fallback. Similar improvements for Profile and Sidebar components can be implemented using a utility for consistency.
Summary by CodeRabbit