Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6ca0fbb

Browse files
committed
select tutorial from dropdown
1 parentc206899 commit6ca0fbb

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-
consttutorialData:TT.Tutorial=action.payload.tutorial
84+
constdata:TT.Tutorial=action.payload.tutorial
8585
// setup tutorial config (save watcher, test runner, etc)
86-
this.context.setTutorial(this.workspaceState,tutorialData)
87-
88-
constdata:TT.TutorialData=tutorialData.data
86+
this.context.setTutorial(this.workspaceState,data)
8987

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

@@ -97,7 +95,7 @@ class Channel implements Channel {
9795
if(!tutorialContinue){
9896
thrownewError('Invalid tutorial to continue')
9997
}
100-
constcontinueConfig:TT.TutorialConfig=tutorialContinue.data.config
98+
constcontinueConfig:TT.TutorialConfig=tutorialContinue.config
10199
awaittutorialConfig(
102100
{
103101
config:continueConfig,
@@ -148,7 +146,7 @@ class Channel implements Channel {
148146
thrownewError('Error with current tutorial')
149147
}
150148
// update local storage stepProgress
151-
constprogress=this.context.progress.setStepComplete(tutorial.data,action.payload.stepId)
149+
constprogress=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
returnthis.value
3030
}
3131

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

3636
// get level
37-
const{ levels}=tutorial.data
37+
const{ levels}=tutorial
3838
constlastLevelIndex:number|undefined=levels.findIndex((l:TT.Level)=>!progress.levels[l.id])
3939
if(lastLevelIndex>=levels.length){
4040
thrownewError('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
publicreset=()=>{
4040
this.set(defaultValue)
4141
}
42-
publicsetStepComplete=(tutorialData:TT.TutorialData,stepId:string):T.Progress=>{
42+
publicsetStepComplete=(tutorial:TT.Tutorial,stepId:string):T.Progress=>{
4343
constnext=this.value
4444
// mark step complete
4545
next.steps[stepId]=true
4646

47-
constcurrentLevel=tutorialData.levels.find((l)=>l.steps.find((s)=>s.id===stepId))
47+
constcurrentLevel=tutorial.levels.find((l)=>l.steps.find((s)=>s.id===stepId))
4848
if(!currentLevel){
4949
thrownewError(`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-
exporttypeTutorialData={
46-
config:TutorialConfig
47-
levels:Array<Level>
48-
}
49-
5045
exporttypeStepActions={
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
importLoadingPagefrom'./containers/Loading'
55
importStartPagefrom'./containers/Start'
66
importSelectTutorialPagefrom'./containers/SelectTutorial'
7-
importOverviewPagefrom'./containers/Overview'
7+
importOverviewPagefrom'./components/TutorialOverview'
88
importCompletedPagefrom'./containers/Tutorial/CompletedPage'
99
importLevelSummaryPagefrom'./containers/Tutorial/LevelPage'
1010
importSelectEmptyWorkspacefrom'./containers/Check/SelectWorkspace'
@@ -33,9 +33,6 @@ const Routes = () => {
3333
<Routepath="Setup.SelectTutorial">
3434
<SelectTutorialPagesend={send}context={context}/>
3535
</Route>
36-
<Routepath="Setup.Summary">
37-
<OverviewPagesend={send}context={context}/>
38-
</Route>
3936
<Routepath="Setup.SetupNewTutorial">
4037
<LoadingPagetext="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*asReactfrom'react'
22
import*asTTfrom'typings/tutorial'
3-
importmomentfrom'moment'
4-
importButtonfrom'../../components/Button'
5-
importMarkdownfrom'../../components/Markdown'
3+
//import moment from 'moment'
4+
importButtonfrom'../Button'
5+
importMarkdownfrom'../Markdown'
66
import{Breadcrumb}from'@alifd/next'
77

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

7171
interfaceProps{
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-
constSummary=(props:Props)=>(
80-
<divcss={styles.page}>
81-
<divcss={styles.content}>
82-
<divcss={styles.header}>
83-
<divcss={styles.nav}>
84-
<Breadcrumbseparator="/">
85-
<Breadcrumb.Item>
86-
<divcss={styles.navLink}onClick={props.onBack}>
87-
&lt; Back to Tutorials
88-
</div>
89-
</Breadcrumb.Item>
90-
</Breadcrumb>
91-
</div>
92-
<h1css={styles.title}>{props.title}</h1>
93-
<h3>{props.description}</h3>
94-
{/* <h5 css={styles.meta}>
76+
constSummary=(props:Props)=>{
77+
constonNext=()=>
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+
<divcss={styles.page}>
89+
<divcss={styles.content}>
90+
<divcss={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+
<h1css={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-
<divcss={styles.levelList}>
101-
<h2>Content</h2>
102-
{props.levels.map((level:TT.Level,index:number)=>(
103-
<divkey={index}>
104-
<h3>
105-
{index+1}.{level.title}
106-
</h3>
107-
<divcss={styles.levelSummary}>
108-
<Markdown>{level.summary}</Markdown>
106+
</div>
107+
<div>
108+
<divcss={styles.levelList}>
109+
<h2>Content</h2>
110+
{props.tutorial.levels.map((level:TT.Level,index:number)=>(
111+
<divkey={index}>
112+
<h3>
113+
{index+1}.{level.title}
114+
</h3>
115+
<divcss={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-
<divcss={styles.footer}>
117-
{/* TODO Add back button */}
118-
<Buttontype="primary"onClick={props.onNext}>
119-
Start
120-
</Button>
124+
<divcss={styles.footer}>
125+
{/* TODO Add back button */}
126+
<Buttontype="primary"onClick={onNext}>
127+
Start
128+
</Button>
129+
</div>
121130
</div>
122-
</div>
123-
)
131+
)
132+
}
124133

125134
exportdefaultSummary

‎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*asTTfrom'typings/tutorial'
44
import{Form,Select}from'@alifd/next'
55
importuseFetchfrom'../../services/hooks/useFetch'
6+
importTutorialOverviewfrom'../../components/TutorialOverview'
67

78
constFormItem=Form.Item
89
constOption=Select.Option
910

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

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

23-
constGitHubFetch=({ url}:GitHubFetchProps)=>{
24-
const{ data, error, loading}=useFetch(url)
32+
constGitHubFetch=({ 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<TutorialOverviewsend={send}tutorial={data}/>
3244
}
3345

3446
consttutorials=[
@@ -55,19 +67,21 @@ const SelectTutorialPage = ({ send }: Props) => {
5567
setUrl(value)
5668
}
5769
return(
58-
<div>
59-
<Formstyle={{maxWidth:'500px'}}>
60-
<FormItemlabel="Select Tutorial:">
61-
<SelectonChange={handleUrlChange}style={{width:'100%'}}>
62-
{tutorials.map((tutorial)=>(
63-
<Optionkey={tutorial.id}value={tutorial.configUrl}>
64-
{tutorial.title}
65-
</Option>
66-
))}
67-
</Select>
68-
</FormItem>
69-
</Form>
70-
{url&&<GitHubFetchurl={url}/>}
70+
<divcss={styles.page}>
71+
<divcss={styles.header}>
72+
<Formstyle={{maxWidth:'500px'}}>
73+
<FormItemlabel="Select Tutorial:">
74+
<SelectonChange={handleUrlChange}style={{width:'100%'}}>
75+
{tutorials.map((tutorial)=>(
76+
<Optionkey={tutorial.id}value={tutorial.configUrl}>
77+
{tutorial.title}
78+
</Option>
79+
))}
80+
</Select>
81+
</FormItem>
82+
</Form>
83+
</div>
84+
{url&&<GitHubFetchurl={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*asReactfrom'react'
22

3-
constuseFetch=(url:string,options?:object)=>{
3+
constuseFetch=<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)
[8]ページ先頭
©2009-2025 Movatter.jp