[native] add button to test creating olm session with own devices
ClosedPublic
Actions

Authored by kamil on Dec 18 2023, 5:58 AM.

Details

Reviewers

varun
michal
marcin

Commits

rCOMM9dac12a7550c: [native] add button to test creating olm session with own devices

Summary

Code for testing creating olm sessions. In future this will be triggered automatically, but for now when devices are not yet logged into Identity this is only for testing purposes.

Depends on D10381

Test Plan

Click button and check results in logs

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

kamil created this revision.Dec 18 2023, 5:58 AM

kamil held this revision as a draft.

Herald added subscribers: tomek, ashoat. · View Herald TranscriptDec 18 2023, 5:58 AM

kamil added a child revision: D10383: [native] add button to test send encrypted content between devices.Dec 18 2023, 6:07 AM

kamil published this revision for review.Dec 18 2023, 6:55 AM

Harbormaster failed remote builds in B25181: Diff 34796!Dec 18 2023, 7:47 AM

@michal should have more react knowledge to give thorough review.

michal accepted this revision.Jan 4 2024, 5:32 AM

This revision is now accepted and ready to land.Jan 4 2024, 5:32 AM

This revision was landed with ongoing or failed builds.Jan 11 2024, 5:28 AM

Closed by commit rCOMM9dac12a7550c: [native] add button to test creating olm session with own devices (authored by kamil). · Explain Why

This revision was automatically updated to reflect the committed changes.

kamil added a commit: rCOMM9dac12a7550c: [native] add button to test creating olm session with own devices.

Revision Contents
Changeset List

Path

Size

native/

profile/

tunnelbroker-menu.react.js

22 lines

utils/

crypto-utils.js

3 lines

Diff 35521

View Options

native/profile/tunnelbroker-menu.react.js

	// @flow			// @flow

				import { useActionSheet } from '@expo/react-native-action-sheet';
				import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';
	import { View, Text } from 'react-native';			import { View, Text, TouchableOpacity, Platform } from 'react-native';
				import { useSafeAreaInsets } from 'react-native-safe-area-context';

				import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
				import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';

	import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';			import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react';
	import type { NavigationRoute } from '../../navigation/route-names';			import SWMansionIcon from '../../components/swmansion-icon.react.js';
				import { type NavigationRoute } from '../../navigation/route-names.js';
				import { useSelector } from '../../redux/redux-utils.js';
				import { useStyles, useColors } from '../../themes/colors.js';

	type Props = {			type Props = {
	+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,			+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
	+route: NavigationRoute<'TagFarcasterChannel'>,			+route: NavigationRoute<'TagFarcasterChannel'>,
	};			};

	// eslint-disable-next-line no-unused-vars			// eslint-disable-next-line no-unused-vars
	function TagFarcasterChannel(props: Props): React.Node {			function TagFarcasterChannel(props: Props): React.Node {
				const styles = useStyles(unboundStyles);

				const colors = useColors();

				const fid = useCurrentUserFID();
				invariant(fid, 'FID should be set');

				const [selectedChannel, setSelectedChannel] = React.useState<?string>(null);

				const [channelOptions, setChannelOptions] = React.useState<
				$ReadOnlyArray<string>,
				>([]);

				const neynarClientContext = React.useContext(NeynarClientContext);
				invariant(neynarClientContext, 'NeynarClientContext is missing');

				const { client } = neynarClientContext;

				React.useEffect(() => {
				void (async () => {
				const data = await client.fetchFollowedFarcasterChannels(fid);

				const result = data.map(channel => channel.name);

				setChannelOptions(result);
				})();
				}, [client, fid]);

				const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);

				const { showActionSheetWithOptions } = useActionSheet();

				const insets = useSafeAreaInsets();

				const onOptionSelected = React.useCallback(
				(selectedIndex: ?number) => {
				if (
				selectedIndex === undefined \|\|
				selectedIndex === null \|\|
				selectedIndex === channelOptions.length
				) {
				return;
				}

				setSelectedChannel(channelOptions[selectedIndex]);
				},
				[channelOptions],
				);

				const onPressSelectChannel = React.useCallback(() => {
				const options =
				Platform.OS === 'ios' ? [...channelOptions, 'Cancel'] : channelOptions;

				const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;

				const containerStyle = {
				paddingBottom: insets.bottom,
				};

				showActionSheetWithOptions(
				{
				options,
				cancelButtonIndex,
				containerStyle,
				userInterfaceStyle: activeTheme ?? 'dark',
				},
				onOptionSelected,
				);
				}, [
				activeTheme,
				channelOptions,
				insets.bottom,
				onOptionSelected,
				showActionSheetWithOptions,
				]);

				const channelSelectionStyles = React.useMemo(
				() => [styles.sectionContainer, styles.touchableSectionContainer],
				[styles.sectionContainer, styles.touchableSectionContainer],
				);

				const channelSelectionTextContent = selectedChannel
				? selectedChannel
				: 'No Farcaster channel tagged';

	const tagFarcasterChannel = React.useMemo(			const tagFarcasterChannel = React.useMemo(
	() => (			() => (
	<View>			<View>
	<Text>TagFarcasterChannel</Text>			<View style={styles.sectionContainer}>
				<Text style={styles.sectionText}>
				Tag a Farcaster channel so followers can find your Comm community!
				</Text>
				</View>
				<Text style={styles.sectionHeaderText}>FARCASTER CHANNEL</Text>
				<TouchableOpacity
				style={channelSelectionStyles}
				onPress={onPressSelectChannel}
				>
				<Text style={styles.sectionText}>{channelSelectionTextContent}</Text>
				<SWMansionIcon
				name="edit-1"
				size={20}
				color={colors.panelForegroundSecondaryLabel}
				/>
				</TouchableOpacity>
	</View>			</View>
	),			),
	[],			[
				styles.sectionContainer,
				styles.sectionText,
				styles.sectionHeaderText,
				channelSelectionStyles,
				onPressSelectChannel,
				channelSelectionTextContent,
				colors.panelForegroundSecondaryLabel,
				],
	);			);

	return tagFarcasterChannel;			return tagFarcasterChannel;
	}			}

				const unboundStyles = {
				sectionContainer: {
				backgroundColor: 'panelForeground',
				marginBottom: 24,
				padding: 16,
				},
				sectionText: {
				color: 'panelForegroundLabel',
				fontSize: 14,
				},
				sectionHeaderText: {
				fontSize: 14,
				fontWeight: '400',
				lineHeight: 20,
				color: 'panelForegroundLabel',
				paddingHorizontal: 16,
				paddingBottom: 4,
				},
				touchableSectionContainer: {
				flexDirection: 'row',
				justifyContent: 'space-between',
				alignItems: 'center',
				},
				};

	export default TagFarcasterChannel;			export default TagFarcasterChannel;