From c0f06602c598b6139ae8fdb65cf6eedf2f197a65 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 2 Apr 2019 10:47:39 -0600
Subject: [PATCH] Use state instead of forceUpdate
---
src/components/views/rooms/RoomBreadcrumbs.js | 24 +++++++++++--------
1 file changed, 14 insertions(+), 10 deletions(-)
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index dc1bd3097b..69c36e5a65 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -88,8 +88,12 @@ export default class RoomBreadcrumbs extends React.Component {
onMyMembership = (room, membership) => {
if (membership === "leave" || membership === "ban") {
- // Force left rooms to render appropriately
- this.forceUpdate();
+ const rooms = this.state.rooms.slice();
+ const roomState = rooms.find((r) => r.room.roomId === room.roomId);
+ if (roomState) {
+ roomState.left = true;
+ this.setState({rooms});
+ }
}
};
@@ -142,24 +146,24 @@ export default class RoomBreadcrumbs extends React.Component {
return null;
}
const rooms = this.state.rooms;
- const avatars = rooms.map(({room, animated, hover}, i) => {
+ const avatars = rooms.map((r, i) => {
const isFirst = i === 0;
const classes = classNames({
"mx_RoomBreadcrumbs_crumb": true,
- "mx_RoomBreadcrumbs_preAnimate": isFirst && !animated,
+ "mx_RoomBreadcrumbs_preAnimate": isFirst && !r.animated,
"mx_RoomBreadcrumbs_animate": isFirst,
- "mx_RoomBreadcrumbs_left": !['invite', 'join'].includes(room.getMyMembership()),
+ "mx_RoomBreadcrumbs_left": r.left,
});
let tooltip = null;
- if (hover) {
- tooltip = <Tooltip label={room.name} />;
+ if (r.hover) {
+ tooltip = <Tooltip label={r.room.name} />;
}
return (
- <AccessibleButton className={classes} key={room.roomId} onClick={() => this._viewRoom(room)}
- onMouseEnter={() => this._onMouseEnter(room)} onMouseLeave={() => this._onMouseLeave(room)}>
- <RoomAvatar room={room} width={32} height={32} />
+ <AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room)}
+ onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}>
+ <RoomAvatar room={r.room} width={32} height={32} />
{tooltip}
</AccessibleButton>
);