implement exam deletion, use modal for confirming

client/App.jsx

@@ -48,17 +48,19 @@ const Fail = Loadable({
   loading: Loading
 })
 
+const nullExam = () => ({
+  id: null,
+  name: '',
+  submissions: [],
+  problems: [],
+  widgets: []
+})
+
 class App extends React.Component {
   menu = React.createRef();
 
   state = {
-    exam: {
-      id: null,
-      name: '',
-      submissions: [],
-      problems: [],
-      widgets: []
-    },
+    exam: nullExam(),
     grader: null
   }
 
@@ -68,6 +70,17 @@ class App extends React.Component {
         exam: ex
       }))
   }
+
+  deleteExam = (examID) => {
+    api
+      .del('exams/' + examID)
+      .then(() => {
+        if (this.menu.current) {
+          return this.menu.current.updateExamList()
+        }
+      })
+  }
+
   updateSubmission = (index, sub) => {
     if (index === undefined) {
       api.get('submissions/' + this.state.exam.id)
@@ -129,6 +142,7 @@ class App extends React.Component {
                 exam={exam}
                 examID={match.params.examID}
                 updateExam={this.updateExam}
+                deleteExam={this.deleteExam}
                 updateSubmission={this.updateSubmission} />} />
             <Route path='/exams' render={({ history }) =>
               <AddExam updateExamList={this.menu.current ? this.menu.current.updateExamList : null} changeURL={history.push} />} />

client/components/NavBar.jsx

@@ -101,7 +101,9 @@ class NavBar extends React.Component {
         this.setState({
           examList: exams
         })
-        if (this.props.exam.id === null && exams.length) this.props.updateExam(exams[exams.length - 1].id)
+        const examIDs = exams.map(exam => exam.id)
+        const examIsValid = this.props.exam.id !== null && examIDs.includes(this.props.exam.id)
+        if (!examIsValid && exams.length) this.props.updateExam(exams[exams.length - 1].id)
       })
   }
 

client/views/Exam.jsx

@@ -7,6 +7,7 @@ import PanelGenerate from '../components/PanelGenerate.jsx'
 import ExamEditor from './ExamEditor.jsx'
 import update from 'immutability-helper'
 import ExamFinalizeMarkdown from './ExamFinalize.md'
+import ConfirmationModal from '../components/ConfirmationModal.jsx'
 
 import * as api from '../api.jsx'
 
@@ -17,7 +18,8 @@ class Exams extends React.Component {
     numPages: null,
     selectedWidgetId: null,
     widgets: [],
-    previewing: false
+    previewing: false,
+    deleting: false
   }
 
   static getDerivedStateFromProps = (newProps, prevState) => {
@@ -291,32 +293,41 @@ class Exams extends React.Component {
       return <PanelGenerate examID={this.state.examID} />
     }
 
+    let actionsBody
+    if (this.state.previewing) {
+      actionsBody =
+        <this.PanelConfirm
+          onYesClick={() =>
+            api.put(`exams/${this.props.examID}/finalized`, 'true')
+              .then(() => {
+                this.props.updateExam(this.props.examID)
+                this.setState({ previewing: false })
+              })
+          }
+          onNoClick={() => this.setState({
+            previewing: false
+          })}
+        />
+    } else {
+      actionsBody =
+        <div className='panel-block field is-grouped'>
+          <this.Finalize
+            onFinalizeClicked={() => this.setState({
+              previewing: true
+            })}
+          />,
+          <this.Delete
+            onDeleteClicked={() => this.props.deleteExam(this.props.examID)}
+          />
+        </div>
+    }
+
     return (
       <nav className='panel'>
         <p className='panel-heading'>
           Actions
         </p>
-        <div className='panel-block'>
-          {this.state.previewing
-            ? <this.PanelConfirm
-              onYesClick={() =>
-                api.put(`exams/${this.props.examID}/finalized`, 'true')
-                  .then(() => {
-                    this.props.updateExam(this.props.examID)
-                    this.setState({ previewing: false })
-                  })
-              }
-              onNoClick={() => this.setState({
-                previewing: false
-              })}
-            />
-            : <this.Finalize
-              onFinalizeClicked={() => this.setState({
-                previewing: true
-              })}
-            />
-          }
-        </div>
+        {actionsBody}
       </nav>
     )
   }
@@ -332,36 +343,41 @@ class Exams extends React.Component {
     )
   }
 
+  Delete = (props) => {
+    return (
+      <button
+        className='button is-link is-fullwidth is-danger'
+        onClick={() => { this.setState({deleting: true}) }}
+      >
+        Delete
+      </button>
+    )
+  }
+
   PanelConfirm = (props) => {
     return (
-      <nav className='panel'>
-        <div className='content' dangerouslySetInnerHTML={{__html: ExamFinalizeMarkdown}} />
-        <div className='panel-heading'>
+      <div>
+        <div className='panel-block'>
           <label className='label'>Are you sure?</label>
         </div>
-        <div className='panel-block'>
-          <div className='field has-addons'>
-            <div className='control'>
-              <button
-                disabled={props.disabled}
-                className='button is-danger'
-                onClick={() => props.onYesClick()}
-              >
-                Yes
-              </button>
-            </div>
-            <div className='control'>
-              <button
-                disabled={props.disabled}
-                className='button is-link'
-                onClick={() => props.onNoClick()}
-              >
-                No
-              </button>
-            </div>
-          </div>
+        <div className='content panel-block' dangerouslySetInnerHTML={{__html: ExamFinalizeMarkdown}} />
+        <div className='panel-block field is-grouped'>
+          <button
+            disabled={props.disabled}
+            className='button is-danger is-link is-fullwidth'
+            onClick={() => props.onYesClick()}
+          >
+            Yes
+          </button>
+          <button
+            disabled={props.disabled}
+            className='button is-link is-fullwidth'
+            onClick={() => props.onNoClick()}
+          >
+            No
+          </button>
         </div>
-      </nav>
+      </div>
     )
   }
 
@@ -387,6 +403,9 @@ class Exams extends React.Component {
           </div>
         </div>
       </section>
+      <ConfirmationModal active={this.state.deleting} color='is-danger'
+        confirmText='Delete exam' onCancel={() => this.setState({deleting: false})}
+        onConfirm={this.onDeleteClicked} />
     </div>
   }
 }