Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
#770 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@mithunkc017-ship-it ci sta già lavorando.

Dal 24/10/2026.

  • #771 di @mithunkc017-ship-it — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
85/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia da frontend/src/components/Header.tsx e frontend/src/Pages/Profile.tsx, che il issue identifica come file che leggono e aggiornano copie separate dello stato utente. Segui gli handler corretti di aggiornamento dell'avatar e del nome visualizzato per individuare dove può essere aggiornato il userAtom condiviso, quindi verifica che l'intestazione rifletta i nuovi valori senza ricaricare la pagina. Esegui i controlli frontend pertinenti e riproduci entrambi i flussi di aggiornamento del profilo per confermare la correzione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
105
Fork
258
Merge medio
1g 21h
PR unite (30g)
43

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di AOSSIE-Org/DebateAI

Tutte le issue di AOSSIE-Org/DebateAI

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.