Paths

Table of Contentst

-
lib/shared/
-
shared/
-
relationship-utils.js
-
native/chat/settings/
-
chat/
-
settings/
-
thread-settings-edit-relationship.react.js

[lib] Introduce shared `getRelationshipDispatchAction` function
ClosedPublic
Actions

Authored by • jacek on Jul 29 2022, 2:59 AM.

Details

Reviewers

tomek
atul

Commits

rCOMMe062e9755868: [lib] Introduce shared `getRelationshipDispatchAction` function

Summary

Move part of the logic responsible for selecting correct RelationshipAction basing on provided RelationshipButton to lib so it could be resused on web

Test Plan

Confirm the existing logic still worrks on native

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

• jacek created this revision.Jul 29 2022, 2:59 AM

Herald added subscribers: • abosh, • adrian, ashoat. · View Herald TranscriptJul 29 2022, 2:59 AM

Harbormaster completed remote builds in B10966: Diff 15088.Jul 29 2022, 3:11 AM

• jacek requested review of this revision.Jul 29 2022, 3:11 AM

• jacek added a child revision: D4679: [web] Introduce `ThreadSettingsRelationshipButton` component.Jul 29 2022, 3:27 AM

tomek accepted this revision.Jul 29 2022, 5:24 AM

tomek added inline comments.

