michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Refector room list drawer

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-02-27 21:10:54 +05:30
parent a62df536dd
commit 906fc2dd3d
6 changed files with 77 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/app/organisms/navigation/Directs.jsx
View file

@ -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);
};

4
src/app/organisms/navigation/Drawer.scss
View file

@ -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;
}
}

60
src/app/organisms/navigation/Home.jsx
View file

@ -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) => (
<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}

18
src/app/organisms/navigation/Selector.jsx
View file

@ -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] = useState({});
function selectorChanged(selectedRoomId) {
setIsSelected(selectedRoomId === roomId);
}
function changeNotificationBadge() {
forceUpdate({});
}
const [, forceUpdate] = useForceUpdate();
useEffect(() => {
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}

30
src/client/event/roomList.js
View file

@ -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 };

13
src/client/state/AccountData.js
View file

@ -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;