Page MenuHomePhorge
Files F32212976

D8238.1765145450.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D8238.1765145450.diff
View Options

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
@@ -2,11 +2,13 @@
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 type { InviteLink } from 'lib/types/link-types.js';
import css from './invite-links-menu.css';
+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';
@@ -20,6 +22,14 @@
const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[
communityID
];
+ const { pushModal } = useModalContext();
+
+ const openViewInviteLinkModal = React.useCallback(() => {
+ if (!inviteLink) {
+ return;
+ }
+ pushModal(<ViewInviteLinkModal inviteLink={inviteLink} />);
+ }, [inviteLink, pushModal]);
if (!inviteLink) {
return null;
@@ -29,7 +39,11 @@
return (
<div className={css.container}>
<Menu icon={icon} variant="community-actions">
- <MenuItem text="Invite Link" icon="link" />
+ <MenuItem
+ text="Invite Link"
+ icon="link"
+ onClick={openViewInviteLinkModal}
+ />
</Menu>
</div>
);
diff --git a/web/invite-links/view-invite-link-modal.css b/web/invite-links/view-invite-link-modal.css
new file mode 100644
--- /dev/null
+++ b/web/invite-links/view-invite-link-modal.css
@@ -0,0 +1,37 @@
+.container {
+ padding: 16px 32px 24px;
+}
+
+.description {
+ font-size: var(--s-font-14);
+ color: var(--modal-fg);
+}
+
+.sectionHeader {
+ font-size: var(--m-font-16);
+ color: var(--fg);
+ margin: 32px 0 16px;
+}
+
+.linkContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--text-input-bg);
+ padding: 12px 16px;
+ border-radius: 20px;
+}
+
+.linkUrl {
+ font-size: var(--m-font-16);
+ color: var(--label-default-color);
+}
+
+.linkCopyButton {
+ color: var(--fg);
+ font-size: var(--xs-font-12);
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+}
diff --git a/web/invite-links/view-invite-link-modal.react.js b/web/invite-links/view-invite-link-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/invite-links/view-invite-link-modal.react.js
@@ -0,0 +1,52 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import { inviteLinkUrl } from 'lib/facts/links.js';
+import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
+import type { InviteLink } from 'lib/types/link-types.js';
+import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+
+import css from './view-invite-link-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 = {
+ +inviteLink: InviteLink,
+};
+
+function ViewInviteLinkModal(props: Props): React.Node {
+ const { inviteLink } = props;
+ const threadInfo = useSelector(
+ state => threadInfoSelector(state)[inviteLink.communityID],
+ );
+ const resolvedThreadInfo = useResolvedThreadInfo(threadInfo);
+ const { popModal } = useModalContext();
+
+ return (
+ <Modal
+ name={`Invite people to ${resolvedThreadInfo.uiName}`}
+ onClose={popModal}
+ size="fit-content"
+ >
+ <div className={css.container}>
+ <div className={css.description}>
+ Use this public link to invite your friends into the community!
+ </div>
+ <div className={css.sectionHeader}>Public link</div>
+ <div className={css.linkContainer}>
+ <div className={css.linkUrl}>{inviteLinkUrl(inviteLink.name)}</div>
+ <Button className={css.linkCopyButton}>
+ <SWMansionIcon icon="link" size={24} />
+ Copy
+ </Button>
+ </div>
+ </div>
+ </Modal>
+ );
+}
+
+export default ViewInviteLinkModal;

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 10:10 PM (15 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5846162
Default Alt Text
D8238.1765145450.diff (4 KB)

Event Timeline