// @flow		// @flow

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

		import {
		createOrUpdateFarcasterChannelTagActionTypes,
		useCreateOrUpdateFarcasterChannelTag,
		} from 'lib/actions/community-actions.js';
import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';		import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js';
import type { FarcasterChannel } from 'lib/types/farcaster-types.js';		import type { FarcasterChannel } from 'lib/types/farcaster-types.js';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';		import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
		import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';

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

export type TagFarcasterChannelParams = {		export type TagFarcasterChannelParams = {
+communityID: string,		+communityID: string,
};		};

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

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

		const { communityID } = route.params;

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

const colors = useColors();		const colors = useColors();

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

const [selectedChannel, setSelectedChannel] =		const [selectedChannel, setSelectedChannel] =
▲ Show 20 Lines • Show All 61 Lines • ▼ Show 20 Lines	function TagFarcasterChannel(props: Props): React.Node {
}, [		}, [
activeTheme,		activeTheme,
channelOptions,		channelOptions,
insets.bottom,		insets.bottom,
onOptionSelected,		onOptionSelected,
showActionSheetWithOptions,		showActionSheetWithOptions,
]);		]);

		const dispatchActionPromise = useDispatchActionPromise();

		const createOrUpdateFarcasterChannelTag =
		useCreateOrUpdateFarcasterChannelTag();

		const createCreateOrUpdateActionPromise = React.useCallback(async () => {
		if (!selectedChannel) {
		return undefined;
		}

		try {
		return await createOrUpdateFarcasterChannelTag({
		commCommunityID: communityID,
		farcasterChannelID: selectedChannel.id,
		});
		} catch (e) {
		console.log('error', e); // TODO: Improve error handling
		throw e;
		}
		}, [communityID, createOrUpdateFarcasterChannelTag, selectedChannel]);

		const onPressTag = React.useCallback(() => {
		void dispatchActionPromise(
		createOrUpdateFarcasterChannelTagActionTypes,
		createCreateOrUpdateActionPromise(),
		);
		}, [createCreateOrUpdateActionPromise, dispatchActionPromise]);

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

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

		const buttonVariant = selectedChannel ? 'enabled' : 'disabled';

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

return tagFarcasterChannel;		return tagFarcasterChannel;
}		}

const unboundStyles = {		const unboundStyles = {
sectionContainer: {		sectionContainer: {
Show All 24 Lines

[web] fix regression in error handlingClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 37862

web/account/traditional-login-form.react.js

[web] fix regression in error handling
ClosedPublic
Actions

Revision Contents
Changeset List