Improve notifications

client/source/scripts/components/icons/CircleCheckmarkIcon.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import BaseIcon from './BaseIcon';
+
+export default class CircleCheckmarkIcon extends BaseIcon {
+  render() {
+    return (
+      <svg className={`icon icon--circle-checkmark ${this.props.className}`}
+        xmlns={this.getXmlns()} viewBox={this.getViewBox()}>
+        <path fillOpacity="0.05" d="M30,0A30,30,0,1,1,0,30,30,30,0,0,1,30,0Z"/>
+        <path fillOpacity="0.2" d="M30,0A30,30,0,1,0,60,30,30,30,0,0,0,30,0Zm0,56.47A26.47,26.47,0,1,1,56.47,30,26.47,26.47,0,0,1,30,56.47Z"/>
+        <polygon points="43.93 19.51 27.64 35.46 19.07 27.07 16.5 29.58 27.64 40.5 46.5 22.03 43.93 19.51"/>
+      </svg>
+    );
+  }
+}

client/source/scripts/components/icons/CircleExclamationIcon.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import BaseIcon from './BaseIcon';
+
+export default class CircleExclamationIcon extends BaseIcon {
+  render() {
+    return (
+      <svg className={`icon icon--circle-checkmark ${this.props.className}`}
+        xmlns={this.getXmlns()} viewBox={this.getViewBox()}>
+        <path fillOpacity="0.05" d="M30,0A30,30,0,1,1,0,30,30,30,0,0,1,30,0Z"/>
+        <path fillOpacity="0.2" d="M30,0A30,30,0,1,0,60,30,30,30,0,0,0,30,0Zm0,56.47A26.47,26.47,0,1,1,56.47,30,26.47,26.47,0,0,1,30,56.47Z"/>
+        <path d="M30,39.18a3.12,3.12,0,0,1,2.26.83,3,3,0,0,1,0,4.21,3.48,3.48,0,0,1-4.5,0,2.79,2.79,0,0,1-.86-2.1A2.82,2.82,0,0,1,27.75,40,3.07,3.07,0,0,1,30,39.18Zm2.31-3H27.68L27,16.72H33Z"/>
+      </svg>
+    );
+  }
+}

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

@@ -8,7 +8,6 @@ import Close from '../icons/Close';
 import File from '../icons/File';
 import Files from '../icons/Files';
 import ModalActions from './ModalActions';
-import SettingsStore from '../../stores/SettingsStore';
 import TorrentActions from '../../actions/TorrentActions';
 
 const METHODS_TO_BIND = [
@@ -75,7 +74,7 @@ export default class AddTorrentsByFile extends React.Component {
               <File />
             </span>
             <span className="dropzone__file__item dropzone__file__item--file-name">
-              {file.name}{file.name}
+              {file.name}
             </span>
             <span className="dropzone__file__item dropzone__file__item--icon dropzone__file__item--remove-icon" onClick={this.handleFileRemove.bind(this, index)}>
               <Close />
@@ -106,8 +105,6 @@ export default class AddTorrentsByFile extends React.Component {
       return;
     }
 
-    SettingsStore.saveSettings({id: 'torrentDestination', data: this.state.destination});
-
     this.setState({isAddingTorrents: true});
 
     let fileData = new FormData();

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import AddTorrentsActions from './AddTorrentsActions';
 import AddTorrentsDestination from './AddTorrentsDestination';
-import SettingsStore from '../../stores/SettingsStore';
 import TextboxRepeater from '../forms/TextboxRepeater';
 import TorrentActions from '../../actions/TorrentActions';
 
@@ -21,7 +20,7 @@ export default class AddTorrentsByURL extends React.Component {
 
     this.state = {
       addTorrentsError: null,
-      destination: null,
+      destination: '',
       isAddingTorrents: false,
       urlTextboxes: [{value: ''}],
       startTorrents: true
@@ -40,7 +39,6 @@ export default class AddTorrentsByURL extends React.Component {
       destination: this.state.destination,
       start: this.state.startTorrents
     });
-    SettingsStore.saveSettings({id: 'torrentDestination', data: this.state.destination});
   }
 
   handleDestinationChange(destination) {

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

@@ -11,7 +11,7 @@ export default class AddTorrentsDestination extends React.Component {
     super();
 
     this.state = {
-      destination: null
+      destination: ''
     };
 
     METHODS_TO_BIND.forEach((method) => {
@@ -20,7 +20,7 @@ export default class AddTorrentsDestination extends React.Component {
   }
 
   componentWillMount() {
-    let destination = SettingsStore.getSettings('torrentDestination');
+    let destination = SettingsStore.getSettings('torrentDestination') || '';
     if (this.props.suggested) {
       destination = this.props.suggested;
     }

client/source/scripts/components/notifications/Notification.js

@@ -0,0 +1,55 @@
+import classnames from 'classnames';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import CircleCheckmarkIcon from '../icons/CircleCheckmarkIcon';
+import CircleExclamationIcon from '../icons/CircleExclamationIcon';
+import stringUtil from '../../../../../shared/util/stringUtil';
+
+export default class Notification extends React.Component {
+  render() {
+    let icon = <CircleCheckmarkIcon />;
+    let countText = null;
+    let itemText = this.props.subject;
+    let notificationClasses = classnames('notification', {
+      'is-success': this.props.type === 'success',
+      'is-error': this.props.type === 'error'
+    });
+
+    if (this.props.type === 'error') {
+      icon = <CircleExclamationIcon />;
+    }
+
+    if (this.props.count !== 1) {
+      countText = (
+        <span className="notification__count">
+          {this.props.count}
+        </span>
+      );
+
+      itemText = stringUtil.pluralize(itemText, this.props.count);
+    }
+
+    return (
+      <li className={notificationClasses}>
+        {icon}
+        <span className="notification__content">
+          {this.props.adverb} {this.props.action} {countText} {itemText}.
+        </span>
+      </li>
+    );
+  }
+}
+
+Notification.defaultProps = {
+  count: 0,
+  type: 'success'
+};
+
+Notification.propTypes = {
+  count: React.PropTypes.number,
+  action: React.PropTypes.string.isRequired,
+  adverb: React.PropTypes.string.isRequired,
+  subject: React.PropTypes.string.isRequired,
+  subject: React.PropTypes.string
+};

client/source/scripts/components/notifications/Notifications.js

@@ -4,6 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import EventTypes from '../../constants/EventTypes';
+import Notification from './Notification';
 import NotificationStore from '../../stores/NotificationStore';
 
 const METHODS_TO_BIND = ['handleNotificationChange'];
@@ -31,11 +32,7 @@ export default class NotificationList extends React.Component {
 
   getNotifications() {
     return this.state.notifications.map((notification, index) => {
-      return (
-        <li className="notifications__list__item" key={index}>
-          {notification.content}
-        </li>
-      );
+      return <Notification {...notification} key={index} />;
     });
   }