feat(servers): Load servers from GitHub Gist

src/components/admin-lte/configure/servers.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 // import BchWallet from 'minimal-slp-wallet'
-
+const Gist = require('../../../services/fetch-servers')
 const BchWallet = typeof window !== 'undefined' ? window.SlpWallet : null
 
 const { Text, Select } = Inputs
@@ -164,17 +164,21 @@ class Servers extends React.Component {
   }
 
   // populate select field with select options from localstorage
-  populateSelect () {
+  populateSelect (externalsServers = []) {
     try {
       const walletInfo = _this.props.walletInfo
+      const appServers = walletInfo.servers
+      const allServers = appServers.concat(externalsServers)
+      // Remove duplicates
+      const servers = [...new Set(allServers)]
 
       const selectOptions = []
 
       // populate select field with data from localstorage
-      for (let i = 0; i < walletInfo.servers.length; i++) {
+      for (let i = 0; i < servers.length; i++) {
         const option = {
-          value: walletInfo.servers[i],
-          text: walletInfo.servers[i]
+          value: servers[i],
+          text: servers[i]
         }
         selectOptions.push(option)
       }
@@ -188,8 +192,9 @@ class Servers extends React.Component {
     }
   }
 
-  componentDidMount () {
-    _this.populateSelect()
+  async componentDidMount () {
+    const externalsServers = await _this.getGistServers()
+    _this.populateSelect(externalsServers)
   }
 
   handleUpdate (event) {
@@ -327,6 +332,31 @@ class Servers extends React.Component {
     }
   }
 
+  async getGistServers () {
+    try {
+      _this.setState({
+        inFetch: true
+      })
+      const gistLib = new Gist()
+      const gistServers = await gistLib.getServerList()
+
+      const serversArr = []
+      for (let i = 0; i < gistServers.length; i++) {
+        serversArr.push(gistServers[i].url)
+      }
+      _this.setState({
+        inFetch: false
+      })
+      return serversArr
+    } catch (error) {
+      console.warn(error)
+      _this.setState({
+        inFetch: false
+      })
+      return []
+    }
+  }
+
   // clean the text form field
   resetForm () {
     _this.setState({

src/services/fetch-servers.js

@@ -0,0 +1,40 @@
+
+/*
+  This library It's used to download a more easily maintained list of Back End servers.
+*/
+
+const axios = require('axios')
+
+class Gist {
+  constructor () {
+    this.axios = axios
+  }
+
+  // Retrieve a JSON file from a GitHub Gist
+  async getServerList () {
+    try {
+      // https://gist.github.com/christroutner/e818ecdaed6c35075bfc0751bf222258
+      const gistUrl =
+        'https://api.github.com/gists/63c5513782181f8b8ea3eb89f7cadeb6'
+
+      // Retrieve the gist from github.com.
+      const result = await this.axios.get(gistUrl)
+      // console.log('result.data: ', result.data)
+
+      // Get the current content of the gist.
+      const content = result.data.files['psf-consumer-apis.json'].content
+      // console.log('content: ', content)
+
+      // Parse the JSON string into an Object.
+      const object = JSON.parse(content)
+      // console.log('object: ', object)
+
+      return object.consumerApis
+    } catch (err) {
+      console.error('Error in getCRList()')
+      throw err
+    }
+  }
+}
+
+module.exports = Gist