diff --git a/web/components/button.react.js b/web/components/button.react.js --- a/web/components/button.react.js +++ b/web/components/button.react.js @@ -9,6 +9,7 @@ export type ButtonColor = { +backgroundColor?: string, +color?: string, + +borderColor?: string, }; export const buttonThemes: { [string]: ButtonColor } = { 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 @@ -7,6 +7,7 @@ import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import type { InviteLink } from 'lib/types/link-types.js'; +import DisableLinkModal from './manage/disable-link-modal.react.js'; import EditLinkModal from './manage/edit-link-modal.react.js'; import EmptyLinkContent from './manage/empty-link-content.react.js'; import ExistingLinkContent from './manage/existing-link-content.react.js'; @@ -31,17 +32,32 @@ const [modalStage, setModalStage] = React.useState('view'); const enterEditMode = React.useCallback(() => setModalStage('edit'), []); const enterViewMode = React.useCallback(() => setModalStage('view'), []); + const enterDisableMode = React.useCallback( + () => setModalStage('disable'), + [], + ); if (modalStage === 'edit') { return ( ); } + if (modalStage === 'disable' && inviteLink) { + return ( + + ); + } + let content; if (inviteLink) { content = ( diff --git a/web/invite-links/manage/disable-link-modal.react.js b/web/invite-links/manage/disable-link-modal.react.js new file mode 100644 --- /dev/null +++ b/web/invite-links/manage/disable-link-modal.react.js @@ -0,0 +1,57 @@ +// @flow + +import classnames from 'classnames'; +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import { useInviteLinksActions } from 'lib/hooks/invite-links.js'; +import type { InviteLink } from 'lib/types/link-types.js'; + +import css from './manage-invite-links-modal.css'; +import Button, { buttonThemes } from '../../components/button.react.js'; +import Modal from '../../modals/modal.react.js'; + +type Props = { + +inviteLink: InviteLink, + +enterEditMode: () => mixed, + +enterViewMode: () => mixed, +}; + +function DisableLinkModal(props: Props): React.Node { + const { inviteLink, enterEditMode, enterViewMode } = props; + const { popModal } = useModalContext(); + const { isLoading, disableInviteLink } = useInviteLinksActions( + inviteLink.communityID, + inviteLink, + ); + const disableLink = React.useCallback(async () => { + await disableInviteLink(); + enterViewMode(); + }, [disableInviteLink, enterViewMode]); + + return ( + +
+
+

Are you sure you want to disable your public link?

+

Other communities will be able to claim the same URL.

+
+
+ + +
+
+
+ ); +} + +export default DisableLinkModal; diff --git a/web/invite-links/manage/edit-link-modal.react.js b/web/invite-links/manage/edit-link-modal.react.js --- a/web/invite-links/manage/edit-link-modal.react.js +++ b/web/invite-links/manage/edit-link-modal.react.js @@ -17,11 +17,16 @@ type Props = { +inviteLink: ?InviteLink, +enterViewMode: () => mixed, + +enterDisableMode: () => mixed, +community: ThreadInfo, }; +const disableButtonColor = { + color: 'var(--error-primary)', + borderColor: 'var(--error-primary)', +}; function EditLinkModal(props: Props): React.Node { - const { inviteLink, enterViewMode, community } = props; + const { inviteLink, enterViewMode, enterDisableMode, community } = props; const { popModal } = useModalContext(); const { error, isLoading, name, setName, createOrUpdateInviteLink } = @@ -38,6 +43,25 @@ errorComponent =
{error}
; } + let disableLinkComponent = null; + if (inviteLink) { + disableLinkComponent = ( + <> +
+
+
You may also disable the community public link
+ +
+ + ); + } + return (
@@ -77,6 +101,7 @@
+ {disableLinkComponent}
); diff --git a/web/invite-links/manage/manage-invite-links-modal.css b/web/invite-links/manage/manage-invite-links-modal.css --- a/web/invite-links/manage/manage-invite-links-modal.css +++ b/web/invite-links/manage/manage-invite-links-modal.css @@ -81,3 +81,17 @@ font-size: var(--s-font-14); color: var(--error-primary); } + +.disableLinkRow { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-size: var(--s-font-14); +} + +.disableLinkButtons { + display: flex; + flex-direction: column; + gap: 16px; +}