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 @@ -37,24 +37,39 @@ 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 = <Text style={styles.error}>{error}</Text>; + } + return ( <View> <View style={styles.section}> @@ -80,6 +95,7 @@ editable={createOrUpdatePublicLinkStatus !== 'loading'} /> </View> + {errorComponent} <Button style={[styles.button, styles.buttonPrimary]} onPress={createInviteLink} @@ -123,7 +139,7 @@ inviteLink: { flexDirection: 'row', alignItems: 'center', - marginBottom: 16, + marginBottom: 8, }, inviteLinkPrefix: { fontSize: 14, @@ -145,6 +161,7 @@ borderRadius: 8, paddingVertical: 12, paddingHorizontal: 24, + marginTop: 8, }, buttonPrimary: { backgroundColor: 'purpleButton', @@ -156,6 +173,13 @@ fontSize: 16, lineHeight: 24, }, + error: { + fontSize: 12, + fontWeight: '400', + lineHeight: 18, + textAlign: 'center', + color: 'redText', + }, }; export default ManagePublicLinkScreen;