import React, { useState, useEffect } from 'react'; import './SideBar.scss'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import colorMXID from '../../../util/colorMXID'; import logout from '../../../client/action/logout'; 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'; import ContextMenu, { MenuItem, MenuHeader, MenuBorder } from '../../atoms/context-menu/ContextMenu'; import HomeIC from '../../../../public/res/ic/outlined/home.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg'; import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg'; import InviteIC from '../../../../public/res/ic/outlined/invite.svg'; import SettingsIC from '../../../../public/res/ic/outlined/settings.svg'; import PowerIC from '../../../../public/res/ic/outlined/power.svg'; function ProfileAvatarMenu() { const mx = initMatrix.matrixClient; return ( ( <> {mx.getUserId()} {/* ''}>Profile */} {/* ''}>Notification settings */} { hideMenu(); openSettings(); }} > Settings Logout )} render={(toggleMenu) => ( )} /> ); } function SideBar() { const { roomList, notifications } = initMatrix; const mx = initMatrix.matrixClient; const totalInviteCount = () => roomList.inviteRooms.size + roomList.inviteSpaces.size + roomList.inviteDirects.size; const [totalInvites, updateTotalInvites] = useState(totalInviteCount()); const [selectedTab, setSelectedTab] = useState(navigation.selectedTab); const [, forceUpdate] = useState({}); function onTabSelected(tabId) { setSelectedTab(tabId); } function onInviteListChange() { updateTotalInvites(totalInviteCount()); } 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); 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); 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 (
selectTab(cons.tabs.HOME)} tooltip="Home" iconSrc={HomeIC} isUnread={homeNoti !== null} notificationCount={homeNoti !== null ? abbreviateNumber(homeNoti.total) : 0} isAlert={homeNoti?.highlight > 0} /> selectTab(cons.tabs.DIRECTS)} tooltip="People" iconSrc={UserIC} isUnread={dmsNoti !== null} notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0} isAlert={dmsNoti?.highlight > 0} /> openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
{ [...roomList.spaceShortcut].map((shortcut) => { const sRoomId = shortcut; const room = mx.getRoom(sRoomId); return ( selectTab(shortcut)} /> ); }) }
{ totalInvites !== 0 && ( openInviteList()} tooltip="Invites" iconSrc={InviteIC} /> )}
); } export default SideBar;