Bugfix for changing labeltype to T/F

client/components/PaneMCQ.jsx

@@ -10,7 +10,7 @@ class PanelMCQ extends React.Component {
     this.onChangeNPA = this.onChangeNPA.bind(this)
     this.onChangeLabelType = this.onChangeLabelType.bind(this)
     this.generateLabels = this.generateLabels.bind(this)
-    this.updateMCO = this.updateMCO.bind(this)
+    this.updateNumberOptions = this.updateNumberOptions.bind(this)
 
     this.state = {
       isMCQ: false,
@@ -27,7 +27,7 @@ class PanelMCQ extends React.Component {
         problemId: prob.id,
         isMCQ: prob.mc_options.length > 0,
         nrPossibleAnswers: prob.mc_options.length || 2,
-        chosenLabelType: prob.labelType || 2,
+        chosenLabelType: PanelMCQ.deriveLabelType(prob.mc_options),
       }
     }
 
@@ -36,11 +36,11 @@ class PanelMCQ extends React.Component {
 
   static deriveLabelType (options) {
     if (options.length === 0) {
-      return 0
+      return 2
     } else if (options.length === 2 && ((options[0].label === 'T' && options[1].label === 'F')
       || (options[0].label === 'F' && options[1].label === 'T'))) {
       return 1
-    } else if (options[0].label.match(/[a-z]/)) {
+    } else if (options[0].label.match(/[A-Z]/)) {
       return 2
     } else if (parseInt(options[0].label)) {
       return 3
@@ -49,19 +49,14 @@ class PanelMCQ extends React.Component {
     }
   }
 
-  updateMCO() {
+  updateNumberOptions() {
     let difference = this.state.nrPossibleAnswers - this.props.problem.mc_options.length
     if (difference > 0) {
       let startingAt = this.props.problem.mc_options.length
       let labels = this.generateLabels(difference, startingAt)
-      this.props.generateMCOs(labels)
+      return this.props.generateMCOs(labels)
     } else if (difference < 0) {
-      this.props.deleteMCOs(-difference)
-    }
-
-    if (this.state.chosenLabelType !== this.props.problem.labelType) {
-      let labels = this.generateLabels(this.state.nrPossibleAnswers, 0)
-      this.props.updateMCOs(labels)
+      return this.props.deleteMCOs(-difference)
     }
   }
 
@@ -74,7 +69,7 @@ class PanelMCQ extends React.Component {
       }
       this.setState({
         nrPossibleAnswers: value
-      }, this.updateMCO)
+      }, this.updateNumberOptions)
     }
   }
 
@@ -82,13 +77,22 @@ class PanelMCQ extends React.Component {
   onChangeLabelType (e) {
     let value = parseInt(e.target.value)
     if (!isNaN(value)) {
-      this.setState({
-        chosenLabelType: value
-      }, this.updateMCO)
       if (parseInt(value) === 1) {
         this.setState({
-          nrPossibleAnswers: 2
-        }, this.updateMCO)
+          nrPossibleAnswers: 2,
+          chosenLabelType: value
+        }, () => {
+          this.updateNumberOptions()
+          let labels = this.generateLabels(this.state.nrPossibleAnswers, 0)
+          this.props.updateLabels(labels)
+        })
+      } else {
+        this.setState({
+          chosenLabelType: value
+        }, () => {
+          let labels = this.generateLabels(this.state.nrPossibleAnswers, 0)
+          this.props.updateLabels(labels)
+        })
       }
     }
   }

client/views/Exam.jsx

@@ -59,8 +59,7 @@ class Exams extends React.Component {
             }),
             widthMCO: 24,
             heightMCO: 38,
-            isMCQ: problem.mc_options && problem.mc_options.length !== 0, // is the problem a mc question - used to display PanelMCQ
-            labelType: PanelMCQ.deriveLabelType(problem.mc_options)
+            isMCQ: problem.mc_options && problem.mc_options.length !== 0 // is the problem a mc question - used to display PanelMCQ
           }
         }
       })
