From 56229525ef136fb4805a779478fcce0afd3257fb Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tom@systemseed.com>
Date: Mon, 1 Oct 2018 21:47:08 +0200
Subject: [PATCH] fix(channels): handle suggested nodes load failure

If we are unable to load the suggested nodes list, display a message
prompting the user to open channels.

Previously we would show an infinite spinner.

Fix #392
---
 .../Contacts/SuggestedNodes/SuggestedNodes.js | 41 +++++++++++--------
 .../Contacts/SuggestedNodes/messages.js       |  4 +-
 app/reducers/channels.js                      | 24 +++++++++--
 app/translations/en.json                      |  1 +
 4 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/app/components/Contacts/SuggestedNodes/SuggestedNodes.js b/app/components/Contacts/SuggestedNodes/SuggestedNodes.js
index b5c50f8e..177f73fe 100644
--- a/app/components/Contacts/SuggestedNodes/SuggestedNodes.js
+++ b/app/components/Contacts/SuggestedNodes/SuggestedNodes.js
@@ -31,24 +31,31 @@ const SuggestedNodes = ({
   return (
     <div className={styles.container}>
       <header>
-        <FormattedMessage {...messages.empty_description} />
+        {suggestedNodes.length > 0 ? (
+          <div>
+            <FormattedMessage {...messages.empty_description} />
+            <ul className={styles.suggestedNodes}>
+              {suggestedNodes.map(node => (
+                <li key={node.pubkey}>
+                  <section>
+                    <span>{node.nickname}</span>
+                    <span>{`${node.pubkey.substring(0, 30)}...`}</span>
+                  </section>
+                  <section>
+                    <span onClick={() => nodeClicked(node)}>
+                      <FormattedMessage {...messages.connect} />
+                    </span>
+                  </section>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : (
+          <div>
+            <FormattedMessage {...messages.empty_description_alt} />
+          </div>
+        )}
       </header>
-
-      <ul className={styles.suggestedNodes}>
-        {suggestedNodes.map(node => (
-          <li key={node.pubkey}>
-            <section>
-              <span>{node.nickname}</span>
-              <span>{`${node.pubkey.substring(0, 30)}...`}</span>
-            </section>
-            <section>
-              <span onClick={() => nodeClicked(node)}>
-                <FormattedMessage {...messages.connect} />
-              </span>
-            </section>
-          </li>
-        ))}
-      </ul>
     </div>
   )
 }
diff --git a/app/components/Contacts/SuggestedNodes/messages.js b/app/components/Contacts/SuggestedNodes/messages.js
index 1e90b81b..4c7a2d44 100644
--- a/app/components/Contacts/SuggestedNodes/messages.js
+++ b/app/components/Contacts/SuggestedNodes/messages.js
@@ -4,5 +4,7 @@ import { defineMessages } from 'react-intl'
 export default defineMessages({
   connect: 'Connect',
   empty_description:
-    "Hmmm, looks like you don't have any channels yet. Here are some suggested nodes to open a channel with to get started"
+    "Hmmm, looks like you don't have any channels yet. Here are some suggested nodes to open a channel with to get started",
+  empty_description_alt:
+    "Hmmm, looks like you don't have any channels yet. Open some channels to get started."
 })
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index b1234d38..0bfd4980 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -40,6 +40,7 @@ export const REMOVE_ClOSING_CHAN_ID = 'REMOVE_ClOSING_CHAN_ID'
 export const SET_SELECTED_CHANNEL = 'SET_SELECTED_CHANNEL'
 
 export const GET_SUGGESTED_NODES = 'GET_SUGGESTED_NODES'
+export const RECEIVE_SUGGESTED_NODES_ERROR = 'RECEIVE_SUGGESTED_NODES_ERROR'
 export const RECEIVE_SUGGESTED_NODES = 'RECEIVE_SUGGESTED_NODES'
 
 // ------------------------------------
@@ -144,6 +145,12 @@ export function getSuggestedNodes() {
   }
 }
 
+export function receiveSuggestedNodesError() {
+  return {
+    type: RECEIVE_SUGGESTED_NODES_ERROR
+  }
+}
+
 export function receiveSuggestedNodes(suggestedNodes) {
   return {
     type: RECEIVE_SUGGESTED_NODES,
@@ -153,9 +160,12 @@ export function receiveSuggestedNodes(suggestedNodes) {
 
 export const fetchSuggestedNodes = () => async dispatch => {
   dispatch(getSuggestedNodes())
-  const suggestedNodes = await requestSuggestedNodes()
-
-  dispatch(receiveSuggestedNodes(suggestedNodes))
+  try {
+    const suggestedNodes = await requestSuggestedNodes()
+    dispatch(receiveSuggestedNodes(suggestedNodes))
+  } catch (e) {
+    dispatch(receiveSuggestedNodesError())
+  }
 }
 
 // Send IPC event for peers
@@ -383,6 +393,14 @@ const ACTION_HANDLERS = {
     ...state,
     suggestedNodesLoading: false,
     suggestedNodes
+  }),
+  [RECEIVE_SUGGESTED_NODES_ERROR]: state => ({
+    ...state,
+    suggestedNodesLoading: false,
+    suggestedNodes: {
+      mainnet: [],
+      testnet: []
+    }
   })
 }
 
diff --git a/app/translations/en.json b/app/translations/en.json
index 26b5a652..18823c01 100644
--- a/app/translations/en.json
+++ b/app/translations/en.json
@@ -62,6 +62,7 @@
   "components.Contacts.SubmitChannelForm.title": "Add Funds to Network",
   "components.Contacts.SuggestedNodes.connect": "Connect",
   "components.Contacts.SuggestedNodes.empty_description": "Hmmm, looks like you don't have any channels yet. Here are some suggested nodes to open a channel with to get started",
+  "components.Contacts.SuggestedNodes.empty_description_alt": "Hmmm, looks like you don't have any channels yet. Open some channels to get started.",
   "components.Form.Pay.amount": "Amount",
   "components.Form.Pay.destination": "Destination",
   "components.Form.Pay.onchain_description": "On-Chain (~10 minutes)",