Update sidebar on room/space switch (#768)

* Select last room on space/tab change (#353)

* Update sidbar on room select from search (#374)

* Select last room on space/tab change (#353)

* Update sidbar on room select from search (#374)

* Fix wrong space gets selected with some rooms

* Fix auto select room in categorized space

* Fix room remain selected on leave

* Fix leaved room appear in category & search

* Remove globally exposed vars

* Hide pin spaces from home

* Fix selecting dm always open dm tab

* Order category by AtoZ (#769)

Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>
This commit is contained in:
Ajay Bura 2022-08-20 20:51:37 +05:30 committed by GitHub
parent 1deef51df0
commit 7e28aa1474
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 261 additions and 42 deletions

View file

@ -38,10 +38,10 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
const spaceChildren = roomList.getCategorizedSpaces([roomId]); const spaceChildren = roomList.getCategorizedSpaces([roomId]);
spaceChildren?.forEach((childIds, spaceId) => { spaceChildren?.forEach((childIds) => {
childIds?.forEach((childId) => { childIds?.forEach((childId) => {
markAsRead(childId); markAsRead(childId);
}) });
}); });
afterOptionSelect(); afterOptionSelect();
}; };

View file

@ -6,7 +6,7 @@ import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { join } from '../../../client/action/room'; import { join } from '../../../client/action/room';
import { selectRoom, selectSpace } from '../../../client/action/navigation'; import { selectRoom, selectTab } from '../../../client/action/navigation';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
@ -32,7 +32,7 @@ function JoinAliasContent({ term, requestClose }) {
const openRoom = (roomId) => { const openRoom = (roomId) => {
const room = mx.getRoom(roomId); const room = mx.getRoom(roomId);
if (!room) return; if (!room) return;
if (room.isSpaceRoom()) selectSpace(roomId); if (room.isSpaceRoom()) selectTab(roomId);
else selectRoom(roomId); else selectRoom(roomId);
requestClose(); requestClose();
}; };

View file

@ -6,7 +6,7 @@ import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import { selectSpace } from '../../../client/action/navigation'; import { selectTab, selectSpace } from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { abbreviateNumber } from '../../../util/common'; import { abbreviateNumber } from '../../../util/common';
@ -107,7 +107,10 @@ function DrawerBreadcrumb({ spaceId }) {
{ index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />} { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
<Button <Button
className={index === spacePath.length - 1 ? 'drawer-breadcrumb__btn--selected' : ''} className={index === spacePath.length - 1 ? 'drawer-breadcrumb__btn--selected' : ''}
onClick={() => selectSpace(id)} onClick={() => {
if (id === cons.tabs.HOME) selectTab(id);
else selectSpace(id);
}}
> >
<Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text> <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : twemojify(mx.getRoom(id).name)}</Text>
{ noti !== null && ( { noti !== null && (

View file

@ -30,7 +30,7 @@ function Home({ spaceId }) {
roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId)); roomIds = spaceChildIds.filter((roomId) => rooms.has(roomId));
directIds = spaceChildIds.filter((roomId) => directs.has(roomId)); directIds = spaceChildIds.filter((roomId) => directs.has(roomId));
} else { } else {
spaceIds = roomList.getOrphanSpaces(); spaceIds = roomList.getOrphanSpaces().filter((id) => !accountData.spaceShortcut.has(id));
roomIds = roomList.getOrphanRooms(); roomIds = roomList.getOrphanRooms();
} }
@ -80,10 +80,10 @@ function Home({ spaceId }) {
<RoomsCategory name="People" roomIds={directIds.sort(roomIdByActivity)} drawerPostie={drawerPostie} /> <RoomsCategory name="People" roomIds={directIds.sort(roomIdByActivity)} drawerPostie={drawerPostie} />
)} )}
{ isCategorized && [...categories].map(([catId, childIds]) => { { isCategorized && [...categories.keys()].sort(roomIdByAtoZ).map((catId) => {
const rms = []; const rms = [];
const dms = []; const dms = [];
childIds.forEach((id) => { categories.get(catId).forEach((id) => {
if (directs.has(id)) dms.push(id); if (directs.has(id)) dms.push(id);
else rms.push(id); else rms.push(id);
}); });

View file

@ -4,6 +4,17 @@ import { selectTab, selectSpace, selectRoom } from '../action/navigation';
function initRoomListListener(roomList) { function initRoomListListener(roomList) {
const listenRoomLeave = (roomId) => { const listenRoomLeave = (roomId) => {
const parents = roomList.roomIdToParents.get(roomId);
if (parents) {
[...parents].forEach((pId) => {
const data = navigation.spaceToRoom.get(pId);
if (data?.roomId === roomId) {
navigation.spaceToRoom.delete(pId);
}
});
}
if (navigation.selectedRoomId === roomId) { if (navigation.selectedRoomId === roomId) {
selectRoom(null); selectRoom(null);
} }
@ -13,6 +24,8 @@ function initRoomListListener(roomList) {
if (idIndex === 0) selectTab(cons.tabs.HOME); if (idIndex === 0) selectTab(cons.tabs.HOME);
else selectSpace(navigation.selectedSpacePath[idIndex - 1]); else selectSpace(navigation.selectedSpacePath[idIndex - 1]);
} }
navigation.removeRecentRoom(roomId);
}; };
roomList.on(cons.events.roomList.ROOM_LEAVED, listenRoomLeave); roomList.on(cons.events.roomList.ROOM_LEAVED, listenRoomLeave);

View file

@ -8,12 +8,19 @@ import AccountData from './state/AccountData';
import RoomsInput from './state/RoomsInput'; import RoomsInput from './state/RoomsInput';
import Notifications from './state/Notifications'; import Notifications from './state/Notifications';
import { cryptoCallbacks } from './state/secretStorageKeys'; import { cryptoCallbacks } from './state/secretStorageKeys';
import navigation from './state/navigation';
global.Olm = require('@matrix-org/olm'); global.Olm = require('@matrix-org/olm');
// logger.disableAll(); // logger.disableAll();
class InitMatrix extends EventEmitter { class InitMatrix extends EventEmitter {
constructor() {
super();
navigation.initMatrix = this;
}
async init() { async init() {
await this.startClient(); await this.startClient();
this.setupSync(); this.setupSync();

View file

@ -89,7 +89,7 @@ class RoomList extends EventEmitter {
child.forEach((childId) => { child.forEach((childId) => {
const room = this.matrixClient.getRoom(childId); const room = this.matrixClient.getRoom(childId);
if (room === null) return; if (room === null || room.getMyMembership() !== 'join') return;
if (room.isSpaceRoom()) categorizeSpace(childId); if (room.isSpaceRoom()) categorizeSpace(childId);
else mappedChild.add(childId); else mappedChild.add(childId);
}); });

View file

@ -5,6 +5,8 @@ import cons from './cons';
class Navigation extends EventEmitter { class Navigation extends EventEmitter {
constructor() { constructor() {
super(); super();
// this will attached by initMatrix
this.initMatrix = {};
this.selectedTab = cons.tabs.HOME; this.selectedTab = cons.tabs.HOME;
this.selectedSpaceId = null; this.selectedSpaceId = null;
@ -14,14 +16,20 @@ class Navigation extends EventEmitter {
this.isRoomSettings = false; this.isRoomSettings = false;
this.recentRooms = []; this.recentRooms = [];
this.spaceToRoom = new Map();
this.rawModelStack = []; this.rawModelStack = [];
} }
_setSpacePath(roomId) { _addToSpacePath(roomId, asRoot) {
if (roomId === null || roomId === cons.tabs.HOME) { if (typeof roomId !== 'string') {
this.selectedSpacePath = [cons.tabs.HOME]; this.selectedSpacePath = [cons.tabs.HOME];
return; return;
} }
if (asRoot) {
this.selectedSpacePath = [roomId];
return;
}
if (this.selectedSpacePath.includes(roomId)) { if (this.selectedSpacePath.includes(roomId)) {
const spIndex = this.selectedSpacePath.indexOf(roomId); const spIndex = this.selectedSpacePath.indexOf(roomId);
this.selectedSpacePath = this.selectedSpacePath.slice(0, spIndex + 1); this.selectedSpacePath = this.selectedSpacePath.slice(0, spIndex + 1);
@ -30,6 +38,215 @@ class Navigation extends EventEmitter {
this.selectedSpacePath.push(roomId); this.selectedSpacePath.push(roomId);
} }
_mapRoomToSpace(roomId) {
const { roomList } = this.initMatrix;
if (
this.selectedTab === cons.tabs.HOME
&& roomList.rooms.has(roomId)
&& !roomList.roomIdToParents.has(roomId)
) {
this.spaceToRoom.set(cons.tabs.HOME, {
roomId,
timestamp: Date.now(),
});
return;
}
if (this.selectedTab === cons.tabs.DIRECTS && roomList.directs.has(roomId)) {
this.spaceToRoom.set(cons.tabs.DIRECTS, {
roomId,
timestamp: Date.now(),
});
return;
}
const parents = roomList.roomIdToParents.get(roomId);
if (!parents) return;
[...parents].forEach((pId) => {
this.spaceToRoom.set(pId, {
roomId,
timestamp: Date.now(),
});
});
}
_selectRoom(roomId, eventId) {
const prevSelectedRoomId = this.selectedRoomId;
this.selectedRoomId = roomId;
if (prevSelectedRoomId !== roomId) this._mapRoomToSpace(roomId);
this.removeRecentRoom(prevSelectedRoomId);
this.addRecentRoom(prevSelectedRoomId);
this.removeRecentRoom(this.selectedRoomId);
if (this.isRoomSettings && typeof this.selectedRoomId === 'string') {
this.isRoomSettings = !this.isRoomSettings;
this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
}
this.emit(
cons.events.navigation.ROOM_SELECTED,
this.selectedRoomId,
prevSelectedRoomId,
eventId,
);
}
_selectTabWithRoom(roomId) {
const { roomList, accountData } = this.initMatrix;
const { categorizedSpaces } = accountData;
if (roomList.isOrphan(roomId)) {
if (roomList.directs.has(roomId)) {
this._selectSpace(null, true, false);
this._selectTab(cons.tabs.DIRECTS, false);
return;
}
this._selectSpace(null, true, false);
this._selectTab(cons.tabs.HOME, false);
return;
}
const parents = roomList.roomIdToParents.get(roomId);
if (parents.has(this.selectedSpaceId)) {
return;
}
if (categorizedSpaces.has(this.selectedSpaceId)) {
const categories = roomList.getCategorizedSpaces([this.selectedSpaceId]);
if ([...parents].find((pId) => categories.has(pId))) {
// No need to select tab
// As one of parent is child of selected categorized space.
return;
}
}
const spaceInPath = [...this.selectedSpacePath].reverse().find((sId) => parents.has(sId));
if (spaceInPath) {
this._selectSpace(spaceInPath, false, false);
return;
}
if (roomList.directs.has(roomId)) {
this._selectSpace(null, true, false);
this._selectTab(cons.tabs.DIRECTS, false);
return;
}
if (parents.size > 0) {
const sortedParents = [...parents].sort((p1, p2) => {
const t1 = this.spaceToRoom.get(p1)?.timestamp ?? 0;
const t2 = this.spaceToRoom.get(p2)?.timestamp ?? 0;
return t2 - t1;
});
this._selectSpace(sortedParents[0], true, false);
this._selectTab(sortedParents[0], false);
}
}
_getLatestActiveRoomId(roomIds) {
const mx = this.initMatrix.matrixClient;
let ts = 0;
let roomId = null;
roomIds.forEach((childId) => {
const room = mx.getRoom(childId);
if (!room) return;
const newTs = room.getLastActiveTimestamp();
if (newTs > ts) {
ts = newTs;
roomId = childId;
}
});
return roomId;
}
_getLatestSelectedRoomId(spaceIds) {
let ts = 0;
let roomId = null;
spaceIds.forEach((sId) => {
const data = this.spaceToRoom.get(sId);
if (!data) return;
const newTs = data.timestamp;
if (newTs > ts) {
ts = newTs;
roomId = data.roomId;
}
});
return roomId;
}
_selectTab(tabId, selectRoom = true) {
this.selectedTab = tabId;
if (selectRoom) this._selectRoomWithTab(this.selectedTab);
this.emit(cons.events.navigation.TAB_SELECTED, this.selectedTab);
}
_selectSpace(roomId, asRoot, selectRoom = true) {
this._addToSpacePath(roomId, asRoot);
this.selectedSpaceId = roomId;
if (!asRoot && selectRoom) this._selectRoomWithSpace(this.selectedSpaceId);
this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
}
_selectRoomWithSpace(spaceId) {
if (!spaceId) return;
const { roomList, accountData, matrixClient } = this.initMatrix;
const { categorizedSpaces } = accountData;
const data = this.spaceToRoom.get(spaceId);
if (data && !categorizedSpaces.has(spaceId)) {
this._selectRoom(data.roomId);
return;
}
const children = [];
if (categorizedSpaces.has(spaceId)) {
const categories = roomList.getCategorizedSpaces([spaceId]);
const latestSelectedRoom = this._getLatestSelectedRoomId([...categories.keys()]);
if (latestSelectedRoom) {
this._selectRoom(latestSelectedRoom);
return;
}
categories?.forEach((categoryId) => {
categoryId?.forEach((childId) => {
children.push(childId);
});
});
} else {
roomList.getSpaceChildren(spaceId).forEach((id) => {
if (matrixClient.getRoom(id)?.isSpaceRoom() === false) {
children.push(id);
}
});
}
if (!children) {
this._selectRoom(null);
return;
}
this._selectRoom(this._getLatestActiveRoomId(children));
}
_selectRoomWithTab(tabId) {
const { roomList } = this.initMatrix;
if (tabId === cons.tabs.HOME || tabId === cons.tabs.DIRECTS) {
const data = this.spaceToRoom.get(tabId);
if (data) {
this._selectRoom(data.roomId);
return;
}
const children = tabId === cons.tabs.HOME ? roomList.getOrphanRooms() : [...roomList.directs];
this._selectRoom(this._getLatestActiveRoomId(children));
return;
}
this._selectRoomWithSpace(tabId);
}
removeRecentRoom(roomId) { removeRecentRoom(roomId) {
if (typeof roomId !== 'string') return; if (typeof roomId !== 'string') return;
const roomIdIndex = this.recentRooms.indexOf(roomId); const roomIdIndex = this.recentRooms.indexOf(roomId);
@ -59,40 +276,19 @@ class Navigation extends EventEmitter {
navigate(action) { navigate(action) {
const actions = { const actions = {
[cons.actions.navigation.SELECT_TAB]: () => { [cons.actions.navigation.SELECT_TAB]: () => {
this.selectedTab = action.tabId; const roomId = (
if (this.selectedTab !== cons.tabs.DIRECTS) { action.tabId !== cons.tabs.HOME && action.tabId !== cons.tabs.DIRECTS
if (this.selectedTab === cons.tabs.HOME) { ) ? action.tabId : null;
this.selectedSpacePath = [cons.tabs.HOME];
this.selectedSpaceId = null; this._selectSpace(roomId, true);
} else { this._selectTab(action.tabId);
this.selectedSpacePath = [this.selectedTab];
this.selectedSpaceId = this.selectedTab;
}
this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
} else this.selectedSpaceId = null;
this.emit(cons.events.navigation.TAB_SELECTED, this.selectedTab);
}, },
[cons.actions.navigation.SELECT_SPACE]: () => { [cons.actions.navigation.SELECT_SPACE]: () => {
this._setSpacePath(action.roomId); this._selectSpace(action.roomId, false);
this.selectedSpaceId = action.roomId === cons.tabs.HOME ? null : action.roomId;
this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
}, },
[cons.actions.navigation.SELECT_ROOM]: () => { [cons.actions.navigation.SELECT_ROOM]: () => {
const prevSelectedRoomId = this.selectedRoomId; if (action.roomId) this._selectTabWithRoom(action.roomId);
this.selectedRoomId = action.roomId; this._selectRoom(action.roomId, action.eventId);
this.removeRecentRoom(prevSelectedRoomId);
this.addRecentRoom(prevSelectedRoomId);
this.removeRecentRoom(this.selectedRoomId);
if (this.isRoomSettings && typeof this.selectedRoomId === 'string') {
this.isRoomSettings = !this.isRoomSettings;
this.emit(cons.events.navigation.ROOM_SETTINGS_TOGGLED, this.isRoomSettings);
}
this.emit(
cons.events.navigation.ROOM_SELECTED,
this.selectedRoomId,
prevSelectedRoomId,
action.eventId,
);
}, },
[cons.actions.navigation.OPEN_SPACE_SETTINGS]: () => { [cons.actions.navigation.OPEN_SPACE_SETTINGS]: () => {
this.emit(cons.events.navigation.SPACE_SETTINGS_OPENED, action.roomId, action.tabText); this.emit(cons.events.navigation.SPACE_SETTINGS_OPENED, action.roomId, action.tabText);