Show an alert when the page does not exist

src/components/page-details/page-details.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {Link, Redirect} from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import WebMonitoringDb from '../../services/web-monitoring-db';
 import ChangeView from '../change-view/change-view';
 import Loading from '../loading';
@@ -24,43 +24,46 @@ const cutoffDate = '2000-01-01';
  * @param {PageDetailsProps} props
  */
 export default class PageDetails extends React.Component {
-  static getDerivedStateFromProps (props, state) {
+  static getDerivedStateFromProps(props, state) {
     // Clear existing content when switching pages
     if (state.page && state.page.uuid !== props.match.params.pageId) {
-      return { page: null };
+      return {
+        page: null,
+        error: null
+      };
     }
     return null;
   }
 
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.state = { page: null };
     this._annotateChange = this._annotateChange.bind(this);
     this._navigateToChange = this._navigateToChange.bind(this);
   }
 
-  componentDidMount () {
+  componentDidMount() {
     window.addEventListener('keydown', this);
     this._loadPage(this.props.match.params.pageId);
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     window.removeEventListener('keydown', this);
     this.setTitle(true);
   }
 
   /**
    * @param {PageDetailsProps} previousProps
    */
-  componentDidUpdate (previousProps) {
+  componentDidUpdate(previousProps) {
     this.setTitle();
     const nextPageId = this.props.match.params.pageId;
     if (nextPageId !== previousProps.match.params.pageId) {
       this._loadPage(nextPageId);
     }
   }
 
-  setTitle (unmounting = false) {
+  setTitle(unmounting = false) {
     document.title = !unmounting && this.state.page ? `Scanner | ${this.state.page.url}` : 'Scanner';
   }
 
@@ -69,7 +72,7 @@ export default class PageDetails extends React.Component {
    * @private
    * @param {DOMEvent} event
    */
-  handleEvent (event) {
+  handleEvent(event) {
     if (event.keyCode === 27) {
       this.props.history.push('/');
     }
@@ -82,7 +85,7 @@ export default class PageDetails extends React.Component {
    * @param {string} toVersion ID of the `to` version of the change
    * @param {Object} annotation
    */
-  _annotateChange (fromVersion, toVersion, annotation) {
+  _annotateChange(fromVersion, toVersion, annotation) {
     return this.context.api.annotateChange(
       this.state.page.uuid,
       fromVersion,
@@ -91,7 +94,15 @@ export default class PageDetails extends React.Component {
     );
   }
 
-  render () {
+  render() {
+    if (this.state.error) {
+      return (
+        <div styleName="baseStyles.alert baseStyles.alert-danger">
+          {this.state.error.message}
+        </div>
+      );
+    }
+
     if (!this.state.page) {
       return (<Loading />);
     }
@@ -122,7 +133,7 @@ export default class PageDetails extends React.Component {
     );
   }
 
-  _renderPager () {
+  _renderPager() {
     if (!this.props.pages) {
       return null;
     }
@@ -159,7 +170,7 @@ export default class PageDetails extends React.Component {
    * @private
    * @returns {JSX.Element}
    */
-  _renderChange () {
+  _renderChange() {
     /** TODO: should we show 404 for bad versions? */
     const versionData = this._versionsToRender();
 
@@ -195,7 +206,7 @@ export default class PageDetails extends React.Component {
    * @private
    * @returns {Object}
    */
-  _versionsToRender () {
+  _versionsToRender() {
     const [fromId, toId] = (this.props.match.params.change || '').split('..');
     const versions = this.state.page.versions;
     let from, to, shouldRedirect = false;
@@ -233,10 +244,10 @@ export default class PageDetails extends React.Component {
       }
     }
 
-    return {from, to, shouldRedirect};
+    return { from, to, shouldRedirect };
   }
 
-  _loadPage (pageId) {
+  _loadPage(pageId) {
     // TODO: handle the missing `.versions` collection problem better
     const fromList = this.props.pages && this.props.pages.find(
       (page) => page.uuid === pageId && !!page.versions);
@@ -252,23 +263,24 @@ export default class PageDetails extends React.Component {
         this._loadVersions(page, cutoffDate, '')
           .then(versions => {
             page.versions = versions;
-            this.setState({page});
+            this.setState({ page });
           });
-      });
+      })
+      .catch(error => this.setState({ error }));
   }
 
   _loadVersions(page, dateFrom, dateTo) {
-    const capture_time = {'capture_time': `${dateFrom}..${dateTo}`};
+    const capture_time = { 'capture_time': `${dateFrom}..${dateTo}` };
     return this.context.api.getVersions(page.uuid, capture_time, Infinity);
   }
 
-  _getChangeUrl (from, to, page) {
+  _getChangeUrl(from, to, page) {
     const changeId = (from && to) ? `${from.uuid}..${to.uuid}` : '';
     const pageId = page && page.uuid || this.props.match.params.pageId;
     return `/page/${pageId}/${changeId}`;
   }
 
-  _navigateToChange (from, to, page, replace = false) {
+  _navigateToChange(from, to, page, replace = false) {
     const url = this._getChangeUrl(from, to, page);
     this.props.history[replace ? 'replace' : 'push'](url);
   }