Displaying error modal should not remove rest of the content

Signed-off-by: Anurag Priyam <anurag08priyam@gmail.com>

Author: yeban

public/js/error_modal.js

@@ -6,38 +6,34 @@ import React from 'react';
  * to set modal title. errorData.message is inserted as HTML text in modal
  * body. And errorData.more_info is shown using a pre tag in modal body.
  *
- * The component is stateless. The displayed modal dialog cannot be dismissed.
+ * The displayed modal dialog cannot be dismissed.
  * The user must close the tab or press back button to go back to search form.
  */
-class ErrorModal extends React.Component {
+export default class ErrorModal extends React.Component {
 
     constructor(props) {
         super(props);
+        this.state = { errorData: {} };
     }
 
     // HTML for Bootstrap modal.
     render() {
         return (
-            <div
-                id="error" ref="errorModal" className="modal fade"
+            <div id="error" ref="modal" className="modal fade"
                 data-keyboard="false" data-backdrop="static">
-                <div
-                    className="modal-dialog modal-lg">
-                    <div
-                        className="modal-content">
-                        <div
-                            className="modal-header">
-                            <h3>{this.props.errorData.title}</h3>
+                <div className="modal-dialog modal-lg">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <h3>{this.state.errorData.title}</h3>
                         </div>
 
-                        <div
-                            className="modal-body">
-                            <p dangerouslySetInnerHTML={{ __html: this.props.errorData.message}}></p>
+                        <div className="modal-body">
+                            <p dangerouslySetInnerHTML={{ __html: this.state.errorData.message}}></p>
 
                             {
-                                this.props.errorData.more_info &&
+                                this.state.errorData.more_info &&
                                     <pre className="pre-scrollable">
-                                        {this.props.errorData.more_info}
+                                        {this.state.errorData.more_info}
                                     </pre>
                             }
                         </div>
@@ -47,21 +43,23 @@ class ErrorModal extends React.Component {
         );
     }
 
-    // Show the modal once the component is mounted.
-    componentDidMount() {
+    /*
+    * Returns jQuery reference to the main modal container.
+    */
+    modal () {
+        return $(React.findDOMNode(this.refs.modal));
+    }
+
+    /**
+     * Shows error viewer.
+     */
+    show (errorData, beforeShow) {
+        this.setState({errorData: errorData});
         // Caller can specify an amount of time to wait for before showing the
         // modal. This is helpful if the caller wants to finish some work
         // before showing error modal.
-        setTimeout(function () {
-            $(React.findDOMNode(this.refs.errorModal)).modal('show');
-        }.bind(this), this.props.beforeShow || 0);
+        setTimeout(() => {
+            this.modal().modal('show');
+        }, beforeShow || 0);
     }
 }
-
-/**
- * Renders ErrorModal.
- */
-export default function showErrorModal (errorData, beforeShow) {
-    React.render(<ErrorModal errorData={errorData}
-        beforeShow={beforeShow}/>, document.getElementById('view'));
-}

public/js/report.js

@@ -9,7 +9,7 @@ import Hit from './hit';
 import HSP from './hsp';
 
 import SequenceModal from './sequence_modal';
-import showErrorModal from './error_modal';
+import ErrorModal from './error_modal';
 
 /**
  * Base component of report page. This component is later rendered into page's
@@ -23,7 +23,8 @@ var Page = React.createClass({
                     the Report component to render itself in. */}
                 <div className="container">
                     <Report showSequenceModal={ _ => this.showSequenceModal(_) }
-                        getCharacterWidth={ () => this.getCharacterWidth() } />
+                        getCharacterWidth={ () => this.getCharacterWidth() }
+                        showErrorModal={ (...args) => this.showErrorModal(...args) } />
                 </div>
 
                 {/* Add a hidden span tag containing chars used in HSPs */}
@@ -34,7 +35,10 @@ var Page = React.createClass({
                 {/* Required by Grapher for SVG and PNG download */}
                 <canvas id="png-exporter" hidden></canvas>
 
-                <SequenceModal ref="sequenceModal" />
+                <SequenceModal ref="sequenceModal"
+                    showErrorModal={ (...args) => this.showErrorModal(...args) }/>
+
+                <ErrorModal ref="errorModal" />
             </div>
         );
     },
@@ -48,6 +52,10 @@ var Page = React.createClass({
         this.refs.sequenceModal.show(url);
     },
 
+    showErrorModal: function (errorData, beforeShow) {
+        this.refs.errorModal.show(errorData, beforeShow);
+    },
+
     getCharacterWidth: function () {
         if (!this.characterWidth) {
             var $hspChars = $(React.findDOMNode(this.refs.hspChars));
@@ -118,7 +126,7 @@ var Report = React.createClass({
                     case 404:
                     case 400:
                     case 500:
-                        showErrorModal(jqXHR.responseJSON);
+                        component.props.showErrorModal(jqXHR.responseJSON);
                         break;
                     }
                 });

public/js/sequence_modal.js

@@ -1,7 +1,6 @@
 import './sequence';
 import React from 'react';
 import _ from 'underscore';
-import showErrorModal from './error_modal';
 
 /**
  * Takes sequence accession as props, fetches the sequence from the server, and
@@ -54,6 +53,13 @@ export default class SequenceModal extends React.Component {
         });
     }
 
+    /**
+     * Hide sequence viewer.
+     */
+    hide () {
+        this.modal().modal('hide');
+    }
+
     /**
      * Loads sequence using AJAX and updates modal state.
      */
@@ -67,10 +73,9 @@ export default class SequenceModal extends React.Component {
                     requestCompleted: true
                 });
             }, this))
-            .fail(function (jqXHR, status, error) {
-                showErrorModal(jqXHR, function () {
-                    this.hide();
-                });
+            .fail((jqXHR, status, error) => {
+                this.hide();
+                this.props.showErrorModal(jqXHR.responseJSON);
             });
 
     }