diff --git a/web/invite-links/invite-links-menu.react.js b/web/invite-links/invite-links-menu.react.js --- a/web/invite-links/invite-links-menu.react.js +++ b/web/invite-links/invite-links-menu.react.js @@ -11,6 +11,7 @@ import { threadPermissions } from 'lib/types/thread-permission-types.js'; import css from './invite-links-menu.css'; +import ManageInviteLinksModal from './manage-invite-links-modal.react.js'; import ViewInviteLinkModal from './view-invite-link-modal.react.js'; import MenuItem from '../components/menu-item.react.js'; import Menu from '../components/menu.react.js'; @@ -43,6 +44,10 @@ pushModal(); }, [inviteLink, pushModal]); + const openManageInviteLinksModal = React.useCallback(() => { + pushModal(); + }, [communityID, pushModal]); + const items = React.useMemo(() => { const itemSpecs = []; @@ -50,7 +55,7 @@ itemSpecs.push({ text: 'Manage invite links', iconComponent: , - onClick: () => {}, + onClick: openManageInviteLinksModal, }); } @@ -63,7 +68,12 @@ } return itemSpecs; - }, [canManageLinks, inviteLink, openViewInviteLinkModal]); + }, [ + canManageLinks, + inviteLink, + openManageInviteLinksModal, + openViewInviteLinkModal, + ]); const menuItems = React.useMemo( () => diff --git a/web/invite-links/manage-invite-links-modal.css b/web/invite-links/manage-invite-links-modal.css new file mode 100644 --- /dev/null +++ b/web/invite-links/manage-invite-links-modal.css @@ -0,0 +1,27 @@ +.container { + font-size: var(--m-font-16); + padding: 24px 32px; +} + +.sectionHeaderRow { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.sectionHeaderText { + color: var(--fg); + margin-bottom: 16px; +} + +.description { + font-size: var(--s-font-14); + color: var(--fg); + margin-top: 8px; +} + +.inlineButton { + display: inline; + font-size: var(--s-font-14); +} diff --git a/web/invite-links/manage-invite-links-modal.react.js b/web/invite-links/manage-invite-links-modal.react.js new file mode 100644 --- /dev/null +++ b/web/invite-links/manage-invite-links-modal.react.js @@ -0,0 +1,69 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; +import type { InviteLink } from 'lib/types/link-types.js'; + +import CopyInviteLinkButton from './copy-invite-link-button.react.js'; +import css from './manage-invite-links-modal.css'; +import Button from '../components/button.react.js'; +import Modal from '../modals/modal.react.js'; +import { useSelector } from '../redux/redux-utils.js'; + +type Props = { + +communityID: string, +}; + +const buttonColor = { + color: 'var(--purple-link)', +}; + +function ManageInviteLinksModal(props: Props): React.Node { + const { communityID } = props; + const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[ + communityID + ]; + const { popModal } = useModalContext(); + + let enableLinkButton = null; + let publicLinkSection = null; + if (inviteLink) { + publicLinkSection = ( +
+ +
+ {'Public links allow unlimited uses and never expire. '} + +
+
+ ); + } else { + enableLinkButton = ( + + ); + } + + return ( + +
+
+
Public link
+ {enableLinkButton} +
+ {publicLinkSection} +
+
+ ); +} + +export default ManageInviteLinksModal;