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 = ( - <div> - <CopyInviteLinkButton inviteLink={inviteLink} /> - <div className={css.description}> - {'Public links allow unlimited uses and never expire. '} - <Button - variant="text" - buttonColor={buttonColor} - className={css.inlineButton} - > - Edit public link - </Button> - </div> - </div> - ); + content = <ExistingLinkContent inviteLink={inviteLink} />; } else { - enableLinkButton = ( - <Button variant="text" buttonColor={buttonColor}> - Enable - </Button> - ); + content = <EmptyLinkContent />; } return ( <Modal name="Manage invite links" onClose={popModal} size="large"> - <div className={css.container}> - <div className={css.sectionHeaderRow}> - <div className={css.sectionHeaderText}>Public link</div> - {enableLinkButton} - </div> - {publicLinkSection} - </div> + <div className={css.container}>{content}</div> </Modal> ); } 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 ( + <div className={css.sectionHeaderRow}> + <div className={css.sectionHeaderText}>Public link</div> + <Button variant="text" buttonColor={buttonColor}> + Enable + </Button> + </div> + ); +} + +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 ( + <> + <div className={css.sectionHeaderRow}> + <div className={css.sectionHeaderText}>Public link</div> + </div> + <div> + <CopyInviteLinkButton inviteLink={inviteLink} /> + <div className={css.description}> + {'Public links allow unlimited uses and never expire. '} + <Button + variant="text" + buttonColor={buttonColor} + className={css.inlineButton} + > + Edit public link + </Button> + </div> + </div> + </> + ); +} + +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