fix react warnings

This commit is contained in:
Jeremy Kauffman 2016-08-07 11:27:00 -04:00
parent 53843361b6
commit b60037b8d9
5 changed files with 73 additions and 77 deletions

View file

@ -1,17 +1,15 @@
var App = React.createClass({ var App = React.createClass({
getInitialState: function() { getInitialState: function() {
// For now, routes are in format ?page or ?page=args // For now, routes are in format ?page or ?page=args
var match, param, val; var match, param, val, viewingPage;
[match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/); [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/);
if (['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) { if (param && ['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
var viewingPage = param; viewingPage = param;
} else {
var viewingPage = 'home';
} }
return { return {
viewingPage: viewingPage, viewingPage: viewingPage ? viewingPage : 'home',
pageArgs: val, pageArgs: val,
}; };
}, },
@ -22,7 +20,7 @@ var App = React.createClass({
} }
var message = 'The version of LBRY you\'re using is not up to date.\n\n' + var message = 'The version of LBRY you\'re using is not up to date.\n\n' +
'Choose "OK" to download the latest version."'; 'Choose "OK" to download the latest version."';
lbry.getVersionInfo(function(versionInfo) { lbry.getVersionInfo(function(versionInfo) {
if (versionInfo.os_system == 'Darwin') { if (versionInfo.os_system == 'Darwin') {
@ -33,7 +31,7 @@ var App = React.createClass({
if (maj == 0 && min <= 2 && patch <= 2) { if (maj == 0 && min <= 2 && patch <= 2) {
// On OS X with version <= 0.2.2, we need to notify user to close manually close LBRY // On OS X with version <= 0.2.2, we need to notify user to close manually close LBRY
message += '\n\nBefore installing the new version, make sure to exit LBRY, if you started the app ' + message += '\n\nBefore installing the new version, make sure to exit LBRY, if you started the app ' +
'click that LBRY icon in your status bar and choose "Quit."'; 'click that LBRY icon in your status bar and choose "Quit."';
} }
} else { } else {
var updateUrl = 'https://lbry.io/get/lbry.deb'; var updateUrl = 'https://lbry.io/get/lbry.deb';

View file

@ -3,7 +3,7 @@
var Icon = React.createClass({ var Icon = React.createClass({
propTypes: { propTypes: {
style: React.PropTypes.object, style: React.PropTypes.object,
fixed: React.PropTypes.boolean, fixed: React.PropTypes.bool,
}, },
render: function() { render: function() {
var className = 'icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + this.props.icon; var className = 'icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + this.props.icon;
@ -13,7 +13,7 @@ var Icon = React.createClass({
var TruncatedText = React.createClass({ var TruncatedText = React.createClass({
propTypes: { propTypes: {
limit: React.PropTypes.string, limit: React.PropTypes.number,
}, },
getDefaultProps: function() { getDefaultProps: function() {
return { return {
@ -312,7 +312,7 @@ var MenuItem = React.createClass({
href: React.PropTypes.string, href: React.PropTypes.string,
label: React.PropTypes.string, label: React.PropTypes.string,
icon: React.PropTypes.string, icon: React.PropTypes.string,
onClick: React.PropTypes.function, onClick: React.PropTypes.func,
}, },
getDefaultProps: function() { getDefaultProps: function() {
return { return {

View file

@ -45,7 +45,7 @@ var SearchResults = React.createClass({
var rows = []; var rows = [];
this.props.results.forEach(function(result) { this.props.results.forEach(function(result) {
rows.push( rows.push(
<SearchResultRow name={result.name} title={result.title} imgUrl={result.thumbnail} <SearchResultRow key={result.name} name={result.name} title={result.title} imgUrl={result.thumbnail}
description={result.description} cost_est={result.cost_est} /> description={result.description} cost_est={result.cost_est} />
); );
}); });
@ -158,7 +158,7 @@ var FeaturedContentItem = React.createClass({
lbry.resolveName(this.props.name, (metadata) => { lbry.resolveName(this.props.name, (metadata) => {
this.setState({ this.setState({
metadata: metadata, metadata: metadata,
title: metadata.title || ('lbry://' + this.props.name), title: metadata && metadata.title ? metadata.title : ('lbry://' + this.props.name),
}) })
}); });
lbry.getCostEstimate(this.props.name, (amount) => { lbry.getCostEstimate(this.props.name, (amount) => {
@ -282,7 +282,6 @@ var Discover = React.createClass({
search: function() { search: function() {
if (this.state.query) if (this.state.query)
{ {
console.log('search');
lbry.search(this.state.query, this.searchCallback.bind(this, this.state.query)); lbry.search(this.state.query, this.searchCallback.bind(this, this.state.query));
} }
else else
@ -320,7 +319,6 @@ var Discover = React.createClass({
}, },
render: function() { render: function() {
console.log(this.state);
return ( return (
<main style={discoverMainStyle}> <main style={discoverMainStyle}>
<section><input type="search" style={searchInputStyle} onChange={this.onQueryChange} <section><input type="search" style={searchInputStyle} onChange={this.onQueryChange}

View file

@ -12,9 +12,9 @@ var MyFilesRowMoreMenu = React.createClass({
lbry.deleteFile(this.props.lbryUri, false); lbry.deleteFile(this.props.lbryUri, false);
}, },
onDeleteClicked: function() { onDeleteClicked: function() {
var alertText = 'Are you sure you\'d like to delete "' + this.props.title + '?" This will ' + var alertText = 'Are you sure you\'d like to delete "' + this.props.title + '?" This will ' +
(this.completed ? ' stop the download and ' : '') + (this.completed ? ' stop the download and ' : '') +
'permanently remove the file from your system.'; 'permanently remove the file from your system.';
if (confirm(alertText)) { if (confirm(alertText)) {
lbry.deleteFile(this.props.lbryUri); lbry.deleteFile(this.props.lbryUri);
@ -34,31 +34,31 @@ var MyFilesRowMoreMenu = React.createClass({
}); });
var moreButtonColumnStyle = { var moreButtonColumnStyle = {
height: '120px', height: '120px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
moreButtonContainerStyle = { moreButtonContainerStyle = {
display: 'block', display: 'block',
position: 'relative', position: 'relative',
}, },
moreButtonStyle = { moreButtonStyle = {
fontSize: '1.3em', fontSize: '1.3em',
}, },
progressBarStyle = { progressBarStyle = {
height: '15px', height: '15px',
width: '230px', width: '230px',
backgroundColor: '#444', backgroundColor: '#444',
border: '2px solid #eee', border: '2px solid #eee',
display: 'inline-block', display: 'inline-block',
}, },
artStyle = { artStyle = {
maxHeight: '100px', maxHeight: '100px',
display: 'block', display: 'block',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}; };
var MyFilesRow = React.createClass({ var MyFilesRow = React.createClass({
onPauseResumeClicked: function() { onPauseResumeClicked: function() {
if (this.props.stopped) { if (this.props.stopped) {
@ -100,24 +100,24 @@ var MyFilesRow = React.createClass({
<h2>{this.props.pending ? this.props.title : <a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a>}</h2> <h2>{this.props.pending ? this.props.title : <a href={'/?show=' + this.props.lbryUri}>{this.props.title}</a>}</h2>
{this.props.pending ? <em>This file is pending confirmation</em> {this.props.pending ? <em>This file is pending confirmation</em>
: ( : (
<div> <div>
<div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div> <div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
{ ' ' } { ' ' }
{this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')} {this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
<div>{ pauseLink }</div> <div>{ pauseLink }</div>
<div>{ watchButton }</div> <div>{ watchButton }</div>
</div> </div>
) )
} }
</div> </div>
<div className="span1" style={moreButtonColumnStyle}> <div className="span1" style={moreButtonColumnStyle}>
{this.props.pending ? null : {this.props.pending ? null :
<div style={moreButtonContainerStyle}> <div style={moreButtonContainerStyle}>
<Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" /> <Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
<MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title} <MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
lbryUri={this.props.lbryUri} fileName={this.props.fileName} lbryUri={this.props.lbryUri} fileName={this.props.fileName}
path={this.props.path}/> path={this.props.path}/>
</div> </div>
} }
</div> </div>
</div> </div>
@ -150,14 +150,14 @@ var MyFilesPage = React.createClass({
if (!this.state.filesInfo.length) { if (!this.state.filesInfo.length) {
var content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="/" label="search for your first download" />!</span>; var content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="/" label="search for your first download" />!</span>;
} else { } else {
var content = []; var content = [],
keyIndex = 0;
for (let fileInfo of this.state.filesInfo) { for (let fileInfo of this.state.filesInfo) {
let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path, let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path,
stopped, metadata} = fileInfo; stopped, metadata} = fileInfo;
if (!metadata) if (!metadata)
{ {
console.log('Empty metadata, skipping render');
continue; continue;
} }
@ -175,21 +175,21 @@ var MyFilesPage = React.createClass({
var ratioLoaded = written_bytes / total_bytes; var ratioLoaded = written_bytes / total_bytes;
var showWatchButton = (lbry.getMediaType(file_name) == 'video' || lbry.getMediaType(file_name) == 'audio'); var showWatchButton = (lbry.getMediaType(file_name) == 'video' || lbry.getMediaType(file_name) == 'audio');
content.push(<MyFilesRow lbryUri={lbry_uri} title={title || ('lbry://' + lbry_uri)} completed={completed} stopped={stopped} content.push(<MyFilesRow key={lbry_uri + (++keyIndex)} lbryUri={lbry_uri} title={title || ('lbry://' + lbry_uri)} completed={completed} stopped={stopped}
ratioLoaded={ratioLoaded} imgUrl={thumbnail} path={download_path} ratioLoaded={ratioLoaded} imgUrl={thumbnail} path={download_path}
showWatchButton={showWatchButton} pending={pending} />); showWatchButton={showWatchButton} pending={pending} />);
} }
} }
return ( return (
<main className="page"> <main className="page">
<SubPageLogo /> <SubPageLogo />
<h1>My Files</h1> <h1>My Files</h1>
<section> <section>
{content} {content}
</section> </section>
<section> <section>
<Link href="/" label="<< Return" /> <Link href="/" label="<< Return" />
</section> </section>
</main> </main>
); );
} }

View file

@ -304,8 +304,8 @@ var PublishPage = React.createClass({
<label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} /> <label htmlFor="title">Title</label><FormField type="text" ref="meta_title" name="title" placeholder="My Show, Episode 1" style={publishFieldStyle} />
<label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} /> <label htmlFor="author">Author</label><FormField type="text" ref="meta_author" name="author" placeholder="My Company, Inc." style={publishFieldStyle} />
<label htmlFor="license">License info</label><FormField type="text" ref="meta_license" name="license" defaultValue="Creative Commons Attribution 3.0 United States" style={publishFieldStyle} /> <label htmlFor="license">License info</label><FormField type="text" ref="meta_license" name="license" defaultValue="Creative Commons Attribution 3.0 United States" style={publishFieldStyle} />
<label htmlFor="language">Language</label> <FormField type="select" ref="meta_language" name="language"> <label htmlFor="language">Language</label> <FormField type="select" defaultValue="en" ref="meta_language" name="language">
<option value="en" selected>English</option> <option value="en">English</option>
<option value="zh">Chinese</option> <option value="zh">Chinese</option>
<option value="fr">French</option> <option value="fr">French</option>
<option value="de">German</option> <option value="de">German</option>