diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js --- a/web/chat/thread-menu.react.js +++ b/web/chat/thread-menu.react.js @@ -26,6 +26,7 @@ import MenuItem from '../components/menu-item.react'; import Menu from '../components/menu.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; +import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react'; import { useModalContext } from '../modals/modal-provider.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react'; @@ -196,16 +197,28 @@ ); }, [onClickLeaveThread, threadInfo]); + const onClickPromoteSidebarToThread = React.useCallback( + () => + setModal( + , + ), + [setModal, threadInfo, clearModal, onPromoteSidebar], + ); + const promoteSidebar = React.useMemo(() => { return ( ); - }, [onPromoteSidebar]); + }, [onClickPromoteSidebarToThread]); const menuItems = React.useMemo(() => { const notificationsItem = ( diff --git a/web/modals/chat/sidebar-promote-modal.react.js b/web/modals/chat/sidebar-promote-modal.react.js new file mode 100644 --- /dev/null +++ b/web/modals/chat/sidebar-promote-modal.react.js @@ -0,0 +1,42 @@ +// @flow + +import * as React from 'react'; + +import type { ThreadInfo } from 'lib/types/thread-types'; + +import Button from '../../components/button.react'; +import Modal from '../modal.react'; + +type Props = { + +onClose: () => void, + +onConfirm: () => void, + +threadInfo: ThreadInfo, +}; + +function SidebarPromoteModal(props: Props): React.Node { + const { threadInfo, onClose, onConfirm } = props; + const { uiName } = threadInfo; + + const handleConfirm = React.useCallback(() => { + onConfirm(); + onClose(); + }, [onClose, onConfirm]); + + return ( + +
+

{`Are you sure you want to promote "${uiName}"? + "This promoting a sidebar to a full thread can't be undone."`}

+ + + +
+
+ ); +} + +export default SidebarPromoteModal;