diff --git a/web/invite-links/invite-links-menu.react.js b/web/invite-links/invite-links-menu.react.js index 271c53cb5..51fec87df 100644 --- a/web/invite-links/invite-links-menu.react.js +++ b/web/invite-links/invite-links-menu.react.js @@ -1,103 +1,113 @@ // @flow import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { threadHasPermission } from 'lib/shared/thread-utils.js'; import type { InviteLink } from 'lib/types/link-types.js'; 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'; import { useSelector } from '../redux/redux-utils.js'; import { AddLink } from '../vectors.react.js'; type Props = { +communityID: string, }; function InviteLinksMenu(props: Props): React.Node { const { communityID } = props; const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[ communityID ]; const { pushModal } = useModalContext(); const community = useSelector( state => threadInfoSelector(state)[communityID], ); const canManageLinks = threadHasPermission( community, threadPermissions.MANAGE_INVITE_LINKS, ); const openViewInviteLinkModal = React.useCallback(() => { if (!inviteLink) { return; } pushModal(); }, [inviteLink, pushModal]); + const openManageInviteLinksModal = React.useCallback(() => { + pushModal(); + }, [communityID, pushModal]); + const items = React.useMemo(() => { const itemSpecs = []; if (canManageLinks) { itemSpecs.push({ text: 'Manage invite links', iconComponent: , - onClick: () => {}, + onClick: openManageInviteLinksModal, }); } if (inviteLink) { itemSpecs.push({ text: 'Invite link', icon: 'link', onClick: openViewInviteLinkModal, }); } return itemSpecs; - }, [canManageLinks, inviteLink, openViewInviteLinkModal]); + }, [ + canManageLinks, + inviteLink, + openManageInviteLinksModal, + openViewInviteLinkModal, + ]); const menuItems = React.useMemo( () => items.map(item => { if (item.icon) { return ( ); } return ( ); }), [items], ); const icon = ; return (
{menuItems}
); } export default InviteLinksMenu; diff --git a/web/invite-links/manage-invite-links-modal.css b/web/invite-links/manage-invite-links-modal.css new file mode 100644 index 000000000..8d18e84d9 --- /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 index 000000000..859d5e207 --- /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;