diff --git a/src/app/organisms/navigation/Directs.jsx b/src/app/organisms/navigation/Directs.jsx index 639f4cd4..5f2da8ab 100644 --- a/src/app/organisms/navigation/Directs.jsx +++ b/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({}); - - 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) { - 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); + 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); + }; + + const notiChanged = (roomId, total, prevTotal) => { + if (total === prevTotal) return; + if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) { + drawerPostie.post('unread-change', roomId); + } + }; + 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); }; diff --git a/src/app/organisms/navigation/Drawer.scss b/src/app/organisms/navigation/Drawer.scss index 81e9c8c1..fb42e1d3 100644 --- a/src/app/organisms/navigation/Drawer.scss +++ b/src/app/organisms/navigation/Drawer.scss @@ -64,8 +64,8 @@ } & .cat-header { - margin: var(--sp-normal); - margin-bottom: var(--sp-extra-tight); + margin-top: var(--sp-extra-tight); + padding: var(--sp-extra-tight) var(--sp-normal); text-transform: uppercase; } } \ No newline at end of file diff --git a/src/app/organisms/navigation/Home.jsx b/src/app/organisms/navigation/Home.jsx index 59207a0f..8f3a215c 100644 --- a/src/app/organisms/navigation/Home.jsx +++ b/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) { - 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) { - 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); + 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); + }; + + const notiChanged = (roomId, total, prevTotal) => { + if (total === prevTotal) return; + if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) { + drawerPostie.post('unread-change', roomId); + } + }; + 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) => ( + {name} + ); + return ( <> - { spaceIds.length !== 0 && Spaces } + { spaceIds.length !== 0 && renderCatHeader('Spaces') } { spaceIds.map((id) => ( ))} - { roomIds.length !== 0 && Rooms } + { roomIds.length !== 0 && renderCatHeader('Rooms') } { roomIds.map((id) => ( )) } - { directIds.length !== 0 && People } + {} + + { directIds.length !== 0 && renderCatHeader('People') } { directIds.map((id) => ( { - drawerPostie.subscribe('selector-change', roomId, selectorChanged); - drawerPostie.subscribe('unread-change', roomId, changeNotificationBadge); + drawerPostie.subscribe('selector-change', roomId, forceUpdate); + 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} diff --git a/src/client/event/roomList.js b/src/client/event/roomList.js index 0b88e0c9..bc40a4c5 100644 --- a/src/client/event/roomList.js +++ b/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'; - -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]); -}; +import { selectTab, selectSpace, selectRoom } from '../action/navigation'; 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); -} -function removeRoomListListener(roomList) { - roomList.removeListener(cons.events.roomList.ROOM_LEAVED, listenRoomLeave); + return () => { + roomList.removeListener(cons.events.roomList.ROOM_LEAVED, listenRoomLeave); + }; } -export { initRoomListListener, removeRoomListListener }; +// eslint-disable-next-line import/prefer-default-export +export { initRoomListListener }; diff --git a/src/client/state/AccountData.js b/src/client/state/AccountData.js index f75d861c..88ba0335 100644 --- a/src/client/state/AccountData.js +++ b/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;