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.
This commit is contained in:
Jonas Whidden
parent
c7f92bdf5a
commit
4c8bdc27ec
1 changed files with 60 additions and 39 deletions
|
|
@ -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} />
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue