Convert alerts to modals in My Files, Publish, Report, Wallet pages

js/page/my_files.js

@@ -5,31 +5,48 @@ var moreMenuStyle = {
   right: '13px',
 };
 var MyFilesRowMoreMenu = React.createClass({
-  onRevealClicked: function() {
+  propTypes: {
+    title: React.PropTypes.string.isRequired,
+    path: React.PropTypes.string.isRequired,
+    completed: React.PropTypes.bool.isRequired,
+    lbryUri: React.PropTypes.string.isRequired,
+  },
+  handleRevealClicked: function() {
     lbry.revealFile(this.props.path);
   },
-  onRemoveClicked: function() {
+  handleRemoveClicked: function() {
     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.';
-
-    if (confirm(alertText)) {
-      lbry.deleteFile(this.props.lbryUri);
-    }
+  handleDeleteClicked: function() {
+    this.setState({
+      modal: 'confirmDelete',
+    });
+  },
+  handleDeleteConfirmed: function() {
+    lbry.deleteFile(this.props.lbryUri);
+    lbry.setState({
+      modal: null,
+    });
+  },
+  getInitialState: function() {
+    return {
+      modal: null,
+    };
   },
   render: function() {
     return (
       <div style={moreMenuStyle}>
         <Menu {...this.props}>
           <section className="card">
-            <MenuItem onClick={this.onRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
-            <MenuItem onClick={this.onRemoveClicked} label="Remove from LBRY" />
-            <MenuItem onClick={this.onDeleteClicked} label="Remove and delete file" />
+            <MenuItem onClick={this.handleRevealClicked} label="Reveal file" /> {/* @TODO: Switch to OS specific wording */}
+            <MenuItem onClick={this.handleRemoveClicked} label="Remove from LBRY" />
+            <MenuItem onClick={this.handleDeleteClicked} label="Remove and delete file" />
           </section>
         </Menu>
+        <Modal isOpen={this.state.modal == 'confirmDelete'} type="confirm" confirmButtonLabel="Delete File" onConfirmed={this.handleDeleteConfirmed}>
+          Are you sure you'd like to delete <cite>{this.props.title}</cite>? This will {this.props.completed ? ' stop the download and ' : ''}
+          permanently remove the file from your system.
+        </Modal>
       </div>
     );
   }
@@ -123,8 +140,8 @@ var MyFilesRow = React.createClass({
              <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}/>
+                                   completed={this.props.completed} lbryUri={this.props.lbryUri}
+                                   fileName={this.props.fileName} path={this.props.path}/>
              </div>
             }
           </div>

js/page/publish.js

@@ -81,14 +81,8 @@ var PublishPage = React.createClass({
       console.log(publishArgs);
       lbry.publish(publishArgs, (message) => {
         this.handlePublishStarted();
-        this.setState({
-          submitting: false,
-        });
       }, null, (error) => {
         this.handlePublishError(error);
-        this.setState({
-          submitting: false,
-        });
       });
     };
 
@@ -125,18 +119,26 @@ var PublishPage = React.createClass({
       otherLicenseUrl: '',
       uploadProgress: 0.0,
       uploaded: false,
+      errorMessage: null,
       tempFileReady: false,
       submitting: false,
+      modal: null,
     };
   },
   handlePublishStarted: function() {
-    alert(`Your file ${this.refs.meta_title.getValue()} has been published to LBRY at the address lbry://${this.state.name}!\n\n` +
-          `You will now be taken to your My Files page, where your newly published file will be listed. Your file will take a few minutes to appear for other LBRY users; until then it will be listed as "pending."`);
+    this.setState({
+      modal: 'publishStarted',
+    });
+  },
+  handlePublishStartedConfirmed: function() {
     window.location = "?published";
   },
   handlePublishError: function(error) {
-    alert(`The following error occurred when attempting to publish your file:\n\n` +
-          error.message);
+    this.setState({
+      submitting: false,
+      modal: 'error',
+      errorMessage: error.message,
+    });
   },
   handleNameChange: function(event) {
     var rawName = event.target.value;
@@ -463,6 +465,14 @@ var PublishPage = React.createClass({
            <input type='submit' className='hidden' />
           </div>
         </form>
+
+        <Modal isOpen={this.state.modal == 'publishStarted'} onConfirmed={this.handlePublishStartedConfirmed}>
+          <p>Your file has been published to LBRY at the address <code>lbry://{this.state.name}</code>!</p>
+          You will now be taken to your My Files page, where your newly published file will be listed. The file will take a few minutes to appear for other LBRY users; until then it will be listed as "pending."
+        </Modal>
+        <Modal isOpen={this.state.modal == 'error'} onConfirmed={this.closeModal}>
+          The following error occurred when attempting to publish your file: {this.state.errorMessage}
+        </Modal>
       </main>
     );
   }

js/page/report.js

@@ -6,9 +6,9 @@ var ReportPage = React.createClass({
       });
       lbry.reportBug(this._messageArea.value, () => {
         this.setState({
-          submitting: false
+          submitting: false,
+          modal: 'submitted',
         });
-        alert("Your bug report has been submitted! Thank you for your feedback.");
       });
       this._messageArea.value = '';
     }
@@ -16,9 +16,15 @@ var ReportPage = React.createClass({
   componentDidMount: function() {
     document.title = "Report an Issue";
   },
+  closeModal: function() {
+    this.setState({
+      modal: null,
+    })
+  },
   getInitialState: function() {
     return {
       submitting: false,
+      modal: null,
     }
   },
   render: function() {
@@ -38,6 +44,9 @@ var ReportPage = React.createClass({
           <h3>Developer?</h3>
           You can also <Link href="https://github.com/lbryio/lbry/issues" label="submit an issue on GitHub"/>.
         </section>
+        <Modal isOpen={this.state.modal == 'submitted'} onConfirmed={this.closeModal}>
+          Your bug report has been submitted! Thank you for your feedback.
+        </Modal>
       </main>
     );
   }

js/page/wallet.js

@@ -17,6 +17,7 @@ var AddressSection = React.createClass({
   getInitialState: function() {
     return {
       address: null,
+      modal: null,
     }
   },
   componentWillMount: function() {
@@ -58,7 +59,9 @@ var SendToAddressSection = React.createClass({
 
     if ((this.state.balance - this.state.amount) < 1)
     {
-      alert("Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.")
+      this.setState({
+        modal: 'insufficientBalance',
+      });
       return;
     }
 
@@ -85,6 +88,11 @@ var SendToAddressSection = React.createClass({
       })
     });
   },
+  closeModal: function() {
+    this.setState({
+      modal: null,
+    });
+  },
   getInitialState: function() {
     return {
       address: "",
@@ -136,6 +144,9 @@ var SendToAddressSection = React.createClass({
               : ''
           }
         </form>
+        <Modal isOpen={this.state.modal === 'insufficientBalance'} onConfirmed={this.closeModal}>
+          Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.
+        </Modal>
       </section>
     );
   }