diff --git a/native/community-settings/tag-farcaster-channel/remove-tag-button.react.js b/native/community-settings/tag-farcaster-channel/remove-tag-button.react.js new file mode 100644 --- /dev/null +++ b/native/community-settings/tag-farcaster-channel/remove-tag-button.react.js @@ -0,0 +1,110 @@ +// @flow + +import * as React from 'react'; +import { Text, ActivityIndicator } from 'react-native'; + +import { + deleteFarcasterChannelTagActionTypes, + useDeleteFarcasterChannelTag, +} from 'lib/actions/community-actions.js'; +import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; +import type { SetState } from 'lib/types/hook-types.js'; +import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; + +import Button from '../../components/button.react.js'; +import { useSelector } from '../../redux/redux-utils.js'; +import { useStyles, useColors } from '../../themes/colors.js'; + +const deleteFarcasterChannelTagStatusSelector = createLoadingStatusSelector( + deleteFarcasterChannelTagActionTypes, +); + +type Props = { + +communityID: string, + +channelID: string, + +isLoadingChannelInfo: boolean, + +setError: SetState, +}; + +function RemoveTagButton(props: Props): React.Node { + const { communityID, channelID, isLoadingChannelInfo, setError } = props; + + const styles = useStyles(unboundStyles); + const colors = useColors(); + + const dispatchActionPromise = useDispatchActionPromise(); + + const deleteFarcasterChannelTag = useDeleteFarcasterChannelTag(); + + const createDeleteActionPromise = React.useCallback(async () => { + try { + return await deleteFarcasterChannelTag({ + commCommunityID: communityID, + farcasterChannelID: channelID, + }); + } catch (e) { + setError(e.message); + throw e; + } + }, [channelID, communityID, deleteFarcasterChannelTag, setError]); + + const onPressRemoveTag = React.useCallback(() => { + void dispatchActionPromise( + deleteFarcasterChannelTagActionTypes, + createDeleteActionPromise(), + ); + }, [createDeleteActionPromise, dispatchActionPromise]); + + const deleteFarcasterChannelTagStatus = useSelector( + deleteFarcasterChannelTagStatusSelector, + ); + + const isLoadingDeleteFarcasterChannelTag = + deleteFarcasterChannelTagStatus === 'loading' || isLoadingChannelInfo; + + const buttonContent = React.useMemo(() => { + if (isLoadingDeleteFarcasterChannelTag) { + return ( + + ); + } + + return Remove tag; + }, [ + colors.panelForegroundLabel, + isLoadingDeleteFarcasterChannelTag, + styles.buttonText, + ]); + + return ( + + ); +} + +const unboundStyles = { + button: { + borderRadius: 8, + paddingVertical: 12, + paddingHorizontal: 24, + borderWidth: 1, + borderColor: 'vibrantRedButton', + }, + buttonText: { + fontSize: 16, + fontWeight: '500', + lineHeight: 24, + color: 'vibrantRedButton', + textAlign: 'center', + }, + buttonContainer: { + height: 24, + }, +}; + +export default RemoveTagButton; 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 @@ -9,6 +9,7 @@ import type { NeynarChannel } from 'lib/types/farcaster-types.js'; import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js'; +import RemoveTagButton from './remove-tag-button.react.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'; @@ -84,6 +85,25 @@ ); }, [error, styles.error]); + const sectionButton = React.useMemo( + () => + selectedChannel ? ( + + ) : ( + + ), + [communityID, isLoadingChannelInfo, selectedChannel], + ); + const channelNameTextContent = selectedChannel?.name ? selectedChannel.name : 'No Farcaster channel tagged'; @@ -100,11 +120,7 @@ Selected channel: {channelNameTextContent} - + {sectionButton} {errorMessage} @@ -116,8 +132,7 @@ styles.channelNameText, styles.errorContainer, channelNameTextContent, - communityID, - isLoadingChannelInfo, + sectionButton, errorMessage, ], );