Add tabs in AddTorrent modal

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

@@ -2,6 +2,8 @@ import _ from 'lodash';
 import classnames from 'classnames';
 import React from 'react';
 
+import AddTorrentsByFile from './AddTorrentsByFile';
+import AddTorrentsByURL from './AddTorrentsByURL';
 import EventTypes from '../../constants/EventTypes';
 import LoadingIndicatorDots from '../icons/LoadingIndicatorDots';
 import Modal from './Modal';
@@ -11,16 +13,7 @@ import TorrentStore from '../../stores/TorrentStore';
 import UIActions from '../../actions/UIActions';
 import UIStore from '../../stores/UIStore';
 
-const METHODS_TO_BIND = [
-  'getContent',
-  'handleDestinationChange',
-  'handleUrlAdd',
-  'handleUrlChange',
-  'handleUrlRemove',
-  'handleAddTorrents',
-  'onAddTorrentSuccess',
-  'onLatestTorrentLocationChange'
-];
+const METHODS_TO_BIND = ['onAddTorrentSuccess'];
 
 export default class AddTorrents extends React.Component {
   constructor() {
@@ -39,18 +32,12 @@ export default class AddTorrents extends React.Component {
     });
   }
 
-  componentWillMount() {
-    this.setState({destination: UIStore.getLatestTorrentLocation()});
-  }
-
   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();
   }
 
@@ -69,10 +56,6 @@ export default class AddTorrents extends React.Component {
     this.dismissModal();
   }
 
-  onLatestTorrentLocationChange() {
-    this.setState({destination: UIStore.getLatestTorrentLocation()});
-  }
-
   getActions() {
     let icon = null;
     let primaryButtonText = 'Add Torrent';
@@ -104,80 +87,27 @@ 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}
-            handleTextboxChange={this.handleUrlChange}
-            handleTextboxRemove={this.handleUrlRemove}
-            textboxes={this.state.urlTextboxes} />
-        </div>
-        <div className="form__row">
-          <input className="textbox"
-            onChange={this.handleDestinationChange}
-            placeholder="Destination"
-            value={this.state.destination}
-            type="text" />
-        </div>
-      </div>
-    );
-  }
-
-  handleAddTorrents() {
-    this.setState({isAddingTorrents: true});
-    let torrentUrls = _.map(this.state.urlTextboxes, 'value');
-    TorrentActions.addTorrents(torrentUrls, this.state.destination);
-  }
-
-  handleDestinationChange(event) {
-    this.setState({
-      destination: event.target.value
-    })
-  }
-
-  handleMenuWrapperClick(event) {
-    event.stopPropagation();
-  }
-
-  handleUrlRemove(index) {
-    let urlTextboxes = Object.assign([], this.state.urlTextboxes);
-    urlTextboxes.splice(index, 1);
-    this.setState({
-      urlTextboxes
-    });
-  }
-
-  handleUrlAdd(index) {
-    let urlTextboxes = Object.assign([], this.state.urlTextboxes);
-    urlTextboxes.splice(index + 1, 0, {value: null});
-    this.setState({urlTextboxes});
-  }
-
-  handleUrlChange(index, value) {
-    let urlTextboxes = Object.assign([], this.state.urlTextboxes);
-    urlTextboxes[index].value = value;
-    this.setState({urlTextboxes});
+  getAddByFileContent() {
+    return <span>add by file</span>;
   }
 
   render() {
+    let tabs = {
+      'by-url': {
+        content: <AddTorrentsByURL />,
+        label: 'By URL'
+      },
+      'by-file': {
+        content: <AddTorrentsByFile />,
+        label: 'By File'
+      }
+    };
+
     return (
       <Modal heading="Add Torrents"
-        content={this.getContent()}
         actions={this.getActions()}
-        dismiss={this.dismissModal} />
+        dismiss={this.dismissModal}
+        tabs={tabs} />
     );
   }
 }