[web] Factor out prettyDateWithoutDay
ClosedPublic
Actions

Authored by ashoat on Jan 21 2023, 3:22 PM.

Details

Reviewers

atul
ginsu

Commits

rCOMM412c2a1ab302: [web] Factor out prettyDateWithoutDay

Summary

I'll use this in the next diff.

Test Plan

Flow

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ashoat created this revision.Jan 21 2023, 3:22 PM

Herald added a subscriber: tomek. · View Herald TranscriptJan 21 2023, 3:22 PM

ashoat added a child revision: D6334: [keyserver] Automatically create daily update threads.Jan 21 2023, 3:24 PM

Harbormaster completed remote builds in B15518: Diff 21167.Jan 21 2023, 3:35 PM

ashoat requested review of this revision.Jan 21 2023, 3:35 PM

Looks good.

(A super simple unit test just to demonstrate usage might be helpful.)

This revision is now accepted and ready to land.Jan 22 2023, 3:56 PM

Closed by commit rCOMM412c2a1ab302: [web] Factor out prettyDateWithoutDay (authored by ashoat). · Explain WhyJan 22 2023, 4:22 PM

This revision was automatically updated to reflect the committed changes.

ashoat added a commit: rCOMM412c2a1ab302: [web] Factor out prettyDateWithoutDay.

Revision Contents
Changeset List

Path

Size

lib/

utils/

date-utils.js

5 lines

web/

modals/

history/

history-modal.react.js

6 lines

Diff 21176

View Options

lib/utils/date-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;