From b60037b8d9cb78fab8b0ea0d32335eb6b0259999 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Sun, 7 Aug 2016 11:27:00 -0400
Subject: [PATCH] fix react warnings

---
 js/app.js              |  16 +++---
 js/component/common.js |  10 ++--
 js/page/home.js        |   8 ++-
 js/page/my_files.js    | 108 ++++++++++++++++++++---------------------
 js/page/publish.js     |   8 +--
 5 files changed, 73 insertions(+), 77 deletions(-)

diff --git a/js/app.js b/js/app.js
index 04f0b875a..1b93aa833 100644
--- 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';
@@ -73,4 +71,4 @@ var App = React.createClass({
       return <PublishPage />;
     }
   }
-});
+});
\ No newline at end of file
diff --git a/js/component/common.js b/js/component/common.js
index b914b860e..2a9f2ef29 100644
--- 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 {
@@ -167,7 +167,7 @@ var WatchLink = React.createClass({
         if (amount > balance) {
           alert("You don't have enough LBRY credits to pay for this stream.");
         } else {
-          window.location = '?watch=' + this.props.streamName;                  
+          window.location = '?watch=' + this.props.streamName;
         }
       });
     });
@@ -179,7 +179,7 @@ var WatchLink = React.createClass({
     }
   },
 
-  render: function() {    
+  render: function() {
     return <Link button={this.props.button} hidden={this.props.hidden} style={this.props.style}
                  label={this.props.label} icon={this.props.icon} onClick={this.handleClick} />;
   }
@@ -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 {
diff --git a/js/page/home.js b/js/page/home.js
index 2f770c489..17f3ad48c 100644
--- 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}
@@ -376,7 +374,7 @@ var mainMenuStyle = {
 var MainMenu = React.createClass({
   render: function() {
     var isLinux = /linux/i.test(navigator.userAgent); // @TODO: find a way to use getVersionInfo() here without messy state management
-    
+
     return (
       <div style={mainMenuStyle}>
         <Menu {...this.props}>
diff --git a/js/page/my_files.js b/js/page/my_files.js
index 728fa2131..d0e7b314b 100644
--- 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>
     );
   }
diff --git a/js/page/publish.js b/js/page/publish.js
index 26430679d..306a33c09 100644
--- a/js/page/publish.js
+++ b/js/page/publish.js
@@ -290,7 +290,7 @@ var PublishPage = React.createClass({
                </FormField>
                </span>
             </label>
-          </div> 
+          </div>
           <div className="help">
             <p>How much would you like to charge for this file?</p>
             If you choose to price this content in dollars, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.
@@ -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>
@@ -319,7 +319,7 @@ var PublishPage = React.createClass({
            <div><label><FormField type="checkbox" ref="meta_nsfw" name="nsfw" placeholder="Description of your content" /> Not Safe For Work</label></div>
         </section>
 
-        
+
 
         <section className="section-block">
           <h4>Additional Content Information (Optional)</h4>