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 index 5464b8cdf..1f3a3e54d 100644 --- 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,104 +1,149 @@ // @flow import * as React from 'react'; import { View, Text } from 'react-native'; +import type { CommunityInfo } from 'lib/types/community-types.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, }; type Props = { +navigation: TagFarcasterChannelNavigationProp<'TagFarcasterChannel'>, +route: NavigationRoute<'TagFarcasterChannel'>, }; function TagFarcasterChannel(props: Props): React.Node { const { route } = props; const { communityID } = route.params; + const communityInfo: ?CommunityInfo = useSelector( + state => state.communityStore.communityInfos[communityID], + ); + const styles = useStyles(unboundStyles); const [error, setError] = React.useState(null); const errorMessage = React.useMemo(() => { if (!error) { return null; } return ( {tagFarcasterChannelErrorMessages[error] ?? 'Unknown error.'} ); }, [error, styles.error]); + const channelNameTextContent = React.useMemo(() => { + if (!communityInfo?.farcasterChannelID) { + return ( + No Farcaster channel tagged + ); + } + + return ( + + {`/${communityInfo.farcasterChannelID}`} + + ); + }, [ + communityInfo?.farcasterChannelID, + styles.channelNameText, + styles.noChannelText, + ]); + const tagFarcasterChannel = React.useMemo( () => ( Tag a Farcaster channel so followers can find your Comm community! FARCASTER CHANNEL + Selected channel: + + {channelNameTextContent} + {errorMessage} ), [ styles.panelSectionContainer, styles.sectionText, styles.sectionHeaderText, + styles.channelNameContainer, styles.errorContainer, + channelNameTextContent, communityID, errorMessage, ], ); return tagFarcasterChannel; } const unboundStyles = { panelSectionContainer: { backgroundColor: 'panelForeground', padding: 16, borderBottomColor: 'panelSeparator', borderBottomWidth: 1, borderTopColor: 'panelSeparator', borderTopWidth: 1, }, sectionText: { color: 'panelForegroundLabel', fontSize: 14, }, sectionHeaderText: { fontSize: 14, fontWeight: '400', lineHeight: 20, color: 'panelForegroundLabel', paddingHorizontal: 16, paddingBottom: 4, marginTop: 24, }, + channelNameContainer: { + marginTop: 8, + marginBottom: 24, + height: 20, + }, + channelNameText: { + fontSize: 16, + fontWeight: '600', + color: 'panelForegroundLabel', + }, + noChannelText: { + fontSize: 16, + color: 'panelForegroundLabel', + }, errorContainer: { height: 18, }, error: { fontSize: 12, fontWeight: '400', lineHeight: 18, textAlign: 'center', color: 'redText', }, }; export default TagFarcasterChannel;