Show All 16 Lines

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 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';

		const tagFarcasterErrorMessages: { +[string]: string } = {
		already_in_use: 'This Farcaster channel is already tagged to a community.',
		ginsuAuthorUnsubmitted Done Inline Actions This copy needs to be reviewed ginsu: This copy needs to be reviewed
		};

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'>,
};		};
Show All 12 Lines	function TagFarcasterChannel(props: Props): React.Node {

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

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

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

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

const { client } = neynarClientContext;		const { client } = neynarClientContext;

React.useEffect(() => {		React.useEffect(() => {
void (async () => {		void (async () => {
const channels = await client.fetchFollowedFarcasterChannels(fid);		const channels = await client.fetchFollowedFarcasterChannels(fid);
Show All 19 Lines	(selectedIndex: ?number) => {
}		}

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

const onPressSelectChannel = React.useCallback(() => {		const onPressSelectChannel = React.useCallback(() => {
		setError(null);
		inkaUnsubmitted Not Done Inline Actions Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more natural to me that the error would disappear only once a different item is picked inka: Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more…

const channelNames = channelOptions.map(channel => channel.name);		const channelNames = channelOptions.map(channel => channel.name);

const options =		const options =
Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;		Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;

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

const containerStyle = {		const containerStyle = {
Show All 28 Lines	const createCreateOrUpdateActionPromise = React.useCallback(async () => {
}		}

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

const onPressTag = React.useCallback(() => {		const onPressTag = React.useCallback(() => {
void dispatchActionPromise(		void dispatchActionPromise(
createOrUpdateFarcasterChannelTagActionTypes,		createOrUpdateFarcasterChannelTagActionTypes,
createCreateOrUpdateActionPromise(),		createCreateOrUpdateActionPromise(),
);		);
}, [createCreateOrUpdateActionPromise, dispatchActionPromise]);		}, [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 errorMessage = React.useMemo(() => {
		if (!error) {
		return null;
		}

		return (
		<Text style={styles.error}>
		{tagFarcasterErrorMessages[error] ?? 'Unknown error.'}
		ginsuAuthorUnsubmitted Done Inline Actions Copy needs to be reviewed ginsu: Copy needs to be reviewed
		</Text>
		);
		}, [error, styles.error]);

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 buttonVariant = selectedChannel ? 'enabled' : 'disabled';

const tagFarcasterChannel = React.useMemo(		const tagFarcasterChannel = React.useMemo(
() => (		() => (
Show All 10 Lines	() => (
>		>
<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>
		<View style={styles.errorContainer}>{errorMessage}</View>
<RegistrationButton		<RegistrationButton
onPress={onPressTag}		onPress={onPressTag}
label="Tag channel"		label="Tag channel"
variant={buttonVariant}		variant={buttonVariant}
/>		/>
</View>		</View>
),		),
[		[
styles.sectionContainer,		styles.sectionContainer,
styles.sectionText,		styles.sectionText,
styles.sectionHeaderText,		styles.sectionHeaderText,
		styles.errorContainer,
channelSelectionStyles,		channelSelectionStyles,
onPressSelectChannel,		onPressSelectChannel,
channelSelectionTextContent,		channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,		colors.panelForegroundSecondaryLabel,
		errorMessage,
onPressTag,		onPressTag,
buttonVariant,		buttonVariant,
],		],
);		);

return tagFarcasterChannel;		return tagFarcasterChannel;
}		}

Show All 15 Lines	sectionHeaderText: {
paddingHorizontal: 16,		paddingHorizontal: 16,
paddingBottom: 4,		paddingBottom: 4,
},		},
touchableSectionContainer: {		touchableSectionContainer: {
flexDirection: 'row',		flexDirection: 'row',
justifyContent: 'space-between',		justifyContent: 'space-between',
alignItems: 'center',		alignItems: 'center',
},		},
		errorContainer: {
		height: 18,
		},
		error: {
		fontSize: 12,
		fontWeight: '400',
		lineHeight: 18,
		textAlign: 'center',
		color: 'redText',
		},
};		};

export default TagFarcasterChannel;		export default TagFarcasterChannel;

View Options

lib/selectors/nav-selectors.js

Show All 16 Lines

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 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';

		const tagFarcasterErrorMessages: { +[string]: string } = {
		already_in_use: 'This Farcaster channel is already tagged to a community.',
		ginsuAuthorUnsubmitted Done Inline Actions This copy needs to be reviewed ginsu: This copy needs to be reviewed
		};

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'>,
};		};
Show All 12 Lines	function TagFarcasterChannel(props: Props): React.Node {

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

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

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

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

const { client } = neynarClientContext;		const { client } = neynarClientContext;

React.useEffect(() => {		React.useEffect(() => {
void (async () => {		void (async () => {
const channels = await client.fetchFollowedFarcasterChannels(fid);		const channels = await client.fetchFollowedFarcasterChannels(fid);
Show All 19 Lines	(selectedIndex: ?number) => {
}		}

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

const onPressSelectChannel = React.useCallback(() => {		const onPressSelectChannel = React.useCallback(() => {
		setError(null);
		inkaUnsubmitted Not Done Inline Actions Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more natural to me that the error would disappear only once a different item is picked inka: Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more…

const channelNames = channelOptions.map(channel => channel.name);		const channelNames = channelOptions.map(channel => channel.name);

const options =		const options =
Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;		Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;

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

const containerStyle = {		const containerStyle = {
Show All 28 Lines	const createCreateOrUpdateActionPromise = React.useCallback(async () => {
}		}

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

const onPressTag = React.useCallback(() => {		const onPressTag = React.useCallback(() => {
void dispatchActionPromise(		void dispatchActionPromise(
createOrUpdateFarcasterChannelTagActionTypes,		createOrUpdateFarcasterChannelTagActionTypes,
createCreateOrUpdateActionPromise(),		createCreateOrUpdateActionPromise(),
);		);
}, [createCreateOrUpdateActionPromise, dispatchActionPromise]);		}, [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 errorMessage = React.useMemo(() => {
		if (!error) {
		return null;
		}

		return (
		<Text style={styles.error}>
		{tagFarcasterErrorMessages[error] ?? 'Unknown error.'}
		ginsuAuthorUnsubmitted Done Inline Actions Copy needs to be reviewed ginsu: Copy needs to be reviewed
		</Text>
		);
		}, [error, styles.error]);

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 buttonVariant = selectedChannel ? 'enabled' : 'disabled';

const tagFarcasterChannel = React.useMemo(		const tagFarcasterChannel = React.useMemo(
() => (		() => (
Show All 10 Lines	() => (
>		>
<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>
		<View style={styles.errorContainer}>{errorMessage}</View>
<RegistrationButton		<RegistrationButton
onPress={onPressTag}		onPress={onPressTag}
label="Tag channel"		label="Tag channel"
variant={buttonVariant}		variant={buttonVariant}
/>		/>
</View>		</View>
),		),
[		[
styles.sectionContainer,		styles.sectionContainer,
styles.sectionText,		styles.sectionText,
styles.sectionHeaderText,		styles.sectionHeaderText,
		styles.errorContainer,
channelSelectionStyles,		channelSelectionStyles,
onPressSelectChannel,		onPressSelectChannel,
channelSelectionTextContent,		channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,		colors.panelForegroundSecondaryLabel,
		errorMessage,
onPressTag,		onPressTag,
buttonVariant,		buttonVariant,
],		],
);		);

return tagFarcasterChannel;		return tagFarcasterChannel;
}		}

Show All 15 Lines	sectionHeaderText: {
paddingHorizontal: 16,		paddingHorizontal: 16,
paddingBottom: 4,		paddingBottom: 4,
},		},
touchableSectionContainer: {		touchableSectionContainer: {
flexDirection: 'row',		flexDirection: 'row',
justifyContent: 'space-between',		justifyContent: 'space-between',
alignItems: 'center',		alignItems: 'center',
},		},
		errorContainer: {
		height: 18,
		},
		error: {
		fontSize: 12,
		fontWeight: '400',
		lineHeight: 18,
		textAlign: 'center',
		color: 'redText',
		},
};		};

export default TagFarcasterChannel;		export default TagFarcasterChannel;

View Options

lib/selectors/thread-selectors.js

Show All 16 Lines

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 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';

		const tagFarcasterErrorMessages: { +[string]: string } = {
		already_in_use: 'This Farcaster channel is already tagged to a community.',
		ginsuAuthorUnsubmitted Done Inline Actions This copy needs to be reviewed ginsu: This copy needs to be reviewed
		};

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'>,
};		};
Show All 12 Lines	function TagFarcasterChannel(props: Props): React.Node {

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

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

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

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

const { client } = neynarClientContext;		const { client } = neynarClientContext;

React.useEffect(() => {		React.useEffect(() => {
void (async () => {		void (async () => {
const channels = await client.fetchFollowedFarcasterChannels(fid);		const channels = await client.fetchFollowedFarcasterChannels(fid);
Show All 19 Lines	(selectedIndex: ?number) => {
}		}

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

const onPressSelectChannel = React.useCallback(() => {		const onPressSelectChannel = React.useCallback(() => {
		setError(null);
		inkaUnsubmitted Not Done Inline Actions Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more natural to me that the error would disappear only once a different item is picked inka: Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more…

const channelNames = channelOptions.map(channel => channel.name);		const channelNames = channelOptions.map(channel => channel.name);

const options =		const options =
Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;		Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;

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

const containerStyle = {		const containerStyle = {
Show All 28 Lines	const createCreateOrUpdateActionPromise = React.useCallback(async () => {
}		}

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

const onPressTag = React.useCallback(() => {		const onPressTag = React.useCallback(() => {
void dispatchActionPromise(		void dispatchActionPromise(
createOrUpdateFarcasterChannelTagActionTypes,		createOrUpdateFarcasterChannelTagActionTypes,
createCreateOrUpdateActionPromise(),		createCreateOrUpdateActionPromise(),
);		);
}, [createCreateOrUpdateActionPromise, dispatchActionPromise]);		}, [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 errorMessage = React.useMemo(() => {
		if (!error) {
		return null;
		}

		return (
		<Text style={styles.error}>
		{tagFarcasterErrorMessages[error] ?? 'Unknown error.'}
		ginsuAuthorUnsubmitted Done Inline Actions Copy needs to be reviewed ginsu: Copy needs to be reviewed
		</Text>
		);
		}, [error, styles.error]);

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 buttonVariant = selectedChannel ? 'enabled' : 'disabled';

const tagFarcasterChannel = React.useMemo(		const tagFarcasterChannel = React.useMemo(
() => (		() => (
Show All 10 Lines	() => (
>		>
<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>
		<View style={styles.errorContainer}>{errorMessage}</View>
<RegistrationButton		<RegistrationButton
onPress={onPressTag}		onPress={onPressTag}
label="Tag channel"		label="Tag channel"
variant={buttonVariant}		variant={buttonVariant}
/>		/>
</View>		</View>
),		),
[		[
styles.sectionContainer,		styles.sectionContainer,
styles.sectionText,		styles.sectionText,
styles.sectionHeaderText,		styles.sectionHeaderText,
		styles.errorContainer,
channelSelectionStyles,		channelSelectionStyles,
onPressSelectChannel,		onPressSelectChannel,
channelSelectionTextContent,		channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,		colors.panelForegroundSecondaryLabel,
		errorMessage,
onPressTag,		onPressTag,
buttonVariant,		buttonVariant,
],		],
);		);

return tagFarcasterChannel;		return tagFarcasterChannel;
}		}

Show All 15 Lines	sectionHeaderText: {
paddingHorizontal: 16,		paddingHorizontal: 16,
paddingBottom: 4,		paddingBottom: 4,
},		},
touchableSectionContainer: {		touchableSectionContainer: {
flexDirection: 'row',		flexDirection: 'row',
justifyContent: 'space-between',		justifyContent: 'space-between',
alignItems: 'center',		alignItems: 'center',
},		},
		errorContainer: {
		height: 18,
		},
		error: {
		fontSize: 12,
		fontWeight: '400',
		lineHeight: 18,
		textAlign: 'center',
		color: 'redText',
		},
};		};

export default TagFarcasterChannel;		export default TagFarcasterChannel;

View Options

lib/selectors/user-selectors.js

Show All 16 Lines

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 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';

		const tagFarcasterErrorMessages: { +[string]: string } = {
		already_in_use: 'This Farcaster channel is already tagged to a community.',
		ginsuAuthorUnsubmitted Done Inline Actions This copy needs to be reviewed ginsu: This copy needs to be reviewed
		};

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'>,
};		};
Show All 12 Lines	function TagFarcasterChannel(props: Props): React.Node {

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

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

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

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

const { client } = neynarClientContext;		const { client } = neynarClientContext;

React.useEffect(() => {		React.useEffect(() => {
void (async () => {		void (async () => {
const channels = await client.fetchFollowedFarcasterChannels(fid);		const channels = await client.fetchFollowedFarcasterChannels(fid);
Show All 19 Lines	(selectedIndex: ?number) => {
}		}

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

const onPressSelectChannel = React.useCallback(() => {		const onPressSelectChannel = React.useCallback(() => {
		setError(null);
		inkaUnsubmitted Not Done Inline Actions Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more natural to me that the error would disappear only once a different item is picked inka: Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more…

const channelNames = channelOptions.map(channel => channel.name);		const channelNames = channelOptions.map(channel => channel.name);

const options =		const options =
Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;		Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;

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

const containerStyle = {		const containerStyle = {
Show All 28 Lines	const createCreateOrUpdateActionPromise = React.useCallback(async () => {
}		}

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

const onPressTag = React.useCallback(() => {		const onPressTag = React.useCallback(() => {
void dispatchActionPromise(		void dispatchActionPromise(
createOrUpdateFarcasterChannelTagActionTypes,		createOrUpdateFarcasterChannelTagActionTypes,
createCreateOrUpdateActionPromise(),		createCreateOrUpdateActionPromise(),
);		);
}, [createCreateOrUpdateActionPromise, dispatchActionPromise]);		}, [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 errorMessage = React.useMemo(() => {
		if (!error) {
		return null;
		}

		return (
		<Text style={styles.error}>
		{tagFarcasterErrorMessages[error] ?? 'Unknown error.'}
		ginsuAuthorUnsubmitted Done Inline Actions Copy needs to be reviewed ginsu: Copy needs to be reviewed
		</Text>
		);
		}, [error, styles.error]);

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 buttonVariant = selectedChannel ? 'enabled' : 'disabled';

const tagFarcasterChannel = React.useMemo(		const tagFarcasterChannel = React.useMemo(
() => (		() => (
Show All 10 Lines	() => (
>		>
<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>
		<View style={styles.errorContainer}>{errorMessage}</View>
<RegistrationButton		<RegistrationButton
onPress={onPressTag}		onPress={onPressTag}
label="Tag channel"		label="Tag channel"
variant={buttonVariant}		variant={buttonVariant}
/>		/>
</View>		</View>
),		),
[		[
styles.sectionContainer,		styles.sectionContainer,
styles.sectionText,		styles.sectionText,
styles.sectionHeaderText,		styles.sectionHeaderText,
		styles.errorContainer,
channelSelectionStyles,		channelSelectionStyles,
onPressSelectChannel,		onPressSelectChannel,
channelSelectionTextContent,		channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,		colors.panelForegroundSecondaryLabel,
		errorMessage,
onPressTag,		onPressTag,
buttonVariant,		buttonVariant,
],		],
);		);

return tagFarcasterChannel;		return tagFarcasterChannel;
}		}

Show All 15 Lines	sectionHeaderText: {
paddingHorizontal: 16,		paddingHorizontal: 16,
paddingBottom: 4,		paddingBottom: 4,
},		},
touchableSectionContainer: {		touchableSectionContainer: {
flexDirection: 'row',		flexDirection: 'row',
justifyContent: 'space-between',		justifyContent: 'space-between',
alignItems: 'center',		alignItems: 'center',
},		},
		errorContainer: {
		height: 18,
		},
		error: {
		fontSize: 12,
		fontWeight: '400',
		lineHeight: 18,
		textAlign: 'center',
		color: 'redText',
		},
};		};

export default TagFarcasterChannel;		export default TagFarcasterChannel;

View Options

lib/shared/markdown.js

Show All 16 Lines

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 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';

		const tagFarcasterErrorMessages: { +[string]: string } = {
		already_in_use: 'This Farcaster channel is already tagged to a community.',
		ginsuAuthorUnsubmitted Done Inline Actions This copy needs to be reviewed ginsu: This copy needs to be reviewed
		};

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'>,
};		};
Show All 12 Lines	function TagFarcasterChannel(props: Props): React.Node {

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

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

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

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

const { client } = neynarClientContext;		const { client } = neynarClientContext;

React.useEffect(() => {		React.useEffect(() => {
void (async () => {		void (async () => {
const channels = await client.fetchFollowedFarcasterChannels(fid);		const channels = await client.fetchFollowedFarcasterChannels(fid);
Show All 19 Lines	(selectedIndex: ?number) => {
}		}

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

const onPressSelectChannel = React.useCallback(() => {		const onPressSelectChannel = React.useCallback(() => {
		setError(null);
		inkaUnsubmitted Not Done Inline Actions Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more natural to me that the error would disappear only once a different item is picked inka: Can we move this to `onOptionSelected`? If you disagree I won't insist, but it seems more…

const channelNames = channelOptions.map(channel => channel.name);		const channelNames = channelOptions.map(channel => channel.name);

const options =		const options =
Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;		Platform.OS === 'ios' ? [...channelNames, 'Cancel'] : channelNames;

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

const containerStyle = {		const containerStyle = {
Show All 28 Lines	const createCreateOrUpdateActionPromise = React.useCallback(async () => {
}		}

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

const onPressTag = React.useCallback(() => {		const onPressTag = React.useCallback(() => {
void dispatchActionPromise(		void dispatchActionPromise(
createOrUpdateFarcasterChannelTagActionTypes,		createOrUpdateFarcasterChannelTagActionTypes,
createCreateOrUpdateActionPromise(),		createCreateOrUpdateActionPromise(),
);		);
}, [createCreateOrUpdateActionPromise, dispatchActionPromise]);		}, [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 errorMessage = React.useMemo(() => {
		if (!error) {
		return null;
		}

		return (
		<Text style={styles.error}>
		{tagFarcasterErrorMessages[error] ?? 'Unknown error.'}
		ginsuAuthorUnsubmitted Done Inline Actions Copy needs to be reviewed ginsu: Copy needs to be reviewed
		</Text>
		);
		}, [error, styles.error]);

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 buttonVariant = selectedChannel ? 'enabled' : 'disabled';

const tagFarcasterChannel = React.useMemo(		const tagFarcasterChannel = React.useMemo(
() => (		() => (
Show All 10 Lines	() => (
>		>
<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>
		<View style={styles.errorContainer}>{errorMessage}</View>
<RegistrationButton		<RegistrationButton
onPress={onPressTag}		onPress={onPressTag}
label="Tag channel"		label="Tag channel"
variant={buttonVariant}		variant={buttonVariant}
/>		/>
</View>		</View>
),		),
[		[
styles.sectionContainer,		styles.sectionContainer,
styles.sectionText,		styles.sectionText,
styles.sectionHeaderText,		styles.sectionHeaderText,
		styles.errorContainer,
channelSelectionStyles,		channelSelectionStyles,
onPressSelectChannel,		onPressSelectChannel,
channelSelectionTextContent,		channelSelectionTextContent,
colors.panelForegroundSecondaryLabel,		colors.panelForegroundSecondaryLabel,
		errorMessage,
onPressTag,		onPressTag,
buttonVariant,		buttonVariant,
],		],
);		);

return tagFarcasterChannel;		return tagFarcasterChannel;
}		}

Show All 15 Lines	sectionHeaderText: {
paddingHorizontal: 16,		paddingHorizontal: 16,
paddingBottom: 4,		paddingBottom: 4,
},		},
touchableSectionContainer: {		touchableSectionContainer: {
flexDirection: 'row',		flexDirection: 'row',
justifyContent: 'space-between',		justifyContent: 'space-between',
alignItems: 'center',		alignItems: 'center',
},		},
		errorContainer: {
		height: 18,
		},
		error: {
		fontSize: 12,
		fontWeight: '400',
		lineHeight: 18,
		textAlign: 'center',
		color: 'redText',
		},
};		};

export default TagFarcasterChannel;		export default TagFarcasterChannel;