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 (
);
}
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;