From 4c8bdc27ec9f9dc2f74f4a673fb24fa42ffffc53 Mon Sep 17 00:00:00 2001
From: Jonas Whidden <jonas.whidden@lbry.io>
Date: Sat, 16 Jul 2016 12:14:06 -0500
Subject: [PATCH] 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 | 99 ++++++++++++++++++++++++++++++-------------------
 1 file changed, 60 insertions(+), 39 deletions(-)

diff --git a/js/page/show.js b/js/page/show.js
index c9b509a81..34baa65a9 100644
--- a/js/page/show.js
+++ b/js/page/show.js
@@ -29,29 +29,39 @@ var formatItemStyle = {
 
 var FormatItem = React.createClass({
   propTypes: {
-    metadata: React.PropTypes.object,
-    name: React.PropTypes.string,
-    amount: React.PropTypes.double,
+    results: React.PropTypes.object,
   },
   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>
-            <WatchLink streamName={this.props.name} />
+            <div style={formatItemCostStyle}><CreditAmount amount={amount} isEstimate={true}/></div>
+            <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>Language:</b> {this.props.metadata.language}</span><br />
-            <span style={formatItemMetadataStyle}><b>License:</b> {this.props.metadata.license}</span><br />
+            <span style={formatItemMetadataStyle}><b>Author:</b> {author}</span><br />
+            <span style={formatItemMetadataStyle}><b>Language:</b> {language}</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) {
-      // Still waiting for metadata
-      return null;
-    }
+    var name = this.props.name;
+    var format = this.props.results;
+    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>