@@ -125,14 +124,26 @@ class Exams extends React.Component {
   }
 
   updateFeedbackAtIndex = (feedback, problemWidget, idx) => {
+    let fb = [...problemWidget.problem.feedback]
     if (idx === -1) {
-      problemWidget.problem.feedback.push(feedback)
+      fb.push(feedback)
     } else {
-      if (feedback.deleted) problemWidget.problem.feedback.splice(idx, 1)
-      else problemWidget.problem.feedback[idx] = feedback
+      if (feedback.deleted) fb.splice(idx, 1)
+      else fb[idx] = feedback
     }
-    this.setState({
-      widgets: this.state.widgets
+
+    this.setState(prevState => {
+      return {
+        widgets: update(prevState.widgets, {
+          [problemWidget.id]: {
+            'problem': {
+              'feedback': {
+                $set: fb
+              }
+            }
+          }
+        })
+      }
     })
   }
 
@@ -319,15 +330,15 @@ class Exams extends React.Component {
   }
 
 
-  deleteMCO = (widget, index) => {
+  deleteMCO = (widgetId, index, nrMCOs) => {
+    let widget = this.state.widgets[widgetId]
+    if (nrMCOs <= 0 || !widget.problem.mc_options.length) return;
+
     let option = widget.problem.mc_options[index]
-    api.del('mult-choice/' + option.id)
+    return api.del('mult-choice/' + option.id)
       .catch(err => {
         console.log(err)
         err.json().then(res => {
-          this.setState({
-            deletingMCWidget: false
-          })
           Notification.error('Could not delete multiple choice option' +
             (res.message ? ': ' + res.message : ''))
           // update to try and get a consistent state
@@ -335,32 +346,33 @@ class Exams extends React.Component {
         })
       })
       .then(res => {
-        let index = widget.problem.feedback.findIndex(e => { return e.id === res.feedback_id })
         let feedback = widget.problem.feedback[index]
         feedback.deleted = true
-        this.updateFeedbackAtIndex(feedback, widget, index)
-      }
-    )
+        this.updateFeedback(feedback)
+        this.setState((prevState) => {
+          return {
+            widgets: update(prevState.widgets, {
+              [widget.id]: {
+                problem: {
+                  mc_options: {
+                    $splice: [[index, 1]]
+                  }
+                }
+              }
+            })
+          }
+        }, () => {
+          this.deleteMCO(widgetId, index, nrMCOs-1)
+        })
+      })
+  }
 
+
+  deleteMCOs = (widget, startIndex, nrMCOs) => {
     let options = [...widget.problem.mc_options]
-    options.splice(index, 1)
+    options.splice(startIndex, nrMCOs)
 
-    // remove the mc options from the state
-    // note that this can happen before they are removed in the DB due to async calls
-    this.setState((prevState) => {
-      return {
-        widgets: update(prevState.widgets, {
-          [widget.id]: {
-            problem: {
-              mc_options: {
-                $set: options
-              }
-            }
-          }
-        }),
-        deletingMCWidget: false
-      }
-    })
+    this.deleteMCO(widget.id, startIndex, nrMCOs)
   }
 
   /**
@@ -591,14 +603,13 @@ class Exams extends React.Component {
             let len = problem.mc_options.length
             if (nrMCOs >= len) {
               this.setState({deletingMCWidget: true})
-            } else {
-              for (let i = 0; i < nrMCOs; i++) {
-                this.deleteMCO(selectedWidget, len - 1 - i)
-              }
+            } else if (nrMCOs > 0) {
+              this.deleteMCOs(selectedWidget, len - nrMCOs, nrMCOs)
             }
           }}
-          updateMCOs={(labels) => {
-            problem.mc_options.map((option, index) => {
+          updateLabels={(labels) => {
+            labels.map((label, index) => {
+              let option = problem.mc_options[index]
               const formData = new window.FormData()
               formData.append('name', option.widget.name)
               formData.append('x', option.widget.x + option.cbOffsetX)
@@ -635,21 +646,6 @@ class Exams extends React.Component {
                   })
                 })
             })
-
-            // this.setState(prevState => ({
-            //   widgets: update(prevState.widgets, {
-            //     [selectedWidget.id]: {
-            //       'problem': {
-            //         'mc_options': {
-            //           $set : options
-            //         },
-            //         'labelType': {
-            //           $set: PanelMCQ.deriveLabelType(options)
-            //         }
-            //       }
-            //     }
-            //   })
-            // }))
           }}
         /> ) : null}
         <this.PanelExamActions />
@@ -874,7 +870,7 @@ class Exams extends React.Component {
           this.state.widgets[this.state.selectedWidgetId].problem.name}"`}
         confirmText='Delete multiple choice options'
         onCancel={() => this.setState({deletingMCWidget: false})}
-        onConfirm={() => this.deleteMCWidget(this.state.selectedWidgetId)}
+        onConfirm={() => this.deleteMCO(this.state.selectedWidgetId, 0)}
       />
     </div>
   }