update frontend for new PDF status display

client/views/Exams.js

@@ -4,6 +4,7 @@ import Hero from '../components/Hero';
 import Footer from '../components/Footer';
 
 import Dropzone from 'react-dropzone'
+import Spinner from 'react-spinkit'
 
 import * as api from '../api'
 
@@ -21,11 +22,13 @@ class Exams extends React.Component {
             pdfs: [],
         },
     };
+
     this.onDropYAML = this.onDropYAML.bind(this);
     this.onDropPDF = this.onDropPDF.bind(this);
     this.putYaml = this.putYaml.bind(this);
     this.updateYaml = this.updateYaml.bind(this);
     this.selectExam = this.selectExam.bind(this);
+    this.pdfStatus= this.pdfStatus.bind(this);
 
   }
 
@@ -44,9 +47,7 @@ class Exams extends React.Component {
             exams: [...prev.exams, new_exam],
           }))
       }
-      this.setState(prev => ({
-          selected_exam: Object.assign(prev.selected_exam, new_exam),
-      }))
+      this.selectExam(new_exam.id)
       alert('Thank you for your upload, it was delicious')
     })
     .catch(resp => {
@@ -88,7 +89,18 @@ class Exams extends React.Component {
     )
   }
 
-  
+  pdfStatus(pdf) {
+    switch(pdf.status) {
+      case "processing":
+        const style = {display: "inline-block", top: "6px"}
+        return <div>{pdf.name} <Spinner name="circle" style={style} fadeIn='none'/> <i>{pdf.message}</i></div>
+      case "success":
+        return <div>{pdf.name} <i className="fa fa-check"></i>{pdf.message}</div>
+      case "error":
+        return <div>{pdf.name} <i className="fa fa-times"></i><i>{pdf.message}</i></div>
+    }
+  }
+
   onDropPDF(accepted, rejected) {
     if (rejected.length > 0) {
       alert('Please upload a PDF..')
@@ -98,6 +110,12 @@ class Exams extends React.Component {
     data.append('pdf', accepted[0])
     api.post('pdfs/' + this.state.selected_exam.id, data)
     .then(() => {
+       api.get('pdfs/' + this.state.selected_exam.id)
+      .then(pdfs =>
+          this.setState(prev => ({
+              selected_exam: Object.assign(prev.selected_exam, {pdfs: pdfs})
+          }))
+      )
       alert('Thank you for your upload, it was delicious')
     })
     .catch(resp => {
@@ -221,7 +239,7 @@ class Exams extends React.Component {
               </p>
                 <ul className="menu-list">
                 {this.state.selected_exam.pdfs.map(pdf =>
-                    <li>{pdf.name}</li>
+                    <li>{this.pdfStatus(pdf)}</li>
                 )}
                 </ul>
               </aside>

package.json

@@ -26,6 +26,7 @@
     "react-dropzone": "^4.2.7",
     "react-loadable": "^5.3.1",
     "react-router-dom": "^4.2.2",
+    "react-spinkit": "^3.0.0",
     "react-table": "^6.7.6",
     "style-loader": "^0.19.1",
     "uglifyjs-webpack-plugin": "^1.1.6",

zesje/resources/pdfs.py

@@ -26,18 +26,14 @@ class Pdfs(Resource):
             name: str
                 filename of the uploaded PDF
         """
-        return self._get(exam_id)
-
-    # Do not call this method without wrapping it in 'orm.db_session'
-    def _get(self, exam_id):
-        data_dir = app.config['DATA_DIRECTORY']
-        exam = Exam[exam_id]
-
-        exam_data_dir = os.path.join(data_dir, f'{exam.name}_data')
-        pdfs = [pdf for pdf in os.listdir(exam_data_dir) if pdf.endswith('.pdf')]
-
-        return [{'name': pdf} for pdf in pdfs]
-
+        return [
+            {
+                'id': 1,
+                'name': 'hello.pdf',
+                'status': 'processing',
+                'message': 'extracting images',
+            }
+        ]
 
     post_parser = reqparse.RequestParser()
     post_parser.add_argument('pdf', type=FileStorage, required=True,
@@ -51,6 +47,18 @@ class Pdfs(Resource):
         ----------
         exam_id : int
         pdf : FileStorage
+
+        Returns
+        -------
+        id : int
+        name : str
+        status : str
+        message : str
         """
         args = self.post_parser.parse_args()
-        # process PDF
+        return {
+            'id': 1,
+            'name': 'hello.pdf',
+            'status': 'processing',
+            'message': 'going',
+        }