mobx - view logic on stores - reactjs

Question

I have a very large app on mobx + react, where many components call the same actions on store. For example, "delete photo", can be call from a list of photos or from a modal. But before execute the action I have, for example, to show a confirmation modal...
I end-up with this soluction, but it looks like that I'm mixin data login with view logic...
class PhotoStore {
#observable photos;
#action destroy(photo) {
if (currentUser.isGuest) {
modalStore.open('NoGuest')
return
}
modalStore.openConfirm(() => {
// some datalogic
api.delete('/photos/'+photo.id).then(() => {
notificationStore.showSuccess('your photo was deleted!')
})
})
}
}
const PhotoView = observer(({photo}) => {
return <div onClick={() => photoStore.destroy(photo)}>...</div>
})
What so you thing? is that ok to go?
thanks a lot!

Answer 1

To avoid UI logic with model logic, the code can be simplified as follows.
class PhotoView extends React.Component {
handleDelete() {
if (this.props.currentUser.isGuest) {
modalStore.open('NoGuest');
return;
}
modalStore.openConfirm(() => {
// some datalogic
photoStore.delete(this.props.photo).then(() => {
notificationStore.showSuccess('your photo was deleted!');
});
});
}
render() {
return <div onClick={this.handleDelete.bind(this)}>...</div>
}
}
The delete function on the PhotoStore should be modified:
#action delete(photo) {
return new Promise((res, rej) => {
api.delete('/photos/'+photo.id)
.then(res)
.catch(rej);
});
}

Answer 2

Instead of
notificationStore.showSuccess('your photo was deleted!')
You could add an observable to store and modify it there. Your modal code could live somewhere else and be an observer