diff options
Diffstat (limited to 'src/client/react/components')
4 files changed, 66 insertions, 3 deletions
diff --git a/src/client/react/components/container/View.js b/src/client/react/components/container/View.js index a601226..68bdde9 100644 --- a/src/client/react/components/container/View.js +++ b/src/client/react/components/container/View.js @@ -26,6 +26,7 @@ import extractSchedule from '../../lib/extractSchedule'; import Schedule from '../presentational/Schedule'; import Loading from '../presentational/Loading'; +import ScheduleErrorDisplay from '../presentational/ScheduleErrorDisplay'; import * as actions from '../../store/actions'; class View extends React.Component { @@ -45,6 +46,14 @@ class View extends React.Component { fetchScheduleIfNeeded(user, week); } + componentDidUpdate(prevProps) { + const { fetchScheduleIfNeeded, user, week } = this.props; + + if (prevProps.user !== user || prevProps.week !== week) { + fetchScheduleIfNeeded(user, week); + } + } + render() { const { user, @@ -60,6 +69,8 @@ class View extends React.Component { return <Loading />; case 'FINISHED': return <Schedule htmlStr={schedule.htmlStr} />; + case 'ERROR': + return <ScheduleErrorDisplay error={schedule.error} />; default: throw new Error(`${schedule.state} is not a valid schedule state.`); } @@ -70,7 +81,6 @@ const mapStateToProps = (state) => { const user = selectUser(state); const week = selectWeek(state); return { - key: `${user}:${week}`, user, week, schedules: state.schedules, diff --git a/src/client/react/components/presentational/Schedule.js b/src/client/react/components/presentational/Schedule.js index 727a1f4..9791658 100644 --- a/src/client/react/components/presentational/Schedule.js +++ b/src/client/react/components/presentational/Schedule.js @@ -38,8 +38,11 @@ class Schedule extends React.Component { this.updateScaling(); } - componentDidUpdate() { - this.updateScaling(); + componentDidUpdate(prevProps) { + const { htmlStr } = this.props; + if (prevProps.htmlStr !== htmlStr) { + this.updateScaling(); + } } componentWillUnmount() { diff --git a/src/client/react/components/presentational/ScheduleErrorDisplay.js b/src/client/react/components/presentational/ScheduleErrorDisplay.js new file mode 100644 index 0000000..59d1f69 --- /dev/null +++ b/src/client/react/components/presentational/ScheduleErrorDisplay.js @@ -0,0 +1,46 @@ +/** + * Copyright (C) 2018 Noah Loomans + * + * This file is part of rooster.hetmml.nl. + * + * rooster.hetmml.nl is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * rooster.hetmml.nl is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with rooster.hetmml.nl. If not, see <http://www.gnu.org/licenses/>. + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import './ScheduleErrorDisplay.scss'; + +class ScheduleErrorDisplay extends React.Component { + static propTypes = { + statusCode: PropTypes.string.isRequired, + }; + + render() { + const { statusCode } = this.props; + const errorMessage = ( + statusCode === 404 + ? 'Sorry, er is (nog) geen rooster voor deze week.' + : 'Sorry, er is iets mis gegaan tijdens het laden van deze week.' + ); + + return ( + <div className="ScheduleErrorDisplay"> + {errorMessage} + </div> + ); + } +} + +export default ScheduleErrorDisplay; diff --git a/src/client/react/components/presentational/ScheduleErrorDisplay.scss b/src/client/react/components/presentational/ScheduleErrorDisplay.scss new file mode 100644 index 0000000..15b9c2a --- /dev/null +++ b/src/client/react/components/presentational/ScheduleErrorDisplay.scss @@ -0,0 +1,4 @@ +.ScheduleErrorDisplay { + margin: 64px 32px; + text-align: center; +} |