rebuild after large changes

src/actions/setupActions.ts

@@ -45,34 +45,38 @@ const setupActions = async (workspaceRoot: vscode.WorkspaceFolder, {commands, co
 	}
 
 	// run command
-	await runCommands(commands)
+	if (commands) {
+		await runCommands(commands)
+	}
 
 	// open files
-	for (const filePath of files) {
-		try {
-			// TODO: figure out why this does not work
-			// 	try {
-			// 		const absoluteFilePath = join(workspaceRoot.uri.path, filePath)
-			// 		const doc = await vscode.workspace.openTextDocument(absoluteFilePath)
-			// 		await vscode.window.showTextDocument(doc, vscode.ViewColumn.One)
-			// 		// there are times when initialization leave the panel behind any files opened
-			// 		// ensure the panel is redrawn on the right side first
-			// 		// webview.createOrShow()
-			// 	} catch (error) {
-			// 		console.log(`Failed to open file ${filePath}`, error)
-			// 	}
-			const wr = vscode.workspace.rootPath
-			if (!wr) {
-				throw new Error('No workspace root path')
+	if (files) {
+		for (const filePath of files) {
+			try {
+				// TODO: figure out why this does not work
+				// 	try {
+				// 		const absoluteFilePath = join(workspaceRoot.uri.path, filePath)
+				// 		const doc = await vscode.workspace.openTextDocument(absoluteFilePath)
+				// 		await vscode.window.showTextDocument(doc, vscode.ViewColumn.One)
+				// 		// there are times when initialization leave the panel behind any files opened
+				// 		// ensure the panel is redrawn on the right side first
+				// 		// webview.createOrShow()
+				// 	} catch (error) {
+				// 		console.log(`Failed to open file ${filePath}`, error)
+				// 	}
+				const wr = vscode.workspace.rootPath
+				if (!wr) {
+					throw new Error('No workspace root path')
+				}
+				const absoluteFilePath = join(wr, filePath)
+				const doc = await vscode.workspace.openTextDocument(absoluteFilePath)
+				await vscode.window.showTextDocument(doc, vscode.ViewColumn.One)
+				// there are times when initialization leave the panel behind any files opened
+				// ensure the panel is redrawn on the right side first
+				vscode.commands.executeCommand('coderoad.open_webview')
+			} catch (error) {
+				console.log(`Failed to open file ${filePath}`, error)
 			}
-			const absoluteFilePath = join(wr, filePath)
-			const doc = await vscode.workspace.openTextDocument(absoluteFilePath)
-			await vscode.window.showTextDocument(doc, vscode.ViewColumn.One)
-			// there are times when initialization leave the panel behind any files opened
-			// ensure the panel is redrawn on the right side first
-			vscode.commands.executeCommand('coderoad.open_webview')
-		} catch (error) {
-			console.log(`Failed to open file ${filePath}`, error)
 		}
 	}
 }

src/channel/state/Progress.ts

@@ -6,7 +6,6 @@ import Storage from '../../services/storage'
 
 const defaultValue: CR.Progress = {
 	levels: {},
-	stages: {},
 	steps: {},
 	complete: false
 }

src/services/git/index.ts

@@ -42,7 +42,7 @@ export function loadCommit(commit: string): Promise<void> {
 
 /* 
     save commit
-    git commit -am '${level}/${stage}/${step} complete'
+    git commit -am '${level}/${step} complete'
 */
 
 export async function saveCommit(message: string): Promise<void> {

web-app/src/Routes.tsx

@@ -8,7 +8,6 @@ import ContinuePage from './containers/Continue'
 import NewPage from './containers/New'
 import SummaryPage from './containers/Tutorial/SummaryPage'
 import LevelSummaryPage from './containers/Tutorial/LevelPage'
-import StageSummaryPage from './containers/Tutorial/StagePage'
 import CompletedPage from './containers/Tutorial/CompletedPage'
 
 const { Route } = Router
@@ -40,9 +39,6 @@ const Routes = () => {
         <Route path="Tutorial.Level">
           <LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
         </Route>
-        <Route path="Tutorial.Stage">
-          <StageSummaryPage send={tempSend} context={{} as CR.MachineContext} />
-        </Route>
         <Route path="Tutorial.Completed">
           <CompletedPage send={tempSend} context={{} as CR.MachineContext} />
         </Route>

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

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Button, Card } from '@alifd/next'
 import * as CR from 'typings'
-import * as T from 'typings/graphql'
+import * as G from 'typings/graphql'
 
 interface Props {
-  tutorial: T.Tutorial
+  tutorial: G.Tutorial
   onContinue(): void
   onNew(): void
 }
@@ -14,8 +14,8 @@ export const ContinuePage = (props: Props) => (
     <h3>Continue</h3>
     <Card showTitleBullet={false} contentHeight="auto">
       <div>
-        <h2>{props.tutorial.title}</h2>
-        <p>{props.tutorial.text}</p>
+        <h2>{props.tutorial.version.summary.title}</h2>
+        <p>{props.tutorial.version.summary.description}</p>
         <Button onClick={props.onContinue}>Resume</Button>
       </div>
     </Card>

web-app/src/containers/New/TutorialList/index.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react'
 
 import channel from '../../../services/channel'
-import * as T from 'typings/graphql'
+import * as G from 'typings/graphql'
 import TutorialItem from './TutorialItem'
 
 interface Props {
-  tutorialList: T.Tutorial[]
+  tutorialList: G.Tutorial[]
 }
 
 const TutorialList = (props: Props) => {
-  const onSelect = (tutorial: T.Tutorial) => {
+  const onSelect = (tutorial: G.Tutorial) => {
     channel.machineSend({
       type: 'TUTORIAL_START',
       payload: {
@@ -19,7 +19,7 @@ const TutorialList = (props: Props) => {
   }
   return (
     <div>
-      {props.tutorialList.map((tutorial: T.Tutorial) => (
+      {props.tutorialList.map((tutorial: G.Tutorial) => (
         <TutorialItem
           key={tutorial.id}
           onSelect={() => onSelect(tutorial)}

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

@@ -1,74 +1,71 @@
-import { Step } from '@alifd/next'
+import { Button, Step } from '@alifd/next'
 import * as React from 'react'
-import * as T from 'typings/graphql'
+import * as G from 'typings/graphql'
 
 import Markdown from '../../../../components/Markdown'
-import LevelStageSummary from './LevelStageSummary'
+import StepDescription from './StepDescription'
 
 const styles = {
-  card: {},
+  card: {
+    padding: 0,
+  },
   content: {
     padding: '0rem 1rem',
     paddingBottom: '1rem',
   },
-  list: {
-    padding: '0rem',
-  },
   options: {
     padding: '0rem 1rem',
   },
   steps: {
-    padding: '1rem 0.5rem',
+    padding: '1rem 0rem',
   },
   title: {},
 }
 
 interface Props {
-  level: T.Level
-  onNext(): void
+  level: G.Level
+  onContinue(): void
+  onLoadSolution(): void
 }
 
-const Level = ({ level, onNext }: Props) => {
-  if (!level || !level.stages) {
-    throw new Error('No level stages found')
+const Level = ({ level, onContinue, onLoadSolution }: Props) => {
+  if (!level.steps) {
+    throw new Error('No Stage steps found')
   }
-  const activeIndex = level.stages.findIndex((stage: T.Stage | null) => stage && stage.status === 'ACTIVE') || 0
+
+  // grab the active step
+  const activeIndex: number = level.steps.findIndex((step: G.Step | null) => {
+    return step && step.status === 'ACTIVE'
+  })
+
   return (
     <div style={styles.card}>
       <div style={styles.content}>
         <h2 style={styles.title}>{level.title}</h2>
-        <Markdown>{level.text || ''}</Markdown>
+        <Markdown>{level.description || ''}</Markdown>
       </div>
       <div style={styles.steps}>
-        <Step current={activeIndex} direction="ver" animation={false}>
-          {level.stages.map((stage: T.Stage | null, index: number) => {
-            if (!stage) {
+        <Step current={activeIndex} direction="ver" shape="dot" animation readOnly>
+          {level.steps.map((step: G.Step | null, index: number) => {
+            if (!step) {
               return null
             }
-            const active = stage.status === 'ACTIVE'
-            const clickHandler = active
-              ? onNext
-              : () => {
-                  /* empty */
-                }
-            // note - must add click handler to title, content & step.item
-            // as all are separated components
             return (
               <Step.Item
-                key={stage.id}
-                style={{ backgroundColor: 'blue' }}
-                title={
-                  <span className={active ? 'hover-select' : ''} onClick={clickHandler}>
-                    {stage.title || `Stage ${index + 1}`}
-                  </span>
-                }
-                content={<LevelStageSummary key={stage.id} stage={stage} onNext={clickHandler} />}
-                onClick={clickHandler}
+                key={step.id}
+                title={step.title || `Step ${index + 1}`}
+                content={<StepDescription text={step.description} mode={step.status} onLoadSolution={onLoadSolution} />}
               />
             )
           })}
         </Step>
       </div>
+
+      {level.status === 'COMPLETE' && (
+        <div style={styles.options}>
+          <Button onClick={onContinue}>Continue</Button>
+        </div>
+      )}
     </div>
   )
 }

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

@@ -1,50 +1,45 @@
 import * as React from 'react'
 import * as CR from 'typings'
 import * as G from 'typings/graphql'
+import * as selectors from '../../../services/selectors'
 
 import Level from './Level'
 
-interface LevelProps {
-  level: G.Level
-  send(action: string): void
-}
-
-export const LevelSummaryPage = (props: LevelProps) => {
-  const onNext = (): void => {
-    props.send('NEXT')
-  }
-  return <Level level={props.level} onNext={onNext} />
-}
-
-interface ContainerProps {
+interface PageProps {
   context: CR.MachineContext
-  send(action: string): void
+  send(action: CR.Action): void
 }
 
-const LevelSummaryPageContainer = (props: ContainerProps) => {
-  const { tutorial, position, progress } = props.context
+const LevelSummaryPageContainer = (props: PageProps) => {
+  const { position, progress } = props.context
 
-  if (!tutorial) {
-    throw new Error('Tutorial not found in LevelSummaryPageContainer')
-  }
+  const level: G.Level = selectors.currentLevel(props.context)
 
-  const level: G.Level | undefined = tutorial.version.data.levels.find((l: G.Level) => l.id === position.levelId)
+  const onContinue = (): void => {
+    props.send({
+      type: 'LEVEL_NEXT',
+      payload: {
+        LevelId: position.levelId,
+      },
+    })
+  }
 
-  if (!level) {
-    throw new Error('Level not found in LevelSummaryPageContainer')
+  const onLoadSolution = (): void => {
+    props.send({ type: 'STEP_SOLUTION_LOAD' })
   }
 
-  level.stages.forEach((stage: G.Stage) => {
-    if (stage.id === position.stageId) {
-      stage.status = 'ACTIVE'
-    } else if (progress.stages[stage.id]) {
-      stage.status = 'COMPLETE'
+  level.steps.forEach((step: G.Step) => {
+    if (progress.steps[step.id]) {
+      step.status = 'COMPLETE'
+    } else if (step.id === position.stepId) {
+      step.status = 'ACTIVE'
     } else {
-      stage.status = 'INCOMPLETE'
+      step.status = 'INCOMPLETE'
     }
   })
+  level.status = progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'
 
-  return <LevelSummaryPage level={level} send={props.send} />
+  return <Level level={level} onContinue={onContinue} onLoadSolution={onLoadSolution} />
 }
 
 export default LevelSummaryPageContainer

web-app/src/containers/Tutorial/LevelPage/Level/LevelStageSummary.tsx → web-app/src/containers/Tutorial/LevelsPage/Level/LevelStageSummary.tsx

@@ -23,17 +23,17 @@ const styles = {
 }
 
 interface Props {
-  stage: G.Stage
+  level: G.Level
   onNext(): void
 }
 
 const LevelStageSummary = (props: Props) => {
-  const { stage, onNext } = props
-  const active = stage.status === 'ACTIVE'
+  const { level, onNext } = props
+  const active = level.status === 'ACTIVE'
   return (
     <div style={styles.card} className={active ? 'hover-select' : ''} onClick={onNext}>
       <div style={styles.left}>
-        <Markdown>{stage.text || ''}</Markdown>
+        <Markdown>{level.description || ''}</Markdown>
       </div>
     </div>
   )