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,37 @@ +// @flow + +import * as React from 'react'; + +import { 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, +}; + +function RemoveTagButton(props: Props): React.Node { + const { communityID, channelID, setError } = props; + + const { removeTag, isLoading } = useRemoveFarcasterChannelTag( + communityID, + channelID, + setError, + ); + + return ( + + ); +} + +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,11 @@ color: var(--text-background-secondary-default); font-size: var(--m-font-16); } + +.errorMessage { + color: var(--text-background-danger-default); + font-size: var(--s-font-14); + margin-top: 8px; + height: 18px; + text-align: center; +} 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 @@ -5,6 +5,7 @@ import { useModalContext } from 'lib/components/modal-provider.react.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'; @@ -22,6 +23,8 @@ state => state.communityStore.communityInfos[communityID], ); + const [removeTagError, setRemoveTagError] = React.useState(); + const channelNameTextContent = React.useMemo(() => { if (!communityInfo?.farcasterChannelID) { return ( @@ -36,17 +39,37 @@ ); }, [communityInfo?.farcasterChannelID]); + const primaryButton = React.useMemo(() => { + if (communityInfo?.farcasterChannelID) { + return ( + + ); + } + // TODO: Implement TagChannelButton + return null; + }, [communityID, communityInfo?.farcasterChannelID]); + const tagFarcasterChannelModal = React.useMemo( () => ( - +
Tag a Farcaster channel so followers can find your Comm community!
Selected channel:
{channelNameTextContent} +
{removeTagError}
), - [channelNameTextContent, popModal], + [channelNameTextContent, popModal, primaryButton, removeTagError], ); return tagFarcasterChannelModal;