Differential D7884 Diff 26972 native/invite-links/manage-public-link-screen.react.js

Changeset View

Standalone View

native/invite-links/manage-public-link-screen.react.js

Show All 31 Lines
};		};

function ManagePublicLinkScreen(props: Props): React.Node {		function ManagePublicLinkScreen(props: Props): React.Node {
const { community } = props.route.params;		const { community } = props.route.params;
const inviteLink = useSelector(primaryInviteLinksSelector)[community.id];		const inviteLink = useSelector(primaryInviteLinksSelector)[community.id];
const [name, setName] = React.useState(		const [name, setName] = React.useState(
inviteLink?.name ?? Math.random().toString(36).slice(-9),		inviteLink?.name ?? Math.random().toString(36).slice(-9),
);		);
		const [error, setError] = React.useState(null);

const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const callCreateOrUpdatePublicLink = useServerCall(createOrUpdatePublicLink);		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(() => {		const createInviteLink = React.useCallback(() => {
dispatchActionPromise(		dispatchActionPromise(
createOrUpdatePublicLinkActionTypes,		createOrUpdatePublicLinkActionTypes,
callCreateOrUpdatePublicLink({		createActionPromise(),
name,
communityID: community.id,
}),
);		);
}, [callCreateOrUpdatePublicLink, community.id, dispatchActionPromise, name]);		}, [createActionPromise, dispatchActionPromise]);
const createOrUpdatePublicLinkStatus = useSelector(		const createOrUpdatePublicLinkStatus = useSelector(
createOrUpdatePublicLinkStatusSelector,		createOrUpdatePublicLinkStatusSelector,
);		);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

		let errorComponent = null;
		if (error) {
		errorComponent = <Text style={styles.error}>{error}</Text>;
		}

return (		return (
<View>		<View>
<View style={styles.section}>		<View style={styles.section}>
<Text style={styles.sectionText}>		<Text style={styles.sectionText}>
Let your community be more accessible with your own unique public		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. By enabling a public link, you are allowing anyone who has your
link to join your community.{'\n\n'}		link to join your community.{'\n\n'}
Editing your community’s public link allows other communities to claim		Editing your community’s public link allows other communities to claim
Show All 9 Lines	<View>
value={name}		value={name}
onChangeText={setName}		onChangeText={setName}
autoCorrect={false}		autoCorrect={false}
autoCapitalize="none"		autoCapitalize="none"
keyboardType="ascii-capable"		keyboardType="ascii-capable"
editable={createOrUpdatePublicLinkStatus !== 'loading'}		editable={createOrUpdatePublicLinkStatus !== 'loading'}
/>		/>
</View>		</View>
		{errorComponent}
<Button		<Button
style={[styles.button, styles.buttonPrimary]}		style={[styles.button, styles.buttonPrimary]}
onPress={createInviteLink}		onPress={createInviteLink}
disabled={createOrUpdatePublicLinkStatus === 'loading'}		disabled={createOrUpdatePublicLinkStatus === 'loading'}
>		>
<Text style={styles.buttonText}>Save & enable public link</Text>		<Text style={styles.buttonText}>Save & enable public link</Text>
</Button>		</Button>
</View>		</View>
Show All 27 Lines	sectionText: {
fontSize: 14,		fontSize: 14,
fontWeight: '400',		fontWeight: '400',
lineHeight: 22,		lineHeight: 22,
color: 'modalBackgroundLabel',		color: 'modalBackgroundLabel',
},		},
inviteLink: {		inviteLink: {
flexDirection: 'row',		flexDirection: 'row',
alignItems: 'center',		alignItems: 'center',
marginBottom: 16,		marginBottom: 8,
},		},
inviteLinkPrefix: {		inviteLinkPrefix: {
fontSize: 14,		fontSize: 14,
fontWeight: '400',		fontWeight: '400',
lineHeight: 22,		lineHeight: 22,
color: 'disabledButtonText',		color: 'disabledButtonText',
marginRight: 2,		marginRight: 2,
},		},
input: {		input: {
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
borderColor: 'panelSecondaryForegroundBorder',		borderColor: 'panelSecondaryForegroundBorder',
borderWidth: 1,		borderWidth: 1,
borderRadius: 8,		borderRadius: 8,
paddingVertical: 13,		paddingVertical: 13,
paddingHorizontal: 16,		paddingHorizontal: 16,
flex: 1,		flex: 1,
},		},
button: {		button: {
borderRadius: 8,		borderRadius: 8,
paddingVertical: 12,		paddingVertical: 12,
paddingHorizontal: 24,		paddingHorizontal: 24,
		marginTop: 8,
},		},
buttonPrimary: {		buttonPrimary: {
backgroundColor: 'purpleButton',		backgroundColor: 'purpleButton',
},		},
buttonText: {		buttonText: {
color: 'whiteText',		color: 'whiteText',
textAlign: 'center',		textAlign: 'center',
fontWeight: '500',		fontWeight: '500',
fontSize: 16,		fontSize: 16,
lineHeight: 24,		lineHeight: 24,
},		},
		error: {
		fontSize: 12,
		fontWeight: '400',
		lineHeight: 18,
		textAlign: 'center',
		color: 'redText',
		},
};		};

export default ManagePublicLinkScreen;		export default ManagePublicLinkScreen;