lib/shared/relationship-utils.js
11–12 ↗	(On Diff #15088)	Can we merge these two imports? Both use the same source.

This revision is now accepted and ready to land.Jul 29 2022, 5:24 AM

Fix imports

Harbormaster completed remote builds in B11041: Diff 15184.Aug 2 2022, 2:25 AM

Closed by commit rCOMMe062e9755868: [lib] Introduce shared `getRelationshipDispatchAction` function (authored by • jacek). · Explain WhyAug 3 2022, 4:27 AM

This revision was automatically updated to reflect the committed changes.

• jacek added a commit: rCOMMe062e9755868: [lib] Introduce shared `getRelationshipDispatchAction` function.

Revision Contents
Changeset List

Path

Size

lib/

shared/

relationship-utils.js

27 lines

native/

chat/

settings/

thread-settings-edit-relationship.react.js

25 lines

Diff 15252

View Options

lib/shared/relationship-utils.js

	// @flow			// @flow

	import invariant from 'invariant';			import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';
	import { Text } from 'react-native';			import { Text, View, Image, Linking } from 'react-native';

	import RegistrationButtonContainer from './registration-button-container.react.js';			import RegistrationButtonContainer from './registration-button-container.react.js';
	import RegistrationButton from './registration-button.react.js';			import RegistrationButton from './registration-button.react.js';
	import RegistrationContainer from './registration-container.react.js';			import RegistrationContainer from './registration-container.react.js';
	import RegistrationContentContainer from './registration-content-container.react.js';			import RegistrationContentContainer from './registration-content-container.react.js';
	import { RegistrationContext } from './registration-context.js';			import { RegistrationContext } from './registration-context.js';
	import type { RegistrationNavigationProp } from './registration-navigator.react.js';			import type { RegistrationNavigationProp } from './registration-navigator.react.js';
	import type {			import type {
	CoolOrNerdMode,			CoolOrNerdMode,
	AccountSelection,			AccountSelection,
	AvatarData,			AvatarData,
	} from './registration-types.js';			} from './registration-types.js';
				import commSwooshSource from '../../img/comm-swoosh.png';
	import type { NavigationRoute } from '../../navigation/route-names.js';			import type { NavigationRoute } from '../../navigation/route-names.js';
	import { useStyles } from '../../themes/colors.js';			import { useStyles } from '../../themes/colors.js';

	export type RegistrationTermsParams = {			export type RegistrationTermsParams = {
	+userSelections: {			+userSelections: {
	+coolOrNerdMode: CoolOrNerdMode,			+coolOrNerdMode: CoolOrNerdMode,
	+keyserverUsername: string,			+keyserverUsername: string,
	+accountSelection: AccountSelection,			+accountSelection: AccountSelection,
	+avatarData: ?AvatarData,			+avatarData: ?AvatarData,
	},			},
	};			};

				const onTermsOfUsePressed = () => {
				Linking.openURL('https://comm.app/terms');
				};

				const onPrivacyPolicyPressed = () => {
				Linking.openURL('https://comm.app/privacy');
				};

	type Props = {			type Props = {
	+navigation: RegistrationNavigationProp<'RegistrationTerms'>,			+navigation: RegistrationNavigationProp<'RegistrationTerms'>,
	+route: NavigationRoute<'RegistrationTerms'>,			+route: NavigationRoute<'RegistrationTerms'>,
	};			};
	function RegistrationTerms(props: Props): React.Node {			function RegistrationTerms(props: Props): React.Node {
	const registrationContext = React.useContext(RegistrationContext);			const registrationContext = React.useContext(RegistrationContext);
	invariant(registrationContext, 'registrationContext should be set');			invariant(registrationContext, 'registrationContext should be set');
	const { register } = registrationContext;			const { register } = registrationContext;

	const [registrationInProgress, setRegistrationInProgress] =			const [registrationInProgress, setRegistrationInProgress] =
	React.useState(false);			React.useState(false);

	const { userSelections } = props.route.params;			const { userSelections } = props.route.params;
	const onProceed = React.useCallback(async () => {			const onProceed = React.useCallback(async () => {
	setRegistrationInProgress(true);			setRegistrationInProgress(true);
	try {			try {
	await register(userSelections);			await register(userSelections);
	} finally {			} finally {
	setRegistrationInProgress(false);			setRegistrationInProgress(false);
	}			}
	}, [register, userSelections]);			}, [register, userSelections]);

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

				/* eslint-disable react-native/no-raw-text */
				const termsNotice = (
				<Text style={styles.body}>
				By registering, you are agreeing to our{' '}
				<Text style={styles.hyperlinkText} onPress={onTermsOfUsePressed}>
				Terms of Use
				</Text>
				{' and '}
				<Text style={styles.hyperlinkText} onPress={onPrivacyPolicyPressed}>
				Privacy Policy
				</Text>
				.
				</Text>
				);
				/* eslint-enable react-native/no-raw-text */

	return (			return (
	<RegistrationContainer>			<RegistrationContainer>
	<RegistrationContentContainer>			<RegistrationContentContainer style={styles.scrollViewContentContainer}>
	<Text style={styles.header}>Finish registration</Text>			<Text style={styles.header}>Finish registration</Text>
				{termsNotice}
				<View style={styles.commSwooshContainer}>
				<Image source={commSwooshSource} style={styles.commSwoosh} />
				</View>
	</RegistrationContentContainer>			</RegistrationContentContainer>
	<RegistrationButtonContainer>			<RegistrationButtonContainer>
	<RegistrationButton			<RegistrationButton
	onPress={onProceed}			onPress={onProceed}
	label="Register"			label="Register"
	variant={registrationInProgress ? 'loading' : 'enabled'}			variant={registrationInProgress ? 'loading' : 'enabled'}
	/>			/>
	</RegistrationButtonContainer>			</RegistrationButtonContainer>
	</RegistrationContainer>			</RegistrationContainer>
	);			);
	}			}

	const unboundStyles = {			const unboundStyles = {
				scrollViewContentContainer: {
				flexGrow: 1,
				},
	header: {			header: {
	fontSize: 24,			fontSize: 24,
	color: 'panelForegroundLabel',			color: 'panelForegroundLabel',
	paddingBottom: 16,			paddingBottom: 16,
	},			},
				body: {
				fontFamily: 'Arial',
				fontSize: 15,
				lineHeight: 20,
				color: 'panelForegroundSecondaryLabel',
				paddingBottom: 16,
				},
				commSwooshContainer: {
				flexGrow: 1,
				flexShrink: 1,
				alignItems: 'center',
				justifyContent: 'center',
				},
				commSwoosh: {
				resizeMode: 'center',
				width: '100%',
				height: '100%',
				},
				hyperlinkText: {
				color: 'purpleLink',
				},
	};			};

	export default RegistrationTerms;			export default RegistrationTerms;