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;