Cancellable processes

src/js/components/Notifications.js

@@ -11,9 +11,6 @@ export default class Notifications extends React.Component{
 	renderNotifications(){
 		if (!this.props.notifications || this.props.notifications.length <= 0) return null
 
-		// we only care about the last notification
-		var notification = this.props.notifications[this.props.notifications.length-1]
-
 		return (
 			<span>
 				{
@@ -26,14 +23,6 @@ export default class Notifications extends React.Component{
 									</div>
 								)
 
-							case 'process':
-								return (
-									<div className="process notification" key={notification.key}>
-										<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.cancelProcess(notification.key) } />
-										{ notification.content }
-									</div>
-								)
-
 							default:
 								return (
 									<div className={notification.type+" notification"} key={notification.key}>
@@ -48,6 +37,37 @@ export default class Notifications extends React.Component{
 		)
 	}
 
+	renderProcesses(){
+		if (!this.props.processes || this.props.processes.length <= 0) return null
+		var processes = this.props.processes
+		var items = []
+
+		for (var key in processes){
+			if (processes.hasOwnProperty(key)){
+				if (processes[key].cancelling){
+					items.push(
+						<div className="process notification cancelling" key={key}>
+							Cancelling
+						</div>
+					)
+				} else {
+					items.push(
+						<div className="process notification" key={key}>
+							<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.cancelProcess(key) } />
+							{ processes[key].content }
+						</div>
+					)
+				}
+			}
+		}
+
+		return (
+			<span>
+				{items}
+			</span>
+		)
+	}
+
 	// do we want the loading of everything to be displayed?
 	// not likely...
 	renderLoader(){
@@ -79,6 +99,7 @@ export default class Notifications extends React.Component{
 		return (
 			<div className="notifications">
 				{this.renderNotifications()}
+				{this.renderProcesses()}
 			</div>
 		)
 	}