Skip to content

Commit 6ca0fbb

Browse files
ShMcKShMcK
committed
select tutorial from dropdown
1 parent c206899 commit 6ca0fbb

File tree

13 files changed

+101
-149
lines changed

13 files changed

+101
-149
lines changed

‎src/channel/index.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,9 @@ class Channel implements Channel {
8181
return
8282
// configure test runner, language, git
8383
case 'EDITOR_TUTORIAL_CONFIG':
84-
const tutorialData: TT.Tutorial = action.payload.tutorial
84+
const data: TT.Tutorial = action.payload.tutorial
8585
// setup tutorial config (save watcher, test runner, etc)
86-
this.context.setTutorial(this.workspaceState, tutorialData)
87-
88-
const data: TT.TutorialData = tutorialData.data
86+
this.context.setTutorial(this.workspaceState, data)
8987

9088
await tutorialConfig({ config: data.config }, onError)
9189

@@ -97,7 +95,7 @@ class Channel implements Channel {
9795
if (!tutorialContinue) {
9896
throw new Error('Invalid tutorial to continue')
9997
}
100-
const continueConfig: TT.TutorialConfig = tutorialContinue.data.config
98+
const continueConfig: TT.TutorialConfig = tutorialContinue.config
10199
await tutorialConfig(
102100
{
103101
config: continueConfig,
@@ -148,7 +146,7 @@ class Channel implements Channel {
148146
throw new Error('Error with current tutorial')
149147
}
150148
// update local storage stepProgress
151-
const progress = this.context.progress.setStepComplete(tutorial.data, action.payload.stepId)
149+
const progress = this.context.progress.setStepComplete(tutorial, action.payload.stepId)
152150
this.context.position.setPositionFromProgress(tutorial, progress)
153151
saveCommit()
154152
}

‎src/channel/state/Position.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ class Position {
2929
return this.value
3030
}
3131

32-
if (!tutorial || !tutorial.data || !tutorial.data.levels) {
32+
if (!tutorial || !tutorial.levels) {
3333
throw new Error('Error setting position from progress')
3434
}
3535

3636
// get level
37-
const { levels } = tutorial.data
37+
const { levels } = tutorial
3838
const lastLevelIndex: number | undefined = levels.findIndex((l: TT.Level) => !progress.levels[l.id])
3939
if (lastLevelIndex >= levels.length) {
4040
throw new Error('Error setting progress level')

‎src/channel/state/Progress.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ class Progress {
3939
public reset = () => {
4040
this.set(defaultValue)
4141
}
42-
public setStepComplete = (tutorialData: TT.TutorialData, stepId: string): T.Progress => {
42+
public setStepComplete = (tutorial: TT.Tutorial, stepId: string): T.Progress => {
4343
const next = this.value
4444
// mark step complete
4545
next.steps[stepId] = true
4646

47-
const currentLevel = tutorialData.levels.find((l) => l.steps.find((s) => s.id === stepId))
47+
const currentLevel = tutorial.levels.find((l) => l.steps.find((s) => s.id === stepId))
4848
if (!currentLevel) {
4949
throw new Error(`setStepComplete level not found for stepId ${stepId}`)
5050
}
@@ -53,7 +53,7 @@ class Progress {
5353
// final step for level is complete
5454
next.levels[currentLevel.id] = true
5555

56-
if (tutorialData.levels[tutorialData.levels.length - 1].id === currentLevel.id) {
56+
if (tutorial.levels[tutorial.levels.length - 1].id === currentLevel.id) {
5757
//final level complete so tutorial is complete
5858
next.complete = true
5959
}

‎typings/tutorial.d.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export type Tutorial = {
3232
id: string
3333
version: string
3434
summary: TutorialSummary
35-
data: TutorialData
35+
config: TutorialConfig
36+
levels: Array<Level>
3637
}
3738

3839
/** Summary of tutorial used when selecting tutorial */
@@ -41,12 +42,6 @@ export type TutorialSummary = {
4142
description: string
4243
}
4344

44-
/** Data for tutorial */
45-
export type TutorialData = {
46-
config: TutorialConfig
47-
levels: Array<Level>
48-
}
49-
5045
export type StepActions = {
5146
commands: string[]
5247
commits: string[]

‎web-app/src/Routes.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Workspace from './components/Workspace'
44
import LoadingPage from './containers/Loading'
55
import StartPage from './containers/Start'
66
import SelectTutorialPage from './containers/SelectTutorial'
7-
import OverviewPage from './containers/Overview'
7+
import OverviewPage from './components/TutorialOverview'
88
import CompletedPage from './containers/Tutorial/CompletedPage'
99
import LevelSummaryPage from './containers/Tutorial/LevelPage'
1010
import SelectEmptyWorkspace from './containers/Check/SelectWorkspace'
@@ -33,9 +33,6 @@ const Routes = () => {
3333
<Route path="Setup.SelectTutorial">
3434
<SelectTutorialPage send={send} context={context} />
3535
</Route>
36-
<Route path="Setup.Summary">
37-
<OverviewPage send={send} context={context} />
38-
</Route>
3936
<Route path="Setup.SetupNewTutorial">
4037
<LoadingPage text="Configuring tutorial..." context={context} />
4138
</Route>

‎web-app/src/containers/Overview/OverviewPage.tsx‎ renamed to ‎web-app/src/components/TutorialOverview/index.tsx‎

Lines changed: 54 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react'
22
import * as TT from 'typings/tutorial'
3-
import moment from 'moment'
4-
import Button from '../../components/Button'
5-
import Markdown from '../../components/Markdown'
3+
// import moment from 'moment'
4+
import Button from '../Button'
5+
import Markdown from '../Markdown'
66
import { Breadcrumb } from '@alifd/next'
77

88
const footerHeight = '3rem'
@@ -69,57 +69,66 @@ const styles = {
6969
}
7070

7171
interface Props {
72-
title: string
73-
description: string
74-
levels: TT.Level[]
75-
onNext(): void
76-
onBack(): void
72+
tutorial: TT.Tutorial
73+
send: any
7774
}
7875

79-
const Summary = (props: Props) => (
80-
<div css={styles.page}>
81-
<div css={styles.content}>
82-
<div css={styles.header}>
83-
<div css={styles.nav}>
84-
<Breadcrumb separator="/">
85-
<Breadcrumb.Item>
86-
<div css={styles.navLink} onClick={props.onBack}>
87-
&lt; Back to Tutorials
88-
</div>
89-
</Breadcrumb.Item>
90-
</Breadcrumb>
91-
</div>
92-
<h1 css={styles.title}>{props.title}</h1>
93-
<h3>{props.description}</h3>
94-
{/* <h5 css={styles.meta}>
76+
const Summary = (props: Props) => {
77+
const onNext = () =>
78+
props.send({
79+
type: 'TUTORIAL_START',
80+
// TODO: change tutorial on parent
81+
// payload: {
82+
// tutorial: data.tutorial,
83+
// },
84+
})
85+
86+
// const onBack = () => props.send({ type: 'BACK' })
87+
return (
88+
<div css={styles.page}>
89+
<div css={styles.content}>
90+
<div css={styles.header}>
91+
{/* <div css={styles.nav}>
92+
<Breadcrumb separator="/">
93+
<Breadcrumb.Item>
94+
<div css={styles.navLink} onClick={props.onBack}>
95+
&lt; Back to Tutorials
96+
</div>
97+
</Breadcrumb.Item>
98+
</Breadcrumb>
99+
</div> */}
100+
<h1 css={styles.title}>{props.tutorial.summary.title}</h1>
101+
<h3>{props.tutorial.summary.description}</h3>
102+
{/* <h5 css={styles.meta}>
95103
<div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
96104
<div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
97105
</h5> */}
98-
</div>
99-
<div>
100-
<div css={styles.levelList}>
101-
<h2>Content</h2>
102-
{props.levels.map((level: TT.Level, index: number) => (
103-
<div key={index}>
104-
<h3>
105-
{index + 1}. {level.title}
106-
</h3>
107-
<div css={styles.levelSummary}>
108-
<Markdown>{level.summary}</Markdown>
106+
</div>
107+
<div>
108+
<div css={styles.levelList}>
109+
<h2>Content</h2>
110+
{props.tutorial.levels.map((level: TT.Level, index: number) => (
111+
<div key={index}>
112+
<h3>
113+
{index + 1}. {level.title}
114+
</h3>
115+
<div css={styles.levelSummary}>
116+
<Markdown>{level.summary}</Markdown>
117+
</div>
109118
</div>
110-
</div>
111-
))}
119+
))}
120+
</div>
112121
</div>
113122
</div>
114-
</div>
115123

116-
<div css={styles.footer}>
117-
{/* TODO Add back button */}
118-
<Button type="primary" onClick={props.onNext}>
119-
Start
120-
</Button>
124+
<div css={styles.footer}>
125+
{/* TODO Add back button */}
126+
<Button type="primary" onClick={onNext}>
127+
Start
128+
</Button>
129+
</div>
121130
</div>
122-
</div>
123-
)
131+
)
132+
}
124133

125134
export default Summary

‎web-app/src/containers/Overview/index.tsx‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

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

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,18 @@ import * as T from 'typings'
33
import * as TT from 'typings/tutorial'
44
import { Form, Select } from '@alifd/next'
55
import useFetch from '../../services/hooks/useFetch'
6+
import TutorialOverview from '../../components/TutorialOverview'
67

78
const FormItem = Form.Item
89
const Option = Select.Option
910

11+
const styles = {
12+
page: {},
13+
header: {
14+
padding: '1rem',
15+
},
16+
}
17+
1018
interface ContainerProps {
1119
send(action: T.Action): void
1220
context: T.MachineContext
@@ -18,17 +26,21 @@ interface TutorialsData {
1826

1927
interface GitHubFetchProps {
2028
url: string
29+
send: any
2130
}
2231

23-
const GitHubFetch = ({ url }: GitHubFetchProps) => {
24-
const { data, error, loading } = useFetch(url)
32+
const GitHubFetch = ({ url, send }: GitHubFetchProps) => {
33+
const { data, error, loading } = useFetch<TT.Tutorial>(url)
2534
if (loading) {
2635
return <div>Loading...</div>
2736
}
2837
if (error) {
2938
return <div>{JSON.stringify(error)}</div>
3039
}
31-
return <div>{JSON.stringify(data)}</div>
40+
if (!data) {
41+
return <div>No data returned</div>
42+
}
43+
return <TutorialOverview send={send} tutorial={data} />
3244
}
3345

3446
const tutorials = [
@@ -55,19 +67,21 @@ const SelectTutorialPage = ({ send }: Props) => {
5567
setUrl(value)
5668
}
5769
return (
58-
<div>
59-
<Form style={{ maxWidth: '500px' }}>
60-
<FormItem label="Select Tutorial:">
61-
<Select onChange={handleUrlChange} style={{ width: '100%' }}>
62-
{tutorials.map((tutorial) => (
63-
<Option key={tutorial.id} value={tutorial.configUrl}>
64-
{tutorial.title}
65-
</Option>
66-
))}
67-
</Select>
68-
</FormItem>
69-
</Form>
70-
{url && <GitHubFetch url={url} />}
70+
<div css={styles.page}>
71+
<div css={styles.header}>
72+
<Form style={{ maxWidth: '500px' }}>
73+
<FormItem label="Select Tutorial:">
74+
<Select onChange={handleUrlChange} style={{ width: '100%' }}>
75+
{tutorials.map((tutorial) => (
76+
<Option key={tutorial.id} value={tutorial.configUrl}>
77+
{tutorial.title}
78+
</Option>
79+
))}
80+
</Select>
81+
</FormItem>
82+
</Form>
83+
</div>
84+
{url && <GitHubFetch url={url} send={send} />}
7185
</div>
7286
)
7387
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const LevelSummaryPageContainer = (props: PageProps) => {
3434
steps: Array<TT.Step & { status: T.ProgressStatus }>
3535
} = {
3636
...levelData,
37-
index: tutorial.data.levels.findIndex((l: TT.Level) => l.id === position.levelId),
37+
index: tutorial.levels.findIndex((l: TT.Level) => l.id === position.levelId),
3838
status: progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE',
3939
steps: levelData.steps.map((step: TT.Step) => {
4040
// label step status for step component

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22

3-
const useFetch = (url: string, options?: object) => {
3+
const useFetch = <T>(url: string, options?: object): { data: T | null; error: string | null; loading: boolean } => {
44
const [data, setData] = React.useState(null)
55
const [error, setError] = React.useState(null)
66
const [loading, setLoading] = React.useState(true)

0 commit comments

Comments
 (0)