Changeset View
Changeset View
Standalone 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 |