Make Actions return promises instead of `Wait.for`

Instead of relying on `Wait.for` in order to wait for an action's
response, make actions return promises and use them instead.
This allows for better performance if wait time is very long and
multiple actions are dispatched simultaneously.

src/actions/EndpointActions.js

@@ -18,12 +18,13 @@ import EndpointSource from '../sources/EndpointSource'
 
 class EndpointActions {
   getEndpoints(options) {
-    EndpointSource.getEndpoints().then(
-      endpoints => { this.getEndpointsCompleted(endpoints) },
-      response => { this.getEndpointsFailed(response) }
-    )
-
-    return options || true
+    return {
+      ...options,
+      promise: EndpointSource.getEndpoints().then(
+        endpoints => { this.getEndpointsCompleted(endpoints) },
+        response => { this.getEndpointsFailed(response) }
+      ),
+    }
   }
 
   getEndpointsCompleted(endpoints) {
@@ -87,12 +88,13 @@ class EndpointActions {
   }
 
   update(endpoint) {
-    EndpointSource.update(endpoint).then(
-      endpointResponse => { this.updateSuccess(endpointResponse) },
-      response => { this.updateFailed(response) },
-    )
-
-    return endpoint
+    return {
+      endpoint,
+      promise: EndpointSource.update(endpoint).then(
+        endpointResponse => { this.updateSuccess(endpointResponse) },
+        response => { this.updateFailed(response) },
+      ),
+    }
   }
 
   updateSuccess(endpoint) {
@@ -108,12 +110,13 @@ class EndpointActions {
   }
 
   add(endpoint) {
-    EndpointSource.add(endpoint).then(
-      endpointResponse => { this.addSuccess(endpointResponse) },
-      response => { this.addFailed(response) },
-    )
-
-    return endpoint
+    return {
+      endpoint,
+      promise: EndpointSource.add(endpoint).then(
+        endpointResponse => { this.addSuccess(endpointResponse) },
+        response => { this.addFailed(response) },
+      ),
+    }
   }
 
   addSuccess(endpoint) {

src/actions/MigrationActions.js

@@ -18,11 +18,13 @@ import MigrationSource from '../sources/MigrationSource'
 
 class MigrationActions {
   getMigrations(options) {
-    MigrationSource.getMigrations().then(
-      response => { this.getMigrationsSuccess(response) },
-      response => { this.getMigrationsFailed(response) },
-    )
-    return options || true
+    return {
+      ...options,
+      promise: MigrationSource.getMigrations().then(
+        response => { this.getMigrationsSuccess(response) },
+        response => { this.getMigrationsFailed(response) },
+      ),
+    }
   }
 
   getMigrationsSuccess(migrations) {
@@ -51,12 +53,13 @@ class MigrationActions {
   }
 
   cancel(migrationId) {
-    MigrationSource.cancel(migrationId).then(
-      () => { this.cancelSuccess(migrationId) },
-      response => { this.cancelFailed(response) },
-    )
-
-    return { migrationId }
+    return {
+      migrationId,
+      promise: MigrationSource.cancel(migrationId).then(
+        () => { this.cancelSuccess(migrationId) },
+        response => { this.cancelFailed(response) },
+      ),
+    }
   }
 
   cancelSuccess(migrationId) {

src/actions/ProjectActions.js

@@ -18,12 +18,12 @@ import PojectSource from '../sources/ProjectSource'
 
 class ProjectActions {
   getProjects() {
-    PojectSource.getProjects().then(
-      this.getProjectsCompleted.bind(this),
-      this.getProjectsFailed.bind(this)
-    ).catch(this.getProjectsFailed.bind(this))
-
-    return true
+    return {
+      promise: PojectSource.getProjects().then(
+        this.getProjectsCompleted.bind(this),
+        this.getProjectsFailed.bind(this)
+      ).catch(this.getProjectsFailed.bind(this)),
+    }
   }
 
   getProjectsCompleted(response) {

src/actions/ReplicaActions.js

@@ -18,11 +18,13 @@ import ReplicaSource from '../sources/ReplicaSource'
 
 class ReplicaActions {
   getReplicas(options) {
-    ReplicaSource.getReplicas().then(
-      response => { this.getReplicasSuccess(response) },
-      response => { this.getReplicasFailed(response) },
-    )
-    return options || true
+    return {
+      ...options,
+      promise: ReplicaSource.getReplicas().then(
+        response => { this.getReplicasSuccess(response) },
+        response => { this.getReplicasFailed(response) },
+      ),
+    }
   }
 
   getReplicasSuccess(replicas) {
@@ -71,11 +73,13 @@ class ReplicaActions {
   }
 
   getReplicaExecutions(replicaId) {
-    ReplicaSource.getReplicaExecutions(replicaId).then(
-      response => { this.getReplicaExecutionsSuccess(response) },
-      response => { this.getReplicaExecutionsFailed(response) },
-    )
-    return replicaId
+    return {
+      replicaId,
+      promise: ReplicaSource.getReplicaExecutions(replicaId).then(
+        response => { this.getReplicaExecutionsSuccess(response) },
+        response => { this.getReplicaExecutionsFailed(response) },
+      ),
+    }
   }
 
   getReplicaExecutionsSuccess({ replicaId, executions }) {

src/actions/UserActions.js

@@ -17,7 +17,6 @@ import alt from '../alt'
 import UserSource from '../sources/UserSource'
 import ProjectActions from './ProjectActions'
 import ProjectStore from '../stores/ProjectStore'
-import Wait from '../utils/Wait'
 import NotificationActions from './NotificationActions'
 
 class UserActions {
@@ -41,8 +40,7 @@ class UserActions {
       UserSource.loginScoped(projectId || projectStore.projects[0].id)
         .then(this.loginScopedSuccess, this.loginScopedFailed)
     } else {
-      ProjectActions.getProjects()
-      Wait.for(() => ProjectStore.getState().projects.length, () => {
+      ProjectActions.getProjects().promise.then(() => {
         UserSource.loginScoped(projectId || ProjectStore.getState().projects[0].id)
           .then(this.loginScopedSuccess, this.loginScopedFailed)
       })

src/actions/WizardActions.js

@@ -54,12 +54,14 @@ class WizardActions {
   }
 
   create(type, data) {
-    WizardSource.create(type, data).then(
-      item => { this.createSuccess(item) },
-      response => { this.createFailed(response) }
-    )
-
-    return { type, data }
+    return {
+      type,
+      data,
+      promise: WizardSource.create(type, data).then(
+        item => { this.createSuccess(item) },
+        response => { this.createFailed(response) }
+      ),
+    }
   }
 
   createSuccess(item) {
@@ -71,12 +73,14 @@ class WizardActions {
   }
 
   createMultiple(type, data) {
-    WizardSource.createMultiple(type, data).then(
-      items => { this.createMultipleSuccess(items) },
-      response => { this.createMultipleFailed(response) }
-    )
-
-    return { type, data }
+    return {
+      type,
+      data,
+      promise: WizardSource.createMultiple(type, data).then(
+        items => { this.createMultipleSuccess(items) },
+        response => { this.createMultipleFailed(response) }
+      ),
+    }
   }
 
   createMultipleSuccess(items) {

src/components/organisms/Endpoint/Endpoint.jsx

@@ -24,7 +24,6 @@ import EndpointActions from '../../../actions/EndpointActions'
 import ProviderStore from '../../../stores/ProviderStore'
 import ProviderActions from '../../../actions/ProviderActions'
 import ObjectUtils from '../../../utils/ObjectUtils'
-import Wait from '../../../utils/Wait'
 import Palette from '../../styleUtils/Palette'
 import DomUtils from '../../../utils/DomUtils'
 
@@ -256,16 +255,14 @@ class Endpoint extends React.Component {
   }
 
   update() {
-    EndpointActions.update(this.state.endpoint)
-    Wait.for(() => EndpointStore.getState().updating === false, () => {
+    EndpointActions.update(this.state.endpoint).promise.then(() => {
       NotificationActions.notify('Validating endpoint ...')
       EndpointActions.validate(this.state.endpoint)
     })
   }
 
   add() {
-    EndpointActions.add(this.state.endpoint)
-    Wait.for(() => EndpointStore.getState().adding === false, () => {
+    EndpointActions.add(this.state.endpoint).promise.then(() => {
       let endpoint = EndpointStore.getState().endpoints[0]
       this.setState({ isNew: false, endpoint })
       NotificationActions.notify('Validating endpoint ...')

src/components/pages/EndpointDetailsPage/EndpointDetailsPage.jsx

@@ -36,7 +36,6 @@ import MigrationActions from '../../../actions/MigrationActions'
 import ReplicaActions from '../../../actions/ReplicaActions'
 import UserStore from '../../../stores/UserStore'
 import UserActions from '../../../actions/UserActions'
-import Wait from '../../../utils/Wait'
 
 import endpointImage from './images/endpoint.svg'
 
@@ -119,9 +118,7 @@ class EndpointDetailsPage extends React.Component {
   handleDeleteEndpointClick() {
     this.setState({ showEndpointInUseLoadingModal: true })
 
-    ReplicaActions.getReplicas()
-    MigrationActions.getMigrations()
-    Wait.for(() => !ReplicaStore.getState().loading && !MigrationStore.getState().loading, () => {
+    Promise.all([ReplicaActions.getReplicas().promise, MigrationActions.getMigrations().promise]).then(() => {
       let endpointUsage = this.getEndpointUsage()
 
       if (endpointUsage.migrationsCount === 0 && endpointUsage.replicasCount === 0) {
@@ -173,9 +170,7 @@ class EndpointDetailsPage extends React.Component {
   }
 
   loadData() {
-    EndpointActions.getEndpoints()
-
-    Wait.for(() => this.getEndpoint().id, () => {
+    EndpointActions.getEndpoints().promise.then(() => {
       let endpoint = this.getEndpoint()
 
       if (endpoint.connection_info && endpoint.connection_info.secret_ref) {

src/components/pages/EndpointsPage/EndpointsPage.jsx

@@ -125,7 +125,7 @@ class EndpointsPage extends React.Component {
   handleProjectChange(project) {
     Wait.for(() => this.props.userStore.user.project.id === project.id, () => {
       ProjectActions.getProjects()
-      EndpointActions.getEndpoints()
+      EndpointActions.getEndpoints({ showLoading: true })
       MigrationActions.getMigrations()
       ReplicaActions.getReplicas()
     })

src/components/pages/MigrationDetailsPage/MigrationDetailsPage.jsx

@@ -32,7 +32,6 @@ import MigrationActions from '../../../actions/MigrationActions'
 import EndpointStore from '../../../stores/EndpointStore'
 import EndpointActions from '../../../actions/EndpointActions'
 import NotificationActions from '../../../actions/NotificationActions'
-import Wait from '../../../utils/Wait'
 import { requestPollTimeout } from '../../../config'
 
 import migrationImage from './images/migration.svg'
@@ -121,8 +120,7 @@ class MigrationDetailsPage extends React.Component {
 
   handleCancelConfirmation() {
     this.setState({ showCancelConfirmation: false })
-    MigrationActions.cancel(this.props.migrationStore.migrationDetails.id)
-    Wait.for(() => MigrationStore.getState().canceling !== true, () => {
+    MigrationActions.cancel(this.props.migrationStore.migrationDetails.id).promise.then(() => {
       if (MigrationStore.getState().canceling === false) {
         NotificationActions.notify('Canceled', 'success')
       } else {

src/components/pages/MigrationsPage/MigrationsPage.jsx

@@ -99,7 +99,7 @@ class MigrationsPage extends React.Component {
     Wait.for(() => this.props.userStore.user.project.id === project.id, () => {
       ProjectActions.getProjects()
       EndpointActions.getEndpoints()
-      MigrationActions.getMigrations()
+      MigrationActions.getMigrations({ showLoading: true })
     })
 
     UserActions.switchProject(project.id)

src/components/pages/ReplicaDetailsPage/ReplicaDetailsPage.jsx

@@ -28,7 +28,6 @@ import {
   ReplicaMigrationOptions,
 } from 'components'
 
-import Wait from '../../../utils/Wait'
 import ReplicaStore from '../../../stores/ReplicaStore'
 import UserStore from '../../../stores/UserStore'
 import UserActions from '../../../actions/UserActions'
@@ -86,12 +85,11 @@ class ReplicaDetailsPage extends React.Component {
     EndpointActions.getEndpoints()
     ScheduleActions.getSchedules(this.props.match.params.id)
     this.pollData()
-    this.pollInterval = setInterval(() => { this.pollData() }, requestPollTimeout)
   }
 
   componentWillUnmount() {
     ReplicaActions.clearDetails()
-    clearInterval(this.pollInterval)
+    clearInterval(this.pollTimeout)
   }
 
   isActionButtonDisabled() {
@@ -207,8 +205,9 @@ class ReplicaDetailsPage extends React.Component {
   }
 
   pollData() {
-    Wait.for(() => this.props.replicaStore.replicaDetails.id === this.props.match.params.id,
-      () => { ReplicaActions.getReplicaExecutions(this.props.match.params.id) })
+    ReplicaActions.getReplicaExecutions(this.props.match.params.id).promise.then(() => {
+      this.pollTimeout = setTimeout(() => { this.pollData() }, requestPollTimeout)
+    })
   }
 
   render() {

src/components/pages/ReplicasPage/ReplicasPage.jsx

@@ -166,8 +166,7 @@ class ReplicasPage extends React.Component {
   }
 
   pollData() {
-    ReplicaActions.getReplicas()
-    Wait.for(() => !this.props.replicaStore.backgroundLoading, () => {
+    ReplicaActions.getReplicas().promise.then(() => {
       this.pollTimeout = setTimeout(() => { this.pollData() }, requestPollTimeout)
     })
   }

src/components/pages/WizardPage/WizardPage.jsx

@@ -124,8 +124,7 @@ class WizardPage extends React.Component {
   createMultiple() {
     let typeLabel = this.state.type.charAt(0).toUpperCase() + this.state.type.substr(1)
     NotificationActions.notify(`Creating ${typeLabel}s ...`)
-    WizardActions.createMultiple(this.state.type, this.props.wizardStore.data)
-    Wait.for(() => !WizardStore.getState().creatingItems, () => {
+    WizardActions.createMultiple(this.state.type, this.props.wizardStore.data).promise.then(() => {
       let items = WizardStore.getState().createdItems
       if (!items) {
         Notification.notify(`${typeLabel}s couldn't be created`, 'error')
@@ -139,8 +138,7 @@ class WizardPage extends React.Component {
   createSingle() {
     let typeLabel = this.state.type.charAt(0).toUpperCase() + this.state.type.substr(1)
     NotificationActions.notify(`Creating ${typeLabel} ...`)
-    WizardActions.create(this.state.type, this.props.wizardStore.data)
-    Wait.for(() => !WizardStore.getState().creatingItem, () => {
+    WizardActions.create(this.state.type, this.props.wizardStore.data).promise.then(() => {
       let item = WizardStore.getState().createdItem
       if (!item) {
         Notification.notify(`${typeLabel} couldn't be created`, 'error')

src/stores/EndpointStore.js

@@ -105,7 +105,7 @@ class EndpointStore {
     this.validation = null
   }
 
-  handleUpdate(endpoint) {
+  handleUpdate({ endpoint }) {
     this.endpoints = updateEndpoint(endpoint, this.endpoints)
     this.connectionInfo = { ...endpoint.connection_info }
     this.updating = true