Improve handeling of exam state in ui

client/components/NavBar.jsx

@@ -44,7 +44,7 @@ class NavBar extends React.Component {
 
     render() {
 
-        const examStyle = this.props.exam !== null ? {} : { pointerEvents: 'none', opacity: .65 }
+        const examStyle = this.props.exam && this.props.exam.submissions ? {} : { pointerEvents: 'none', opacity: .65 }
 
         return (
             <nav className="navbar" role="navigation" aria-label="dropdown navigation">

client/index.jsx

@@ -9,43 +9,44 @@ import * as api from './api.jsx'
 
 import NavBar from './components/NavBar.jsx';
 import Footer from './components/Footer.jsx';
-
-const Loading = () => <div>Loading...</div>;
-const NotFound = () => <div>404 OMG NO.</div>;
-const NoExams = () => <div>No exams found, please upload at least one and do not use this direct access :(</div>;
+import Loading from './views/Loading.jsx';
 
 const Home = Loadable({
   loader: () => import('./views/Home.jsx'),
-  loading: Loading,
+  loading: Loading
 });
 const AddExam = Loadable({
   loader: () => import('./views/AddExam.jsx'),
-  loading: Loading,
+  loading: Loading
 });
 const Exam = Loadable({
     loader: () => import('./views/Exam.jsx'),
-    loading: Loading,
+    loading: Loading
   });
 const Students = Loadable({
   loader: () => import('./views/Students.jsx'),
-  loading: Loading,
+  loading: Loading
 });
 const Grade = Loadable({
   loader: () => import('./views/Grade.jsx'),
-  loading: Loading,
+  loading: Loading
 });
 const Graders = Loadable({
   loader: () => import('./views/Graders.jsx'),
-  loading: Loading,
+  loading: Loading
 });
 const Statistics = Loadable({
   loader: () => import('./views/Statistics.jsx'),
-  loading: Loading,
+  loading: Loading
 });
 const Reset = Loadable({
   loader: () => import('./views/Reset.jsx'),
-  loading: Loading,
+  loading: Loading
 });
+const Fail = Loadable({
+    loader: () => import('./views/Fail.jsx'),
+    loading: Loading
+})
 
 
 class App extends React.Component {
@@ -59,14 +60,20 @@ class App extends React.Component {
         this.updateExamList();
     }
 
-    updateExamList = (callback) => {
+    updateExamList = (callback, onlyList) => {
         api.get('exams')
             .then(exams => {
                 if (exams.length) {
-                    this.setState({
-                        examIndex: exams.length - 1,
-                        examList: exams
-                    }, callback)
+                    if (onlyList) {
+                        this.setState({
+                            examList: exams
+                        })
+                    } else {
+                        this.setState({
+                            examIndex: exams.length - 1,
+                            examList: exams
+                        }, callback)
+                    }
                 }
             })
             .catch(resp => {
@@ -98,16 +105,21 @@ class App extends React.Component {
                     <Switch>
                         <Route exact path="/" component={Home} />
                         <Route path="/exams/:examID" render={({match}) => 
-                            <Exam exam={exam} urlID={match.params.examID} changeExam={this.changeExam} /> }/>
+                            <Exam exam={exam} urlID={match.params.examID} changeExam={this.changeExam} updateList={this.updateExamList}/> }/>
                         <Route path="/exams" render={({history}) => 
                             <AddExam updateExamList={this.updateExamList} changeURL={history.push} /> }/>
                         <Route path="/students" render={() => 
                             <Students exam={exam} /> }/>
-                        <Route path="/grade" component={exam ? Grade : NoExams} />
-                        <Route path="/statistics" component={exam ? Statistics : NoExams} />
+                        <Route path="/grade" render={() => (
+                            exam && exam.submissions ? <Grade /> : <Fail message="No exams uploaded. Please do not bookmark URLs" />
+                        )} />
+                        <Route path="/statistics" render={() => (
+                            exam && exam.submissions ? <Statistics /> : <Fail message="No exams uploaded. Please do not bookmark URLs" />
+                        )} />
                         <Route path="/graders" component={Graders} />
                         <Route path="/reset" component={Reset} />
-                        <Route component={NotFound} />
+                        <Route render={() => 
+                            <Fail message="404. Could not find that page :'(" /> }/>
                     </Switch>
                     <Footer />
                 </div>

client/views/Exam.jsx

 import React from 'react';
-import Dropzone from 'react-dropzone'
+import Dropzone from 'react-dropzone';
 
 import Hero from '../components/Hero.jsx';
 import DropzoneContent from '../components/DropzoneContent.jsx';
@@ -36,7 +36,7 @@ class Exams extends React.Component {
 
     loadExam = (id) => {
         if (this.props.exam.id !== parseInt(id)) {
-            console.log('Changing exam id to ' + id)            
+            console.log('Changing exam id to ' + id)
             this.props.changeExam(parseInt(id));
         }
 
@@ -65,11 +65,14 @@ class Exams extends React.Component {
 
     updatePDFs = () => {
         api.get('pdfs/' + this.props.urlID)
-            .then(pdfs =>
-                this.setState({
+            .then(pdfs => {
+                if (JSON.stringify(pdfs) != JSON.stringify(this.state.pdfs)) {
+                    this.props.updateList(null, true)
+                    this.setState({
                         pdfs: pdfs
-                })
-            )
+                    })
+                }
+            })
     }
 
     onDropPDF = (accepted, rejected) => {
@@ -82,12 +85,7 @@ class Exams extends React.Component {
             data.append('pdf', file)
             api.post('pdfs/' + this.props.urlID, data)
                 .then(() => {
-                    api.get('pdfs/' + this.props.urlID)
-                        .then(pdfs =>
-                            this.setState({
-                                pdfs: pdfs
-                            })
-                        )
+                    this.updatePDFs();
                 })
                 .catch(resp => {
                     alert('failed to upload pdf (see javascript console for details)')
@@ -98,12 +96,12 @@ class Exams extends React.Component {
 
     componentDidMount = () => {
         this.loadExam(this.props.urlID);
-        this.pdfUpdater = setInterval(this.updatePDFs, 1000)        
+        this.pdfUpdater = setInterval(this.updatePDFs, 1000)
     }
 
     componentWillReceiveProps = (newProps) => {
         if (newProps.urlID !== this.props.urlID) {
-            this.loadExam(newProps.urlID)    
+            this.loadExam(newProps.urlID)
         }
     }
 
@@ -144,7 +142,7 @@ class Exams extends React.Component {
                                 disablePreview
                                 multiple
                             >
-                                <DropzoneContent/>
+                                <DropzoneContent />
                             </Dropzone>
 
                             <br />

client/views/Fail.jsx

+import React from 'react';
+
+import Hero from '../components/Hero.jsx';
+
+const Home = (props) => {
+  return (
+      <div>
+
+        <Hero title='Oops!' subtitle={props.message ? props.message : "Something went wrong :'("} />
+
+        <section className="section">
+
+          <div className="container">
+           
+          </div>
+
+        </section>
+        
+      </div>
+  )
+}
+
+export default Home;

client/views/Loading.jsx

+import React from 'react';
+
+import Hero from '../components/Hero.jsx';
+
+const Home = () => {
+  return (
+      <div>
+
+        <Hero title='' subtitle='' />
+
+        <section className="section">
+
+          <div className="container">
+           
+          </div>
+
+        </section>
+        
+      </div>
+  )
+}
+
+export default Home;