MCorange/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added unread symbol for Spaces, DMs and Home (#82)

Browse Source
This commit is contained in:
Ajay Bura
2021-09-12 20:44:13 +05:30
parent fc0dc8aea0
commit b07c50e580
14 changed files with 229 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/organisms/navigation/SideBar.jsx
View File

@@ -9,6 +9,7 @@ import {
selectTab, openInviteList, openPublicRooms, openSettings,
} from '../../../client/action/navigation';
import navigation from '../../../client/state/navigation';
import { abbreviateNumber } from '../../../util/common';
import ScrollView from '../../atoms/scroll/ScrollView';
import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
@@ -55,7 +56,7 @@ function ProfileAvatarMenu() {
}
function SideBar() {
const { roomList } = initMatrix;
const { roomList, notifications } = initMatrix;
const mx = initMatrix.matrixClient;
const totalInviteCount = () => roomList.inviteRooms.size
+ roomList.inviteSpaces.size
@@ -74,33 +75,83 @@ function SideBar() {
function onSpaceShortcutUpdated() {
forceUpdate({});
}
function onNotificationChanged(roomId, total, prevTotal) {
if (total === prevTotal) return;
forceUpdate({});
}
useEffect(() => {
navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
initMatrix.roomList.on(
cons.events.roomList.INVITELIST_UPDATED,
onInviteListChange,
);
roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
return () => {
navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
initMatrix.roomList.removeListener(
cons.events.roomList.INVITELIST_UPDATED,
onInviteListChange,
);
roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
};
}, []);
function getHomeNoti() {
const orphans = roomList.getOrphans();
let noti = null;
orphans.forEach((roomId) => {
if (!notifications.hasNoti(roomId)) return;
if (noti === null) noti = { total: 0, highlight: 0 };
const childNoti = notifications.getNoti(roomId);
noti.total += childNoti.total;
noti.highlight += childNoti.highlight;
});
return noti;
}
function getDMsNoti() {
if (roomList.directs.size === 0) return null;
let noti = null;
[...roomList.directs].forEach((roomId) => {
if (!notifications.hasNoti(roomId)) return;
if (noti === null) noti = { total: 0, highlight: 0 };
const childNoti = notifications.getNoti(roomId);
noti.total += childNoti.total;
noti.highlight += childNoti.highlight;
});
return noti;
}
// TODO: bellow operations are heavy.
// refactor this component into more smaller components.
const dmsNoti = getDMsNoti();
const homeNoti = getHomeNoti();
return (
<div className="sidebar">
<div className="sidebar__scrollable">
<ScrollView invisible>
<div className="scrollable-content">
<div className="featured-container">
<SidebarAvatar active={selectedTab === cons.tabs.HOME} onClick={() => selectTab(cons.tabs.HOME)} tooltip="Home" iconSrc={HomeIC} />
<SidebarAvatar active={selectedTab === cons.tabs.DIRECTS} onClick={() => selectTab(cons.tabs.DIRECTS)} tooltip="People" iconSrc={UserIC} />
<SidebarAvatar
active={selectedTab === cons.tabs.HOME}
onClick={() => selectTab(cons.tabs.HOME)}
tooltip="Home"
iconSrc={HomeIC}
isUnread={homeNoti !== null}
notificationCount={homeNoti !== null ? abbreviateNumber(homeNoti.total) : 0}
isAlert={homeNoti?.highlight > 0}
/>
<SidebarAvatar
active={selectedTab === cons.tabs.DIRECTS}
onClick={() => selectTab(cons.tabs.DIRECTS)}
tooltip="People"
iconSrc={UserIC}
isUnread={dmsNoti !== null}
notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0}
isAlert={dmsNoti?.highlight > 0}
/>
<SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
</div>
<div className="sidebar-divider" />
@@ -117,6 +168,9 @@ function SideBar() {
bgColor={colorMXID(room.roomId)}
imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
text={room.name.slice(0, 1)}
isUnread={notifications.hasNoti(sRoomId)}
notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
onClick={() => selectTab(shortcut)}
/>
);
@@ -131,7 +185,9 @@ function SideBar() {
<div className="sticky-container">
{ totalInvites !== 0 && (
<SidebarAvatar
notifyCount={totalInvites}
isUnread
notificationCount={totalInvites}
isAlert
onClick={() => openInviteList()}
tooltip="Invites"
iconSrc={InviteIC}