From 016710af6a10cf6547668567ed6c029f7f1b4d02 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 9 Jul 2020 00:43:49 +0100 Subject: [PATCH 1/2] Noop first breadcrumb --- src/components/views/rooms/RoomBreadcrumbs2.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx index 687f4dd73e..f08adebcd2 100644 --- a/src/components/views/rooms/RoomBreadcrumbs2.tsx +++ b/src/components/views/rooms/RoomBreadcrumbs2.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from "react"; import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore"; -import AccessibleButton from "../elements/AccessibleButton"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; import { _t } from "../../../languageHandler"; import { Room } from "matrix-js-sdk/src/models/room"; @@ -88,16 +87,19 @@ export default class RoomBreadcrumbs2 extends React.PureComponent { Analytics.trackEvent("Breadcrumbs", "click_node", index); - defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId}); + // If we're rendering the first breadcrumb and this is it no-op + if (!this.state.skipFirst && index === 0) { + return; + } else { + defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId}); + } }; public render(): React.ReactElement { - // TODO: Decorate crumbs with icons: https://github.com/vector-im/riot-web/issues/14040 - // TODO: Scrolling: https://github.com/vector-im/riot-web/issues/14040 - // TODO: Tooltips: https://github.com/vector-im/riot-web/issues/14040 const tiles = BreadcrumbsStore.instance.rooms.map((r, i) => { const roomTags = RoomListStore.instance.getTagsForRoom(r); const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0]; + const anon = () => this.viewRoom(r, i); return ( Date: Thu, 9 Jul 2020 01:31:44 +0100 Subject: [PATCH 2/2] Move no-op to breadcrumb store --- .../views/rooms/RoomBreadcrumbs2.tsx | 8 +---- src/stores/BreadcrumbsStore.ts | 35 +++++++++++++------ 2 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx index f08adebcd2..602c697d8a 100644 --- a/src/components/views/rooms/RoomBreadcrumbs2.tsx +++ b/src/components/views/rooms/RoomBreadcrumbs2.tsx @@ -87,19 +87,13 @@ export default class RoomBreadcrumbs2 extends React.PureComponent { Analytics.trackEvent("Breadcrumbs", "click_node", index); - // If we're rendering the first breadcrumb and this is it no-op - if (!this.state.skipFirst && index === 0) { - return; - } else { - defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId}); - } + defaultDispatcher.dispatch({action: "view_room", room_id: room.roomId}); }; public render(): React.ReactElement { const tiles = BreadcrumbsStore.instance.rooms.map((r, i) => { const roomTags = RoomListStore.instance.getTagsForRoom(r); const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0]; - const anon = () => this.viewRoom(r, i); return ( { } private async appendRoom(room: Room) { + let updated = false; const rooms = (this.state.rooms || []).slice(); // cheap clone // If the room is upgraded, use that room instead. We'll also splice out @@ -136,30 +137,42 @@ export class BreadcrumbsStore extends AsyncStoreWithClient { // Take out any room that isn't the most recent room for (let i = 0; i < history.length - 1; i++) { const idx = rooms.findIndex(r => r.roomId === history[i].roomId); - if (idx !== -1) rooms.splice(idx, 1); + if (idx !== -1) { + rooms.splice(idx, 1); + updated = true; + } } } // Remove the existing room, if it is present const existingIdx = rooms.findIndex(r => r.roomId === room.roomId); - if (existingIdx !== -1) { - rooms.splice(existingIdx, 1); - } - // Splice the room to the start of the list - rooms.splice(0, 0, room); + // If we're focusing on the first room no-op + if (existingIdx !== 0) { + if (existingIdx !== -1) { + rooms.splice(existingIdx, 1); + } + + // Splice the room to the start of the list + rooms.splice(0, 0, room); + updated = true; + } if (rooms.length > MAX_ROOMS) { // This looks weird, but it's saying to start at the MAX_ROOMS point in the // list and delete everything after it. rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS); + updated = true; } - // Update the breadcrumbs - await this.updateState({rooms}); - const roomIds = rooms.map(r => r.roomId); - if (roomIds.length > 0) { - await SettingsStore.setValue("breadcrumb_rooms", null, SettingLevel.ACCOUNT, roomIds); + + if (updated) { + // Update the breadcrumbs + await this.updateState({rooms}); + const roomIds = rooms.map(r => r.roomId); + if (roomIds.length > 0) { + await SettingsStore.setValue("breadcrumb_rooms", null, SettingLevel.ACCOUNT, roomIds); + } } }