winning claim style pass

ui/component/commentsList/view.jsx

@@ -211,7 +211,9 @@ function CommentList(props: Props) {
         <>
           <CommentCreate uri={uri} />
 
-          {!isFetchingComments && hasNoComments && <Empty text={__('That was pretty deep. What do you think?')} />}
+          {!isFetchingComments && hasNoComments && (
+            <Empty padded text={__('That was pretty deep. What do you think?')} />
+          )}
 
           <ul className="comments" ref={commentRef}>
             {comments &&

ui/component/common/empty.jsx

@@ -1,30 +1,24 @@
 // @flow
 import React from 'react';
+import classnames from 'classnames';
 
 type Props = {
   text: ?string,
+  padded?: boolean,
 };
 
-class Empty extends React.PureComponent<Props> {
+export default function Empty(props: Props) {
-  static defaultProps = {
+  const { text = '', padded = false } = props;
-    text: '',
-  };
 
-  render() {
+  return (
-    const { text } = this.props;
+    <div className={classnames('empty__wrap', { 'empty__wrap--padded': padded })}>
-
+      <div>
-    return (
+        {text && (
-      <div className="empty__wrap">
+          <div className="empty__content">
-        <div>
+            <p className="empty__text">{text}</p>
-          {text && (
+          </div>
-            <div className="empty__content">
+        )}
-              <p className="empty__text">{text}</p>
-            </div>
-          )}
-        </div>
       </div>
-    );
+    </div>
-  }
+  );
 }
-
-export default Empty;

ui/component/searchTopClaim/index.js

@@ -1,14 +1,20 @@
 import { connect } from 'react-redux';
-import { doResolveUris, doClearPublish, doPrepareEdit, selectPendingIds } from 'lbry-redux';
+import { doResolveUris, doClearPublish, doPrepareEdit, selectPendingIds, makeSelectClaimForUri } from 'lbry-redux';
-import { makeSelectWinningUriForQuery } from 'redux/selectors/search';
+import { makeSelectWinningUriForQuery, makeSelectIsResolvingWinningUri } from 'redux/selectors/search';
 import SearchTopClaim from './view';
 import { push } from 'connected-react-router';
 import * as PAGES from 'constants/pages';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  winningUri: makeSelectWinningUriForQuery(props.query)(state),
+  const winningUri = makeSelectWinningUriForQuery(props.query)(state);
-  pendingIds: selectPendingIds(state),
+
-});
+  return {
+    winningUri,
+    winningClaim: winningUri ? makeSelectClaimForUri(winningUri)(state) : undefined,
+    isResolvingWinningUri: props.query ? makeSelectIsResolvingWinningUri(props.query)(state) : false,
+    pendingIds: selectPendingIds(state),
+  };
+};
 
 const perform = dispatch => ({
   beginPublish: name => {

ui/component/searchTopClaim/view.jsx

@@ -10,20 +10,30 @@ 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,
+  winningUri: ?string,
   doResolveUris: (Array<string>) => void,
   hideLink?: boolean,
   setChannelActive: boolean => void,
   beginPublish: string => void,
   pendingIds: Array<string>,
+  isResolvingWinningUri: boolean,
+  winningClaim: ?Claim,
 };
 
 export default function SearchTopClaim(props: Props) {
-  const { doResolveUris, query = '', winningUri, hideLink = false, setChannelActive, beginPublish } = props;
+  const {
+    doResolveUris,
+    query = '',
+    winningUri,
+    winningClaim,
+    hideLink = false,
+    setChannelActive,
+    beginPublish,
+    isResolvingWinningUri,
+  } = props;
   const uriFromQuery = `lbry://${query}`;
   const { push } = useHistory();
   let name;
@@ -60,82 +70,69 @@ export default function SearchTopClaim(props: Props) {
     }
   }, [doResolveUris, uriFromQuery, channelUriFromQuery]);
 
+  if (winningUri && !winningClaim && isResolvingWinningUri) {
+    return null;
+  }
+
   return (
-    <section className="search">
+    <div className="search__header">
-      <header className="search__header">
+      {winningUri && (
-        {winningUri && (
+        <div className="claim-preview__actions--header">
-          <div className="claim-preview__actions--header">
+          <a
-            <a
+            className="media__uri"
-              className="media__uri"
+            href="https://lbry.com/faq/trending"
-              href="https://lbry.com/faq/trending"
+            title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
-              title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
+          >
-            >
+            <LbcSymbol prefix={__('Most supported')} />
-              <I18nMessage
+          </a>
-                tokens={{
+        </div>
-                  lbc: <LbcSymbol />,
+      )}
-                }}
+      {winningUri && (
-              >
+        <div className="card">
-                Most supported %lbc%
+          <ClaimPreview
-              </I18nMessage>
+            hideRepostLabel
-            </a>
+            uri={winningUri}
-          </div>
+            type="large"
-        )}
+            properties={claim => (
-        {winningUri && (
+              <span className="claim-preview__custom-properties">
-          <div className="card">
+                <ClaimEffectiveAmount uri={winningUri} />
-            <ClaimPreview
+              </span>
-              hideRepostLabel
+            )}
-              uri={winningUri}
+          />
-              type="large"
+        </div>
-              placeholder="publish"
+      )}
-              properties={claim => (
+      {!winningUri && uriFromQuery && (
-                <span className="claim-preview__custom-properties">
+        <div className="card card--section help--inline">
-                  <ClaimEffectiveAmount uri={winningUri} />
+          <I18nMessage
+            tokens={{
+              repost: (
+                <Button button="link" onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${name}`)} label={__('Repost')} />
+              ),
+              publish: (
+                <span>
+                  <Button button="link" onClick={() => beginPublish(name)} label={'publish'} />
                 </span>
-              )}
+              ),
-            />
+            }}
-          </div>
+          >
-        )}
+            You have found the edge of the internet. %repost% or %publish% your stuff here to claim this spot.
-        {!winningUri && uriFromQuery && (
+          </I18nMessage>
-          <div className="empty empty--centered">
+        </div>
-            <Yrbl
+      )}
-              type="happy"
+      {!hideLink && winningUri && (
-              title={__('Whoa!')}
+        <div className="section__actions--between section__actions--no-margin">
-              small
+          <span />
-              subtitle={
+          <Button
-                <I18nMessage
+            button="link"
-                  tokens={{
+            className="search__top-link"
-                    repost: (
+            label={
-                      <Button
+              <I18nMessage tokens={{ name: <strong>{query}</strong> }}>View competing uploads for %name%</I18nMessage>
-                        button="link"
+            }
-                        onClick={() => push(`/$/${PAGES.REPOST_NEW}?to=${name}`)}
+            navigate={`/$/${PAGES.TOP}?name=${query}`}
-                        label={__('Repost')}
+            iconRight={ICONS.ARROW_RIGHT}
-                      />
+          />
-                    ),
+        </div>
-                    publish: <Button button="link" onClick={() => beginPublish(name)} label={'publish'} />,
+      )}
-                    name: <strong>name</strong>,
+    </div>
-                  }}
-                >
-                  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>
   );
 }

ui/component/yrbl/index.jsx

@@ -11,7 +11,6 @@ type Props = {
   className?: string,
   actions?: Node,
   alwaysShow?: boolean,
-  small: boolean,
 };
 
 const yrblTypes = {
@@ -25,7 +24,7 @@ export default class extends React.PureComponent<Props> {
   };
 
   render() {
-    const { title, subtitle, type, className, actions, small, alwaysShow = false } = this.props;
+    const { title, subtitle, type, className, actions, alwaysShow = false } = this.props;
 
     const image = yrblTypes[type];
 
@@ -33,7 +32,7 @@ export default class extends React.PureComponent<Props> {
       <div className="yrbl__wrap">
         <img
           alt="Friendly gerbil"
-          className={classnames(small ? 'yrbl--small' : 'yrbl', className, {
+          className={classnames('yrbl', className, {
             'yrbl--always-show': alwaysShow,
           })}
           src={`${image}`}

ui/redux/selectors/search.js

@@ -9,6 +9,7 @@ import {
   SETTINGS,
   isClaimNsfw,
   makeSelectPendingClaimForUri,
+  makeSelectIsUriResolving,
 } from 'lbry-redux';
 import { createSelector } from 'reselect';
 
@@ -143,3 +144,22 @@ export const makeSelectWinningUriForQuery = (query: string) => {
     }
   );
 };
+
+export const makeSelectIsResolvingWinningUri = (query: string = '') => {
+  const uriFromQuery = `lbry://${query}`;
+  let channelUriFromQuery;
+  try {
+    const { isChannel } = parseURI(uriFromQuery);
+    if (!isChannel) {
+      channelUriFromQuery = `lbry://@${query}`;
+    }
+  } catch (e) {}
+
+  return createSelector(
+    makeSelectIsUriResolving(uriFromQuery),
+    channelUriFromQuery ? makeSelectIsUriResolving(channelUriFromQuery) : () => {},
+    (claim1IsResolving, claim2IsResolving) => {
+      return claim1IsResolving || claim2IsResolving;
+    }
+  );
+};

ui/scss/component/_empty.scss

@@ -11,6 +11,10 @@
   }
 }
 
+.empty__wrap--padded {
+  padding: var(--spacing-xl) 0;
+}
+
 .empty__text {
   color: var(--color-text-empty);
   font-style: italic;

ui/scss/component/_media.scss

@@ -30,32 +30,6 @@
     max-width: 100%;
     white-space: nowrap;
   }
-
-  // This is terrible and should not be removed
-  .icon {
-    margin-right: var(--spacing-xs) / 2;
-    margin-bottom: -0.08rem;
-  }
-}
-
-.media__uri--inline {
-  @extend .media__uri;
-  position: relative;
-  transform: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.media__uri--right {
-  @extend .media__uri;
-  right: 0;
-}
-
-.media__uri--right--yt-badge {
-  @extend .media__uri--right;
-  @media (max-width: $breakpoint-small) {
-    display: none;
-  }
 }
 
 //  M E D I A