Refactor to use Promise.all() for requests.

zooniverse · Oct 17, 2017 · 79a8bee · 79a8bee
1 parent d2f9a3e
commit 79a8bee
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 36 deletions.
diff --git a/app/components/workflow-default-dialog.jsx b/app/components/workflow-default-dialog.jsx
@@ -1,14 +1,12 @@
 import React from 'react';
+import Translate from 'react-translate-component';
 
 const WorkflowDefaultDialog = ({ onSuccess }) => {
 
   return (
     <div>
-      <div>
-        You are about to make the default workflow inactive,
-        which will remove the 'default' setting from this workflow.
-        Go to project builder => workflows to set a default workflow.
-      </div>
+      <Translate content="workflowDefaultDialog.text" />
+      <br />
       <button type="submit" onSubmit={onSuccess}>ok</button>
     </div>
   )

diff --git a/app/locales/en.js b/app/locales/en.js
diff --git a/app/pages/admin/project-status.jsx b/app/pages/admin/project-status.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import apiClient from 'panoptes-client/lib/api-client';
+import Dialog from 'modal-form/dialog';
 
 import ProjectIcon from '../../components/project-icon';
 import getWorkflowsInOrder from '../../lib/get-workflows-in-order';
@@ -10,9 +11,7 @@ import VersionList from './project-status/version-list';
 import ExperimentalFeatures from './project-status/experimental-features';
 import Toggle from './project-status/toggle';
 import RedirectToggle from './project-status/redirect-toggle';
-
 import WorkflowDefaultDialog from '../../components/workflow-default-dialog'
-import Dialog from 'modal-form/dialog';
 
 class ProjectStatus extends Component {
   constructor(props) {
@@ -23,7 +22,6 @@ class ProjectStatus extends Component {
     this.renderError = this.renderError.bind(this);
     this.renderWorkflows = this.renderWorkflows.bind(this);
     this.handleToggle = this.handleToggle.bind(this);
-    this.handleRemoveDefault = this.handleRemoveDefault.bind(this);
 
     this.state = {
       project: null,
@@ -80,30 +78,29 @@ class ProjectStatus extends Component {
 
   handleToggle(event, workflow) {
     this.setState({ error: null });
-    let checked = event.target.checked;
+    const checked = event.target.checked;
+    const defaultWorkflowId = this.state.project.configuration.default_workflow;
 
-    const defaultWorkflowId = this.state.project.configuration.default_workflow
+    const promises = [this.getWorkflows(), this.getProject()];
 
     if (defaultWorkflowId === workflow.id && workflow.active) {
       Dialog.alert(
-        <WorkflowDefaultDialog closeButton={true} required/>
-      ).then(() => {
-        this.handleRemoveDefault()
-      })
-      .catch((error) => {
-        console.error(error)
+        <WorkflowDefaultDialog closeButton={true} required={true} />
+      )
+      .then(() => {
+        Promise.all(promises)
+          .then(() => {
+            if (!this.state.error) {
+              workflow.update({ active: checked }).save();
+              this.state.project.update({ 'configuration.default_workflow': undefined }).save();
+            }
+          })
+          .catch(error => this.setState({ error }));
       })
+      .catch(error => this.setState({ error }));
     }
 
-    return workflow.update({ 'active': checked }).save()
-      .then(() => this.getWorkflows())
-      .catch(error => this.setState({ error }))
-  }
-
-  handleRemoveDefault() {
-    return this.state.project.update({ 'configuration.default_workflow': undefined }).save()
-      .then(() => this.getProject())
-      .catch(error => this.setState({ error }))
+    workflow.update({ active: checked }).save();
   }
 
   renderError() {
@@ -112,16 +109,6 @@ class ProjectStatus extends Component {
     }
   }
 
-  renderDefaultWorkflowAsterisk(workflow) {
-    const defaultWorkflowId = this.state.project.configuration.default_workflow
-
-    if (defaultWorkflowId === workflow.id) {
-      return (
-        ' * '
-      )
-    }
-  }
-
   renderWorkflows() {
     if (this.state.workflows.length === 0) {
       return <div>No workflows found</div>;
@@ -132,7 +119,8 @@ class ProjectStatus extends Component {
         {this.state.workflows.map((workflow) => {
           return (
             <li key={workflow.id} className="section-list__item">
-              {this.renderDefaultWorkflowAsterisk(workflow)}
+              {this.state.project.configuration.default_workflow === workflow.id ?
+              ' * ' : ''}
               <WorkflowToggle
                 workflow={workflow}
                 name="active"