From dd2b6613ae3d0cd70e6064176f96731c31426546 Mon Sep 17 00:00:00 2001
From: Vivek R <123vivekr@gmail.com>
Date: Thu, 17 Jan 2019 10:16:22 +0530
Subject: [PATCH 1/2] loadable.jsx: Show modal on API limit exceed

This shows a modal with error message on exceeding API limit.

Closes https://github.com/coala/gh-board/issues/127
---
 src/components/loadable.jsx | 58 +++++++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/components/loadable.jsx b/src/components/loadable.jsx
index 9cb5d4a7..97061ce3 100644
--- a/src/components/loadable.jsx
+++ b/src/components/loadable.jsx
@@ -1,5 +1,6 @@
 import {Component} from 'react';
 import {SyncIcon} from 'react-octicons';
+import * as BS from 'react-bootstrap';
 
 const STATUS = {
   INITIAL: 'initial',
@@ -9,36 +10,45 @@ const STATUS = {
 
 class Loadable extends Component {
   static defaultProps = {
-    renderError: (err) => {
+    renderError: (err, show, close) => {
       console.error(err);
-      // If it is a permissions error then it might be a rate limi
-      if (err.status === 403) {
-        return (
-          <div>
-            <h2>Insufficient Permissions (or rate limit exceeded)</h2>
-            <p>
-              It looks like either you do not have permission to see this repository or the rate limit for requests to GitHub has been exceeded. This usually happens when you are not logged in to gh-board. Try signing in to continue.
-            </p>
-            <code>{err.message}</code>
-          </div>
-        );
-      } else if (err.name === 'InvalidStateError') {
+      // If it is a permissions error then it might be a rate limit
+      if (err.name === 'InvalidStateError') {
         return (
           <span>It looks like your browser is in private browsing mode. gh-board uses IndexedDB to cache requests to GitHub. Please disable Private Browsing to see it work.</span>
         );
       } else {
+        let message;
+        if(err.status === 403)
+          message = "It looks like either you do not have permission to see this repository or the rate limit for requests to GitHub has been exceeded. This usually happens when you are not logged in to gh-board. Try signing in to continue.";
+        else
+          message = "Problem loading. Is it a valid repo? And have you exceeded your number of requests? Usually happens when not logged in because GitHub limits anonymous use of their API.";
         return (
-          <span>
-            Problem loading. Is it a valid repo? And have you exceeded your number of requests? Usually happens when not logged in because GitHub limits anonymous use of their API.
-            {err.message}
-            {JSON.stringify(err)}
-          </span>
+          <BS.Modal show={show}>
+            <BS.Modal.Header>
+            </BS.Modal.Header>
+            <BS.Modal.Body >
+              <div>
+                <p>
+                  {message}
+                </p>
+                <code>
+                  {JSON.parse(err.message).message}
+                  <br />
+                  <a href={JSON.parse(err.message).documentation_url}>Documentation URL</a>
+                </code>
+                <br />
+                <br />
+                <BS.Button onClick={close}>OK</BS.Button>
+              </div>
+            </BS.Modal.Body>
+          </BS.Modal>
         );
       }
     }
   };
 
-  state = {status: STATUS.INITIAL, value: null};
+  state = {status: STATUS.INITIAL, value: null, show: false};
 
   componentDidMount() {
     const {promise} = this.props;
@@ -54,13 +64,13 @@ class Loadable extends Component {
 
   onResolve = (value) => {
     // TODO: Find out why this is being called multiple times
-    this.setState({status: STATUS.RESOLVED, value});
+    this.setState({status: STATUS.RESOLVED, value: value});
   };
 
   onError = (value) => {
     // TODO: Find out why this is being called multiple times
     if (this.state.status !== STATUS.ERROR) {
-      this.setState({status: STATUS.ERROR, value});
+      this.setState({status: STATUS.ERROR, value: value, show: true});
     }
   };
 
@@ -74,6 +84,10 @@ class Loadable extends Component {
     );
   };
 
+  close = () => {
+    this.setState({show: false});
+  }
+
   render() {
     const {status, value} = this.state;
     let {renderLoading, renderLoaded, renderError} = this.props;
@@ -85,7 +99,7 @@ class Loadable extends Component {
     } else if (status === STATUS.RESOLVED) {
       return renderLoaded(value);
     } else {
-      return renderError(value);
+      return renderError(value, this.state.show, this.close);
     }
   }
 }

From 183b7f4126d0fc0eb7c0810a7489e172890cc30e Mon Sep 17 00:00:00 2001
From: Vivek R <123vivekr@gmail.com>
Date: Sun, 10 Feb 2019 21:14:46 +0530
Subject: [PATCH 2/2] board.jsx: Make error message user friendly

Closes https://github.com/coala/gh-board/issues/127
---
 src/components/board.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/board.jsx b/src/components/board.jsx
index 0b5963ad..18c92cf2 100644
--- a/src/components/board.jsx
+++ b/src/components/board.jsx
@@ -122,8 +122,6 @@ class Board extends Component {
       return (
         <span>
           Problem loading. Is it a valid repo? And have you exceeded your number of requests? Usually happens when not logged in because GitHub limits anonymous use of their API.
-          {err.message}
-          {JSON.stringify(err)}
         </span>
       );
     }