diff --git a/web/invite-links/manage-invite-links-modal.react.js b/web/invite-links/manage-invite-links-modal.react.js --- a/web/invite-links/manage-invite-links-modal.react.js +++ b/web/invite-links/manage-invite-links-modal.react.js @@ -8,9 +8,9 @@ import type { InviteLink } from 'lib/types/link-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.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 EmptyLinkContent from './manage/empty-link-content.react.js'; +import ExistingLinkContent from './manage/existing-link-content.react.js'; +import css from './manage/manage-invite-links-modal.css'; import Modal from '../modals/modal.react.js'; import { useSelector } from '../redux/redux-utils.js'; @@ -18,10 +18,6 @@ +communityID: string, }; -const buttonColor = { - color: 'var(--purple-link)', -}; - function ManageInviteLinksModal(props: Props): React.Node { const { communityID } = props; const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[ @@ -33,30 +29,11 @@ const resolvedThreadInfo = useResolvedThreadInfo(community); const { popModal } = useModalContext(); - let enableLinkButton = null; - let publicLinkSection = null; + let content; if (inviteLink) { - publicLinkSection = ( -
- -
- {'Public links allow unlimited uses and never expire. '} - -
-
- ); + content = ; } else { - enableLinkButton = ( - - ); + content = ; } return ( @@ -65,13 +42,7 @@ onClose={popModal} size="large" > -
-
-
Public link
- {enableLinkButton} -
- {publicLinkSection} -
+
{content}
); } diff --git a/web/invite-links/manage/empty-link-content.react.js b/web/invite-links/manage/empty-link-content.react.js new file mode 100644 --- /dev/null +++ b/web/invite-links/manage/empty-link-content.react.js @@ -0,0 +1,23 @@ +// @flow + +import * as React from 'react'; + +import css from './manage-invite-links-modal.css'; +import Button from '../../components/button.react.js'; + +const buttonColor = { + color: 'var(--purple-link)', +}; + +function EmptyLinkContent(): React.Node { + return ( +
+
Public link
+ +
+ ); +} + +export default EmptyLinkContent; diff --git a/web/invite-links/manage/existing-link-content.react.js b/web/invite-links/manage/existing-link-content.react.js new file mode 100644 --- /dev/null +++ b/web/invite-links/manage/existing-link-content.react.js @@ -0,0 +1,42 @@ +// @flow + +import * as React from 'react'; + +import type { InviteLink } from 'lib/types/link-types.js'; + +import css from './manage-invite-links-modal.css'; +import Button from '../../components/button.react.js'; +import CopyInviteLinkButton from '../copy-invite-link-button.react.js'; + +const buttonColor = { + color: 'var(--purple-link)', +}; + +type Props = { + +inviteLink: InviteLink, +}; +function ExistingLinkContent(props: Props): React.Node { + const { inviteLink } = props; + return ( + <> +
+
Public link
+
+
+ +
+ {'Public links allow unlimited uses and never expire. '} + +
+
+ + ); +} + +export default ExistingLinkContent; diff --git a/web/invite-links/manage-invite-links-modal.css b/web/invite-links/manage/manage-invite-links-modal.css rename from web/invite-links/manage-invite-links-modal.css rename to web/invite-links/manage/manage-invite-links-modal.css