SearchChannelField

- Factor out for re-use in upcoming Shared Blocklist
- Improvements:
    - Uses floating popup to show the suggestion/result rather than inline.
    - Users can now press Enter to select the suggestion, instead of having to use the mouse.
    - Users now don't need to enter '@' for channel names. They will still need to enter the full channel name, and disambiguate with claim_id if necessary.
    - Fix jumpiness in position as the user types.

ui/component/searchChannelField/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { doToast } from 'redux/actions/notifications';
+import SearchChannelField from './view';
+
+const perform = (dispatch) => ({
+  doToast: (options) => dispatch(doToast(options)),
+});
+
+export default connect(null, perform)(SearchChannelField);

ui/component/searchChannelField/view.jsx

@@ -0,0 +1,199 @@
+// @flow
+import React from 'react';
+import { isNameValid, parseURI } from 'lbry-redux';
+import Button from 'component/button';
+import ClaimPreview from 'component/claimPreview';
+import { FormField } from 'component/common/form-components/form-field';
+import Icon from 'component/common/icon';
+import TagsSearch from 'component/tagsSearch';
+import * as ICONS from 'constants/icons';
+import { getUriForSearchTerm } from 'util/search';
+
+type Props = {
+  label: string,
+  labelAddNew: string,
+  labelFoundAction: string,
+  values: Array<string>, // [ 'name#id', 'name#id' ]
+  onAdd?: (channelUri: string) => void,
+  onRemove?: (channelUri: string) => void,
+  // --- perform ---
+  doToast: ({ message: string }) => void,
+};
+
+export default function SearchChannelField(props: Props) {
+  const { label, labelAddNew, labelFoundAction, values, onAdd, onRemove, doToast } = props;
+
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [searchTermError, setSearchTermError] = React.useState('');
+  const [searchUri, setSearchUri] = React.useState('');
+  const addTagRef = React.useRef<any>();
+
+  function parseUri(name: string) {
+    try {
+      return parseURI(name);
+    } catch (e) {}
+
+    return undefined;
+  }
+
+  function addTag(newTags: Array<Tag>) {
+    // Ignoring multiple entries for now, although <TagsSearch> supports it.
+    const uri = parseUri(newTags[0].name);
+
+    if (uri && uri.isChannel && uri.claimName && uri.claimId) {
+      if (!values.includes(newTags[0].name)) {
+        if (onAdd) {
+          onAdd(newTags[0].name);
+        }
+      }
+    } else {
+      doToast({ message: __('Invalid channel URL "%url%"', { url: newTags[0].name }), isError: true });
+    }
+  }
+
+  function removeTag(tagToRemove: Tag) {
+    const uri = parseUri(tagToRemove.name);
+
+    if (uri && uri.isChannel && uri.claimName && uri.claimId) {
+      if (values.includes(tagToRemove.name)) {
+        if (onRemove) {
+          onRemove(tagToRemove.name);
+        }
+      }
+    }
+  }
+
+  function clearSearchTerm() {
+    setSearchTerm('');
+    setSearchTermError('');
+    setSearchUri('');
+  }
+
+  function handleKeyPress(e) {
+    // We have to use 'key' instead of 'keyCode' in this event.
+    if (e.key === 'Enter' && addTagRef && addTagRef.current && addTagRef.current.click) {
+      e.preventDefault();
+      addTagRef.current.click();
+    }
+  }
+
+  function getFoundChannelRenderActionsFn() {
+    function handleFoundChannelClick(claim) {
+      if (claim && claim.name && claim.claim_id) {
+        addTag([{ name: claim.name + '#' + claim.claim_id }]);
+        clearSearchTerm();
+      }
+    }
+
+    return (claim) => {
+      return (
+        <Button
+          ref={addTagRef}
+          requiresAuth
+          button="primary"
+          label={labelFoundAction}
+          onClick={() => handleFoundChannelClick(claim)}
+        />
+      );
+    };
+  }
+
+  // 'searchTerm' sanitization
+  React.useEffect(() => {
+    if (!searchTerm) {
+      clearSearchTerm();
+    } else {
+      const isUrl = searchTerm.startsWith('https://') || searchTerm.startsWith('lbry://');
+      const autoAlias = !isUrl && !searchTerm.startsWith('@') ? '@' : '';
+
+      const [uri, error] = getUriForSearchTerm(`${autoAlias}${searchTerm}`);
+      setSearchTermError(error ? __('Something not quite right..') : '');
+
+      try {
+        const { streamName, channelName, isChannel } = parseURI(uri);
+
+        if (!isChannel && streamName && isNameValid(streamName)) {
+          setSearchTermError(__('Not a channel (prefix with "@", or enter the channel URL)'));
+          setSearchUri('');
+        } else if (isChannel && channelName && isNameValid(channelName)) {
+          setSearchUri(uri);
+        }
+      } catch (e) {
+        setSearchTermError(e.message);
+        setSearchUri('');
+      }
+    }
+  }, [searchTerm, setSearchTermError]);
+
+  return (
+    <div className="search__channel tag--blocked-words">
+      <TagsSearch
+        label={label}
+        labelAddNew={labelAddNew}
+        tagsPassedIn={values.map((x) => ({ name: x }))}
+        onSelect={addTag}
+        onRemove={removeTag}
+        disableAutoFocus
+        hideInputField
+        hideSuggestions
+        disableControlTags
+      />
+
+      <div className="search__channel--popup">
+        <FormField
+          type="text"
+          name="moderator_search"
+          className="form-field--address"
+          label={
+            <>
+              {labelAddNew}
+              <Icon
+                customTooltipText={__(HELP.CHANNEL_SEARCH)}
+                className="icon--help"
+                icon={ICONS.HELP}
+                tooltip
+                size={16}
+              />
+            </>
+          }
+          placeholder={__('Enter full channel name or URL')}
+          value={searchTerm}
+          error={searchTermError}
+          onKeyPress={(e) => handleKeyPress(e)}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+
+        {searchUri && (
+          <div className="search__channel--popup-results">
+            <ClaimPreview
+              uri={searchUri}
+              hideMenu
+              hideRepostLabel
+              disableNavigation
+              showNullPlaceholder
+              properties={''}
+              renderActions={getFoundChannelRenderActionsFn()}
+              empty={
+                <div className="claim-preview claim-preview--inactive claim-preview--large claim-preview__empty">
+                  {__('Channel not found')}
+                  <Icon
+                    customTooltipText={__(HELP.CHANNEL_SEARCH)}
+                    className="icon--help"
+                    icon={ICONS.HELP}
+                    tooltip
+                    size={22}
+                  />
+                </div>
+              }
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// prettier-ignore
+const HELP = {
+  CHANNEL_SEARCH: 'Enter the full channel name or URL to search.\n\nExamples:\n - @channel\n - @channel#3\n - https://odysee.com/@Odysee:8\n - lbry://@Odysee#8',
+};

ui/scss/component/_search.scss

@@ -137,3 +137,40 @@
     max-width: 15rem;
   }
 }
+
+.search__channel {
+  margin-bottom: var(--spacing-l);
+
+  fieldset-section {
+    margin-top: 0;
+  }
+}
+
+.search__channel--popup {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.search__channel--popup-results {
+  position: absolute;
+  z-index: 99;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #21252980;
+  color: white;
+
+  .claim-preview__title {
+    color: #eff1f4;
+  }
+
+  .button--uri-indicator,
+  .media__subtitle {
+    color: #d8dde1;
+  }
+
+  .icon--help {
+    vertical-align: middle;
+  }
+}