Refactor to use results only since it contains everything, add message when no results found, wait for results data to load before display page, extract variables for cleaner JTX. Using results.content_type which for now is null, the actual property is results.content-type, but that's syntactically ambiguous so there's no way to resolve the name. Requires a change in LBRY to send content_type instead of content-type.

js/page/show.js

@@ -29,29 +29,39 @@ var formatItemStyle = {
 
 var FormatItem = React.createClass({
   propTypes: {
-    metadata: React.PropTypes.object,
+    results: React.PropTypes.object,
-    name: React.PropTypes.string,
-    amount: React.PropTypes.double,
   },
   render: function() {
+    var results = this.props.results;
+    var name = results.name;
+    var thumbnail = results.thumbnail;
+    var title = results.title;
+    var amount = results.cost_est ? results.cost_est : 0.0;
+    var description = results.description;
+    var author = results.author;
+    var language = results.language;
+    var license = results.license;
+    var fileContentType = results.content_type;
+
     return (
       <div className="row-fluid" style={formatItemStyle}>
         <div className="span4">
-          <img src={this.props.metadata.thumbnail} alt={'Photo for ' + this.props.metadata.title} style={formatItemImgStyle} />
+          <img src={thumbnail} alt={'Photo for ' + title} style={formatItemImgStyle} />
         </div>
         <div className="span8">
-          <h4 style={formatItemMetadataStyle}><b>Address:</b> {this.props.name}</h4>
+          <h4 style={formatItemMetadataStyle}><b>Address:</b> {name}</h4>
+          <h4 style={formatItemMetadataStyle}><b>Content-Type:</b> {fileContentType}</h4>
           <div style={formatSubheaderStyle}>
-            <div style={formatItemCostStyle}><CreditAmount amount={this.props.amount} isEstimate={true}/></div>
+            <div style={formatItemCostStyle}><CreditAmount amount={amount} isEstimate={true}/></div>
-            <WatchLink streamName={this.props.name} />
+            <WatchLink streamName={name} />
             &nbsp;&nbsp;&nbsp;
-            <DownloadLink streamName={this.props.name} />
+            <DownloadLink streamName={name} />
           </div>
-          <p style={formatItemDescriptionStyle}>{this.props.metadata.description}</p>
+          <p style={formatItemDescriptionStyle}>{description}</p>
           <div>
-            <span style={formatItemMetadataStyle}><b>Author:</b> {this.props.metadata.author}</span><br />
+            <span style={formatItemMetadataStyle}><b>Author:</b> {author}</span><br />
-            <span style={formatItemMetadataStyle}><b>Language:</b> {this.props.metadata.language}</span><br />
+            <span style={formatItemMetadataStyle}><b>Language:</b> {language}</span><br />
-            <span style={formatItemMetadataStyle}><b>License:</b> {this.props.metadata.license}</span><br />
+            <span style={formatItemMetadataStyle}><b>License:</b> {license}</span><br />
           </div>
         </div>
       </div>
@@ -61,41 +71,29 @@ var FormatItem = React.createClass({
 
 var FormatsSection = React.createClass({
   propTypes: {
+    results: React.PropTypes.object,
     name: React.PropTypes.string,
   },
-  getInitialState: function() {
-    return {
-      metadata: null,
-      amount: 0.0,
-    };
-  },
-  componentWillMount: function() {
-    lbry.resolveName(this.props.name, (metadata) => {
-      this.setState({
-        metadata: metadata,
-      })
-    });
-    lbry.search(this.props.name, (results) => {
-      this.setState({
-        amount: (results ? results[0].cost_est : 0.0)
-      });
-    });
-  },
   render: function() {
-    if (this.state.metadata == null) {
+    var name = this.props.name;
-      // Still waiting for metadata
+    var format = this.props.results;
-      return null;
+    var title = format.title;
-    }
 
-    var format = this.state.metadata;
+    if(format == null)
+    {
+      return (
+        <div>
+          <h1 style={formatHeaderStyle}>Sorry, no results found for "{name}".</h1>
+        </div>);
+    }
 
     return (
       <div>
-        <h1 style={formatHeaderStyle}>{this.state.metadata.title}</h1>
+        <h1 style={formatHeaderStyle}>{title}</h1>
       {/* In future, anticipate multiple formats, just a guess at what it could look like
-      // var formats = metadata.formats
+      // var formats = this.props.results.formats
       // return (<tbody>{formats.map(function(format,i){ */}
-          <FormatItem metadata={format} amount={this.state.amount} name={this.props.name}/>
+          <FormatItem results={format}/>
       {/*  })}</tbody>); */}
       </div>);
   }
@@ -105,11 +103,34 @@ var DetailPage = React.createClass({
   propTypes: {
     name: React.PropTypes.string,
   },
+  getInitialState: function() {
+    return {
+      results: null,
+      searching: true,
+    };
+  },
+  componentWillMount: function() {
+    lbry.search(this.props.name, (results) => {
+      this.setState({
+        results: results[0],
+        searching: false,
+      });
+    });
+  },
   render: function() {
+    if (this.state.results == null && this.state.searching) {
+      // Still waiting for metadata
+      return null;
+    }
+
+    var name = this.props.name;
+    var metadata = this.state.metadata;
+    var results = this.state.results;
+
     return (
       <main className="page">
         <SubPageLogo />
-        <FormatsSection name={this.props.name}/>
+        <FormatsSection name={name} results={results}/>
         <section>
           <Link href="/" label="<< Return" />
         </section>