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,109 @@ +// @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, + +setError: SetState, +}; + +function RemoveTagButton(props: Props): React.Node { + const { communityID, channelID, 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'; + + 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 @@ -5,6 +5,7 @@ import type { CommunityInfo } from 'lib/types/community-types.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'; @@ -64,6 +65,20 @@ styles.noChannelText, ]); + const sectionButton = React.useMemo( + () => + communityInfo?.farcasterChannelID ? ( + + ) : ( + + ), + [communityID, communityInfo?.farcasterChannelID], + ); + const tagFarcasterChannel = React.useMemo( () => ( @@ -78,7 +93,7 @@ {channelNameTextContent} - + {sectionButton} {errorMessage} @@ -90,7 +105,7 @@ styles.channelNameContainer, styles.errorContainer, channelNameTextContent, - communityID, + sectionButton, errorMessage, ], );