From 27272dcd0f0d3ea73150fe51a4b19e60d35fcbd9 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Thu, 6 Apr 2017 09:01:53 +1200 Subject: [PATCH] Cancellable processes --- src/js/components/Notifications.js | 43 +++++++++++++++++++++------- src/js/services/mopidy/middleware.js | 16 +++++++---- src/js/services/ui/actions.js | 5 ++-- src/js/services/ui/middleware.js | 16 +++++------ src/js/services/ui/reducer.js | 18 +++++++++++- src/js/views/App.js | 2 ++ src/js/views/Debug.js | 3 +- 7 files changed, 74 insertions(+), 29 deletions(-) diff --git a/src/js/components/Notifications.js b/src/js/components/Notifications.js index 27e1666b..d3f23002 100755 --- a/src/js/components/Notifications.js +++ b/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 ( { @@ -26,14 +23,6 @@ export default class Notifications extends React.Component{ ) - case 'process': - return ( -
- this.props.uiActions.cancelProcess(notification.key) } /> - { notification.content } -
- ) - default: return (
@@ -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( +
+ Cancelling +
+ ) + } else { + items.push( +
+ this.props.uiActions.cancelProcess(key) } /> + { processes[key].content } +
+ ) + } + } + } + + return ( + + {items} + + ) + } + // 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 (
{this.renderNotifications()} + {this.renderProcesses()}
) } diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index f8567f74..1e59767c 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -239,12 +239,19 @@ const MopidyMiddleware = (function(){ let process_batch = function(){ - // process is not active, so abort - if (!store.getState().ui.processes || !store.getState().ui.processes[action.uri]){ + // process is not running + if (store.getState().ui.processes && store.getState().ui.processes[action.type]){ + if (store.getState().ui.processes[action.type].cancelling){ + // recognise as cancelled + store.dispatch(uiActions.stopProcess(action.type)) + return false + } + } else { return false } - store.dispatch(uiActions.createNotification('Adding '+remaining_uris.length+' URI(s)', 'loading', action.type)) + // update our process details + store.dispatch(uiActions.startProcess(action.type, 'Adding '+remaining_uris.length+' URI(s)')) var params = {uris: remaining_uris.splice(0,5)} if (action.next && current_track_index > -1){ @@ -279,14 +286,13 @@ const MopidyMiddleware = (function(){ // all done } else { - store.dispatch(uiActions.removeNotification(action.type)) store.dispatch(uiActions.stopProcess(action.type)) } }) } // start processing - store.dispatch(uiActions.startProcess(action.type)) + store.dispatch(uiActions.startProcess(action.type, 'Adding '+remaining_uris.length+' URI(s)')) process_batch() break diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js index 3a8236b1..4170aee0 100755 --- a/src/js/services/ui/actions.js +++ b/src/js/services/ui/actions.js @@ -262,10 +262,11 @@ export function stopLoading(key){ } } -export function startProcess(key){ +export function startProcess(key,content){ return { type: 'START_PROCESS', - key: key + key: key, + content: content } } diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js index d9f05afb..9ea43811 100755 --- a/src/js/services/ui/middleware.js +++ b/src/js/services/ui/middleware.js @@ -268,15 +268,13 @@ const UIMiddleware = (function(){ case 'CREATE_NOTIFICATION': - // start a timeout to remove this (non loading) notification - if (action.notification.type != 'process'){ - var timeout = setTimeout( - function(){ - store.dispatch(uiActions.removeNotification(action.notification.key)) - }, - (action.notification.type == 'shortcut' ? 1000 : 3000) - ) - } + // start a timeout to remove this notification + var timeout = setTimeout( + function(){ + store.dispatch(uiActions.removeNotification(action.notification.key)) + }, + (action.notification.type == 'shortcut' ? 1000 : 3000) + ) next(action) break diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js index 42c29a1d..28f9804d 100755 --- a/src/js/services/ui/reducer.js +++ b/src/js/services/ui/reducer.js @@ -745,7 +745,23 @@ export default function reducer(ui = {}, action){ case 'START_PROCESS': var processes = Object.assign({}, (ui.processes ? ui.processes : [])) - processes[action.key] = 'active' + processes[action.key] = { + key: action.key, + content: action.content + } + return Object.assign({}, ui, {processes: processes}) + + case 'CANCEL_PROCESS': + var processes = Object.assign({}, (ui.processes ? ui.processes : {})) + if (processes[action.key]){ + processes[action.key] = Object.assign( + {}, + processes[action.key], + { + cancelling: true + } + ) + } return Object.assign({}, ui, {processes: processes}) case 'STOP_PROCESS': diff --git a/src/js/views/App.js b/src/js/views/App.js index f9b6d69e..541c97a2 100755 --- a/src/js/views/App.js +++ b/src/js/views/App.js @@ -158,6 +158,7 @@ class App extends React.Component{ {this.props.debug_info ? : null}
@@ -174,6 +175,7 @@ class App extends React.Component{ const mapStateToProps = (state, ownProps) => { return { notifications: (state.ui.notifications ? state.ui.notifications : []), + processes: (state.ui.processes ? state.ui.processes : {}), load_queue: (state.ui.load_queue ? state.ui.load_queue : {}), mopidy_connected: state.mopidy.connected, spotify_authorized: state.spotify.authorized, diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js index 6b716691..816927c6 100755 --- a/src/js/views/Debug.js +++ b/src/js/views/Debug.js @@ -104,7 +104,8 @@ class Debug extends React.Component{
this.props.uiActions.createNotification('Test notification')}>Create notification - this.props.uiActions.createNotification('Process running','process')}>Create process + this.props.uiActions.startProcess('test_process', 'Test process')}>Start process + this.props.uiActions.stopProcess('test_process')}>Stop process