Introduce tabs for exam page

client/index.jsx

@@ -3,7 +3,7 @@ import 'font-awesome/css/font-awesome.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Loadable from 'react-loadable';
-import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
+import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
 
 import * as api from './api.jsx'
 
@@ -118,8 +118,13 @@ class App extends React.Component {
                     <NavBar exam={exam} updateExam={this.updateExam} ref={this.menu} />
                     <Switch>
                         <Route exact path="/" component={Home} />
-                        <Route path="/exams/:examID" render={({match}) => 
-                            <Exam exam={exam} urlID={match.params.examID} updateExam={this.updateExam} updateSubmission={this.updateSubmission}/> }/>
+                        <Route path="/exams/:examID/:action?" render={({match}) =>
+                            <Exam
+                                exam={exam}
+                                urlID={match.params.examID}
+                                action={match.params.action || 'edit' }
+                                updateExam={this.updateExam}
+                                updateSubmission={this.updateSubmission}/> }/>
                         <Route path="/exams" render={({history}) =>
                             <AddExam updateExamList={() => this.menu.current.updateExamList()} changeURL={history.push} /> }/>
                         <Route path="/students" render={() =>

client/views/Exam.jsx

@@ -4,6 +4,7 @@ import Dropzone from 'react-dropzone';
 import Hero from '../components/Hero.jsx';
 import DropzoneContent from '../components/DropzoneContent.jsx';
 import PDFEditor from '../components/PDFEditor.jsx';
+import { Link } from 'react-router-dom'
 
 import * as api from '../api.jsx'
 
@@ -32,12 +33,61 @@ class Exams extends React.Component {
         if (this.props.urlID !== this.props.exam.id) this.props.updateExam(this.props.urlID)
     }
 
+    renderContent = (action) => {
+        switch (action) {
+            case 'preview':
+                return <div>preview</div>
+            case 'export':
+                return <div>export</div>
+            case 'edit':
+                return <PDFEditor exam={this.props.exam} examID={this.state.examID} />
+            default:
+                return <div>Unsupported action</div>
+        }
+    }
+
+    renderTabs = () => {
+        const tabs = [
+            {
+                name: 'Edit',
+                action: 'edit',
+                icon: 'fa-edit',
+            },
+            {
+                name: 'Preview',
+                action: 'preview',
+                icon: 'fa-eye',
+            },
+            {
+                name: 'Export',
+                action: 'export',
+                icon: 'fa-download',
+            },
+        ]
+        return (
+            <div className='tabs is-centered'>
+                <ul>
+                    {tabs.map(tab =>
+                        <li key={tab.action} className={this.props.action === tab.action ? 'is-active' : ''}>
+                            <Link to={'/exams/' + this.props.urlID + '/' + tab.action} >
+                                <span className='icon is-small'><i className={'fa ' + tab.icon} aria-hidden='true'></i></span>
+                                <span>{tab.name}</span>
+                            </Link>
+                        </li>
+                    )}
+                </ul>
+            </div>
+        )
+    }
+
     render() {
+        const renderContent = this.renderContent(this.props.action)
         return <div>
-            <Hero title="Exam details" subtitle={"Selected: " + this.props.exam.name} />
-            <section className="section">
-                <div className="container">
-                    <PDFEditor examID={this.state.examID} />
+            <Hero title='Exam details' subtitle={'Selected: ' + this.props.exam.name} />
+            <section className='section'>
+                {this.renderTabs()}
+                <div className='container'>
+                    {renderContent}
                 </div>
             </section>
         </div>