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,16 +1,24 @@ // @flow +import invariant from 'invariant'; import * as React from 'react'; import { View, Text } from 'react-native'; +import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js'; +import type { CommunityInfo } from 'lib/types/community-types.js'; +import type { NeynarChannel } from 'lib/types/farcaster-types.js'; +import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js'; + import TagChannelButton from './tag-channel-button.react.js'; import type { TagFarcasterChannelNavigationProp } from './tag-farcaster-channel-navigator.react.js'; import { tagFarcasterChannelErrorMessages } from './tag-farcaster-channel-utils.js'; import { type NavigationRoute } from '../../navigation/route-names.js'; +import { useSelector } from '../../redux/redux-utils.js'; import { useStyles } from '../../themes/colors.js'; export type TagFarcasterChannelParams = { +communityID: string, + +farcasterChannel: ?NeynarChannel, }; type Props = { @@ -21,7 +29,38 @@ function TagFarcasterChannel(props: Props): React.Node { const { route } = props; - const { communityID } = route.params; + const { communityID, farcasterChannel } = route.params; + + const fid = useCurrentUserFID(); + invariant(fid, 'FID should be set'); + + const neynarClientContext = React.useContext(NeynarClientContext); + invariant(neynarClientContext, 'NeynarClientContext is missing'); + + const { client } = neynarClientContext; + + const communityInfo: ?CommunityInfo = useSelector( + state => state.communityStore.communityInfos[communityID], + ); + + const [selectedChannel, setSelectedChannel] = + React.useState(farcasterChannel); + + React.useEffect(() => { + void (async () => { + if (!communityInfo?.farcasterChannelID) { + setSelectedChannel(null); + return; + } + + const channel = await client.fetchFarcasterChannelInfo( + communityInfo.farcasterChannelID, + fid, + ); + + setSelectedChannel(channel); + })(); + }, [client, communityInfo?.farcasterChannelID, fid]); const styles = useStyles(unboundStyles); @@ -39,6 +78,10 @@ ); }, [error, styles.error]); + const channelNameTextContent = selectedChannel?.name + ? selectedChannel.name + : 'No Farcaster channel tagged'; + const tagFarcasterChannel = React.useMemo( () => ( @@ -49,6 +92,8 @@ FARCASTER CHANNEL + Selected channel: + {channelNameTextContent} {errorMessage} @@ -58,7 +103,9 @@ styles.panelSectionContainer, styles.sectionText, styles.sectionHeaderText, + styles.channelNameText, styles.errorContainer, + channelNameTextContent, communityID, errorMessage, ], @@ -89,6 +136,13 @@ paddingBottom: 4, marginTop: 24, }, + channelNameText: { + fontSize: 16, + fontWeight: '600', + color: 'panelForegroundLabel', + marginTop: 8, + marginBottom: 24, + }, errorContainer: { height: 18, }, diff --git a/native/components/community-actions-button.react.js b/native/components/community-actions-button.react.js --- a/native/components/community-actions-button.react.js +++ b/native/components/community-actions-button.react.js @@ -2,13 +2,17 @@ import { useActionSheet } from '@expo/react-native-action-sheet'; import { useNavigation } from '@react-navigation/native'; +import invariant from 'invariant'; import * as React from 'react'; import { TouchableOpacity, View } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { NeynarClientContext } from 'lib/components/neynar-client-provider.react.js'; import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { DISABLE_TAGGING_FARCASTER_CHANNEL } from 'lib/shared/community-utils.js'; import { useThreadHasPermission } from 'lib/shared/thread-utils.js'; +import type { CommunityInfo } from 'lib/types/community-types.js'; +import type { NeynarChannel } from 'lib/types/farcaster-types.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadTypes } from 'lib/types/thread-types-enum.js'; @@ -38,8 +42,35 @@ const { navigate } = useNavigation(); + const neynarClientContext = React.useContext(NeynarClientContext); + invariant(neynarClientContext, 'NeynarClientContext is missing'); + + const { client } = neynarClientContext; + + const communityInfo: ?CommunityInfo = useSelector( + state => state.communityStore.communityInfos[community.id], + ); + const fid = useCurrentUserFID(); + const [farcasterChannel, setFarcasterChannel] = + React.useState(null); + + React.useEffect(() => { + void (async () => { + if (!communityInfo?.farcasterChannelID || !fid) { + return; + } + + const channel = await client.fetchFarcasterChannelInfo( + communityInfo.farcasterChannelID, + fid, + ); + + setFarcasterChannel(channel); + })(); + }, [client, communityInfo?.farcasterChannelID, fid]); + const navigateToInviteLinksView = React.useCallback(() => { if (!inviteLink || !community) { return; @@ -77,10 +108,11 @@ screen: TagFarcasterChannelRouteName, params: { communityID: community.id, + farcasterChannel, }, }, ); - }, [community.id, navigate]); + }, [community.id, farcasterChannel, navigate]); const insets = useSafeAreaInsets(); const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);