update typings for node processes

src/actions/setupActions.ts

@@ -1,4 +1,5 @@
 import * as T from 'typings'
+import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import * as git from '../services/git'
 import loadWatchers from './utils/loadWatchers'
@@ -8,7 +9,7 @@ import onError from '../services/sentry/onError'
 
 const setupActions = async (
   workspaceRoot: vscode.WorkspaceFolder,
-  actions: T.StepActions,
+  actions: TT.StepActions,
   send: (action: T.Action) => void, // send messages to client
 ): Promise<void> => {
   const { commands, commits, files, watchers } = actions

src/actions/solutionActions.ts

@@ -1,12 +1,13 @@
 import * as T from 'typings'
+import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import * as git from '../services/git'
 import setupActions from './setupActions'
 import onError from '../services/sentry/onError'
 
 const solutionActions = async (
   workspaceRoot: vscode.WorkspaceFolder,
-  stepActions: T.StepActions,
+  stepActions: TT.StepActions,
   send: (action: T.Action) => void,
 ): Promise<void> => {
   await git.clear()

src/actions/tutorialConfig.ts

@@ -1,13 +1,12 @@
 import * as T from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import { COMMANDS } from '../editor/commands'
-import languageMap from '../editor/languageMap'
 import * as git from '../services/git'
 import onError from '../services/sentry/onError'
 
 interface TutorialConfigParams {
-  config: T.TutorialConfig
+  config: TT.TutorialConfig
   alreadyConfigured?: boolean
   onComplete?(): void
 }

src/channel/context.ts

@@ -1,5 +1,5 @@
 import * as CR from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import Position from './state/Position'
 import Progress from './state/Progress'
@@ -17,7 +17,7 @@ class Context {
   }
   public setTutorial = async (
     workspaceState: vscode.Memento,
-    tutorial: G.Tutorial,
+    tutorial: TT.Tutorial,
   ): Promise<{ progress: CR.Progress; position: CR.Position }> => {
     this.tutorial.set(tutorial)
     const progress: CR.Progress = await this.progress.setTutorial(workspaceState, tutorial)

src/channel/index.ts

@@ -1,5 +1,5 @@
 import * as T from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import saveCommit from '../actions/saveCommit'
 import setupActions from '../actions/setupActions'
@@ -54,10 +54,10 @@ class Channel implements Channel {
         return
       // continue from tutorial from local storage
       case 'EDITOR_TUTORIAL_LOAD':
-        const tutorial: G.Tutorial | null = this.context.tutorial.get()
+        const tutorial: TT.Tutorial | null = this.context.tutorial.get()
 
         // new tutorial
-        if (!tutorial || !tutorial.id || !tutorial.version) {
+        if (!tutorial || !tutorial.id) {
           this.send({ type: 'START_NEW_TUTORIAL' })
           return
         }
@@ -81,23 +81,23 @@ class Channel implements Channel {
         return
       // configure test runner, language, git
       case 'EDITOR_TUTORIAL_CONFIG':
-        const tutorialData: G.Tutorial = action.payload.tutorial
+        const tutorialData: TT.Tutorial = action.payload.tutorial
         // setup tutorial config (save watcher, test runner, etc)
         this.context.setTutorial(this.workspaceState, tutorialData)
 
-        const data: G.TutorialData = tutorialData.version.data
+        const data: TT.TutorialData = tutorialData.data
 
         await tutorialConfig({ config: data.config }, onError)
 
         // report back to the webview that setup is complete
         this.send({ type: 'TUTORIAL_CONFIGURED' })
         return
       case 'EDITOR_TUTORIAL_CONTINUE_CONFIG':
-        const tutorialContinue: G.Tutorial | null = this.context.tutorial.get()
+        const tutorialContinue: TT.Tutorial | null = this.context.tutorial.get()
         if (!tutorialContinue) {
           throw new Error('Invalid tutorial to continue')
         }
-        const continueConfig: T.TutorialConfig = tutorialContinue.version.data.config
+        const continueConfig: TT.TutorialConfig = tutorialContinue.data.config
         await tutorialConfig(
           {
             config: continueConfig,
@@ -148,7 +148,7 @@ class Channel implements Channel {
           throw new Error('Error with current tutorial')
         }
         // update local storage stepProgress
-        const progress = this.context.progress.setStepComplete(tutorial.version.data, action.payload.stepId)
+        const progress = this.context.progress.setStepComplete(tutorial.data, action.payload.stepId)
         this.context.position.setPositionFromProgress(tutorial, progress)
         saveCommit()
     }

src/channel/state/Position.ts

@@ -1,5 +1,5 @@
 import * as CR from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 
 const defaultValue: CR.Position = {
   levelId: '',
@@ -22,34 +22,34 @@ class Position {
     this.value = defaultValue
   }
   // calculate the current position based on the saved progress
-  public setPositionFromProgress = (tutorial: G.Tutorial, progress: CR.Progress): CR.Position => {
+  public setPositionFromProgress = (tutorial: TT.Tutorial, progress: CR.Progress): CR.Position => {
     // tutorial already completed
     // TODO handle start again?
     if (progress.complete) {
       return this.value
     }
 
-    if (!tutorial || !tutorial.version || !tutorial.version.data || !tutorial.version.data.levels) {
+    if (!tutorial || !tutorial.data || !tutorial.data.levels) {
       throw new Error('Error setting position from progress')
     }
 
     // get level
-    const { levels } = tutorial.version.data
-    const lastLevelIndex: number | undefined = levels.findIndex((l: G.Level) => !progress.levels[l.id])
+    const { levels } = tutorial.data
+    const lastLevelIndex: number | undefined = levels.findIndex((l: TT.Level) => !progress.levels[l.id])
     if (lastLevelIndex >= levels.length) {
       throw new Error('Error setting progress level')
     }
 
     // get step
-    const currentLevel: G.Level = levels[lastLevelIndex]
+    const currentLevel: TT.Level = levels[lastLevelIndex]
     let currentStepId: string | null
     if (!currentLevel.steps.length) {
       // no steps available for level
       currentStepId = null
     } else {
       // find current step id
       const { steps } = currentLevel
-      const lastStepIndex: number | undefined = steps.findIndex((s: G.Step) => !progress.steps[s.id])
+      const lastStepIndex: number | undefined = steps.findIndex((s: TT.Step) => !progress.steps[s.id])
       if (lastStepIndex >= steps.length) {
         throw new Error('Error setting progress step')
       }

src/channel/state/Progress.ts

@@ -1,5 +1,5 @@
 import * as CR from 'typings'
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import Storage from '../../services/storage'
 
@@ -39,7 +39,7 @@ class Progress {
   public reset = () => {
     this.set(defaultValue)
   }
-  public setStepComplete = (tutorialData: G.TutorialData, stepId: string): CR.Progress => {
+  public setStepComplete = (tutorialData: TT.TutorialData, stepId: string): CR.Progress => {
     const next = this.value
     // mark step complete
     next.steps[stepId] = true

src/channel/state/Tutorial.ts

@@ -1,26 +1,26 @@
-import * as G from 'typings/graphql'
+import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import Storage from '../../services/storage'
 
 // Tutorial
 class Tutorial {
-  private storage: Storage<G.Tutorial | null>
-  private value: G.Tutorial | null = null
+  private storage: Storage<TT.Tutorial | null>
+  private value: TT.Tutorial | null = null
   constructor(workspaceState: vscode.Memento) {
-    this.storage = new Storage<G.Tutorial | null>({
+    this.storage = new Storage<TT.Tutorial | null>({
       key: 'coderoad:currentTutorial',
       storage: workspaceState,
       defaultValue: null,
     })
     // set value from storage
-    this.storage.get().then((value: G.Tutorial | null) => {
+    this.storage.get().then((value: TT.Tutorial | null) => {
       this.value = value
     })
   }
   public get = () => {
     return this.value
   }
-  public set = (value: G.Tutorial | null) => {
+  public set = (value: TT.Tutorial | null) => {
     this.value = value
     this.storage.set(value)
   }

src/editor/commands.ts

@@ -1,4 +1,4 @@
-import * as T from 'typings'
+import * as TT from 'typings/tutorial'
 import * as vscode from 'vscode'
 import createTestRunner, { Payload } from '../services/testRunner'
 import createWebView from '../webview'
@@ -49,7 +49,7 @@ export const createCommands = ({ extensionPath, workspaceState, workspaceRoot }:
       // setup 1x1 horizontal layout
       webview.createOrShow()
     },
-    [COMMANDS.CONFIG_TEST_RUNNER]: (config: T.TutorialTestRunner) => {
+    [COMMANDS.CONFIG_TEST_RUNNER]: (config: TT.TutorialTestRunner) => {
       testRunner = createTestRunner(config, {
         onSuccess: (payload: Payload) => {
           // send test pass message back to client

web-app/stories/GitHubFetch.stories.tsx

@@ -0,0 +1,96 @@
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import { css, jsx } from '@emotion/core'
+import SelectWorkspace from '../src/containers/Check/SelectWorkspace'
+import SideBarDecorator from './utils/SideBarDecorator'
+import { Form, Input, Select } from '@alifd/next'
+
+const FormItem = Form.Item
+const Option = Select.Option
+
+const styles = {
+  container: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+  },
+}
+
+const useFetch = (url: string, options?: object) => {
+  const [data, setData] = React.useState(null)
+  const [error, setError] = React.useState(null)
+  const [loading, setLoading] = React.useState(true)
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await fetch(url, options)
+        setLoading(false)
+        const json = await res.json()
+        setData(json)
+      } catch (error) {
+        setError(error)
+      }
+    }
+    fetchData()
+  }, [url])
+  return { data, error, loading }
+}
+
+const GitHubFetch = ({ url }) => {
+  if (!url) {
+    return null
+  }
+  const { data, error, loading } = useFetch(url)
+  if (loading) {
+    return <div>Loading...</div>
+  }
+  if (error) {
+    return <div>{JSON.stringify(error)}</div>
+  }
+  return <div>{JSON.stringify(data)}</div>
+}
+
+const tutorials = [
+  {
+    id: '1',
+    title: 'Basic Node & Express',
+    configUrl: 'https://raw.githubusercontent.com/coderoad/fcc-basic-node-and-express/master/coderoad-config.json',
+  },
+  {
+    id: '2',
+    title: 'Learn NPM',
+    configUrl: 'https://raw.githubusercontent.com/coderoad/fcc-learn-npm/master/coderoad-config.json',
+  },
+]
+
+const SelectTutorial = () => {
+  const [url, setUrl] = React.useState(null)
+  const handleUrlChange = (value) => {
+    setUrl(value)
+  }
+  return (
+    <div>
+      <Form style={{ maxWidth: '500px' }}>
+        <FormItem label="Select Tutorial:">
+          <Select onChange={handleUrlChange} style={{ width: '100%' }}>
+            {tutorials.map((tutorial) => (
+              <Option key={tutorial.id} value={tutorial.configUrl}>
+                {tutorial.title}
+              </Option>
+            ))}
+          </Select>
+        </FormItem>
+      </Form>
+      <GitHubFetch url={url} />
+    </div>
+  )
+}
+
+storiesOf('GitHub Fetch', module)
+  .addDecorator(SideBarDecorator)
+  .add('Request', () => {
+    return <GitHubFetch url={tutorials[0].configUrl} />
+  })
+  .add('Select Tutorial', () => {
+    return <SelectTutorial />
+  })