Paths

Table of Contentst

-
native/vectors/
-
vectors/
-
farcaster-logo.react.js

Differential D11434

[native] introduce FarcasterLogo
ClosedPublic
Actions

Authored by ginsu on Mar 27 2024, 9:36 PM.

Details

Reviewers

atul

Commits

rCOMM3941d90cb605: [native] introduce FarcasterLogo

Summary

This diff introduces the FarcasterLogo component. This component will be consumed by a future FarcasterPrompt component (will be introduced in a subsequent diff)

Depends on D11432

Test Plan

Please see screenshot to see what the vector looks like:

Screenshot 2024-03-28 at 12.37.35 AM.png (1×1 px, 745 KB)

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.Mar 27 2024, 9:36 PM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptMar 27 2024, 9:36 PM

ginsu edited the summary of this revision. (Show Details)Mar 27 2024, 9:38 PM

ginsu edited the test plan for this revision. (Show Details)

ginsu added a reviewer: atul.

ginsu added a parent revision: D11432: [landing/lib/native] introduce FarcasterWebView.

ginsu attached a referenced file: F1430312: Screenshot 2024-03-28 at 12.37.35 AM.png. (Show Details)

Harbormaster completed remote builds in B27755: Diff 38418.Mar 27 2024, 10:06 PM

ginsu requested review of this revision.Mar 27 2024, 10:06 PM

Wouldn't hurt to memoize

native/vectors/farcaster-logo.react.js
7–28 ↗	(On Diff #38418)	Seems like this would be an easy one to memoize

This revision is now accepted and ready to land.Mar 28 2024, 5:50 AM

address feedback

ginsu added a child revision: D11441: [native] introduce FarcasterPrompt.Mar 28 2024, 9:28 AM

Harbormaster completed remote builds in B27775: Diff 38465.Mar 28 2024, 9:38 AM

Closed by commit rCOMM3941d90cb605: [native] introduce FarcasterLogo (authored by ginsu). · Explain WhyMar 28 2024, 10:58 AM

This revision was automatically updated to reflect the committed changes.

ginsu added a commit: rCOMM3941d90cb605: [native] introduce FarcasterLogo.

Revision Contents
Changeset List

Path

Size

native/

vectors/

farcaster-logo.react.js

36 lines

Diff 38485

View Options

native/vectors/farcaster-logo.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;

[native] introduce FarcasterLogoClosedPublicActions