Commit b9343806 authored by Adrià Labay's avatar Adrià Labay
Browse files

match exam in navbar with url

parent 527a780f
......@@ -7,8 +7,6 @@ import 'bulma/css/bulma.css'
import 'react-bulma-notification/build/css/index.css'
import 'font-awesome/css/font-awesome.css'
import * as api from './api.jsx'
import NavBar from './components/NavBar.jsx'
import Footer from './components/Footer.jsx'
import Loading from './views/Loading.jsx'
......@@ -21,32 +19,12 @@ const AddExam = Loadable({
loader: () => import('./views/AddExam.jsx'),
loading: Loading
})
const Exam = Loadable({
loader: () => import('./views/Exam.jsx'),
loading: Loading
})
const Scans = Loadable({
loader: () => import('./views/Scans.jsx'),
loading: Loading
})
const Students = Loadable({
loader: () => import('./views/Students.jsx'),
loading: Loading
})
const Grade = Loadable({
loader: () => import('./views/Grade.jsx'),
loading: Loading
})
const Graders = Loadable({
loader: () => import('./views/Graders.jsx'),
loading: Loading
})
const Overview = Loadable({
loader: () => import('./views/Overview.jsx'),
loading: Loading
})
const Email = Loadable({
loader: () => import('./views/Email.jsx'),
const ExamContent = Loadable({
loader: () => import('./components/ExamContent.jsx'),
loading: Loading
})
const Fail = Loadable({
......@@ -62,20 +40,16 @@ class App extends React.Component {
grader: null
}
selectExam = (id) => {
this.setState({ examID: parseInt(id) })
}
updateExamList = () => {
if (this.menu.current) {
this.menu.current.updateExamList()
}
}
deleteExam = (examID) => {
return api
.del('exams/' + examID)
.then(() => {
this.updateExamList()
})
}
changeGrader = (grader) => {
this.setState({
grader: grader
......@@ -92,33 +66,18 @@ class App extends React.Component {
<NavBar examID={this.state.examID} grader={grader} changeGrader={this.changeGrader} ref={this.menu} />
<Switch>
<Route exact path='/' component={Home} />
<Route path='/exams/:examID' render={({ match, history }) =>
<Exam
<Route exact path='/exams' render={({ history }) =>
<AddExam updateExamList={this.menu.current ? this.menu.current.updateExamList : null} changeURL={history.push} />}
/>
<Route path='/exams/:examID/' render={({ match }) =>
<ExamContent
examID={match.params.examID}
graderID={grader ? grader.id : null}
selectExam={this.selectExam}
updateExamList={this.updateExamList}
deleteExam={this.deleteExam}
leave={() => history.push('/')}
setHelpPage={this.menu.current ? this.menu.current.setHelpPage : null} />} />
<Route path='/exams' render={({ history }) =>
<AddExam updateExamList={this.menu.current ? this.menu.current.updateExamList : null} changeURL={history.push} />} />
<Route path='/scans/:examID' render={({ match }) =>
<Scans examID={match.params.examID} />}
/>
<Route path='/students/:examID' render={({ match }) =>
<Students examID={match.params.examID} />}
/>
<Route exact path='/grade/:examID/:submissionID?/:problemID?' render={({ match, history }) => (
grader
? <Grade examID={match.params.examID} graderID={this.state.grader.id} history={history} submissionID={match.params.submissionID} problemID={match.params.problemID} />
: <Fail message='No grader selected. Please do not bookmark URLs' />
)} />
<Route path='/overview/:examID' render={({ match }) => (
<Overview examID={match.params.examID} />
)} />
<Route path='/email/:examID' render={({ match }) => (
<Email examID={match.params.examID} />
)} />
<Route path='/graders' render={() =>
setHelpPage={this.menu.current ? this.menu.current.setHelpPage : null} />
} />
<Route exact path='/graders' render={() =>
<Graders updateGraderList={this.menu.current ? this.menu.current.updateGraderList : null} />} />
<Route render={() =>
<Fail message="404. Could not find that page :'(" />} />
......
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import Exam from '../views/Exam.jsx'
import Scans from '../views/Scans.jsx'
import Students from '../views/Students.jsx'
import Grade from '../views/Grade.jsx'
import Overview from '../views/Overview.jsx'
import Email from '../views/Email.jsx'
import Fail from '../views/Fail.jsx'
import * as api from '../api.jsx'
class ExamContent extends React.Component {
state = {
examID: null
}
componentDidMount = () => {
this.updateExam(this.props.examID)
}
componentDidUpdate = (prevProps, prevState) => {
const examID = this.props.examID
if ((prevProps.examID !== examID && examID !== this.state.examID)) {
// The URL has changed and at least one of exam metadata, problem or submission does not match the URL
this.updateExam(examID)
}
}
updateExam = (examID) => {
console.log(`exam content ${examID}`)
this.setState({ examID })
this.props.selectExam(examID)
}
deleteExam = (history, examID) => {
return api
.del('exams/' + examID)
.then(() => {
this.props.updateExamList()
history.push('/')
})
}
render () {
const grader = this.props.grader
return (
<Switch>
<Route path='/exams/:examID/scans' render={({ match }) =>
<Scans examID={this.state.examID} />}
/>
<Route path='/exams/:examID/students' render={({ match }) =>
<Students examID={this.state.examID} />}
/>
<Route path='/exams/:examID/grade/:submissionID?/:problemID?' render={({ match, history }) => (
grader ? (
<Grade
examID={this.state.examID}
graderID={this.props.grader.id}
history={history}
submissionID={match.params.submissionID}
problemID={match.params.problemID} />
) : <Fail message='No grader selected. Please do not bookmark URLs' />
)} />
<Route path='/exams/:examID/overview' render={({ match }) => (
<Overview examID={this.state.examID} />
)} />
<Route path='/exams/:examID/email' render={({ match }) => (
<Email examID={this.state.examID} />
)} />
<Route path='/exams/:examID' render={({ match, history }) =>
<Exam
examID={this.state.examID}
updateExamList={this.updateExamList}
deleteExam={(id) => this.deleteExam(history, id)}
setHelpPage={this.props.setHelpPage} />} />
</Switch>
)
}
}
export default ExamContent
......@@ -124,6 +124,7 @@ class NavBar extends React.Component {
componentDidUpdate = (prevProps, prevState) => {
if (prevProps.examID !== this.props.examID) {
this.setState({examID: this.props.examID})
console.log(`exam in navbar ${this.props.examID}`)
}
}
......@@ -172,7 +173,7 @@ class NavBar extends React.Component {
render () {
const selectedExam = this.state.examList.find(exam => exam.id === this.state.examID)
console.log(selectedExam)
console.log(`exam in navbar render ${selectedExam}`)
const predicateNoExam = [selectedExam === null || selectedExam === undefined,
'No exam selected.']
......@@ -208,20 +209,20 @@ class NavBar extends React.Component {
}
<TooltipLink
to={'/scans/' + this.props.examID}
to={`/exams/${this.state.examID}/scans`}
text='Scans'
predicate={[predicateNoExam, predicateExamNotFinalized]} />
<Link className='navbar-item' to={'/students/' + this.props.examID}>Students</Link>
<Link className='navbar-item' to={`/exams/${this.state.examID}/students`}>Students</Link>
<TooltipLink
to={'/grade/' + this.props.examID}
to={`/exams/${this.state.examID}/grade`}
text={<strong><i>Grade</i></strong>}
predicate={[predicateNoExam, predicateExamNotFinalized, predicateSubmissionsEmpty, predicateNoGraderSelected]} />
<TooltipLink
to={'/overview/' + this.props.examID}
to={`/exams/${this.state.examID}/overview`}
text='Overview'
predicate={[predicateNoExam, predicateExamNotFinalized, predicateSubmissionsEmpty]} />
<TooltipLink
to={'/email/' + this.props.examID}
to={`/exams/${this.state.examID}/email`}
text='Email'
predicate={[predicateNoExam, predicateExamNotFinalized, predicateSubmissionsEmpty]} />
<ExportDropdown className='navbar-item' disabled={predicateSubmissionsEmpty[0]} examID={this.props.examID} />
......
......@@ -96,7 +96,7 @@ class Exams extends React.Component {
confirmText='Delete exam'
onCancel={() => this.setState({deletingExam: false})}
onConfirm={() => {
this.props.deleteExam(exam.id).then(this.props.leave)
this.props.deleteExam(exam.id)
}}
/>}
</div>
......
......@@ -42,7 +42,7 @@ class Grade extends React.Component {
isUnstructured: metadata.layout.value === 2,
examID: this.props.examID,
gradeAnonymous: metadata.gradeAnonymous
}, () => this.props.history.replace(`/grade/${examID}/${submissionID}/${problemID}`))
}, () => this.props.history.replace(`exams/${examID}/grade/${submissionID}/${problemID}`))
})
// eslint-disable-next-line handle-callback-err
}).catch(err => {
......@@ -72,7 +72,7 @@ class Grade extends React.Component {
this.setState({
submission: submission,
problem: problem
}, () => this.props.history.replace(`/grade/${this.state.examID}/${submission.id}/${problem.id}`))
}, () => this.props.history.replace(`exams/${this.state.examID}/grade/${submission.id}/${problem.id}`))
}).catch(err => {
if (err.status === 404) {
this.setState({
......@@ -155,7 +155,7 @@ class Grade extends React.Component {
'&ungraded=' + ungraded).then(sub =>
this.setState({
submission: sub
}, () => this.props.history.push(`/grade/${this.props.examID}/${this.state.submission.id}/${this.state.problem.id}`))
}, () => this.props.history.push(`exams/${this.props.examID}/grade/${this.state.submission.id}/${this.state.problem.id}`))
)
}
/**
......@@ -236,7 +236,7 @@ class Grade extends React.Component {
* @param problemID - the id of the problem that we want to navigate to
*/
navigateProblem = (problemID) => {
this.props.history.push(`/grade/${this.props.examID}/${this.props.submissionID}/${problemID}`)
this.props.history.push(`exams/${this.props.examID}/grade/${this.props.submissionID}/${problemID}`)
}
/**
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment