Page MenuHomePhabricator
Files F3539244

D11683.id39207.diff
No OneTemporary
Actions

D11683.id39207.diff
View Options

diff --git a/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js b/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js
--- a/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js
+++ b/native/community-settings/tag-farcaster-channel/tag-farcaster-channel.react.js
@@ -1,10 +1,19 @@
// @flow
+import { useActionSheet } from '@expo/react-native-action-sheet';
+import invariant from 'invariant';
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 { 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 = {
+navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>,
@@ -13,16 +22,151 @@
// eslint-disable-next-line no-unused-vars
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 channels tagged';
+
const tagFarcasterChannel = React.useMemo(
() => (
<View>
- <Text>TagFarcasterChannel</Text>
+ <View style={styles.sectionContainer}>
+ <Text style={styles.sectionText}>
+ Tag a Farcaster channel to tap into its social network and help grow
+ 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.modalForegroundSecondaryLabel}
+ />
+ </TouchableOpacity>
</View>
),
- [],
+ [
+ styles.sectionContainer,
+ styles.sectionText,
+ styles.sectionHeaderText,
+ channelSelectionStyles,
+ onPressSelectChannel,
+ channelSelectionTextContent,
+ colors.modalForegroundSecondaryLabel,
+ ],
);
return tagFarcasterChannel;
}
+const unboundStyles = {
+ sectionContainer: {
+ backgroundColor: 'modalForeground',
+ marginBottom: 24,
+ padding: 16,
+ },
+ sectionText: {
+ color: 'modalBackgroundLabel',
+ fontSize: 14,
+ },
+ sectionHeaderText: {
+ fontSize: 14,
+ fontWeight: '400',
+ lineHeight: 20,
+ color: 'modalBackgroundLabel',
+ paddingHorizontal: 16,
+ paddingBottom: 4,
+ },
+ touchableSectionContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ },
+};
+
export default TagFarcasterChannel;

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 27, 12:10 AM (11 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2709937
Default Alt Text
D11683.id39207.diff (5 KB)

Event Timeline