diff --git a/native/invite-links/manage-public-link-screen.react.js b/native/invite-links/manage-public-link-screen.react.js --- a/native/invite-links/manage-public-link-screen.react.js +++ b/native/invite-links/manage-public-link-screen.react.js @@ -1,11 +1,13 @@ // @flow import * as React from 'react'; -import { Text, View } from 'react-native'; +import { Text, View, Alert } from 'react-native'; import { createOrUpdatePublicLink, createOrUpdatePublicLinkActionTypes, + disableInviteLink as callDisableInviteLink, + disableInviteLinkLinkActionTypes, } from 'lib/actions/link-actions.js'; import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; @@ -41,7 +43,7 @@ const dispatchActionPromise = useDispatchActionPromise(); const callCreateOrUpdatePublicLink = useServerCall(createOrUpdatePublicLink); - const createActionPromise = React.useCallback(async () => { + const createCreateOrUpdateActionPromise = React.useCallback(async () => { setError(null); try { return await callCreateOrUpdatePublicLink({ @@ -56,9 +58,9 @@ const createInviteLink = React.useCallback(() => { dispatchActionPromise( createOrUpdatePublicLinkActionTypes, - createActionPromise(), + createCreateOrUpdateActionPromise(), ); - }, [createActionPromise, dispatchActionPromise]); + }, [createCreateOrUpdateActionPromise, dispatchActionPromise]); const createOrUpdatePublicLinkStatus = useSelector( createOrUpdatePublicLinkStatusSelector, ); @@ -70,6 +72,67 @@ errorComponent = {error}; } + const disableInviteLinkServerCall = useServerCall(callDisableInviteLink); + const createDisableLinkActionPromise = React.useCallback(async () => { + setError(null); + try { + return await disableInviteLinkServerCall({ + name, + communityID: community.id, + }); + } catch (e) { + setError(e.message); + throw e; + } + }, [disableInviteLinkServerCall, community.id, name]); + const disableInviteLink = React.useCallback(() => { + dispatchActionPromise( + disableInviteLinkLinkActionTypes, + createDisableLinkActionPromise(), + ); + }, [createDisableLinkActionPromise, dispatchActionPromise]); + const disableInviteLinkStatus = useSelector(disableInviteLinkStatusSelector); + + const isLoading = + createOrUpdatePublicLinkStatus === 'loading' || + disableInviteLinkStatus === 'loading'; + + const onDisableButtonClick = React.useCallback(() => { + Alert.alert( + 'Disable public link', + 'Are you sure you want to disable your public link? Members who have your community’s public link but have not joined will not able to with the disabled link. \n' + + '\n' + + 'Other communities may also claim your previous public link url.', + [ + { + text: 'Confirm disable', + style: 'destructive', + onPress: disableInviteLink, + }, + { + text: 'Cancel', + }, + ], + { + cancelable: true, + }, + ); + }, [disableInviteLink]); + let disablePublicLinkButton = null; + if (inviteLink) { + disablePublicLinkButton = ( + + + + ); + } + return ( @@ -92,18 +155,19 @@ autoCorrect={false} autoCapitalize="none" keyboardType="ascii-capable" - editable={createOrUpdatePublicLinkStatus !== 'loading'} + editable={!isLoading} /> {errorComponent} + {disablePublicLinkButton} ); } @@ -111,6 +175,9 @@ const createOrUpdatePublicLinkStatusSelector = createLoadingStatusSelector( createOrUpdatePublicLinkActionTypes, ); +const disableInviteLinkStatusSelector = createLoadingStatusSelector( + disableInviteLinkLinkActionTypes, +); const unboundStyles = { sectionTitle: { @@ -166,6 +233,21 @@ buttonPrimary: { backgroundColor: 'purpleButton', }, + destructiveButtonContainer: { + margin: 16, + }, + destructiveButton: { + borderWidth: 1, + borderRadius: 8, + borderColor: 'vibrantRedButton', + }, + destructiveButtonText: { + fontSize: 16, + fontWeight: '500', + lineHeight: 24, + color: 'vibrantRedButton', + textAlign: 'center', + }, buttonText: { color: 'whiteText', textAlign: 'center',