Fix error msg crashing the component

Author: vbanos

src/components/diff-container.jsx

@@ -54,7 +54,7 @@ export default class DiffContainer extends React.Component {
     const { timestampA, timestampB, showDiff, error } = this.state;
 
     if (error) {
-      return (<ErrorMessage url={url} timestamp={timestampA} code={error}/>);
+      return (<ErrorMessage url={url} timestamp={timestampA} code={error} />);
     }
     if (!timestampA && !timestampB) {
       return (

src/components/diff-view.jsx

@@ -208,11 +208,15 @@ export default class DiffView extends React.Component {
     url.searchParams.append('b', b);
     fetchWithTimeout(url, { credentials: 'include' })
       .then(checkResponse)
-      .then(response => response.json())
-      .then((data) => {
-        this.setState({
-          diffData: data
-        });
+      .then((response) => {
+        if (response.status == 200) {
+          const data = response.json();
+          this.setState({
+            diffData: data
+          });
+        } else {
+          this._errorHandled(error.status);
+        }
       })
       .catch(error => { this._errorHandled(error.message); });
   }

src/components/errors.jsx

@@ -1,32 +1,21 @@
 import PropTypes from 'prop-types';
-import React, { useCallback } from 'react';
-import { checkResponse, fetchWithTimeout } from '../js/utils';
+import React from 'react';
 
 /**
  * Display an error message depending on props
  */
-const ErrorMessage = ({ code, url, timestamp, conf, errorHandledCallback }) => {
-
+const ErrorMessage = ({ code, url, timestamp }) => {
   let msg = 'We are sorry but there is a problem comparing these captures. Please try two different ones.';
   let simhash = false;
   let year = timestamp ? timestamp.substring(0, 4) : '';
 
-  const calculateSimhash = useCallback(() => {
-    const targetUrl = `${conf.waybackDiscoverDiff}/calculate-simhash?url=${encodeURIComponent(url)}&year=${timestamp.substring(0, 4)}`;
-    fetchWithTimeout(targetUrl).then(checkResponse)
-      .then(() => { setTimeout(function () { window.location.reload(true); }, 10000); })
-      .catch(error => { errorHandledCallback(error.message); });
-  }, [conf, url, timestamp]);
-
   switch (code) {
   case '404':
     msg = `The Wayback Machine has not archived ${url}.`;
-    simhash = false;
     break;
   case '422':
     // https://github.com/edgi-govdata-archiving/web-monitoring-diff/blob/be748a7f0bbdd4251f680e22d3e433d1be93f858/web_monitoring_diff/server/server.py#L568
     msg = `The captures of ${url} cannot be compared because we support only HTML comparison.`;
-    simhash = false;
     break;
   case 'CAPTURE_NOT_FOUND':
     msg = `There are no data available for ${url} at ${timestamp}.`;
@@ -38,39 +27,40 @@ const ErrorMessage = ({ code, url, timestamp, conf, errorHandledCallback }) => {
     break;
   case 'NO_CAPTURES':
     msg = `The Wayback Machine has not archived ${url} for year ${year}.`;
-    simhash = false;
     break;
   case 'NO_DIFFERENT_CAPTURES':
     msg = `There aren't any different captures for ${url} for year ${year} to display their similarity.`;
-    simhash = false;
     break;
   // Occurs when AJAX fetch for CDX is canceled.
   case '_this4.errorHandled is not a function': // Chrome
   case 'NetworkError when attempting to fetch resource.': // FF
   case 'Load failed': // Safari
     msg = `The capture of ${url} at ${timestamp} cannot be used for comparisons. Its possible it is a redirect.`;
-    simhash = false;
     break;
   }
 
+  const changesUrl = `/web/changes/${url}`;
+
   return (
     <>
       <div className='alert alert-warning' role='alert'>{ msg }</div>
-      { simhash &&
-        <button className="btn btn-sm" id="calcButton"
-          onClick={ calculateSimhash }>Calculate now</button>
-      }
-      <button className="btn btn-sm" onClick={() => window.history.back()}>&laquo; Go back</button>
+      <div className="btn-group">
+        <button className="btn btn-sm" onClick={() => window.history.back()}>&laquo; Go back</button>
+        { simhash &&
+          <>
+            <span>&nbsp;</span>
+            <a href={changesUrl} className="btn btn-default btn-sm" id="calcButton">Visit Wayback Changes to calculate now</a>
+          </>
+        }
+      </div>
     </>
   );
 };
 
 ErrorMessage.propTypes = {
   code: PropTypes.string,
   url: PropTypes.string,
-  timestamp: PropTypes.string,
-  conf: PropTypes.object,
-  errorHandledCallback: PropTypes.func
+  timestamp: PropTypes.string
 };
 
 export default ErrorMessage;