Private
Public Access
Fix profile save UX: close modal on success, refresh room members live
Saving a display name previously gave no feedback and left the modal open, and an open room's message list/member panel kept showing the pre-edit profile until reload -- both fetch that data from a member list ChatShellPage only fetched once per room. Now the save closes the modal (clear confirmation it worked) and ChatShellPage re-fetches room members whenever the logged-in user's own display_name/avatar_filename changes, so the update appears immediately everywhere without a reload.
This commit is contained in:
@@ -28,9 +28,9 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
|
|||||||
try {
|
try {
|
||||||
const updated = await updateProfile(displayName.trim() || null)
|
const updated = await updateProfile(displayName.trim() || null)
|
||||||
updateUser(updated)
|
updateUser(updated)
|
||||||
|
onClose()
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err instanceof ApiError ? err.message : String(err))
|
setError(err instanceof ApiError ? err.message : String(err))
|
||||||
} finally {
|
|
||||||
setSavingName(false)
|
setSavingName(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import { OfflineBanner } from '../components/OfflineBanner'
|
|||||||
import { RoomInfoPanel } from '../components/RoomInfoPanel'
|
import { RoomInfoPanel } from '../components/RoomInfoPanel'
|
||||||
import { Sidebar } from '../components/Sidebar'
|
import { Sidebar } from '../components/Sidebar'
|
||||||
import { TopBar } from '../components/TopBar'
|
import { TopBar } from '../components/TopBar'
|
||||||
|
import { useAuth } from '../context/AuthContext'
|
||||||
import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
|
import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
|
||||||
import type { MyRoomItem, RoomMember } from '../types'
|
import type { MyRoomItem, RoomMember } from '../types'
|
||||||
import './ChatShellPage.css'
|
import './ChatShellPage.css'
|
||||||
@@ -20,6 +21,7 @@ type ModalKind = 'new' | 'browse' | 'invites' | null
|
|||||||
export function ChatShellPage() {
|
export function ChatShellPage() {
|
||||||
const { roomId } = useParams<{ roomId?: string }>()
|
const { roomId } = useParams<{ roomId?: string }>()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
|
const { user } = useAuth()
|
||||||
const width = useWindowWidth()
|
const width = useWindowWidth()
|
||||||
const isMobile = width < MOBILE_BREAKPOINT
|
const isMobile = width < MOBILE_BREAKPOINT
|
||||||
|
|
||||||
@@ -65,7 +67,13 @@ export function ChatShellPage() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
refreshMembers()
|
refreshMembers()
|
||||||
}, [refreshMembers])
|
// Also re-run when the logged-in user's own profile changes (display
|
||||||
|
// name/avatar) -- refreshMembers() itself doesn't change identity when
|
||||||
|
// only roomId is the same, so without this the currently open room's
|
||||||
|
// member list (and anything resolving avatar/name from it, like
|
||||||
|
// MessageList) would keep showing the pre-edit profile until the room
|
||||||
|
// is reopened.
|
||||||
|
}, [refreshMembers, user?.display_name, user?.avatar_filename])
|
||||||
|
|
||||||
function goToRoom(id: string) {
|
function goToRoom(id: string) {
|
||||||
navigate(`/rooms/${id}`)
|
navigate(`/rooms/${id}`)
|
||||||
|
|||||||
Reference in New Issue
Block a user