Page MenuHomePhorge
Files F32300957

D12567.1765285730.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D12567.1765285730.diff
View Options

diff --git a/web/tag-farcaster-channel/create-farcaster-channel-tag-modal.css b/web/tag-farcaster-channel/create-farcaster-channel-tag-modal.css
--- a/web/tag-farcaster-channel/create-farcaster-channel-tag-modal.css
+++ b/web/tag-farcaster-channel/create-farcaster-channel-tag-modal.css
@@ -1,6 +1,6 @@
.inputLabel {
color: var(--text-background-primary-default);
- margin-bottom: 8px;
+ margin-bottom: 16px;
}
.dropdownInputContainer {
@@ -9,7 +9,24 @@
align-items: center;
}
+.textInputContainer {
+ margin: 0 32px;
+}
+
+.tagFarcasterChannelByNameContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ margin-top: 24px;
+ visibility: hidden;
+}
+
+.tagFarcasterChannelByNameContainerVisible {
+ visibility: visible;
+}
+
.errorMessage {
+ margin-top: 4px;
text-align: center;
color: var(--text-background-danger-default);
font-size: var(--s-font-14);
diff --git a/web/tag-farcaster-channel/create-farcaster-channel-tag-modal.react.js b/web/tag-farcaster-channel/create-farcaster-channel-tag-modal.react.js
--- a/web/tag-farcaster-channel/create-farcaster-channel-tag-modal.react.js
+++ b/web/tag-farcaster-channel/create-farcaster-channel-tag-modal.react.js
@@ -15,6 +15,7 @@
import css from './create-farcaster-channel-tag-modal.css';
import Button, { buttonThemes } from '../components/button.react.js';
import Dropdown, { type DropdownOption } from '../components/dropdown.react.js';
+import Input from '../modals/input.react.js';
import Modal from '../modals/modal.react.js';
type Props = {
@@ -38,6 +39,7 @@
$ReadOnlyArray<DropdownOption>,
>([]);
const [selectedOption, setSelectedOption] = React.useState<?string>(null);
+ const [channelNameText, setChannelNameText] = React.useState<string>('');
const [error, setError] = React.useState<?string>(null);
React.useEffect(() => {
@@ -51,30 +53,56 @@
name: `/${channel.id}`,
}));
- setChannelOptions(sortedChannels);
+ const options = [{ id: 'other', name: 'Other' }, ...sortedChannels];
+
+ setChannelOptions(options);
})();
}, [client, fid]);
const onChangeSelectedOption = React.useCallback((option: string) => {
setError(null);
+ setChannelNameText('');
setSelectedOption(option);
}, []);
+ const onChangeChannelNameText = React.useCallback(
+ (event: SyntheticEvent<HTMLInputElement>) => {
+ setChannelNameText(event.currentTarget.value);
+ },
+ [],
+ );
+
const { createTag, isLoading } = useCreateFarcasterChannelTag(
communityID,
setError,
popModal,
);
- const onClickTagChannel = React.useCallback(() => {
+ const onClickTagChannel = React.useCallback(async () => {
if (!selectedOption) {
return;
}
- createTag(selectedOption);
- }, [createTag, selectedOption]);
+ if (selectedOption !== 'other') {
+ createTag(selectedOption);
+ return;
+ }
- const buttonDisabled = isLoading || !selectedOption;
+ const channelInfo =
+ await neynarClientContext.client.fetchFarcasterChannelByName(
+ channelNameText,
+ );
+ if (!channelInfo) {
+ setError('channel_not_found');
+ return;
+ }
+ createTag(channelInfo.id);
+ }, [channelNameText, createTag, neynarClientContext.client, selectedOption]);
+
+ const buttonDisabled =
+ isLoading ||
+ !selectedOption ||
+ (selectedOption === 'other' && !channelNameText);
const primaryButton = React.useMemo(() => {
return (
@@ -89,6 +117,14 @@
);
}, [onClickTagChannel, buttonDisabled]);
+ const tagFarcasterChannelByNameContainerClassName = classNames(
+ css.tagFarcasterChannelByNameContainer,
+ {
+ [css.tagFarcasterChannelByNameContainerVisible]:
+ selectedOption === 'other',
+ },
+ );
+
const errorMessageClassName = classNames(css.errorMessage, {
[css.errorMessageVisible]: error,
});
@@ -115,17 +151,30 @@
setActiveSelection={onChangeSelectedOption}
/>
</div>
+ <div className={tagFarcasterChannelByNameContainerClassName}>
+ <div className={css.inputLabel}>Channel name</div>
+ <div className={css.textInputContainer}>
+ <Input
+ type="text"
+ value={channelNameText}
+ onChange={onChangeChannelNameText}
+ />
+ </div>
+ </div>
<div className={errorMessageClassName}>{errorMessage}</div>
</Modal>
),
[
+ channelNameText,
channelOptions,
errorMessage,
errorMessageClassName,
+ onChangeChannelNameText,
onChangeSelectedOption,
popModal,
primaryButton,
selectedOption,
+ tagFarcasterChannelByNameContainerClassName,
],
);

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 9, 1:08 PM (10 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5854505
Default Alt Text
D12567.1765285730.diff (4 KB)

Event Timeline