diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js
index b9021819b..6709f2667 100644
--- a/web/chat/thread-menu.react.js
+++ b/web/chat/thread-menu.react.js
@@ -1,185 +1,194 @@
// @flow
import {
faArrowRight,
faBell,
faCog,
faCommentAlt,
faSignOutAlt,
faPlusCircle,
faUserFriends,
} from '@fortawesome/free-solid-svg-icons';
import * as React from 'react';
import { childThreadInfos } from 'lib/selectors/thread-selectors';
import { threadHasPermission, viewerIsMember } from 'lib/shared/thread-utils';
import {
type ThreadInfo,
threadTypes,
threadPermissions,
} from 'lib/types/thread-types';
import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react';
import ThreadMenuItem from './thread-menu-item.react';
import css from './thread-menu.css';
type ThreadMenuProps = {
+threadInfo: ThreadInfo,
};
function ThreadMenu(props: ThreadMenuProps): React.Node {
const [isOpen, setIsOpen] = React.useState(false);
const { threadInfo } = props;
const membersItem = React.useMemo(() => {
if (threadInfo.type === threadTypes.PERSONAL) {
return null;
}
return ;
}, [threadInfo.type]);
const childThreads = useSelector(
state => childThreadInfos(state)[threadInfo.id],
);
const hasSidebars = React.useMemo(() => {
return childThreads?.some(
childThreadInfo => childThreadInfo.type === threadTypes.SIDEBAR,
);
}, [childThreads]);
const sidebarItem = React.useMemo(() => {
if (!hasSidebars) {
return null;
}
return (
);
}, [hasSidebars]);
const canCreateSubchannels = React.useMemo(
() => threadHasPermission(threadInfo, threadPermissions.CREATE_SUBCHANNELS),
[threadInfo],
);
const hasSubchannels = React.useMemo(() => {
return childThreads?.some(
childThreadInfo => childThreadInfo.type !== threadTypes.SIDEBAR,
);
}, [childThreads]);
const viewSubchannelsItem = React.useMemo(() => {
if (!hasSubchannels && !canCreateSubchannels) {
return null;
}
return (
);
}, [canCreateSubchannels, hasSubchannels]);
const createSubchannelsItem = React.useMemo(() => {
if (!canCreateSubchannels) {
return null;
}
return (
);
}, [canCreateSubchannels]);
const leaveThreadItem = React.useMemo(() => {
const canLeaveThread = threadHasPermission(
threadInfo,
threadPermissions.LEAVE_THREAD,
);
if (!viewerIsMember(threadInfo) || !canLeaveThread) {
return null;
}
return (
);
}, [threadInfo]);
const menuItems = React.useMemo(() => {
const settingsItem = (
);
const notificationsItem = (
);
const separator =
;
+ // TODO: Enable menu items when the modals are implemented
+ const SHOW_SETTINGS = false;
+ const SHOW_NOTIFICATIONS = false;
+ const SHOW_MEMBERS = false;
+ const SHOW_SIDEBAR = false;
+ const SHOW_VIEW_SUBCHANNELS = false;
+ const SHOW_CREATE_SUBCHANNELS = false;
+ const SHOW_LEAVE_THREAD = false;
+
const items = [
- settingsItem,
- notificationsItem,
- membersItem,
- sidebarItem,
- viewSubchannelsItem,
- createSubchannelsItem,
- leaveThreadItem && separator,
- leaveThreadItem,
+ SHOW_SETTINGS && settingsItem,
+ SHOW_NOTIFICATIONS && notificationsItem,
+ SHOW_MEMBERS && membersItem,
+ SHOW_SIDEBAR && sidebarItem,
+ SHOW_VIEW_SUBCHANNELS && viewSubchannelsItem,
+ SHOW_CREATE_SUBCHANNELS && createSubchannelsItem,
+ SHOW_LEAVE_THREAD && leaveThreadItem && separator,
+ SHOW_LEAVE_THREAD && leaveThreadItem,
];
return items.filter(Boolean);
}, [
membersItem,
sidebarItem,
viewSubchannelsItem,
createSubchannelsItem,
leaveThreadItem,
]);
const closeMenuCallback = React.useCallback(() => {
document.removeEventListener('click', closeMenuCallback);
if (isOpen) {
setIsOpen(false);
}
}, [isOpen]);
React.useEffect(() => {
if (!document || !isOpen) {
return undefined;
}
document.addEventListener('click', closeMenuCallback);
return () => document.removeEventListener('click', closeMenuCallback);
}, [closeMenuCallback, isOpen]);
const switchMenuCallback = React.useCallback(() => {
setIsOpen(isMenuOpen => !isMenuOpen);
}, []);
if (menuItems.length === 0) {
return null;
}
let menuActionList = null;
if (isOpen) {
menuActionList = (
{menuItems}
);
}
return (
{menuActionList}
);
}
export default ThreadMenu;