select tutorial from dropdown

src/channel/index.ts

@@ -81,11 +81,9 @@ class Channel implements Channel {
         return
       // configure test runner, language, git
       case 'EDITOR_TUTORIAL_CONFIG':
-        const tutorialData: TT.Tutorial = action.payload.tutorial
+        const data: TT.Tutorial = action.payload.tutorial
         // setup tutorial config (save watcher, test runner, etc)
-        this.context.setTutorial(this.workspaceState, tutorialData)
-
-        const data: TT.TutorialData = tutorialData.data
+        this.context.setTutorial(this.workspaceState, data)
 
         await tutorialConfig({ config: data.config }, onError)
 
@@ -97,7 +95,7 @@ class Channel implements Channel {
         if (!tutorialContinue) {
           throw new Error('Invalid tutorial to continue')
         }
-        const continueConfig: TT.TutorialConfig = tutorialContinue.data.config
+        const continueConfig: TT.TutorialConfig = tutorialContinue.config
         await tutorialConfig(
           {
             config: continueConfig,
@@ -148,7 +146,7 @@ class Channel implements Channel {
           throw new Error('Error with current tutorial')
         }
         // update local storage stepProgress
-        const progress = this.context.progress.setStepComplete(tutorial.data, action.payload.stepId)
+        const progress = this.context.progress.setStepComplete(tutorial, action.payload.stepId)
         this.context.position.setPositionFromProgress(tutorial, progress)
         saveCommit()
     }

src/channel/state/Position.ts

@@ -29,12 +29,12 @@ class Position {
       return this.value
     }
 
-    if (!tutorial || !tutorial.data || !tutorial.data.levels) {
+    if (!tutorial || !tutorial.levels) {
       throw new Error('Error setting position from progress')
     }
 
     // get level
-    const { levels } = tutorial.data
+    const { levels } = tutorial
     const lastLevelIndex: number | undefined = levels.findIndex((l: TT.Level) => !progress.levels[l.id])
     if (lastLevelIndex >= levels.length) {
       throw new Error('Error setting progress level')

src/channel/state/Progress.ts

@@ -39,12 +39,12 @@ class Progress {
   public reset = () => {
     this.set(defaultValue)
   }
-  public setStepComplete = (tutorialData: TT.TutorialData, stepId: string): T.Progress => {
+  public setStepComplete = (tutorial: TT.Tutorial, stepId: string): T.Progress => {
     const next = this.value
     // mark step complete
     next.steps[stepId] = true
 
-    const currentLevel = tutorialData.levels.find((l) => l.steps.find((s) => s.id === stepId))
+    const currentLevel = tutorial.levels.find((l) => l.steps.find((s) => s.id === stepId))
     if (!currentLevel) {
       throw new Error(`setStepComplete level not found for stepId ${stepId}`)
     }
@@ -53,7 +53,7 @@ class Progress {
       // final step for level is complete
       next.levels[currentLevel.id] = true
 
-      if (tutorialData.levels[tutorialData.levels.length - 1].id === currentLevel.id) {
+      if (tutorial.levels[tutorial.levels.length - 1].id === currentLevel.id) {
         //final level complete so tutorial is complete
         next.complete = true
       }

typings/tutorial.d.ts

@@ -32,7 +32,8 @@ export type Tutorial = {
   id: string
   version: string
   summary: TutorialSummary
-  data: TutorialData
+  config: TutorialConfig
+  levels: Array<Level>
 }
 
 /** Summary of tutorial used when selecting tutorial */
@@ -41,12 +42,6 @@ export type TutorialSummary = {
   description: string
 }
 
-/** Data for tutorial */
-export type TutorialData = {
-  config: TutorialConfig
-  levels: Array<Level>
-}
-
 export type StepActions = {
   commands: string[]
   commits: string[]

web-app/src/Routes.tsx

@@ -4,7 +4,7 @@ import Workspace from './components/Workspace'
 import LoadingPage from './containers/Loading'
 import StartPage from './containers/Start'
 import SelectTutorialPage from './containers/SelectTutorial'
-import OverviewPage from './containers/Overview'
+import OverviewPage from './components/TutorialOverview'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'
 import SelectEmptyWorkspace from './containers/Check/SelectWorkspace'
@@ -33,9 +33,6 @@ const Routes = () => {
         <Route path="Setup.SelectTutorial">
           <SelectTutorialPage send={send} context={context} />
         </Route>
-        <Route path="Setup.Summary">
-          <OverviewPage send={send} context={context} />
-        </Route>
         <Route path="Setup.SetupNewTutorial">
           <LoadingPage text="Configuring tutorial..." context={context} />
         </Route>

web-app/src/containers/Overview/OverviewPage.tsx → web-app/src/components/TutorialOverview/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import * as TT from 'typings/tutorial'
-import moment from 'moment'
-import Button from '../../components/Button'
-import Markdown from '../../components/Markdown'
+// import moment from 'moment'
+import Button from '../Button'
+import Markdown from '../Markdown'
 import { Breadcrumb } from '@alifd/next'
 
 const footerHeight = '3rem'
@@ -69,57 +69,66 @@ const styles = {
 }
 
 interface Props {
-  title: string
-  description: string
-  levels: TT.Level[]
-  onNext(): void
-  onBack(): void
+  tutorial: TT.Tutorial
+  send: any
 }
 
-const Summary = (props: Props) => (
-  <div css={styles.page}>
-    <div css={styles.content}>
-      <div css={styles.header}>
-        <div css={styles.nav}>
-          <Breadcrumb separator="/">
-            <Breadcrumb.Item>
-              <div css={styles.navLink} onClick={props.onBack}>
-                &lt; Back to Tutorials
-              </div>
-            </Breadcrumb.Item>
-          </Breadcrumb>
-        </div>
-        <h1 css={styles.title}>{props.title}</h1>
-        <h3>{props.description}</h3>
-        {/* <h5 css={styles.meta}>
+const Summary = (props: Props) => {
+  const onNext = () =>
+    props.send({
+      type: 'TUTORIAL_START',
+      // TODO: change tutorial on parent
+      // payload: {
+      //   tutorial: data.tutorial,
+      // },
+    })
+
+  // const onBack = () => props.send({ type: 'BACK' })
+  return (
+    <div css={styles.page}>
+      <div css={styles.content}>
+        <div css={styles.header}>
+          {/* <div css={styles.nav}>
+            <Breadcrumb separator="/">
+              <Breadcrumb.Item>
+                <div css={styles.navLink} onClick={props.onBack}>
+                  &lt; Back to Tutorials
+                </div>
+              </Breadcrumb.Item>
+            </Breadcrumb>
+          </div> */}
+          <h1 css={styles.title}>{props.tutorial.summary.title}</h1>
+          <h3>{props.tutorial.summary.description}</h3>
+          {/* <h5 css={styles.meta}>
           <div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
           <div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
         </h5> */}
-      </div>
-      <div>
-        <div css={styles.levelList}>
-          <h2>Content</h2>
-          {props.levels.map((level: TT.Level, index: number) => (
-            <div key={index}>
-              <h3>
-                {index + 1}. {level.title}
-              </h3>
-              <div css={styles.levelSummary}>
-                <Markdown>{level.summary}</Markdown>
+        </div>
+        <div>
+          <div css={styles.levelList}>
+            <h2>Content</h2>
+            {props.tutorial.levels.map((level: TT.Level, index: number) => (
+              <div key={index}>
+                <h3>
+                  {index + 1}. {level.title}
+                </h3>
+                <div css={styles.levelSummary}>
+                  <Markdown>{level.summary}</Markdown>
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
-    </div>
 
-    <div css={styles.footer}>
-      {/* TODO Add back button */}
-      <Button type="primary" onClick={props.onNext}>
-        Start
-      </Button>
+      <div css={styles.footer}>
+        {/* TODO Add back button */}
+        <Button type="primary" onClick={onNext}>
+          Start
+        </Button>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default Summary

web-app/src/containers/SelectTutorial/index.tsx

@@ -3,10 +3,18 @@ import * as T from 'typings'
 import * as TT from 'typings/tutorial'
 import { Form, Select } from '@alifd/next'
 import useFetch from '../../services/hooks/useFetch'
+import TutorialOverview from '../../components/TutorialOverview'
 
 const FormItem = Form.Item
 const Option = Select.Option
 
+const styles = {
+  page: {},
+  header: {
+    padding: '1rem',
+  },
+}
+
 interface ContainerProps {
   send(action: T.Action): void
   context: T.MachineContext
@@ -18,17 +26,21 @@ interface TutorialsData {
 
 interface GitHubFetchProps {
   url: string
+  send: any
 }
 
-const GitHubFetch = ({ url }: GitHubFetchProps) => {
-  const { data, error, loading } = useFetch(url)
+const GitHubFetch = ({ url, send }: GitHubFetchProps) => {
+  const { data, error, loading } = useFetch<TT.Tutorial>(url)
   if (loading) {
     return <div>Loading...</div>
   }
   if (error) {
     return <div>{JSON.stringify(error)}</div>
   }
-  return <div>{JSON.stringify(data)}</div>
+  if (!data) {
+    return <div>No data returned</div>
+  }
+  return <TutorialOverview send={send} tutorial={data} />
 }
 
 const tutorials = [
@@ -55,19 +67,21 @@ const SelectTutorialPage = ({ send }: Props) => {
     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>
-      {url && <GitHubFetch url={url} />}
+    <div css={styles.page}>
+      <div css={styles.header}>
+        <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>
+      </div>
+      {url && <GitHubFetch url={url} send={send} />}
     </div>
   )
 }

web-app/src/containers/Tutorial/LevelPage/index.tsx

@@ -34,7 +34,7 @@ const LevelSummaryPageContainer = (props: PageProps) => {
     steps: Array<TT.Step & { status: T.ProgressStatus }>
   } = {
     ...levelData,
-    index: tutorial.data.levels.findIndex((l: TT.Level) => l.id === position.levelId),
+    index: tutorial.levels.findIndex((l: TT.Level) => l.id === position.levelId),
     status: progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE',
     steps: levelData.steps.map((step: TT.Step) => {
       // label step status for step component

web-app/src/services/hooks/useFetch.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-const useFetch = (url: string, options?: object) => {
+const useFetch = <T>(url: string, options?: object): { data: T | null; error: string | null; loading: boolean } => {
   const [data, setData] = React.useState(null)
   const [error, setError] = React.useState(null)
   const [loading, setLoading] = React.useState(true)