coderoad · ShMcK · Jul 15, 2019 · Jul 15, 2019 · Jul 15, 2019
diff --git a/src/editor/ReactWebView.ts b/src/editor/ReactWebView.ts
@@ -1,6 +1,6 @@
-import * as vscode from 'vscode'
-import * as CR from 'typings'
 import * as path from 'path'
+import * as CR from 'typings'
+import * as vscode from 'vscode'
 
 /**
  * Manages React webview panels
@@ -71,7 +71,7 @@ class ReactWebView {
     if (callback) {
       // listen for when webview is loaded
       // unfortunately there is no easy way of doing this
-      let webPanelListener = setInterval(() => {
+      const webPanelListener = setInterval(() => {
         if (this.loaded) {
           setTimeout(callback)
           clearInterval(webPanelListener)
@@ -80,6 +80,27 @@ class ReactWebView {
     }
   }
 
+  public async postMessage(action: CR.Action): Promise<void> {
+    // Send a message to the webview webview.
+    // You can send any JSON serializable data.
+    const success = await this.panel.webview.postMessage(action)
+    if (!success) {
+      throw new Error(`Message post failure: ${JSON.stringify(action)}`)
+    }
+  }
+
+  public dispose(): void {
+    // Clean up our resources
+    this.panel.dispose()
+
+    while (this.disposables.length) {
+      const x = this.disposables.pop()
+      if (x) {
+        x.dispose()
+      }
+    }
+  }
+
   private createWebviewPanel(column
     const viewType = 'CodeRoad'
     const title = 'CodeRoad'
@@ -103,27 +124,6 @@ class ReactWebView {
     return text
   }
 
-  public async postMessage(action: CR.Action): Promise<void> {
-    // Send a message to the webview webview.
-    // You can send any JSON serializable data.
-    const success = await this.panel.webview.postMessage(action)
-    if (!success) {
-      throw new Error(`Message post failure: ${JSON.stringify(action)}`)
-    }
-  }
-
-  public dispose(): void {
-    // Clean up our resources
-    this.panel.dispose()
-
-    while (this.disposables.length) {
-      const x = this.disposables.pop()
-      if (x) {
-        x.dispose()
-      }
-    }
-  }
-
   private getHtmlForWebview(): string {
     // eslint-disable-next-line
     const manifest = require(path.join(this.extensionPath, 'build', 'asset-manifest.json'))
@@ -151,6 +151,8 @@ class ReactWebView {
                     <meta name="theme-color" content="#000000">
                     <title>React App</title>
                     <link rel="manifest" href="./manifest.json" />
+                    <!-- TODO: load styles through package -->
+                    <link rel="stylesheet" href="https://unpkg.com/@alifd/next/dist/next.css" />
                     <link rel="stylesheet" type="text/css" href="${styleUri}">
                     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${n1}' 'nonce-${n2}' 'nonce-${n3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
                     <base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({

diff --git a/src/editor/commands/index.ts b/src/editor/commands/index.ts
@@ -1,9 +1,9 @@
-import * as vscode from 'vscode'
 import { join } from 'path'
-import { setStorage } from '../storage'
+import * as CR from 'typings'
+import * as vscode from 'vscode'
 import ReactWebView from '../ReactWebView'
+import { setStorage } from '../storage'
 import { isEmptyWorkspace } from '../workspace'
-import * as CR from 'typings'
 import runTest from './runTest'
 
 const COMMANDS = {
@@ -44,7 +44,6 @@ export const createCommands = ({ context, machine, storage, git, position }: Cre
 
     // activate machine
     webview = new ReactWebView(context.extensionPath)
-    console.log('webview', webview.panel.webview.postMessage)
     machine.activate()
   },
   // open React webview

diff --git a/tslint.json b/tslint.json
@@ -8,7 +8,8 @@
     "class-name": true,
     "semicolon": [true, "never"],
     "triple-equals": true,
-    "interface-name": [true, "never-prefix"]
+    "interface-name": [true, "never-prefix"],
+    "object-literal-sort-keys": false
   },
   "defaultSeverity": "warning",
   "no-submodule-imports": false

diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
@@ -1,7 +1,16 @@
-import '@alifd/next/dist/next.css'
+// import '@alifd/next/dist/next.css'
 import { configure } from '@storybook/react'
 import '../src/styles/index.css'
 
+// setup acquireVsCodeApi mock
+// @ts-ignore
+global.acquireVsCodeApi = () => ({
+  postMessage(event: string) {
+    console.log('postMessage', event)
+  }
+})
+
+
 // automatically import all files ending in *.stories.tsx
 const req = require.context('../stories', true, /\.stories\.tsx$/)
 

@@ -1,19 +1,27 @@
 import * as React from 'react'
 
-import Loading from './components/Loading'
 import Cond from './components/Cond'
-import NewPage from './containers/New'
+import Loading from './components/Loading'
 import ContinuePage from './containers/Continue'
+import NewPage from './containers/New'
 import TutorialPage from './containers/Tutorial'
 
 interface Props {
   state: any
 }
 
+const styles = {
+  page: {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 'white',
+  },
+}
+
 const Routes = ({ state }: Props) => {
   // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
   return (
-    <div>
+    <div style={styles.page}>
       <Cond state={state} path="SelectTutorial.Startup">
         <Loading />
       </Cond>

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
 
+// base styles
 import './styles/index.css'
 
 ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)
@@ -2,12 +2,7 @@ import { Action } from 'typings'
 
 declare var acquireVsCodeApi: any
 
-// @ts-ignore
-const vscode = window.acquireVsCodeApi ? acquireVsCodeApi() : {
-  postMessage(event: string) {
-    console.log('postMessage', event)
-  }
-}
+const vscode = acquireVsCodeApi()
 
 export function send(event: string | Action) {
   return vscode.postMessage(event)

@@ -38,15 +38,15 @@ function someExample(a) {
             `,
           },
           hints: [],
-          status: { active: false, complete: true },
+          status: { active: true, complete: false },
         },
         step3Id: {
           content: {
             title: 'Divide',
             text: 'Write a function `divide` that divides',
           },
           hints: [],
-          status: { active: true, complete: false },
+          status: { active: false, complete: false },
         },
       })}
       stage={object('stage', demo.data.stages.stage1Id)}