loadable.jsx: Make model for showing error

Shows a modal with error message.
Fixes #127

Author: 123vivekr

src/components/loadable.jsx

@@ -10,13 +10,23 @@ const STATUS = {
 };
 
 class Loadable extends Component {
-  static defaultProps = {
-    renderError: (err) => {
+
+  state = {status: STATUS.INITIAL, value: null, show: false};
+
+  handleClose = () => {
+    this.setState({ show: false });
+  }
+
+  handleShow = () => {
+    this.setState({ show: true });
+  }
+
+    renderError = (err) => {
       console.error(err);
       // If it is a permissions error then it might be a rate limit
       if (err.status === 403) {
         return (
-          <BS.Modal show >
+          <BS.Modal show={ this.state.show } >
             <BS.Modal.Header>
               <BS.Modal.Title><h2>Insufficient Permissions </h2>(or rate limit exceeded)</BS.Modal.Title>
             </BS.Modal.Header>
@@ -32,7 +42,7 @@ class Loadable extends Component {
                 </code>
                 <br />
                 <br />
-                <Button bsStyle="danger">Ok</Button>
+                <Button bsStyle="danger" onClick={ this.handleClose }>Ok</Button>
               </div>
             </BS.Modal.Body>
           </BS.Modal>
@@ -43,7 +53,7 @@ class Loadable extends Component {
         );
       } else {
         return (
-          <BS.Modal show >
+          <BS.Modal show={ this.state.show } >
             <BS.Modal.Header>
             </BS.Modal.Header>
             <BS.Modal.Body >
@@ -58,16 +68,13 @@ class Loadable extends Component {
                 </code>
                 <br />
                 <br />
-                <Button bsStyle="danger">Ok</Button>
+                <Button bsStyle="danger" onClick={ this.handleClose }>Ok</Button>
               </div>
             </BS.Modal.Body>
           </BS.Modal>
         );
       }
-    }
-  };
-
-  state = {status: STATUS.INITIAL, value: null, show: false};
+    };
 
   componentDidMount() {
     const { promise } = this.props;
@@ -84,11 +91,13 @@ class Loadable extends Component {
   onResolve = (value) => {
     // TODO: Find out why this is being called multiple times
     this.setState({status: STATUS.RESOLVED, value});
+    // window.alert(value)
   };
 
   onError = (value) => {
     // TODO: Find out why this is being called multiple times
     if (this.state.status !== STATUS.ERROR) {
+      // window.alert(value)
       this.setState({status: STATUS.ERROR, value});
     }
   };
@@ -105,16 +114,16 @@ class Loadable extends Component {
 
   render() {
     const { status, value } = this.state;
-    let {renderLoading, renderLoaded, renderError} = this.props;
-
+    let { renderLoading, renderLoaded } = this.props;
     renderLoading = renderLoading || this.renderLoading;
 
     if (status === STATUS.INITIAL) {
-      return renderLoading();
+      return this.renderLoading();
     } else if (status === STATUS.RESOLVED) {
       return renderLoaded(value);
     } else {
-      return renderError(value);
+      this.handleShow();
+      return this.renderError(value);
     }
   }
 }