Show: rename some variables and props for clarity

- cost -> amount
 - available -> costIncludesData
 - claimInfo -> metadata (only in DetailPage for now)
This commit is contained in:
Alex Liebowitz 2016-12-07 18:45:18 -05:00
parent 34a7d41dc7
commit 06de4534cd

View file

@ -16,9 +16,9 @@ var formatItemImgStyle = {
var FormatItem = React.createClass({ var FormatItem = React.createClass({
propTypes: { propTypes: {
claimInfo: React.PropTypes.object, claimInfo: React.PropTypes.object,
amount: React.PropTypes.number, cost: React.PropTypes.number,
name: React.PropTypes.string, name: React.PropTypes.string,
available: React.PropTypes.bool, costIncludesData: React.PropTypes.bool,
}, },
render: function() { render: function() {
@ -31,8 +31,8 @@ var FormatItem = React.createClass({
var license = claimInfo.license; var license = claimInfo.license;
var fileContentType = (claimInfo.content_type || claimInfo['content-type']); var fileContentType = (claimInfo.content_type || claimInfo['content-type']);
var mediaType = lbry.getMediaType(fileContentType); var mediaType = lbry.getMediaType(fileContentType);
var available = this.props.available; var costIncludesData = this.props.costIncludesData;
var amount = this.props.amount || 0.0; var cost = this.props.cost || 0.0;
return ( return (
<div className="row-fluid"> <div className="row-fluid">
@ -48,7 +48,7 @@ var FormatItem = React.createClass({
<td>Content-Type</td><td>{fileContentType}</td> <td>Content-Type</td><td>{fileContentType}</td>
</tr> </tr>
<tr> <tr>
<td>Cost</td><td><CreditAmount amount={amount} isEstimate={!available}/></td> <td>Cost</td><td><CreditAmount amount={cost} isEstimate={!costIncludesData}/></td>
</tr> </tr>
<tr> <tr>
<td>Author</td><td>{author}</td> <td>Author</td><td>{author}</td>
@ -78,9 +78,9 @@ var FormatItem = React.createClass({
var FormatsSection = React.createClass({ var FormatsSection = React.createClass({
propTypes: { propTypes: {
claimInfo: React.PropTypes.object, claimInfo: React.PropTypes.object,
amount: React.PropTypes.number, cost: React.PropTypes.number,
name: React.PropTypes.string, name: React.PropTypes.string,
available: React.PropTypes.bool, costIncludesData: React.PropTypes.bool,
}, },
render: function() { render: function() {
var name = this.props.name; var name = this.props.name;
@ -102,7 +102,7 @@ var FormatsSection = React.createClass({
{/* In future, anticipate multiple formats, just a guess at what it could look like {/* In future, anticipate multiple formats, just a guess at what it could look like
// var formats = this.props.claimInfo.formats // var formats = this.props.claimInfo.formats
// return (<tbody>{formats.map(function(format,i){ */} // return (<tbody>{formats.map(function(format,i){ */}
<FormatItem claimInfo={format} amount={this.props.amount} name={this.props.name} available={this.props.available} /> <FormatItem claimInfo={format} cost={this.props.cost} name={this.props.name} costIncludesData={this.props.costIncludesData} />
{/* })}</tbody>); */} {/* })}</tbody>); */}
</div>); </div>);
} }
@ -114,8 +114,8 @@ var DetailPage = React.createClass({
}, },
getInitialState: function() { getInitialState: function() {
return { return {
claimInfo: null, metadata: null,
amount: null, cost: null,
searching: true, searching: true,
matchFound: null, matchFound: null,
}; };
@ -133,9 +133,9 @@ var DetailPage = React.createClass({
}); });
} else { } else {
this.setState({ this.setState({
amount: result.cost, cost: result.cost,
available: result.available, costIncludesData: result.costIncludesData,
claimInfo: result.value, metadata: result.value,
searching: false, searching: false,
matchFound: true, matchFound: true,
}); });
@ -143,21 +143,20 @@ var DetailPage = React.createClass({
}); });
}, },
render: function() { render: function() {
if (this.state.claimInfo == null && this.state.searching) { if (this.state.metadata == null) {
// Still waiting for metadata
return null; return null;
} }
var name = this.props.name; var name = this.props.name;
var available = this.state.available; var costIncludesData = this.state.costIncludesData;
var claimInfo = this.state.claimInfo; var metadata = this.state.metadata;
var amount = this.state.amount; var cost = this.state.cost;
return ( return (
<main> <main>
<section className="card"> <section className="card">
{this.state.matchFound ? ( {this.state.matchFound ? (
<FormatsSection name={name} claimInfo={claimInfo} amount={amount} available={available} /> <FormatsSection name={name} claimInfo={metadata} cost={cost} costIncludesData={costIncludesData} />
) : ( ) : (
<div> <div>
<h2>No content</h2> <h2>No content</h2>