feat(UI): Use the server url in the client

Author: germanattanasio

app.js

@@ -27,30 +27,34 @@ require('./config/express')(app);
 
 // Create the token manager
 let tokenManager;
+const serviceUrl = process.env.SPEECH_TO_TEXT_URL || 'https://gateway.watsonplatform.net/speech-to-text/api';
 
 if (process.env.SPEECH_TO_TEXT_IAM_APIKEY && process.env.SPEECH_TO_TEXT_IAM_APIKEY !== '') {
-  tokenManager = new IamTokenManagerV1({
+  tokenManager = new IamTokenManagerV1.IamTokenManagerV1({
     iamApikey: process.env.SPEECH_TO_TEXT_IAM_APIKEY || '<iam_apikey>',
     iamUrl: process.env.SPEECH_TO_TEXT_IAM_URL || 'https://iam.bluemix.net/identity/token',
   });
 } else {
   const speechService = new SpeechToTextV1({
     username: process.env.SPEECH_TO_TEXT_USERNAME || '<username>',
     password: process.env.SPEECH_TO_TEXT_PASSWORD || '<password>',
-    url: process.env.SPEECH_TO_TEXT_URL || '<url>',
+    url: serviceUrl,
   });
   tokenManager = new AuthorizationV1(speechService.getCredentials());
 }
 
 app.get('/', (req, res) => res.render('index'));
 
-// Get token using your credentials
-app.get('/api/token', (req, res, next) => {
+// Get credentials using your credentials
+app.get('/api/credentials', (req, res, next) => {
   tokenManager.getToken((err, token) => {
     if (err) {
       next(err);
     } else {
-      res.send(token);
+      res.json({
+        token,
+        serviceUrl,
+      });
     }
   });
 });

public/scripts/bundle.jsx

@@ -1,6 +1,6 @@
 import './polyfills';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Demo from '../../views/demo.jsx'
+import Demo from '../../views/demo.jsx';
 
-ReactDOM.render(<Demo/>, document.getElementById('root'));
+ReactDOM.render(<Demo />, document.getElementById('root'));

views/demo.jsx

@@ -96,6 +96,7 @@ export default React.createClass({
       resultsBySpeaker: this.state.speakerLabels,
       // allow interim results through before the speaker has been determined
       speakerlessInterim: this.state.speakerLabels,
+      url: this.state.serviceUrl,
     }, extra);
   },
 
@@ -263,13 +264,13 @@ export default React.createClass({
   },
 
   fetchToken() {
-    return fetch('/api/token').then((res) => {
+    return fetch('/api/credentials').then((res) => {
       if (res.status !== 200) {
         throw new Error('Error retrieving auth token');
       }
-      return res.text();
+      return res.json();
     }) // todo: throw here if non-200 status
-      .then(token => this.setState({ token })).catch(this.handleError);
+      .then(creds => this.setState({ ...creds })).catch(this.handleError);
   },
 
   getKeywords(model) {