Add loading indicator to add torrents button

client/source/scripts/components/modals/AddTorrents.js

@@ -3,9 +3,11 @@ import classnames from 'classnames';
 import React from 'react';
 
 import EventTypes from '../../constants/EventTypes';
+import LoadingIndicatorDots from '../icons/LoadingIndicatorDots';
 import Modal from './Modal';
 import TextboxRepeater from '../forms/TextboxRepeater';
 import TorrentActions from '../../actions/TorrentActions';
+import TorrentStore from '../../stores/TorrentStore';
 import UIActions from '../../actions/UIActions';
 import UIStore from '../../stores/UIStore';
 
@@ -16,6 +18,7 @@ const METHODS_TO_BIND = [
   'handleUrlChange',
   'handleUrlRemove',
   'handleAddTorrents',
+  'onAddTorrentSuccess',
   'onLatestTorrentLocationChange'
 ];
 
@@ -24,8 +27,10 @@ export default class AddTorrents extends React.Component {
     super();
 
     this.state = {
+      addTorrentsError: null,
       destination: null,
       isExpanded: false,
+      isAddingTorrents: false,
       urlTextboxes: [{value: null}]
     };
 
@@ -39,10 +44,12 @@ export default class AddTorrents extends React.Component {
   }
 
   componentDidMount() {
+    TorrentStore.listen(EventTypes.CLIENT_ADD_TORRENT_SUCCESS, this.onAddTorrentSuccess);
     UIStore.listen(EventTypes.UI_LATEST_TORRENT_LOCATION_CHANGE, this.onLatestTorrentLocationChange);
   }
 
   componentWillUnmount() {
+    TorrentStore.unlisten(EventTypes.CLIENT_ADD_TORRENT_SUCCESS, this.onAddTorrentSuccess);
     UIStore.unlisten(EventTypes.UI_LATEST_TORRENT_LOCATION_CHANGE, this.onLatestTorrentLocationChange);
     UIStore.fetchLatestTorrentLocation();
   }
@@ -51,11 +58,30 @@ export default class AddTorrents extends React.Component {
     UIActions.dismissModal();
   }
 
+  onAddTorrentError() {
+    this.setState({
+      addTorrentsError: 'There was an error, but I have no idea what happened!',
+      isAddingTorrents: false
+    });
+  }
+
+  onAddTorrentSuccess() {
+    this.dismissModal();
+  }
+
   onLatestTorrentLocationChange() {
     this.setState({destination: UIStore.getLatestTorrentLocation()});
   }
 
   getActions() {
+    let icon = null;
+    let primaryButtonText = 'Add Torrent';
+
+    if (this.state.isAddingTorrents) {
+      icon = <LoadingIndicatorDots viewBox="0 0 32 32" />;
+      primaryButtonText = 'Adding...';
+    }
+
     return [
       {
         clickHandler: null,
@@ -65,7 +91,13 @@ export default class AddTorrents extends React.Component {
       },
       {
         clickHandler: this.handleAddTorrents,
-        content: 'Add Torrent',
+        content: (
+          <span>
+            {icon}
+            {primaryButtonText}
+          </span>
+        ),
+        supplementalClassName: icon != null ? 'has-icon' : '',
         triggerDismiss: true,
         type: 'primary'
       }
@@ -73,8 +105,19 @@ export default class AddTorrents extends React.Component {
   }
 
   getContent() {
+    let error = null;
+
+    if (this.state.addTorrentsError) {
+      error = (
+        <div className="form__row">
+          {this.state.addTorrentsError}
+        </div>
+      );
+    }
+
     return (
       <div className="form">
+        {error}
         <div className="form__row">
           <TextboxRepeater placeholder="Torrent URL"
             handleTextboxAdd={this.handleUrlAdd}
@@ -94,6 +137,7 @@ export default class AddTorrents extends React.Component {
   }
 
   handleAddTorrents() {
+    this.setState({isAddingTorrents: true});
     let torrentUrls = _.pluck(this.state.urlTextboxes, 'value');
     TorrentActions.addTorrents(torrentUrls, this.state.destination);
   }