Page MenuHomePhabricator
Files F3305217

D12043.id40203.diff
No OneTemporary
Actions

D12043.id40203.diff
View Options

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<?string>,
+};
+
+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 (
+ <ActivityIndicator size="small" color={colors.panelForegroundLabel} />
+ );
+ }
+
+ return <Text style={styles.buttonText}>Remove tag</Text>;
+ }, [
+ colors.panelForegroundLabel,
+ isLoadingDeleteFarcasterChannelTag,
+ styles.buttonText,
+ ]);
+
+ return (
+ <Button
+ style={styles.button}
+ disabled={isLoadingDeleteFarcasterChannelTag}
+ onPress={onPressRemoveTag}
+ >
+ {buttonContent}
+ </Button>
+ );
+}
+
+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 ? (
+ <RemoveTagButton
+ channelID={selectedChannel.id}
+ communityID={communityID}
+ isLoadingChannelInfo={isLoadingChannelInfo}
+ setError={setError}
+ />
+ ) : (
+ <TagChannelButton
+ communityID={communityID}
+ isLoadingChannelInfo={isLoadingChannelInfo}
+ setError={setError}
+ />
+ ),
+ [communityID, isLoadingChannelInfo, selectedChannel],
+ );
+
const channelNameTextContent = selectedChannel?.name
? selectedChannel.name
: 'No Farcaster channel tagged';
@@ -100,11 +120,7 @@
<View style={styles.panelSectionContainer}>
<Text style={styles.sectionText}>Selected channel:</Text>
<Text style={styles.channelNameText}>{channelNameTextContent}</Text>
- <TagChannelButton
- communityID={communityID}
- isLoadingChannelInfo={isLoadingChannelInfo}
- setError={setError}
- />
+ {sectionButton}
</View>
<View style={styles.errorContainer}>{errorMessage}</View>
</View>
@@ -116,8 +132,7 @@
styles.channelNameText,
styles.errorContainer,
channelNameTextContent,
- communityID,
- isLoadingChannelInfo,
+ sectionButton,
errorMessage,
],
);

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 19, 12:32 PM (21 h, 49 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2539381
Default Alt Text
D12043.id40203.diff (5 KB)

Event Timeline