Paths

Table of Contentst

-
lib/
-
actions/
-
link-actions.js
-
utils/
-
keyserver-call.js

[lib] Allow overriding a keyserver in a function returned from useKeyserverCall hook
AbandonedPublic
Actions

Authored by tomek on Dec 12 2023, 4:12 AM.

Details

Reviewers

michal
rohan
inka
bartek

Summary

Modifying the keyserver by setting a parameter of a hook appeared to be really complicated when we don't know the keyserver when rendering a component. This diff allows overriding when calling a function.

Depends on D10308

Test Plan

Check if calling link verification works with default and overridden keyserver.

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

tomek created this revision.Dec 12 2023, 4:12 AM

Herald added a subscriber: ashoat. · View Herald TranscriptDec 12 2023, 4:12 AM

Harbormaster completed remote builds in B24990: Diff 34530.Dec 12 2023, 5:04 AM

tomek requested review of this revision.Dec 12 2023, 5:04 AM

Use optional

Harbormaster completed remote builds in B24991: Diff 34531.Dec 12 2023, 5:51 AM

tomek planned changes to this revision.Dec 12 2023, 6:15 AM

tomek added inline comments.

lib/utils/keyserver-call.js
103–106 ↗	(On Diff #34530)	There's an issue with memoization here, when we provide a next argument - this requires changing the solution

Probably fix the override. This still requires a lot of testing and thinking about
memoization, but it isn't broken in an obvious way.

Harbormaster completed remote builds in B25019: Diff 34565.Dec 13 2023, 6:51 AM

tomek added a child revision: D10338: [web][native] Download invite link blob and use it as an override.Dec 14 2023, 6:52 AM

Makes sense to me but I might not have enough context to be sure

This diff still has an issue: when calling a new keyserver, it returns sessionChange which causes setNewSession to be dispatched - this results in the keyserver being added to a store in an incorrect way and breaks more things down the line.

In D10311#299753, @tomek wrote:

This diff still has an issue: when calling a new keyserver, it returns sessionChange which causes setNewSession to be dispatched - this results in the keyserver being added to a store in an incorrect way and breaks more things down the line.

I'm seeing the same thing with the getVersion call in the new registration flow. Created ENG-6097 to track.

Rebased the diff but I'm not sure whether it works and is the right approach

tomek planned changes to this revision.Feb 1 2024, 7:57 AM

Harbormaster completed remote builds in B26420: Diff 36530.Feb 1 2024, 8:17 AM

With the new approach we no longer need this

tomek removed a child revision: D10338: [web][native] Download invite link blob and use it as an override.Feb 6 2024, 6:42 AM

tomek removed a parent revision: D10308: [keyserver] Modify link verification so that it works with users that aren't logged in to a keyserver.

Revision Contents
Changeset List

Path

Size

lib/

actions/

link-actions.js

56 lines

utils/

keyserver-call.js

76 lines

Diff 36530

View Options

lib/actions/link-actions.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;