Paths

Table of Contentst

-
native/
-
components/
-
directory-prompt-bottom-sheet.react.js
-
navigation/
-
route-names.js

Differential D14420

[native] navigate to CommunityJoinerModal if user accepts prompt
ClosedPublic
Actions

Authored by varun on Feb 27 2025, 10:19 PM.

Details

Reviewers

ashoat

Commits

rCOMM83a42c0da9f8: [native] navigate to CommunityJoinerModal if user accepts prompt

Summary

Depends on D14378

We were already passing the communities to the bottom sheet component but the
types had not been updated. This diff updates the types and handles navigating to
directory modal when the user accepts the prompt

Test Plan

Confirmed that accepting the prompt closes the bottom sheet and takes me to the modal

Diff Detail

Repository

rCOMM Comm

Branch

directory (branched from master)

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

varun created this revision.Feb 27 2025, 10:19 PM

Herald added a subscriber: tomek. · View Herald TranscriptFeb 27 2025, 10:19 PM

varun added a child revision: D14421: [native] navigate to nux tip on modal close if user opened CommunityJoinerModal from bottom sheet.Feb 27 2025, 10:42 PM

CI has been stuck for a day

ashoat accepted this revision.Feb 28 2025, 3:28 PM

This revision is now accepted and ready to land.Feb 28 2025, 3:28 PM

ashoat mentioned this in D14421: [native] navigate to nux tip on modal close if user opened CommunityJoinerModal from bottom sheet.Feb 28 2025, 3:32 PM

varun added inline comments.Mar 1 2025, 9:00 AM

native/components/directory-prompt-bottom-sheet.react.js
69	this `goBack` is unnecessary. the NUX tip replaces the CommunityJoinerModal

This revision was landed with ongoing or failed builds.Mar 1 2025, 2:25 PM

Closed by commit rCOMM83a42c0da9f8: [native] navigate to CommunityJoinerModal if user accepts prompt (authored by varun). · Explain Why

This revision was automatically updated to reflect the committed changes.

varun added a commit: rCOMM83a42c0da9f8: [native] navigate to CommunityJoinerModal if user accepts prompt.

Revision Contents
Changeset List

Path

Size

native/

components/

directory-prompt-bottom-sheet.react.js

25 lines

navigation/

route-names.js

3 lines

Diff 47297

View Options

native/components/directory-prompt-bottom-sheet.react.js

	// @flow			// @flow

	import invariant from 'invariant';			import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';
	import { View, StyleSheet } from 'react-native';			import { View, StyleSheet } from 'react-native';
	import { useSafeAreaInsets } from 'react-native-safe-area-context';			import { useSafeAreaInsets } from 'react-native-safe-area-context';

				import type { ClientCommunityInfoWithCommunityName } from 'lib/types/community-types.js';

	import DirectoryPrompt from './directory-prompt.react.js';			import DirectoryPrompt from './directory-prompt.react.js';
	import { type NUXTip, nuxTip } from './nux-tips-context.react.js';			import { type NUXTip, nuxTip } from './nux-tips-context.react.js';
	import PrimaryButton from './primary-button.react.js';			import PrimaryButton from './primary-button.react.js';
	import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js';			import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js';
	import BottomSheet from '../bottom-sheet/bottom-sheet.react.js';			import BottomSheet from '../bottom-sheet/bottom-sheet.react.js';
	import type { RootNavigationProp } from '../navigation/root-navigator.react.js';			import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
				import { CommunityJoinerModalRouteName } from '../navigation/route-names.js';
	import {			import {
	type NavigationRoute,			type NavigationRoute,
	NUXTipOverlayBackdropRouteName,			NUXTipOverlayBackdropRouteName,
	} from '../navigation/route-names.js';			} from '../navigation/route-names.js';

				export type DirectoryPromptBottomSheetParams = {
				+communities: $ReadOnlyArray<ClientCommunityInfoWithCommunityName>,
				};

	const directoryPromptHeight = 293;			const directoryPromptHeight = 293;
	const marginBottom = 10;			const marginBottom = 10;
	const buttonHeight = 61;			const buttonHeight = 61;

	const orderedTips: $ReadOnlyArray<NUXTip> = [nuxTip.COMMUNITY_DIRECTORY];			const orderedTips: $ReadOnlyArray<NUXTip> = [nuxTip.COMMUNITY_DIRECTORY];

	type Props = {			type Props = {
	+navigation: RootNavigationProp<'DirectoryPromptBottomSheet'>,			+navigation: RootNavigationProp<'DirectoryPromptBottomSheet'>,
	+route: NavigationRoute<'DirectoryPromptBottomSheet'>,			+route: NavigationRoute<'DirectoryPromptBottomSheet'>,
	};			};

	function DirectoryPromptBottomSheet(props: Props): React.Node {			function DirectoryPromptBottomSheet(props: Props): React.Node {
	const { navigation } = props;			const { navigation, route } = props;
				const { goBack, navigate } = navigation;
	const { goBack } = navigation;			const { communities } = route.params;

	const bottomSheetRef = React.useRef(null);			const bottomSheetRef = React.useRef(null);

	const bottomSheetContext = React.useContext(BottomSheetContext);			const bottomSheetContext = React.useContext(BottomSheetContext);
	invariant(bottomSheetContext, 'bottomSheetContext should be set');			invariant(bottomSheetContext, 'bottomSheetContext should be set');
	const { setContentHeight } = bottomSheetContext;			const { setContentHeight } = bottomSheetContext;

	const insets = useSafeAreaInsets();			const insets = useSafeAreaInsets();

	React.useLayoutEffect(() => {			React.useLayoutEffect(() => {
	setContentHeight(			setContentHeight(
	directoryPromptHeight +			directoryPromptHeight +
	marginBottom +			marginBottom +
	buttonHeight +			buttonHeight +
	buttonHeight +			buttonHeight +
	insets.bottom,			insets.bottom,
	);			);
	}, [insets.bottom, setContentHeight]);			}, [insets.bottom, setContentHeight]);

	const onPressAccept = React.useCallback(() => {			const onPressAccept = React.useCallback(() => {
	console.log('User accepted the prompt');			goBack();
	}, []);			navigate<'CommunityJoinerModal'>({
				name: CommunityJoinerModalRouteName,
				params: { communities },
				});
				}, [communities, goBack, navigate]);

	const onCloseOrPressDecline = React.useCallback(() => {			const onCloseOrPressDecline = React.useCallback(() => {
	goBack();			navigate<'NUXTipOverlayBackdrop'>({
	navigation.navigate<'NUXTipOverlayBackdrop'>({
	name: NUXTipOverlayBackdropRouteName,			name: NUXTipOverlayBackdropRouteName,
	params: {			params: {
	orderedTips,			orderedTips,
	},			},
	});			});
	}, [goBack, navigation]);			}, [navigate]);

	const directoryPromptBottomSheet = React.useMemo(			const directoryPromptBottomSheet = React.useMemo(
	() => (			() => (
	<BottomSheet ref={bottomSheetRef} onClosed={onCloseOrPressDecline}>			<BottomSheet ref={bottomSheetRef} onClosed={onCloseOrPressDecline}>
	<View style={styles.container}>			<View style={styles.container}>
	<View style={styles.promptContainer}>			<View style={styles.promptContainer}>
	<DirectoryPrompt />			<DirectoryPrompt />
	</View>			</View>
	Show All 36 Lines