search -> question nav flow

Author: Tim Cuthbert

src/extension.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
 import { ExtensionModel } from './extension-model';
-import { posix } from 'path';
+import { posix, resolve } from 'path';
 import { AppPageHtml } from './app-page';
 
 export function activate(context: vscode.ExtensionContext) {
@@ -20,22 +20,20 @@ export function activate(context: vscode.ExtensionContext) {
     vscode.window.showInputBox(searchOptions).then((searchQuery: string | undefined) => {
 
       if (searchQuery) {
-        // Create webview panel
-        const stackoverflowPanel = vscode.window.createWebviewPanel('webview', `SO: ${searchQuery}`, vscode.ViewColumn.Beside, {
-          localResourceRoots: [vscode.Uri.file(posix.join(context.extensionPath, 'app', 'public'))],
-          enableScripts: true,
-          retainContextWhenHidden: true
-        });
 
+        // Create webview panel
+        const stackoverflowPanel = createWebViewPanel(`SO: ${searchQuery}`, context.extensionPath);
         // Set webview - svelte built to ./app/public/*
         stackoverflowPanel.webview.html = AppPageHtml(context.extensionPath);
-
-        // Post search term
+        // Post search term, read in App.svelte as window.addEventListener("message"
         stackoverflowPanel.webview.postMessage({
           action: 'search',
           query: searchQuery
         });
 
+        // Show progress loader
+        showWindowProgress(`Loading Stackoverflow Search Results`, stackoverflowPanel);
+
       }
 
     });
@@ -49,26 +47,23 @@ export function activate(context: vscode.ExtensionContext) {
     vscode.window.showQuickPick(ExtensionModel.topPickQuickInputItems).then((selectedTopPick: vscode.QuickPickItem | undefined) => {
 
       if (selectedTopPick) {
+
+        // Get article selected artical with ID
         const selectedArticle: any = ExtensionModel.topPickIds.find((element: any) => {
           return element.label === selectedTopPick.label;
         });
 
         // Create webview panel
-        const stackoverflowPanel = vscode.window.createWebviewPanel('webview', `SO: ${selectedTopPick.label}`, vscode.ViewColumn.Beside, {
-          localResourceRoots: [vscode.Uri.file(posix.join(context.extensionPath, 'app', 'public'))],
-          enableScripts: true,
-          retainContextWhenHidden: true
-        });
-
+        const stackoverflowPanel = createWebViewPanel(`SO: ${selectedTopPick.label}`, context.extensionPath);
         // Set webview - svelte built to ./app/public/*
         stackoverflowPanel.webview.html = AppPageHtml(context.extensionPath);
-
-        // Post article Id
+        // Post article Id to app, read in App.svelte as window.addEventListener("message"
         stackoverflowPanel.webview.postMessage({
           action: 'topPick',
           questionId: selectedArticle.id
         });
 
+        // Show progress loader
         showWindowProgress(`Loading Stackoverflow Article`, stackoverflowPanel);
 
       }
@@ -81,7 +76,20 @@ export function activate(context: vscode.ExtensionContext) {
 }
 
 /**
- * Show built in loader
+ * Create a vscode webViewPanel
+ * @param panelTitle string
+ * @param path string
+ */
+function createWebViewPanel(panelTitle: string, path: string): vscode.WebviewPanel {
+  return vscode.window.createWebviewPanel('webview', panelTitle, vscode.ViewColumn.Beside, {
+    localResourceRoots: [vscode.Uri.file(posix.join(path, 'app', 'public'))],
+    enableScripts: true,
+    retainContextWhenHidden: true
+  });
+}
+
+/**
+ * Show progress in window (bottom left)
  * @param title string
  */
 function showWindowProgress(title: string, panel: vscode.WebviewPanel) {
@@ -90,19 +98,14 @@ function showWindowProgress(title: string, panel: vscode.WebviewPanel) {
     title: title,
   }, (progress, token) => {
 
+    // Resolve once fetch() is complete 
+    // message has command: "progress", action: "stop" | "start" 
     const progressPromise = new Promise(resolve => {
-      setTimeout(() => {
-        resolve();
-      }, 5000);
-      // TODO: resolve once fetch() is complete - needs a listener
-    });
-
-    // Resolve once fetch() is complete - needs a listener
-    panel.webview.onDidReceiveMessage(message => {
-      console.log('message', message);
-      if (message.command === 'progress' && message.action === 'stop') {
-        console.log('TEST');
-      }
+      panel.webview.onDidReceiveMessage(message => {
+        if (message.command === 'progress' && message.action === 'stop') {
+          resolve();
+        }
+      });
     });
 
     return progressPromise;