Added option to fav spaces (#52)

src/client/state/RoomList.js

@@ -9,6 +9,8 @@ class RoomList extends EventEmitter {
     this.mDirects = this.getMDirects();
     this.roomIdToParents = new Map();
 
+    this.spaceShortcut = new Set();
+
     this.inviteDirects = new Set();
     this.inviteSpaces = new Set();
     this.inviteRooms = new Set();
@@ -20,11 +22,18 @@ class RoomList extends EventEmitter {
     this.processingRooms = new Map();
 
     this._populateRooms();
+    this._populateSpaceShortcut();
     this._listenEvents();
 
     appDispatcher.register(this.roomActions.bind(this));
   }
 
+  _updateSpaceShortcutData(shortcutList) {
+    const spaceContent = this.matrixClient.getAccountData(cons['in.cinny.spaces'])?.getContent() || {};
+    spaceContent.shortcut = shortcutList;
+    this.matrixClient.setAccountData(cons['in.cinny.spaces'], spaceContent);
+  }
+
   getSpaceChildren(roomId) {
     const space = this.matrixClient.getRoom(roomId);
     const mSpaceChild = space?.currentState.getStateEvents('m.space.child');
@@ -64,6 +73,12 @@ class RoomList extends EventEmitter {
     spaceChildren?.forEach((childRoomId) => {
       this.removeFromRoomIdToParents(childRoomId, roomId);
     });
+
+    if (this.spaceShortcut.has(roomId)) {
+      // if delete space has shortcut remove it.
+      this.spaceShortcut.delete(roomId);
+      this._updateSpaceShortcutData([...this.spaceShortcut]);
+    }
   }
 
   roomActions(action) {
@@ -106,6 +121,18 @@ class RoomList extends EventEmitter {
           });
         }
       },
+      [cons.actions.room.CREATE_SPACE_SHORTCUT]: () => {
+        if (this.spaceShortcut.has(action.roomId)) return;
+        this.spaceShortcut.add(action.roomId);
+        this._updateSpaceShortcutData([...this.spaceShortcut]);
+        this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED, action.roomId);
+      },
+      [cons.actions.room.DELETE_SPACE_SHORTCUT]: () => {
+        if (!this.spaceShortcut.has(action.roomId)) return;
+        this.spaceShortcut.delete(action.roomId);
+        this._updateSpaceShortcutData([...this.spaceShortcut]);
+        this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED, action.roomId);
+      },
     };
     actions[action.type]?.();
   }
@@ -125,6 +152,21 @@ class RoomList extends EventEmitter {
     return mDirectsId;
   }
 
+  _populateSpaceShortcut() {
+    this.spaceShortcut.clear();
+    const spacesContent = this.matrixClient.getAccountData(cons['in.cinny.spaces'])?.getContent();
+
+    if (spacesContent && Array.isArray(spacesContent?.shortcut)) {
+      spacesContent.shortcut.forEach((shortcut) => {
+        if (this.spaces.has(shortcut)) this.spaceShortcut.add(shortcut);
+      });
+      if (spacesContent.shortcut.length !== this.spaceShortcut.size) {
+        // update shortcut list from account data if shortcut space doesn't exist.
+        this._updateSpaceShortcutData([...this.spaceShortcut]);
+      }
+    }
+  }
+
   _populateRooms() {
     this.directs.clear();
     this.roomIdToParents.clear();
@@ -166,6 +208,12 @@ class RoomList extends EventEmitter {
   _listenEvents() {
     // Update roomList when m.direct changes
     this.matrixClient.on('accountData', (event) => {
+      if (event.getType() === cons['in.cinny.spaces']) {
+        this._populateSpaceShortcut();
+        this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED);
+        return;
+      }
+
       if (event.getType() !== 'm.direct') return;
 
       const latestMDirects = this.getMDirects();

src/client/state/cons.js

@@ -6,9 +6,14 @@ const cons = {
     BASE_URL: 'cinny_hs_base_url',
   },
   DEVICE_DISPLAY_NAME: 'Cinny Web',
+  'in.cinny.spaces': 'in.cinny.spaces',
+  tabs: {
+    HOME: 'home',
+    DIRECTS: 'dm',
+  },
   actions: {
     navigation: {
-      CHANGE_TAB: 'CHANGE_TAB',
+      SELECT_TAB: 'SELECT_TAB',
       SELECT_SPACE: 'SELECT_SPACE',
       SELECT_ROOM: 'SELECT_ROOM',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
@@ -24,6 +29,8 @@ const cons = {
       JOIN: 'JOIN',
       LEAVE: 'LEAVE',
       CREATE: 'CREATE',
+      CREATE_SPACE_SHORTCUT: 'CREATE_SPACE_SHORTCUT',
+      DELETE_SPACE_SHORTCUT: 'DELETE_SPACE_SHORTCUT',
       error: {
         CREATE: 'ERROR_CREATE',
       },
@@ -34,7 +41,7 @@ const cons = {
   },
   events: {
     navigation: {
-      TAB_CHANGED: 'TAB_CHANGED',
+      TAB_SELECTED: 'TAB_SELECTED',
       SPACE_SELECTED: 'SPACE_SELECTED',
       ROOM_SELECTED: 'ROOM_SELECTED',
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
@@ -54,6 +61,7 @@ const cons = {
       ROOM_CREATED: 'ROOM_CREATED',
       MY_RECEIPT_ARRIVED: 'MY_RECEIPT_ARRIVED',
       EVENT_ARRIVED: 'EVENT_ARRIVED',
+      SPACE_SHORTCUT_UPDATED: 'SPACE_SHORTCUT_UPDATED',
     },
     roomTimeline: {
       EVENT: 'EVENT',

src/client/state/navigation.js

@@ -6,19 +6,17 @@ class Navigation extends EventEmitter {
   constructor() {
     super();
 
-    this.selectedTab = 'home';
+    this.selectedTab = cons.tabs.HOME;
     this.selectedSpaceId = null;
-    this.selectedSpacePath = [];
+    this.selectedSpacePath = [cons.tabs.HOME];
+
     this.selectedRoomId = null;
     this.isPeopleDrawerVisible = true;
-
-    // TODO:
-    window.navigation = this;
   }
 
   _setSpacePath(roomId) {
-    if (roomId === null) {
-      this.selectedSpacePath = [];
+    if (roomId === null || roomId === cons.tabs.HOME) {
+      this.selectedSpacePath = [cons.tabs.HOME];
       return;
     }
     if (this.selectedSpacePath.includes(roomId)) {
@@ -31,14 +29,24 @@ class Navigation extends EventEmitter {
 
   navigate(action) {
     const actions = {
-      [cons.actions.navigation.CHANGE_TAB]: () => {
+      [cons.actions.navigation.SELECT_TAB]: () => {
         this.selectedTab = action.tabId;
-        this.emit(cons.events.navigation.TAB_CHANGED, this.selectedTab);
+        if (this.selectedTab !== cons.tabs.DIRECTS) {
+          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.selectedSpaceId = action.roomId;
-        this.emit(cons.events.navigation.SPACE_SELECTED, action.roomId);
+        this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
       },
       [cons.actions.navigation.SELECT_ROOM]: () => {
         const prevSelectedRoomId = this.selectedRoomId;