Use callback for updating feedback options

It's only necessary in the exam view, as the approach in the grade view
is different

client/views/Exam.jsx

@@ -63,17 +63,7 @@ class Exams extends React.Component {
         previewing: false
       }
     }
-    if (prevState.problemIdToEditFeedbackOf && !prevState.editActive) {
-      if (prevState.waitForNextRender) {
-        var problem = newProps.exam.problems.find(w => {
-          return w.widget.id === prevState.problemIdToEditFeedbackOf
-        })
-        prevState.widgets[problem.widget.id].problem.feedback = problem.feedback
-        prevState.waitForNextRender = false
-        if (!prevState.editActive) prevState.problemIdToEditFeedbackOf = null
-      } else prevState.waitForNextRender = true
-    }
-    return prevState
+    return null
   }
 
   componentDidUpdate = (prevProps, prevState) => {
@@ -111,6 +101,20 @@ class Exams extends React.Component {
       problemIdToEditFeedbackOf: this.state.selectedWidgetId
     })
   }
+
+  updateFeedback = (feedback) => {
+    var widgets = this.state.widgets
+    const idx = widgets[this.state.selectedWidgetId].problem.feedback.findIndex(e => { return e.id == feedback.id })
+    if(idx == -1) widgets[this.state.selectedWidgetId].problem.feedback.push(feedback)
+    else {
+      if(feedback.deleted) widgets[this.state.selectedWidgetId].problem.feedback.splice(idx, 1)
+      else widgets[this.state.selectedWidgetId].problem.feedback[idx] = feedback
+    }
+    this.setState({
+      widgets:widgets
+    })
+  }
+
   backToFeedback = () => {
     this.props.updateExam(this.props.exam.id)
     this.setState({
@@ -351,7 +355,7 @@ class Exams extends React.Component {
         </div>
         {this.isProblemWidget(selectedWidgetId) && (this.state.editActive
           ? <EditPanel problemID={props.problem.id} feedback={this.state.feedbackToEdit}
-            goBack={this.backToFeedback} />
+            goBack={this.backToFeedback} updateCallback={this.updateFeedback} />
           : <FeedbackPanel examID={this.props.examID} problem={props.problem}
             editFeedback={this.editFeedback} showTooltips={this.state.showTooltips}
             grading={false}

client/views/grade/EditPanel.jsx

@@ -40,16 +40,19 @@ class EditPanel extends React.Component {
   }
 
   static getDerivedStateFromProps (nextProps, prevState) {
+      // In case nothing is set, use an empty function that no-ops
+    const updateCallback = nextProps.updateCallback || ( _ => {})
     if (nextProps.feedback && prevState.id !== nextProps.feedback.id) {
       const fb = nextProps.feedback
       return {
         id: fb.id,
         name: fb.name,
         description: fb.description,
-        score: fb.score
+        score: fb.score,
+        updateCallback: updateCallback
       }
     }
-    return null
+    return {updateCallback: updateCallback}
   }
 
   changeText = (event) => {
@@ -84,10 +87,15 @@ class EditPanel extends React.Component {
     if (this.state.id) {
       fb.id = this.state.id
       api.put(uri, fb)
-        .then(() => this.props.goBack())
+        .then(() => {
+          this.state.updateCallback(fb)
+          this.props.goBack()
+        })
     } else {
       api.post(uri, fb)
-        .then(() => {
+        .then((response) => {
+            // Response is the feedback option
+          this.state.updateCallback(response)
           this.setState({
             id: null,
             name: '',
@@ -101,7 +109,13 @@ class EditPanel extends React.Component {
   deleteFeedback = () => {
     if (this.state.id) {
       api.del('feedback/' + this.props.problemID + '/' + this.state.id)
-        .then(() => this.props.goBack())
+        .then(() => {
+          this.state.updateCallback({
+            id: this.state.id,
+            deleted: true
+          })
+          this.props.goBack()
+        })
     }
   }