Page MenuHomePhabricator
Files F3303118

D12043.diff
No OneTemporary
Actions

D12043.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,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<?string>,
+};
+
+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 (
+ <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
@@ -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 ? (
+ <RemoveTagButton
+ channelID={communityInfo.farcasterChannelID}
+ communityID={communityID}
+ setError={setError}
+ />
+ ) : (
+ <TagChannelButton communityID={communityID} setError={setError} />
+ ),
+ [communityID, communityInfo?.farcasterChannelID],
+ );
+
const tagFarcasterChannel = React.useMemo(
() => (
<View>
@@ -78,7 +93,7 @@
<View style={styles.channelNameContainer}>
{channelNameTextContent}
</View>
- <TagChannelButton communityID={communityID} setError={setError} />
+ {sectionButton}
</View>
<View style={styles.errorContainer}>{errorMessage}</View>
</View>
@@ -90,7 +105,7 @@
styles.channelNameContainer,
styles.errorContainer,
channelNameTextContent,
- communityID,
+ sectionButton,
errorMessage,
],
);

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 19, 10:27 AM (22 h, 11 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2537723
Default Alt Text
D12043.diff (4 KB)

Event Timeline