diff --git a/native/invite-links/manage-public-link-screen.react.js b/native/invite-links/manage-public-link-screen.react.js
index 6f0e6dc8d..a32c09951 100644
--- a/native/invite-links/manage-public-link-screen.react.js
+++ b/native/invite-links/manage-public-link-screen.react.js
@@ -1,161 +1,185 @@
// @flow
import * as React from 'react';
import { Text, View } from 'react-native';
import {
createOrUpdatePublicLink,
createOrUpdatePublicLinkActionTypes,
} from 'lib/actions/link-actions.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import {
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils.js';
import Button from '../components/button.react.js';
import TextInput from '../components/text-input.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
export type ManagePublicLinkScreenParams = {
+community: ThreadInfo,
};
type Props = {
+navigation: RootNavigationProp<'ManagePublicLink'>,
+route: NavigationRoute<'ManagePublicLink'>,
};
function ManagePublicLinkScreen(props: Props): React.Node {
const { community } = props.route.params;
const inviteLink = useSelector(primaryInviteLinksSelector)[community.id];
const [name, setName] = React.useState(
inviteLink?.name ?? Math.random().toString(36).slice(-9),
);
+ const [error, setError] = React.useState(null);
const dispatchActionPromise = useDispatchActionPromise();
const callCreateOrUpdatePublicLink = useServerCall(createOrUpdatePublicLink);
+ const createActionPromise = React.useCallback(async () => {
+ setError(null);
+ try {
+ return await callCreateOrUpdatePublicLink({
+ name,
+ communityID: community.id,
+ });
+ } catch (e) {
+ setError(e.message);
+ throw e;
+ }
+ }, [callCreateOrUpdatePublicLink, community.id, name]);
const createInviteLink = React.useCallback(() => {
dispatchActionPromise(
createOrUpdatePublicLinkActionTypes,
- callCreateOrUpdatePublicLink({
- name,
- communityID: community.id,
- }),
+ createActionPromise(),
);
- }, [callCreateOrUpdatePublicLink, community.id, dispatchActionPromise, name]);
+ }, [createActionPromise, dispatchActionPromise]);
const createOrUpdatePublicLinkStatus = useSelector(
createOrUpdatePublicLinkStatusSelector,
);
const styles = useStyles(unboundStyles);
+ let errorComponent = null;
+ if (error) {
+ errorComponent = {error};
+ }
+
return (
Let your community be more accessible with your own unique public
link. By enabling a public link, you are allowing anyone who has your
link to join your community.{'\n\n'}
Editing your community’s public link allows other communities to claim
your previous URL.
INVITE URL
https://comm.app/invite/
+ {errorComponent}
);
}
const createOrUpdatePublicLinkStatusSelector = createLoadingStatusSelector(
createOrUpdatePublicLinkActionTypes,
);
const unboundStyles = {
sectionTitle: {
fontSize: 14,
fontWeight: '400',
lineHeight: 20,
color: 'modalBackgroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
marginTop: 24,
},
section: {
borderBottomColor: 'modalSeparator',
borderBottomWidth: 1,
borderTopColor: 'modalSeparator',
borderTopWidth: 1,
backgroundColor: 'modalForeground',
padding: 16,
},
sectionText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 22,
color: 'modalBackgroundLabel',
},
inviteLink: {
flexDirection: 'row',
alignItems: 'center',
- marginBottom: 16,
+ marginBottom: 8,
},
inviteLinkPrefix: {
fontSize: 14,
fontWeight: '400',
lineHeight: 22,
color: 'disabledButtonText',
marginRight: 2,
},
input: {
color: 'panelForegroundLabel',
borderColor: 'panelSecondaryForegroundBorder',
borderWidth: 1,
borderRadius: 8,
paddingVertical: 13,
paddingHorizontal: 16,
flex: 1,
},
button: {
borderRadius: 8,
paddingVertical: 12,
paddingHorizontal: 24,
+ marginTop: 8,
},
buttonPrimary: {
backgroundColor: 'purpleButton',
},
buttonText: {
color: 'whiteText',
textAlign: 'center',
fontWeight: '500',
fontSize: 16,
lineHeight: 24,
},
+ error: {
+ fontSize: 12,
+ fontWeight: '400',
+ lineHeight: 18,
+ textAlign: 'center',
+ color: 'redText',
+ },
};
export default ManagePublicLinkScreen;