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: 'secondaryDestructiveButton',
+ },
+ destructiveButtonText: {
+ fontSize: 16,
+ fontWeight: '500',
+ lineHeight: 24,
+ color: 'secondaryDestructiveButton',
+ textAlign: 'center',
+ },
buttonText: {
color: 'whiteText',
textAlign: 'center',
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -137,6 +137,7 @@
secondaryButtonBorder: designSystemColors.shadesWhite100,
inviteLinkHeaderColor: designSystemColors.shadesBlack100,
inviteLinkButtonBackground: designSystemColors.shadesWhite60,
+ secondaryDestructiveButton: designSystemColors.errorDark50,
});
export type Colors = $Exact;
@@ -230,6 +231,7 @@
secondaryButtonBorder: designSystemColors.shadesWhite100,
inviteLinkHeaderColor: designSystemColors.shadesWhite80,
inviteLinkButtonBackground: designSystemColors.shadesBlack80,
+ secondaryDestructiveButton: designSystemColors.errorDark50,
});
const colors = { light, dark };