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 @@ -6,9 +6,9 @@ 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 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'; @@ -16,10 +16,6 @@ +communityID: string, }; -const buttonColor = { - color: 'var(--purple-link)', -}; - function ManageInviteLinksModal(props: Props): React.Node { const { communityID } = props; const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[ @@ -27,41 +23,16 @@ ]; 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 ( -
-
-
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