Add an example of an external web client call

Author: ggleyzer

counter/webapp/public/authorized/count.html

@@ -13,15 +13,15 @@ <h1><a href="#" id="logout">Logout</a></h1>
       fetch("/api/user")
           .then(response => response.text(),
                 err      => user.innerHTML = err.message)
-          .then(text     => user.innerHTML = text == '' ? 'anonymous' : text);
+          .then(text     => user.innerHTML = text === '' ? 'anonymous' : text);
 
       fetch("/api/count")
           .then(response => response.json(),
                 err      => count.innerHTML = err.message)
           .then(cnt      => count.innerHTML =
-                cnt == 1 ? 'first'  :
-                cnt == 2 ? 'second' :
-                cnt == 3 ? 'third'  :
+                cnt === 1 ? 'first'  :
+                cnt === 2 ? 'second' :
+                cnt === 3 ? 'third'  :
                            '' + cnt + '-th');
       };
 

welcome/src/main/x/welcome.x

@@ -10,6 +10,7 @@ module welcome.examples.org {
 
     @WebService("/welcome")
     service SimpleApi {
+        @Inject Client client;
         @Inject db.WelcomeSchema schema;
 
         @Get("org")
@@ -18,6 +19,13 @@ module welcome.examples.org {
             return org;
         }
 
+        @Get("info")
+        @Produces(Text)
+        String callerInfo(RequestIn request) {
+            ResponseIn response = client.get($"http://ip-api.com/json/{request.client}");
+            return response.body?.bytes.unpackUtf8() : "";
+        }
+
         @Get("count")
         Int count(RequestIn request) {
             using (val tx = schema.connection.createTransaction()) {

welcome/webapp/src/App.js

@@ -5,13 +5,23 @@ class App extends Component {
 
     constructor() {
       super();
-      this.state = {seconds: 0, name: "", count: ""};
+      this.state = {seconds: 0, name: "", city: "", count: ""};
       this.handleClick = this.handleClick.bind(this);
 
       fetch('/welcome/org')
         .then(response => response.json())
         .then(name => this.setState(state => ({name: name})));
 
+      fetch('/welcome/info')
+        .then(response => response.json())
+        .then(info => {
+            if (info["status"] === "fail") {
+                this.setState(state => ({city: "your city"}));
+            } else {
+                this.setState(state => ({city: info["city"]}));
+            }
+        })
+
       fetch('/welcome/count')
         .then(response => response.json())
         .then(data =>
@@ -45,6 +55,8 @@ class App extends Component {
         <div>
           Welcome to {this.state.name}! This is your {this.state.count} visit to our site!
           <p/>
+          How's the weather in {this.state.city}?
+          <p/>
           <button onClick={this.handleClick}>Reset timer</button>
           <p/>
           Timer:{this.state.seconds}