fix react warnings

2016-08-07 11:27:00 -04:00 · 2016-08-07 11:27:00 -04:00 · b60037b8d9
commit b60037b8d9
parent 53843361b6
5 changed files with 73 additions and 77 deletions
--- a/js/app.js
+++ b/js/app.js
@ -1,17 +1,15 @@
 var App = React.createClass({
  getInitialState: function() {
    // 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(/\??([^=]*)(?:=(.*))?/);

-    if (['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
-      var viewingPage = param;
-    } else {
-      var viewingPage = 'home';
+    if (param && ['settings', 'help', 'start', 'watch', 'report', 'files', 'claim', 'show', 'wallet', 'publish'].indexOf(param) != -1) {
+      viewingPage = param;
    }

    return {
-      viewingPage: viewingPage,
+      viewingPage: viewingPage ? viewingPage : 'home',
      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' +
-                    'Choose "OK" to download the latest version."';
+        'Choose "OK" to download the latest version."';

      lbry.getVersionInfo(function(versionInfo) {
        if (versionInfo.os_system == 'Darwin') {
@ -33,7 +31,7 @@ var App = React.createClass({
          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
            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 {
          var updateUrl = 'https://lbry.io/get/lbry.deb';
--- a/js/component/common.js
+++ b/js/component/common.js
@ -3,7 +3,7 @@
 var Icon = React.createClass({
  propTypes: {
    style: React.PropTypes.object,
-    fixed: React.PropTypes.boolean,
+    fixed: React.PropTypes.bool,
  },
  render: function() {
    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({
  propTypes: {
-    limit: React.PropTypes.string,
+    limit: React.PropTypes.number,
  },
  getDefaultProps: function() {
    return {
@ -312,7 +312,7 @@ var MenuItem = React.createClass({
    href: React.PropTypes.string,
    label: React.PropTypes.string,
    icon: React.PropTypes.string,
-    onClick: React.PropTypes.function,
+    onClick: React.PropTypes.func,
  },
  getDefaultProps: function() {
    return {
--- a/js/page/home.js
+++ b/js/page/home.js
@ -45,7 +45,7 @@ var SearchResults = React.createClass({
    var rows = [];
    this.props.results.forEach(function(result) {
      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} />
      );
    });
@ -158,7 +158,7 @@ var FeaturedContentItem = React.createClass({
    lbry.resolveName(this.props.name, (metadata) => {
      this.setState({
        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) => {
@ -282,7 +282,6 @@ var Discover = React.createClass({
  search: function() {
    if (this.state.query)
    {
-      console.log('search');
      lbry.search(this.state.query, this.searchCallback.bind(this, this.state.query));
    }
    else
@ -320,7 +319,6 @@ var Discover = React.createClass({
  },

  render: function() {
-    console.log(this.state);
    return (
      <main style={discoverMainStyle}>
        <section><input type="search" style={searchInputStyle} onChange={this.onQueryChange}
--- a/js/page/my_files.js
+++ b/js/page/my_files.js
@ -12,9 +12,9 @@ var MyFilesRowMoreMenu = React.createClass({
    lbry.deleteFile(this.props.lbryUri, false);
  },
  onDeleteClicked: function() {
-     var alertText = 'Are you sure you\'d like to delete "' + this.props.title + '?" This will ' +
-                     (this.completed ? ' stop the download and ' : '') +
-                     'permanently remove the file from your system.';
+    var alertText = 'Are you sure you\'d like to delete "' + this.props.title + '?" This will ' +
+      (this.completed ? ' stop the download and ' : '') +
+      'permanently remove the file from your system.';

    if (confirm(alertText)) {
      lbry.deleteFile(this.props.lbryUri);
@ -34,31 +34,31 @@ var MyFilesRowMoreMenu = React.createClass({
 });

 var moreButtonColumnStyle = {
-  height: '120px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-},
-moreButtonContainerStyle = {
-  display: 'block',
-  position: 'relative',
-},
-moreButtonStyle = {
-  fontSize: '1.3em',
-},
-progressBarStyle = {
-  height: '15px',
-  width: '230px',
-  backgroundColor: '#444',
-  border: '2px solid #eee',
-  display: 'inline-block',
-},
-artStyle = {
-  maxHeight: '100px',
-  display: 'block',
-  marginLeft: 'auto',
-  marginRight: 'auto',
-};
+    height: '120px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  moreButtonContainerStyle = {
+    display: 'block',
+    position: 'relative',
+  },
+  moreButtonStyle = {
+    fontSize: '1.3em',
+  },
+  progressBarStyle = {
+    height: '15px',
+    width: '230px',
+    backgroundColor: '#444',
+    border: '2px solid #eee',
+    display: 'inline-block',
+  },
+  artStyle = {
+    maxHeight: '100px',
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  };
 var MyFilesRow = React.createClass({
  onPauseResumeClicked: function() {
    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>
          {this.props.pending ? <em>This file is pending confirmation</em>
            : (
-                <div>
-                  <div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
-                  { ' ' }
-                  {this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
-                  <div>{ pauseLink }</div>
-                  <div>{ watchButton }</div>
-                </div>
-            )
+             <div>
+               <div className={this.props.completed ? 'hidden' : ''} style={curProgressBarStyle}></div>
+               { ' ' }
+               {this.props.completed ? 'Download complete' : (parseInt(this.props.ratioLoaded * 100) + '%')}
+               <div>{ pauseLink }</div>
+               <div>{ watchButton }</div>
+             </div>
+           )
          }
        </div>
        <div className="span1" style={moreButtonColumnStyle}>
          {this.props.pending ? null :
-            <div style={moreButtonContainerStyle}>
-              <Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
-              <MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
-                                  lbryUri={this.props.lbryUri} fileName={this.props.fileName}
-                                  path={this.props.path}/>
-            </div>
+           <div style={moreButtonContainerStyle}>
+             <Link style={moreButtonStyle} ref="moreButton" icon="icon-ellipsis-h" title="More Options" />
+             <MyFilesRowMoreMenu toggleButton={this.refs.moreButton} title={this.props.title}
+                                 lbryUri={this.props.lbryUri} fileName={this.props.fileName}
+                                 path={this.props.path}/>
+           </div>
          }
        </div>
      </div>
@ -150,14 +150,14 @@ var MyFilesPage = React.createClass({
    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>;
    } else {
-      var content = [];
+      var content = [],
+          keyIndex = 0;
      for (let fileInfo of this.state.filesInfo) {
        let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path,
-             stopped, metadata} = fileInfo;
+          stopped, metadata} = fileInfo;

        if (!metadata)
        {
-          console.log('Empty metadata, skipping render');
          continue;
        }

@ -175,21 +175,21 @@ var MyFilesPage = React.createClass({
        var ratioLoaded = written_bytes / total_bytes;
        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}
                                 showWatchButton={showWatchButton} pending={pending} />);
      }
    }
    return (
      <main className="page">
-      <SubPageLogo />
-      <h1>My Files</h1>
-      <section>
-      {content}
-      </section>
-      <section>
-        <Link href="/" label="<< Return" />
-      </section>
+        <SubPageLogo />
+        <h1>My Files</h1>
+        <section>
+          {content}
+        </section>
+        <section>
+          <Link href="/" label="<< Return" />
+        </section>
      </main>
    );
  }
--- a/js/page/publish.js
+++ b/js/page/publish.js
@ -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="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="language">Language</label> <FormField type="select" ref="meta_language" name="language">
-               <option value="en" selected>English</option>
+          <label htmlFor="language">Language</label> <FormField type="select" defaultValue="en" ref="meta_language" name="language">
+               <option value="en">English</option>
               <option value="zh">Chinese</option>
               <option value="fr">French</option>
               <option value="de">German</option>