Update widget to receive and display data from server

Author: mfisher87

src/widget.ts

@@ -4,6 +4,8 @@ import {
   imageIcon,
 } from '@jupyterlab/ui-components';
 
+import { requestAPI } from './request';
+
 class ImageCaptionWidget extends Widget {
   // Initialization
   constructor() {
@@ -14,7 +16,40 @@ class ImageCaptionWidget extends Widget {
     const hello = document.createElement('p');
     hello.innerHTML = "Hello, world!";
     this.node.appendChild(hello);
+
+    const center = document.createElement('center');
+    this.node.appendChild(center);
+
+    // Put an <img> tag into the <center> tag, and also save it as a class
+    // attribute so we can update it later.
+    this.img = document.createElement('img');
+    center.appendChild(this.img);
+
+    // Do the same for a caption!
+    this.caption = document.createElement('p');
+    center.appendChild(this.caption);
+
+    // Initialize the image from the server extension
+    this.load_image();
+  }
+
+  // Fetch data from the server extension and save the results to img and
+  // caption class attributes
+  load_image(): void {
+    requestAPI<any>('random-image-caption')
+      .then(data => {
+        console.log(data);
+        this.img.src = `data:image/jpeg;base64, ${data.b64_bytes}`;
+        this.caption.innerHTML = data.caption;
+      })
+      .catch(reason => {
+        console.error(`Error fetching image data.\n${reason}`);
+      });
   }
+
+  // Information about class attributes for the type checker
+  img: HTMLImageElement;
+  caption: HTMLParagraphElement;
 }
 
 export class ImageCaptionMainAreaWidget extends MainAreaWidget<ImageCaptionWidget> {