lbry-desktop/ui/component/searchTopClaim/view.jsx

// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React from 'react';
import { parseURI } from 'lbry-redux';
import ClaimPreview from 'component/claimPreview';
import Button from 'component/button';
import ClaimEffectiveAmount from 'component/claimEffectiveAmount';
import I18nMessage from 'component/i18nMessage';
import { useHistory } from 'react-router';
import LbcSymbol from 'component/common/lbc-symbol';
import { DOMAIN } from 'config';
import Yrbl from 'component/yrbl';

type Props = {
  query: string,
  winningUri: ?Claim,
  doResolveUris: (Array<string>) => void,
  hideLink?: boolean,
  setChannelActive: boolean => void,
  beginPublish: string => void,
  pendingIds: Array<string>,
};

export default function SearchTopClaim(props: Props) {
  const { doResolveUris, query = '', winningUri, hideLink = false, setChannelActive, beginPublish } = props;
  const uriFromQuery = `lbry://${query}`;
  const { push } = useHistory();
  let name;
  let channelUriFromQuery;
  let winningUriIsChannel;
  try {
    const { isChannel, streamName, channelName } = parseURI(uriFromQuery);
    const { isChannel: winnerIsChannel } = parseURI(winningUri);
    winningUriIsChannel = winnerIsChannel;
    if (!isChannel) {
      channelUriFromQuery = `lbry://@${query}`;
      name = streamName;
    } else {
      name = channelName;
    }
  } catch (e) {}

  React.useEffect(() => {
    setChannelActive && winningUriIsChannel && setChannelActive(true);
  }, [setChannelActive, winningUriIsChannel]);

  React.useEffect(() => {
    let urisToResolve = [];
    if (uriFromQuery) {
      urisToResolve.push(uriFromQuery);
    }

    if (channelUriFromQuery) {
      urisToResolve.push(channelUriFromQuery);
    }

    if (urisToResolve.length > 0) {
      doResolveUris(urisToResolve);
    }
  }, [doResolveUris, uriFromQuery, channelUriFromQuery]);

  return (
    <section className="search">
      <header className="search__header">
        {winningUri && (
          <div className="claim-preview__actions--header">
            <a
              className="media__uri"
              href="https://lbry.com/faq/trending"
              title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
            >
              <I18nMessage
                tokens={{
                  lbc: <LbcSymbol />,
                }}
              >
                Most supported %lbc%
              </I18nMessage>
            </a>
          </div>
        )}
        {winningUri && (
          <div className="card">
            <ClaimPreview
              hideRepostLabel
              uri={winningUri}
              type="large"
              placeholder="publish"
              properties={claim => (
                <span className="claim-preview__custom-properties">
                  <ClaimEffectiveAmount uri={winningUri} />
                </span>
              )}
            />
          </div>
        )}
        {!winningUri && uriFromQuery && (
          <div className="empty empty--centered">
            <Yrbl
              type="happy"
              title={__('Whoa!')}
              small
              subtitle={
                <I18nMessage
                  tokens={{
                    repost: (
                      <Button
                        button="link"
                        onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${name}`)}
                        label={__('Repost')}
                      />
                    ),
                    publish: <Button button="link" onClick={() => beginPublish(name)} label={'publish'} />,
                    name: <strong>name</strong>,
                  }}
                >
                  You have found the edge of the internet. %repost% or %publish% your stuff here to claim this spot.
                </I18nMessage>
              }
            />
          </div>
        )}
        {!hideLink && winningUri && (
          <div className="section__actions--between section__actions--no-margin">
            <span />
            <Button
              button="link"
              className="search__top-link"
              label={
                <I18nMessage tokens={{ name: <strong>{query}</strong> }}>View competing uploads for %name%</I18nMessage>
              }
              navigate={`/$/${PAGES.TOP}?name=${query}`}
              iconRight={ICONS.ARROW_RIGHT}
            />
          </div>
        )}
      </header>
    </section>
  );
}