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

src/app/atoms/modal/RawModal.scss

@@ -3,7 +3,7 @@
   --medium-modal-width: 712px;
   --large-modal-width: 1024px;
 
-
+  position: relative;
   width: 100%;
   max-height: 100%;
   border-radius: var(--bo-radius);

src/app/organisms/join-alias/JoinAlias.jsx

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

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -6,7 +6,7 @@ import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
 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 { abbreviateNumber } from '../../../util/common';
 
@@ -107,7 +107,10 @@ function DrawerBreadcrumb({ spaceId }) {
                   { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
                   <Button
                     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>
                     { noti !== null && (

src/client/action/navigation.js

@@ -2,6 +2,14 @@ import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
 export function selectTab(tabId) {
+  const roomId = (tabId !== cons.tabs.HOME && tabId !== cons.tabs.DIRECTS) ? tabId : null;
+
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.SELECT_SPACE,
+    roomId,
+    asBase: true,
+  });
+
   appDispatcher.dispatch({
     type: cons.actions.navigation.SELECT_TAB,
     tabId,

src/client/initMatrix.js

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

src/client/state/navigation.js

@@ -5,6 +5,8 @@ import cons from './cons';
 class Navigation extends EventEmitter {
   constructor() {
     super();
+    // this will attached by initMatrix
+    this.initMatrix = {};
 
     this.selectedTab = cons.tabs.HOME;
     this.selectedSpaceId = null;
@@ -14,14 +16,20 @@ class Navigation extends EventEmitter {
     this.isRoomSettings = false;
     this.recentRooms = [];
 
+    this.selectedSpaceToRoom = new Map();
+
     this.rawModelStack = [];
   }
 
-  _setSpacePath(roomId) {
+  _setSpacePath(roomId, asBase) {
-    if (roomId === null || roomId === cons.tabs.HOME) {
+    if (typeof roomId !== 'string') {
       this.selectedSpacePath = [cons.tabs.HOME];
       return;
     }
+    if (asBase) {
+      this.selectedSpacePath = [roomId];
+      return;
+    }
     if (this.selectedSpacePath.includes(roomId)) {
       const spIndex = this.selectedSpacePath.indexOf(roomId);
       this.selectedSpacePath = this.selectedSpacePath.slice(0, spIndex + 1);
@@ -30,6 +38,106 @@ class Navigation extends EventEmitter {
     this.selectedSpacePath.push(roomId);
   }
 
+  _addSelectedSpaceToRoom(roomId) {
+    const { roomList } = this.initMatrix;
+    if (
+      this.selectedTab === cons.tabs.HOME
+      && roomList.rooms.has(roomId)
+      && !roomList.roomIdToParents.has(roomId)
+    ) {
+      this.selectedSpaceToRoom.set(cons.tabs.HOME, {
+        roomId,
+        timestamp: Date.now(),
+      });
+      return;
+    }
+    if (this.selectedTab === cons.tabs.DIRECTS && roomList.directs.has(roomId)) {
+      this.selectedSpaceToRoom.set(cons.tabs.DIRECTS, {
+        roomId,
+        timestamp: Date.now(),
+      });
+      return;
+    }
+
+    const parents = roomList.roomIdToParents.get(roomId);
+    if (!parents) return;
+
+    if (parents.has(this.selectedSpaceId)) {
+      this.selectedSpaceToRoom.set(this.selectedSpaceId, {
+        roomId,
+        timestamp: Date.now(),
+      });
+    }
+  }
+
+  _selectRoom(roomId, eventId) {
+    const prevSelectedRoomId = this.selectedRoomId;
+    this.selectedRoomId = roomId;
+    this._addSelectedSpaceToRoom(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,
+    );
+  }
+
+  _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;
+  }
+
+  _selectRoomWithSpace(spaceId) {
+    if (!spaceId) return;
+    const data = this.selectedSpaceToRoom.get(spaceId);
+    if (data) {
+      this._selectRoom(data.roomId);
+      return;
+    }
+
+    const { roomList } = this.initMatrix;
+    const children = roomList.getSpaceChildren(spaceId);
+    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.selectedSpaceToRoom.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) {
     if (typeof roomId !== 'string') return;
     const roomIdIndex = this.recentRooms.indexOf(roomId);
@@ -60,39 +168,17 @@ class Navigation extends EventEmitter {
     const actions = {
       [cons.actions.navigation.SELECT_TAB]: () => {
         this.selectedTab = action.tabId;
-        if (this.selectedTab !== cons.tabs.DIRECTS) {
+        this._selectRoomWithTab(this.selectedTab);
-          if (this.selectedTab === cons.tabs.HOME) {
-            this.selectedSpacePath = [cons.tabs.HOME];
-            this.selectedSpaceId = null;
-          } else {
-            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]: () => {
-        this._setSpacePath(action.roomId);
+        this._setSpacePath(action.roomId, action.asBase);
-        this.selectedSpaceId = action.roomId === cons.tabs.HOME ? null : action.roomId;
+        this.selectedSpaceId = action.roomId;
+        if (!action.asBase) this._selectRoomWithSpace(this.selectedSpaceId);
         this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
       },
       [cons.actions.navigation.SELECT_ROOM]: () => {
-        const prevSelectedRoomId = this.selectedRoomId;
+        this._selectRoom(action.roomId, action.eventId);
-        this.selectedRoomId = action.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,
-          action.eventId,
-        );
       },
       [cons.actions.navigation.OPEN_SPACE_SETTINGS]: () => {
         this.emit(cons.events.navigation.SPACE_SETTINGS_OPENED, action.roomId, action.tabText);