Page MenuHomePhorge
Files F32213793

D12534.1765149517.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D12534.1765149517.diff
View Options

diff --git a/lib/shared/community-utils.js b/lib/shared/community-utils.js
--- a/lib/shared/community-utils.js
+++ b/lib/shared/community-utils.js
@@ -18,6 +18,7 @@
'Tag a Farcaster channel so followers can find your Comm community!',
CHANNEL_NAME_HEADER: 'Selected channel:',
NO_CHANNEL_TAGGED: 'No Farcaster channel tagged',
+ REMOVE_TAG_BUTTON: 'Remove tag',
};
const tagFarcasterChannelErrorMessages: { +[string]: string } = {
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
--- a/native/community-settings/tag-farcaster-channel/remove-tag-button.react.js
+++ b/native/community-settings/tag-farcaster-channel/remove-tag-button.react.js
@@ -3,7 +3,10 @@
import * as React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
-import { useRemoveFarcasterChannelTag } from 'lib/shared/community-utils.js';
+import {
+ tagFarcasterChannelCopy,
+ useRemoveFarcasterChannelTag,
+} from 'lib/shared/community-utils.js';
import type { SetState } from 'lib/types/hook-types.js';
import Button from '../../components/button.react.js';
@@ -34,7 +37,11 @@
);
}
- return <Text style={styles.buttonText}>Remove tag</Text>;
+ return (
+ <Text style={styles.buttonText}>
+ {tagFarcasterChannelCopy.REMOVE_TAG_BUTTON}
+ </Text>
+ );
}, [colors.panelForegroundLabel, isLoading, styles.buttonText]);
return (
diff --git a/web/tag-farcaster-channel/remove-tag-button.react.js b/web/tag-farcaster-channel/remove-tag-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/tag-farcaster-channel/remove-tag-button.react.js
@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from 'react';
+
+import {
+ tagFarcasterChannelCopy,
+ useRemoveFarcasterChannelTag,
+} from 'lib/shared/community-utils.js';
+import type { SetState } from 'lib/types/hook-types.js';
+
+import Button, { buttonThemes } from '../components/button.react.js';
+
+type Props = {
+ +communityID: string,
+ +channelID: string,
+ +setError: SetState<?string>,
+};
+
+function RemoveTagButton(props: Props): React.Node {
+ const { communityID, channelID, setError } = props;
+
+ const { removeTag, isLoading } = useRemoveFarcasterChannelTag(
+ communityID,
+ channelID,
+ setError,
+ );
+
+ return (
+ <Button
+ variant="filled"
+ buttonColor={buttonThemes.danger}
+ onClick={removeTag}
+ disabled={isLoading}
+ >
+ {tagFarcasterChannelCopy.REMOVE_TAG_BUTTON}
+ </Button>
+ );
+}
+
+export default RemoveTagButton;
diff --git a/web/tag-farcaster-channel/tag-farcaster-channel-modal.css b/web/tag-farcaster-channel/tag-farcaster-channel-modal.css
--- a/web/tag-farcaster-channel/tag-farcaster-channel-modal.css
+++ b/web/tag-farcaster-channel/tag-farcaster-channel-modal.css
@@ -20,3 +20,17 @@
color: var(--text-background-secondary-default);
font-size: var(--m-font-16);
}
+
+.errorMessage {
+ position: absolute;
+ color: var(--text-background-danger-default);
+ font-size: var(--s-font-14);
+ margin-top: 4px;
+ visibility: hidden;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.errorMessageVisible {
+ visibility: visible;
+}
diff --git a/web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js b/web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js
--- a/web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js
+++ b/web/tag-farcaster-channel/tag-farcaster-channel-modal.react.js
@@ -1,11 +1,16 @@
// @flow
+import classNames from 'classnames';
import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js';
-import { tagFarcasterChannelCopy } from 'lib/shared/community-utils.js';
+import {
+ tagFarcasterChannelCopy,
+ tagFarcasterChannelErrorMessages,
+} from 'lib/shared/community-utils.js';
import type { CommunityInfo } from 'lib/types/community-types.js';
+import RemoveTagButton from './remove-tag-button.react.js';
import css from './tag-farcaster-channel-modal.css';
import Modal from '../modals/modal.react.js';
import { useSelector } from '../redux/redux-utils.js';
@@ -23,6 +28,8 @@
state => state.communityStore.communityInfos[communityID],
);
+ const [removeTagError, setRemoveTagError] = React.useState<?string>();
+
const channelNameTextContent = React.useMemo(() => {
if (!communityInfo?.farcasterChannelID) {
return (
@@ -39,9 +46,37 @@
);
}, [communityInfo?.farcasterChannelID]);
+ const primaryButton = React.useMemo(() => {
+ if (communityInfo?.farcasterChannelID) {
+ return (
+ <RemoveTagButton
+ communityID={communityID}
+ channelID={communityInfo.farcasterChannelID}
+ setError={setRemoveTagError}
+ />
+ );
+ }
+ // TODO: Implement TagChannelButton
+ return null;
+ }, [communityID, communityInfo?.farcasterChannelID]);
+
+ const errorMessageClassName = classNames(css.errorMessage, {
+ [css.errorMessageVisible]: removeTagError,
+ });
+
+ const errorMessage =
+ removeTagError && tagFarcasterChannelErrorMessages[removeTagError]
+ ? tagFarcasterChannelErrorMessages[removeTagError]
+ : 'Unknown error.';
+
const tagFarcasterChannelModal = React.useMemo(
() => (
- <Modal name="Tag a Farcaster channel" onClose={popModal} size="large">
+ <Modal
+ name="Tag a Farcaster channel"
+ onClose={popModal}
+ size="large"
+ primaryButton={primaryButton}
+ >
<div className={css.modalDescription}>
{tagFarcasterChannelCopy.DESCRIPTION}
</div>
@@ -49,9 +84,16 @@
{tagFarcasterChannelCopy.CHANNEL_NAME_HEADER}
</div>
{channelNameTextContent}
+ <div className={errorMessageClassName}>{errorMessage}</div>
</Modal>
),
- [channelNameTextContent, popModal],
+ [
+ channelNameTextContent,
+ errorMessage,
+ errorMessageClassName,
+ popModal,
+ primaryButton,
+ ],
);
return tagFarcasterChannelModal;

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 11:18 PM (21 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5846407
Default Alt Text
D12534.1765149517.diff (5 KB)

Event Timeline