Feature/solution actions

src/actions/solutionActions.ts

@@ -1,17 +1,11 @@
-// import * as CR from 'typings'
 import * as G from 'typings/graphql'
-// import {TutorialModel} from '../services/tutorial'
-// import {gitLoadCommits, gitClear} from '../services/git'
-
-const solutionActions = async (stepActions: G.StepActions): Promise<void> => {
-	// TODO: should load same as commits
-
-	// const step: G.Step = tutorialModel.step()
-	// const solution = step.solution
-
-	// await gitClear()
-	// await gitLoadCommits(solution, dispatch)
+import * as vscode from 'vscode'
+import * as git from '../services/git'
+import setupActions from './setupActions'
 
+const solutionActions = async (workspaceRoot: vscode.WorkspaceFolder, stepActions: G.StepActions): Promise<void> => {
+	await git.clear()
+	return setupActions(workspaceRoot, stepActions)
 }
 
 export default solutionActions

src/channel/index.ts

@@ -105,7 +105,9 @@ class Channel implements Channel {
 				return
 			// load solution step actions (git commits, commands, open files)
 			case 'SOLUTION_ACTIONS':
-				solutionActions(action.payload)
+				await solutionActions(this.workspaceRoot, action.payload)
+				// run test following solution to update position
+				vscode.commands.executeCommand('coderoad.run_test', action.payload)
 				return
 
 			default:

src/channel/state/Progress.ts

@@ -33,7 +33,7 @@ class Progress {
 	public set = (value: CR.Progress) => {
 		this.value = value
 		if (!this.storage) {
-			throw new Error('Tutorial storage not found')
+			return defaultValue
 		}
 		this.storage.set(value)
 		return this.value

typings/graphql.d.ts

@@ -136,7 +136,7 @@ export type Stage = {
 	step?: Maybe<Step>,
 	steps: Array<Step>,
 	setup?: Maybe<StepActions>,
-	status: string
+	status: 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
 };
 
 
@@ -151,8 +151,8 @@ export type Step = {
 	text: Scalars['String'],
 	setup: StepActions,
 	solution: StepActions,
-	status: string
-};
+	status: 'ACTIVE' | 'COMPLETE' | 'INCOMPLETE'
+}
 
 export type StepActions = {
 	__typename?: 'StepActions',

web-app/src/App.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react'
 import { ApolloProvider } from '@apollo/react-hooks'
 
+import ErrorBoundary from './components/ErrorBoundary'
 import client from './services/apollo'
 import Routes from './Routes'
 
 const App = () => (
-	<ApolloProvider client={client}>
-		<Routes />
-	</ApolloProvider>
+  <ErrorBoundary>
+    <ApolloProvider client={client}>
+      <Routes />
+    </ApolloProvider>
+  </ErrorBoundary>
 )
 
 export default App

web-app/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+class ErrorBoundary extends React.Component {
+  public state = { hasError: false }
+
+  public componentDidCatch(error: Error, info: any) {
+    // Display fallback UI
+    this.setState({ hasError: true })
+    // You can also log the error to an error reporting service
+    console.error(error)
+    console.log(info)
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <h1>Something went wrong.</h1>
+    }
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

web-app/src/containers/Tutorial/StagePage/Stage/StepDescription/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import Markdown from '../../../../../components/Markdown'
+import { Button } from '@alifd/next'
 
 const styles = {
   // active: {
@@ -12,16 +13,29 @@ const styles = {
 
 interface Props {
   text?: string | null
-  hide: boolean
+  mode: 'INCOMPLETE' | 'ACTIVE' | 'COMPLETE'
+  onLoadSolution(): void
 }
 
-const StepDescription = ({ text, hide }: Props) => {
-  if (hide) {
+const StepDescription = ({ text, mode, onLoadSolution }: Props) => {
+  const [loadedSolution, setLoadedSolution] = React.useState()
+
+  const onClickHandler = () => {
+    if (!loadedSolution) {
+      setLoadedSolution(true)
+      onLoadSolution()
+    }
+  }
+
+  if (mode === 'INCOMPLETE') {
     return null
   }
+
+  const showLoadSolution = mode === 'ACTIVE' && !loadedSolution
   return (
     <div style={styles.card}>
       <Markdown>{text || ''}</Markdown>
+      {showLoadSolution && <Button onClick={onClickHandler}>Load Solution</Button>}
     </div>
   )
 }

web-app/src/containers/Tutorial/StagePage/Stage/index.tsx

@@ -24,11 +24,12 @@ const styles = {
 
 interface Props {
   stage: T.Stage
-	onContinue(): void
-	onSave(): void
+  onContinue(): void
+  onSave(): void
+  onLoadSolution(): void
 }
 
-const Stage = ({ stage, onContinue, onSave }: Props) => {
+const Stage = ({ stage, onContinue, onSave, onLoadSolution }: Props) => {
   if (!stage.steps) {
     throw new Error('No Stage steps found')
   }
@@ -50,12 +51,11 @@ const Stage = ({ stage, onContinue, onSave }: Props) => {
             if (!step) {
               return null
             }
-            const hide = step.status === 'INCOMPLETE'
             return (
               <Step.Item
                 key={step.id}
                 title={step.title || `Step ${index + 1}`}
-                content={<StepDescription text={step.text} hide={hide} />}
+                content={<StepDescription text={step.text} mode={step.status} onLoadSolution={onLoadSolution} />}
               />
             )
           })}
@@ -67,10 +67,10 @@ const Stage = ({ stage, onContinue, onSave }: Props) => {
           <Button onClick={onContinue}>Continue</Button>
         </div>
       ) : (
-				<div style={styles.options}>
+        <div style={styles.options}>
           <Button onClick={onSave}>Save</Button>
         </div>
-			)}
+      )}
     </div>
   )
 }

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

@@ -33,6 +33,10 @@ const StageSummaryPageContainer = (props: PageProps) => {
     })
   }
 
+  const onLoadSolution = (): void => {
+    props.send({ type: 'STEP_SOLUTION_LOAD' })
+  }
+
   stage.steps.forEach((step: G.Step) => {
     if (progress.steps[step.id]) {
       step.status = 'COMPLETE'
@@ -44,7 +48,7 @@ const StageSummaryPageContainer = (props: PageProps) => {
   })
   stage.status = progress.stages[position.stageId] ? 'COMPLETE' : 'ACTIVE'
 
-  return <Stage stage={stage} onContinue={onContinue} onSave={onSave} />
+  return <Stage stage={stage} onContinue={onContinue} onSave={onSave} onLoadSolution={onLoadSolution} />
 }
 
 export default StageSummaryPageContainer

web-app/src/services/state/actions/editor.ts

@@ -97,6 +97,17 @@ export default {
 			})
 		}
 	},
+	editorLoadSolution(context: CR.MachineContext): void {
+		const step: G.Step = selectors.currentStep(context)
+		// tell editor to load solution commit
+		channel.editorSend({
+			type: 'SOLUTION_ACTIONS',
+			payload: {
+				stepId: step.id,
+				...step.solution,
+			}
+		})
+	},
 	clearStorage(): void {
 		channel.editorSend({type: 'TUTORIAL_CLEAR'})
 	}

web-app/src/services/state/machine.ts

@@ -113,7 +113,7 @@ export const machine = Machine<CR.MachineContext, CR.MachineStateSchema, CR.Mach
 								on: {
 									TEST_RUN: 'TestRunning',
 									STEP_SOLUTION_LOAD: {
-										actions: ['callSolution'],
+										actions: ['editorLoadSolution'],
 									},
 								},
 							},