118 lines
4.1 KiB
JavaScript
118 lines
4.1 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
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 { openInviteList, openPublicChannels, openSettings } from '../../../client/action/navigation';
|
|
|
|
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 (
|
|
<ContextMenu
|
|
content={(hideMenu) => (
|
|
<>
|
|
<MenuHeader>{mx.getUserId()}</MenuHeader>
|
|
{/* <MenuItem iconSrc={UserIC} onClick={() => ''}>Profile</MenuItem> */}
|
|
{/* <MenuItem iconSrc={BellIC} onClick={() => ''}>Notification settings</MenuItem> */}
|
|
<MenuItem
|
|
iconSrc={SettingsIC}
|
|
onClick={() => { hideMenu(); openSettings(); }}
|
|
>
|
|
Settings
|
|
</MenuItem>
|
|
<MenuBorder />
|
|
<MenuItem iconSrc={PowerIC} variant="danger" onClick={logout}>Logout</MenuItem>
|
|
</>
|
|
)}
|
|
render={(toggleMenu) => (
|
|
<SidebarAvatar
|
|
onClick={toggleMenu}
|
|
tooltip={mx.getUser(mx.getUserId()).displayName}
|
|
imageSrc={mx.getUser(mx.getUserId()).avatarUrl !== null ? mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl, 42, 42, 'crop') : null}
|
|
bgColor={colorMXID(mx.getUserId())}
|
|
text={mx.getUser(mx.getUserId()).displayName.slice(0, 1)}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SideBar({ tabId, changeTab }) {
|
|
const totalInviteCount = () => initMatrix.roomList.inviteRooms.size
|
|
+ initMatrix.roomList.inviteSpaces.size
|
|
+ initMatrix.roomList.inviteDirects.size;
|
|
|
|
const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
|
|
|
|
function onInviteListChange() {
|
|
updateTotalInvites(totalInviteCount());
|
|
}
|
|
|
|
useEffect(() => {
|
|
initMatrix.roomList.on(
|
|
cons.events.roomList.INVITELIST_UPDATED,
|
|
onInviteListChange,
|
|
);
|
|
|
|
return () => {
|
|
initMatrix.roomList.removeListener(
|
|
cons.events.roomList.INVITELIST_UPDATED,
|
|
onInviteListChange,
|
|
);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="sidebar">
|
|
<div className="sidebar__scrollable">
|
|
<ScrollView invisible>
|
|
<div className="scrollable-content">
|
|
<div className="featured-container">
|
|
<SidebarAvatar active={tabId === 'channels'} onClick={() => changeTab('channels')} tooltip="Home" iconSrc={HomeIC} />
|
|
<SidebarAvatar active={tabId === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
|
|
<SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
|
|
</div>
|
|
<div className="sidebar-divider" />
|
|
<div className="space-container" />
|
|
</div>
|
|
</ScrollView>
|
|
</div>
|
|
<div className="sidebar__sticky">
|
|
<div className="sidebar-divider" />
|
|
<div className="sticky-container">
|
|
{ totalInvites !== 0 && (
|
|
<SidebarAvatar
|
|
notifyCount={totalInvites}
|
|
onClick={() => openInviteList()}
|
|
tooltip="Invites"
|
|
iconSrc={InviteIC}
|
|
/>
|
|
)}
|
|
<ProfileAvatarMenu />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
SideBar.propTypes = {
|
|
tabId: PropTypes.string.isRequired,
|
|
changeTab: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default SideBar;
|