Make search result tiles use new Lighthouse cost reporting

Featured/Community Content and regular search results now calculate
cost the same way, so instead of calculating the cost in the outer
component we now do it inside <SearchResultRow /> itself.

js/page/discover.js

@@ -46,8 +46,7 @@ var SearchResults = React.createClass({
       var mediaType = lbry.getMediaType(result.value.content_type);
       rows.push(
         <SearchResultRow key={result.name} name={result.name} title={result.value.title} imgUrl={result.value.thumbnail}
-                         description={result.value.description} cost={result.cost} nsfw={result.value.nsfw}
+                         description={result.value.description} nsfw={result.value.nsfw} mediaType={mediaType} />
-                         mediaType={mediaType}  />
       );
     });
     return (
@@ -93,6 +92,8 @@ var SearchResultRow = React.createClass({
     return {
       downloading: false,
       isHovered: false,
+      cost: null,
+      costIncludesData: null,
     }
   },
   handleMouseOver: function() {
@@ -105,6 +106,21 @@ var SearchResultRow = React.createClass({
       isHovered: false,
     });
   },
+  componentWillMount: function() {
+    if ('cost' in this.props) {
+      this.setState({
+        cost: this.props.cost,
+        costIncludesData: this.props.costIncludesData,
+      });
+    } else {
+      lbry.getCostInfoForName(this.props.name, ({cost, includesData}) => {
+        this.setState({
+          cost: cost,
+          costIncludesData: includesData,
+        });
+      });
+    }
+  },
   render: function() {
     var obscureNsfw = !lbry.getClientSetting('showNsfw') && this.props.nsfw;
     if (!this.props.compact) {
@@ -122,9 +138,9 @@ var SearchResultRow = React.createClass({
             <a href={'/?show=' + this.props.name}><Thumbnail src={this.props.imgUrl} alt={'Photo for ' + (this.props.title || this.props.name)} style={searchRowImgStyle} /></a>
           </div>
           <div className="span9">
-            {'cost' in this.props
+            {this.state.cost !== null
               ? <span style={searchRowCostStyle}>
-                  <CreditAmount amount={this.props.cost} isEstimate={!this.props.available}/>
+                  <CreditAmount amount={this.state.cost} isEstimate={!this.state.costIncludesData}/>
                 </span>
               : null}
             <div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
@@ -185,21 +201,18 @@ var FeaturedContentItem = React.createClass({
   },
 
   componentDidMount: function() {
-    this.resolveSearch = true;
+    this._isMounted = true;
 
-    lighthouse.search(this.props.name, function(results) {
+    lbry.resolveName(this.props.name, (metadata) => {
-      var result = results[0];
+      if (!this._isMounted) {
-      var metadata = result.value;
+        return;
-      if (this.resolveSearch)
-      {
-        this.setState({
-          metadata: metadata,
-          amount: result.cost,
-          available: result.available,
-          title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name),
-        });
       }
-    }.bind(this));
+
+      this.setState({
+        metadata: metadata,
+        title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name),
+      });
+    });
   },
 
   render: function() {
@@ -208,11 +221,10 @@ var FeaturedContentItem = React.createClass({
       return null;
     }
 
-    const costProp = this.state.cost === null ? {} : {cost: this.state.cost}
     return (<div style={featuredContentItemContainerStyle}>
       <SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail}
                  description={this.state.metadata.description} mediaType={lbry.getMediaType(this.state.metadata.content_type)}
-                 nsfw={this.state.metadata.nsfw} compact {... costProp} />
+                 nsfw={this.state.metadata.nsfw} compact />
     </div>);
   }
 });