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

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>
   )
 }

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."
 })

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: []
+    }
   })
 }
 

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)",