Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[BUG]: Header avatar and display name don't update after editing the profile

Open Beginner friendly
  • Is something wrong?
#770 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@mithunkc017-ship-it is already working on this.

Since Oct 24, 2026.

  • #771 by @mithunkc017-ship-it — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with frontend/src/components/Header.tsx and frontend/src/Pages/Profile.tsx, which the issue identifies as reading and updating separate user-state copies. Trace the successful avatar and display-name update handlers to find where the shared userAtom can be updated, then verify that the header reflects the new values without refreshing. Run the relevant frontend checks and reproduce both profile-update flows to confirm the fix.

Written by the indexing model from the issue text.

Description

bug
Bug Description

When a user changes their avatar or display name on the Profile page, the change is saved and a success message appears. The header (top-right avatar and the name in its dropdown) keeps showing the old avatar and name until the page is refreshed.

Steps to Reproduce

Log in and go to the Profile page.
Hover over the avatar and choose a new one.
The message "Avatar updated successfully!" appears.
Look at the avatar in the top-right corner of the header.

Display name
On the Profile page, edit your display name and save it.
The message "DisplayName updated successfully!" appears.
Click the avatar in the header to open the dropdown and look at the name shown there.

Logs and Screenshots

https://github.com/user-attachments/assets/f55b82b2-e3f6-409e-a8af-7c466309cd5c

Actual Behavior

  • The header avatar still shows the old avatar.
  • The header dropdown still shows the old display name.
  • The header only shows the new values after a full page refresh.

Expected Behavior

As soon as the profile update succeeds, the header avatar and display name should show the new values, with no page refresh.

Root Cause

The header and the Profile page read user data from two different places, and the Profile page only updates its own copy.

- **Header** reads the shared Jotai `userAtom`:
  - `frontend/src/components/Header.tsx:62`: `const [user] = useAtom(userAtom);`
  - `frontend/src/components/Header.tsx:254` and `:265`: `src={user?.avatarUrl || DEFAULT_AVATAR_URL}`
  - `frontend/src/components/Header.tsx:271`: `{user?.displayName || "User"}`
- **Profile page** keeps the profile in local component state (`dashboard`, from `useState`) and never touches `userAtom`:
  - `frontend/src/Pages/Profile.tsx:345-372` (`handleAvatarSelect`): calls `updateProfile(...)` and `setDashboard(...)` only.
  - `frontend/src/Pages/Profile.tsx:316-337` (saving a field such as `displayName`): calls `updateProfile(...)`, then refetches with `getProfile` and calls `setDashboard(updatedData)` only.
Environment Details

No response

Impact

Medium - Feature works but has issues

Code of Conduct
  • I have joined the Discord server and will post updates there
  • I have searched existing issues to avoid duplicates
Dominant language
TypeScript
Stars
104
Forks
244
Avg merge
1d 22h
Merged PRs (30d)
42

Getting set up

  • Ships a Dockerfile or Docker Compose file
  • No pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AOSSIE-Org/DebateAI

All issues in AOSSIE-Org/DebateAI

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.