Refector room list drawer

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/navigation/Directs.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -15,42 +15,26 @@ function Directs() {
   const { roomList, notifications } = initMatrix;
   const directIds = [...roomList.directs].sort(AtoZ);
 
-  const [, forceUpdate] = useState({});
+  useEffect(() => {
-
+    const selectorChanged = (selectedRoomId, prevSelectedRoomId) => {
-  function selectorChanged(selectedRoomId, prevSelectedRoomId) {
       if (!drawerPostie.hasTopic('selector-change')) return;
       const addresses = [];
       if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
       if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
       if (addresses.length === 0) return;
       drawerPostie.post('selector-change', addresses, selectedRoomId);
-  }
+    };
 
-  function notiChanged(roomId, total, prevTotal) {
+    const notiChanged = (roomId, total, prevTotal) => {
       if (total === prevTotal) return;
       if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
         drawerPostie.post('unread-change', roomId);
       }
-  }
+    };
 
-  function roomListUpdated() {
-    const { spaces, rooms, directs } = initMatrix.roomList;
-    if (!(
-      spaces.has(navigation.selectedRoomId)
-      || rooms.has(navigation.selectedRoomId)
-      || directs.has(navigation.selectedRoomId))
-    ) {
-      selectRoom(null);
-    }
-    forceUpdate({});
-  }
-
-  useEffect(() => {
-    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
     navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
     notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
     return () => {
-      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
       notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
     };

src/app/organisms/navigation/Drawer.scss

@@ -64,8 +64,8 @@
   }
 
   & .cat-header {
-    margin: var(--sp-normal);
+    margin-top: var(--sp-extra-tight);
-    margin-bottom: var(--sp-extra-tight);
+    padding: var(--sp-extra-tight) var(--sp-normal);
     text-transform: uppercase;
   }
 }

src/app/organisms/navigation/Home.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
@@ -14,7 +14,6 @@ import { AtoZ } from './common';
 
 const drawerPostie = new Postie();
 function Home({ spaceId }) {
-  const [, forceUpdate] = useState({});
   const { roomList, notifications } = initMatrix;
   let spaceIds = [];
   let roomIds = [];
@@ -32,47 +31,38 @@ function Home({ spaceId }) {
       .filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
   }
 
-  function selectorChanged(selectedRoomId, prevSelectedRoomId) {
+  useEffect(() => {
+    const selectorChanged = (selectedRoomId, prevSelectedRoomId) => {
       if (!drawerPostie.hasTopic('selector-change')) return;
       const addresses = [];
       if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
       if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
       if (addresses.length === 0) return;
       drawerPostie.post('selector-change', addresses, selectedRoomId);
-  }
+    };
-  function notiChanged(roomId, total, prevTotal) {
+
+    const notiChanged = (roomId, total, prevTotal) => {
       if (total === prevTotal) return;
       if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
         drawerPostie.post('unread-change', roomId);
       }
-  }
+    };
 
-  function roomListUpdated() {
-    const { spaces, rooms, directs } = initMatrix.roomList;
-    if (!(
-      spaces.has(navigation.selectedRoomId)
-      || rooms.has(navigation.selectedRoomId)
-      || directs.has(navigation.selectedRoomId))
-    ) {
-      selectRoom(null);
-    }
-    forceUpdate({});
-  }
-
-  useEffect(() => {
-    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
     navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
     notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
     return () => {
-      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
       navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
       notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
     };
   }, []);
 
+  const renderCatHeader = (name) => (
+    <Text className="cat-header" variant="b3" weight="bold">{name}</Text>
+  );
+
   return (
     <>
-      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Spaces</Text> }
+      { spaceIds.length !== 0 && renderCatHeader('Spaces') }
       { spaceIds.map((id) => (
         <Selector
           key={id}
@@ -83,7 +73,7 @@ function Home({ spaceId }) {
         />
       ))}
 
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Rooms</Text> }
+      { roomIds.length !== 0 && renderCatHeader('Rooms') }
       { roomIds.map((id) => (
         <Selector
           key={id}
@@ -94,7 +84,9 @@ function Home({ spaceId }) {
         />
       )) }
 
-      { directIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">People</Text> }
+      {}
+
+      { directIds.length !== 0 && renderCatHeader('People') }
       { directIds.map((id) => (
         <Selector
           key={id}

src/app/organisms/navigation/Selector.jsx

@@ -15,6 +15,8 @@ import SpaceOptions from '../../molecules/space-options/SpaceOptions';
 
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
 function Selector({
   roomId, isDM, drawerPostie, onClick,
 }) {
@@ -24,19 +26,11 @@ function Selector({
   let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
   if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
 
-  const [isSelected, setIsSelected] = useState(navigation.selectedRoomId === roomId);
+  const [, forceUpdate] = useForceUpdate();
-  const [, forceUpdate] = useState({});
-
-  function selectorChanged(selectedRoomId) {
-    setIsSelected(selectedRoomId === roomId);
-  }
-  function changeNotificationBadge() {
-    forceUpdate({});
-  }
 
   useEffect(() => {
-    drawerPostie.subscribe('selector-change', roomId, selectorChanged);
+    drawerPostie.subscribe('selector-change', roomId, forceUpdate);
-    drawerPostie.subscribe('unread-change', roomId, changeNotificationBadge);
+    drawerPostie.subscribe('unread-change', roomId, forceUpdate);
     return () => {
       drawerPostie.unsubscribe('selector-change', roomId);
       drawerPostie.unsubscribe('unread-change', roomId);
@@ -61,7 +55,7 @@ function Selector({
       roomId={roomId}
       imageSrc={isDM ? imageSrc : null}
       iconSrc={isDM ? null : joinRuleToIconSrc(room.getJoinRule(), room.isSpaceRoom())}
-      isSelected={isSelected}
+      isSelected={navigation.selectedRoomId === roomId}
       isUnread={noti.hasNoti(roomId)}
       notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
       isAlert={noti.getHighlightNoti(roomId) !== 0}

src/client/event/roomList.js

@@ -1,19 +1,25 @@
 import cons from '../state/cons';
 import navigation from '../state/navigation';
-import { selectTab, selectSpace } from '../action/navigation';
+import { selectTab, selectSpace, selectRoom } from '../action/navigation';
-
-const listenRoomLeave = (roomId) => {
-  const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
-  if (lRoomIndex === -1) return;
-  if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
-  else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
-};
 
 function initRoomListListener(roomList) {
+  const listenRoomLeave = (roomId) => {
+    if (navigation.selectedRoomId === roomId) {
+      selectRoom(null);
+    }
+
+    if (navigation.selectedSpacePath.includes(roomId)) {
+      const idIndex = navigation.selectedSpacePath.indexOf(roomId);
+      if (idIndex === 0) selectTab(cons.tabs.HOME);
+      else selectSpace(navigation.selectedSpacePath[idIndex - 1]);
+    }
+  };
+
   roomList.on(cons.events.roomList.ROOM_LEAVED, listenRoomLeave);
-}
+  return () => {
-function removeRoomListListener(roomList) {
     roomList.removeListener(cons.events.roomList.ROOM_LEAVED, listenRoomLeave);
+  };
 }
 
-export { initRoomListListener, removeRoomListListener };
+// eslint-disable-next-line import/prefer-default-export
+export { initRoomListListener };

src/client/state/AccountData.js

@@ -14,14 +14,17 @@ class AccountData extends EventEmitter {
     this._populateSpaceShortcut();
     this._listenEvents();
 
-    appDispatcher.register(this.roomActions.bind(this));
+    appDispatcher.register(this.accountActions.bind(this));
+  }
+
+  _getAccountData() {
+    return this.matrixClient.getAccountData(cons.IN_CINNY_SPACES)?.getContent() || {};
   }
 
   _populateSpaceShortcut() {
     this.spaceShortcut.clear();
-    const spacesContent = this.matrixClient.getAccountData(cons.IN_CINNY_SPACES)?.getContent();
+    const spacesContent = this._getAccountData();
 
-    if (!spacesContent) return;
     if (spacesContent?.shortcut === undefined) return;
 
     spacesContent.shortcut.forEach((shortcut) => {
@@ -35,12 +38,12 @@ class AccountData extends EventEmitter {
   }
 
   _updateSpaceShortcutData(shortcutList) {
-    const spaceContent = this.matrixClient.getAccountData(cons.IN_CINNY_SPACES)?.getContent() || {};
+    const spaceContent = this._getAccountData();
     spaceContent.shortcut = shortcutList;
     this.matrixClient.setAccountData(cons.IN_CINNY_SPACES, spaceContent);
   }
 
-  roomActions(action) {
+  accountActions(action) {
     const actions = {
       [cons.actions.accountData.CREATE_SPACE_SHORTCUT]: () => {
         if (this.spaceShortcut.has(action.roomId)) return;