Differential D5187 Diff 17120 web/chat/thread-menu.react.js

Changeset View

Standalone View

web/chat/thread-menu.react.js

Show All 22 Lines	import {
useDispatchActionPromise,		useDispatchActionPromise,
} from 'lib/utils/action-utils';		} from 'lib/utils/action-utils';

import MenuItem from '../components/menu-item.react';		import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react';		import Menu from '../components/menu.react';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';		import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react';		import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';		import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
		import ComposeSubchannelModal from '../modals/threads/create/compose-subchannel-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react';		import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import ThreadNotificationsModal from '../modals/threads/notifications/notifications-modal.react';		import ThreadNotificationsModal from '../modals/threads/notifications/notifications-modal.react';
import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react';		import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react';
import SidebarsModal from '../modals/threads/sidebars/sidebars-modal.react';		import SidebarsModal from '../modals/threads/sidebars/sidebars-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';		import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import { useSelector } from '../redux/redux-utils';		import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react';		import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css';		import css from './thread-menu.css';
▲ Show 20 Lines • Show All 100 Lines • ▼ Show 20 Lines	return (
key="subchannels"		key="subchannels"
text="Subchannels"		text="Subchannels"
icon="message-square"		icon="message-square"
onClick={onClickViewSubchannels}		onClick={onClickViewSubchannels}
/>		/>
);		);
}, [hasSubchannels, onClickViewSubchannels]);		}, [hasSubchannels, onClickViewSubchannels]);

		const onClickCreateSubchannel = React.useCallback(
		() =>
		pushModal(
		<ComposeSubchannelModal
		parentThreadInfo={threadInfo}
		onClose={popModal}
		/>,
		),
		[popModal, pushModal, threadInfo],
		);

const createSubchannelsItem = React.useMemo(() => {		const createSubchannelsItem = React.useMemo(() => {
if (!canCreateSubchannels) {		if (!canCreateSubchannels) {
return null;		return null;
}		}
return (		return (
<MenuItem		<MenuItem
key="newSubchannel"		key="newSubchannel"
text="Create new subchannel"		text="Create new subchannel"
icon="plus-circle"		icon="plus-circle"
		onClick={onClickCreateSubchannel}
/>		/>
);		);
}, [canCreateSubchannels]);		}, [canCreateSubchannels, onClickCreateSubchannel]);

const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callLeaveThread = useServerCall(leaveThread);		const callLeaveThread = useServerCall(leaveThread);

const onConfirmLeaveThread = React.useCallback(() => {		const onConfirmLeaveThread = React.useCallback(() => {
dispatchActionPromise(		dispatchActionPromise(
leaveThreadActionTypes,		leaveThreadActionTypes,
callLeaveThread(threadInfo.id),		callLeaveThread(threadInfo.id),
▲ Show 20 Lines • Show All 73 Lines • ▼ Show 20 Lines	return (
onClick={onClickNotifications}		onClick={onClickNotifications}
/>		/>
);		);
}, [onClickNotifications, threadInfo]);		}, [onClickNotifications, threadInfo]);

const menuItems = React.useMemo(() => {		const menuItems = React.useMemo(() => {
const separator = <hr key="separator" className={css.separator} />;		const separator = <hr key="separator" className={css.separator} />;

// TODO: Enable menu items when the modals are implemented
const SHOW_CREATE_SUBCHANNELS = false;

const items = [		const items = [
settingsItem,		settingsItem,
notificationsItem,		notificationsItem,
membersItem,		membersItem,
sidebarItem,		sidebarItem,
viewSubchannelsItem,		viewSubchannelsItem,
SHOW_CREATE_SUBCHANNELS && createSubchannelsItem,		createSubchannelsItem,
leaveThreadItem && separator,		leaveThreadItem && separator,
canPromoteSidebar && promoteSidebar,		canPromoteSidebar && promoteSidebar,
leaveThreadItem,		leaveThreadItem,
];		];
return items.filter(Boolean);		return items.filter(Boolean);
}, [		}, [
settingsItem,		settingsItem,
notificationsItem,		notificationsItem,
Show All 16 Lines