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

Commit34aff91

Browse files
authored
Merge pull request#135 from ShMcK/feature/launch-page
Closes#95. Feature/launch page
2 parentsd9e5d45 +ca6198e commit34aff91

File tree

13 files changed

+208
-41
lines changed

13 files changed

+208
-41
lines changed

‎src/channel/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ class Channel implements Channel {
5757

5858
// new tutorial
5959
if(!tutorial||!tutorial.id||!tutorial.version){
60-
this.send({type:'NEW_TUTORIAL'})
60+
this.send({type:'START_NEW_TUTORIAL'})
6161
return
6262
}
6363

@@ -66,12 +66,12 @@ class Channel implements Channel {
6666

6767
if(progress.complete){
6868
// tutorial is already complete
69-
this.send({type:'NEW_TUTORIAL'})
69+
this.send({type:'START_NEW_TUTORIAL'})
7070
return
7171
}
72-
72+
console.log('send LOAD_STORED_TUTORIAL')
7373
// communicate to client the tutorial & stepProgress state
74-
this.send({type:'CONTINUE_TUTORIAL',payload:{ tutorial, progress, position}})
74+
this.send({type:'LOAD_STORED_TUTORIAL',payload:{ tutorial, progress, position}})
7575

7676
return
7777
// clear tutorial local storage

‎typings/index.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,18 +66,18 @@ export interface MachineEvent {
6666

6767
exportinterfaceMachineStateSchema{
6868
states:{
69-
Start:{
69+
Setup:{
7070
states:{
7171
Startup:{}
7272
Authenticate:{}
7373
Error:{}
74-
NewOrContinue:{}
74+
LoadStoredTutorial:{}
75+
Start:{}
7576
SelectTutorial:{}
7677
LoadTutorialSummary:{}
7778
Summary:{}
7879
LoadTutorialData:{}
7980
SetupNewTutorial:{}
80-
ContinueTutorial:{}
8181
}
8282
}
8383
Tutorial:{

‎web-app/src/Routes.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import*asReactfrom'react'
22
importuseRouterfrom'./components/Router'
33
importWorkspacefrom'./components/Workspace'
4-
importContinuePagefrom'./containers/Continue'
5-
importLoadingPagefrom'./containers/LoadingPage'
4+
importLoadingPagefrom'./containers/Loading'
5+
importStartPagefrom'./containers/Start'
66
importNewPagefrom'./containers/New'
77
importOverviewPagefrom'./containers/Overview'
88
importCompletedPagefrom'./containers/Tutorial/CompletedPage'
@@ -13,26 +13,26 @@ const Routes = () => {
1313
return(
1414
<Workspace>
1515
<Router>
16-
{/*Start */}
17-
<Routepath={['Start.Startup','Start.Authenticate','Start.NewOrContinue']}>
16+
{/*Setup */}
17+
<Routepath={['Setup.Startup','Setup.Authenticate','Setup.LoadStoredTutorial']}>
1818
<LoadingPagetext="Launching..."context={context}/>
1919
</Route>
20-
<Routepath="Start.ContinueTutorial">
21-
<ContinuePagesend={send}context={context}/>
20+
<Routepath="Setup.Start">
21+
<StartPagesend={send}context={context}/>
2222
</Route>
23-
<Routepath={['Start.LoadTutorialSummary','Start.LoadTutorialData','Start.SetupNewTutorial']}>
23+
<Routepath={['Setup.LoadTutorialSummary','Setup.LoadTutorialData','Setup.SetupNewTutorial']}>
2424
<LoadingPagetext="Loading Tutorial..."context={context}/>
2525
</Route>
26-
<Routepath="Start.Error">
26+
<Routepath="Setup.Error">
2727
<LoadingPagetext="Error"context={context}/>
2828
</Route>
29-
<Routepath="Start.SelectTutorial">
29+
<Routepath="Setup.SelectTutorial">
3030
<NewPagesend={send}context={context}/>
3131
</Route>
32-
<Routepath="Start.Summary">
32+
<Routepath="Setup.Summary">
3333
<OverviewPagesend={send}context={context}/>
3434
</Route>
35-
<Routepath="Start.SetupNewTutorial">
35+
<Routepath="Setup.SetupNewTutorial">
3636
<LoadingPagetext="Configuring tutorial..."context={context}/>
3737
</Route>
3838
{/* Tutorial */}

‎web-app/src/containers/LoadingPage.tsxrenamed to‎web-app/src/containers/Loading/LoadingPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
33
import{css,jsx}from'@emotion/core'
4-
importLoadingfrom'../components/Loading'
5-
importMessagefrom'../components/Message'
4+
importLoadingfrom'../../components/Loading'
5+
importMessagefrom'../../components/Message'
66

77
interfaceProps{
88
text:string
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import*asReactfrom'react'
2+
import*asTfrom'typings'
3+
import{css,jsx}from'@emotion/core'
4+
importLoadingfrom'../../components/Loading'
5+
importMessagefrom'../../components/Message'
6+
7+
interfaceProps{
8+
text:string
9+
context:T.MachineContext
10+
}
11+
12+
conststyles={
13+
page:{
14+
position:'relative'as'relative',
15+
display:'flex',
16+
flexDirection:'column'as'column',
17+
alignItems:'center',
18+
justifyContent:'center',
19+
width:'100%',
20+
},
21+
}
22+
23+
constLoadingPage=({ text, context}:Props)=>{
24+
const{ error}=context
25+
if(error){
26+
return(
27+
<divcss={styles.page}>
28+
<Messagetype="error"title={error.title}content={error.description}/>
29+
</div>
30+
)
31+
}
32+
return(
33+
<divcss={styles.page}>
34+
<Loadingtext={text}/>
35+
</div>
36+
)
37+
}
38+
39+
exportdefaultLoadingPage

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as T from 'typings'
44
import*asGfrom'typings/graphql'
55
importErrorViewfrom'../../components/Error'
66
importqueryTutorialsfrom'../../services/apollo/queries/tutorials'
7-
importLoadingPagefrom'../LoadingPage'
7+
importLoadingPagefrom'../Loading'
88
importNewPagefrom'./NewPage'
99

1010
interfaceContainerProps{

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import * as G from 'typings/graphql'
55
importErrorViewfrom'../../components/Error'
66
importqueryTutorialfrom'../../services/apollo/queries/tutorial'
77
importOverviewPagefrom'./OverviewPage'
8-
importLoadingPagefrom'../../containers/LoadingPage'
8+
importLoadingPagefrom'../Loading'
99

1010
interfacePageProps{
1111
context:CR.MachineContext
Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import*asReactfrom'react'
2+
import*asCRfrom'typings'
3+
import*asGfrom'typings/graphql'
4+
import{Badge}from'@alifd/next'
5+
import{css,jsx}from'@emotion/core'
6+
importButtonfrom'../../components/Button'
7+
8+
conststyles={
9+
page:{
10+
position:'relative'as'relative',
11+
display:'flex'as'flex',
12+
flexDirection:'column'as'column',
13+
width:'100%',
14+
height:window.innerHeight,
15+
},
16+
header:{
17+
flex:1,
18+
display:'flex'as'flex',
19+
flexDirection:'column'as'column',
20+
justifyContent:'flex-end'as'flex-end',
21+
alignItems:'center'as'center',
22+
fontSize:'1rem',
23+
lineHeight:'1rem',
24+
padding:'1rem',
25+
},
26+
title:{
27+
fontSize:'3rem',
28+
},
29+
subtitle:{
30+
fontSize:'1.3rem',
31+
},
32+
options:{
33+
flex:1,
34+
backgroundColor:'#EBEBEB',
35+
display:'flex'as'flex',
36+
flexDirection:'column'as'column',
37+
justifyContent:'flex-start'as'flex-start',
38+
alignItems:'center'as'center',
39+
padding:'1rem',
40+
},
41+
betaBadge:{
42+
backgroundColor:'#6a67ce',
43+
color:'#FFFFFF',
44+
},
45+
buttonContainer:{
46+
margin:'0.5rem',
47+
},
48+
}
49+
50+
interfaceProps{
51+
onContinue():void
52+
onNew():void
53+
tutorial?:G.Tutorial
54+
}
55+
56+
exportconstStartPage=(props:Props)=>(
57+
<divcss={styles.page}>
58+
<divcss={styles.header}>
59+
<Badgecontent="beta"style={styles.betaBadge}>
60+
<spancss={styles.title}>CodeRoad&nbsp;</span>
61+
</Badge>
62+
<h3css={styles.subtitle}>Play Interactive Coding Tutorials in VSCode</h3>
63+
</div>
64+
65+
<divcss={styles.options}>
66+
<divcss={styles.buttonContainer}>
67+
<Buttonsize="large"type="primary"onClick={props.onNew}style={{width:'12rem'}}>
68+
New Tutorial
69+
</Button>
70+
</div>
71+
{props.tutorial&&(
72+
<divcss={styles.buttonContainer}>
73+
<Buttonsize="large"onClick={props.onContinue}style={{width:'12rem'}}>
74+
Continue "{props.tutorial.summary.title}"
75+
</Button>
76+
</div>
77+
)}
78+
</div>
79+
</div>
80+
)
81+
82+
interfaceContainerProps{
83+
context:CR.MachineContext
84+
send(action:CR.Action|string):void
85+
}
86+
87+
constStartPageContainer=({ context, send}:ContainerProps)=>{
88+
consttutorial=context.tutorial||undefined
89+
return(
90+
<StartPageonContinue={()=>send('CONTINUE_TUTORIAL')}onNew={()=>send('NEW_TUTORIAL')}tutorial={tutorial}/>
91+
)
92+
}
93+
94+
exportdefaultStartPageContainer

‎web-app/src/services/state/actions/context.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ const contextActions: ActionFunctionMap<T.MachineContext, T.MachineEvent> = {
1515
},
1616
}),
1717
//@ts-ignore
18-
continueTutorial:assign({
18+
storeContinuedTutorial:assign({
1919
tutorial:(context:T.MachineContext,event:T.MachineEvent)=>{
20+
console.log('storeContinuedTutorial')
2021
returnevent.payload.tutorial
2122
},
2223
progress:(context:T.MachineContext,event:T.MachineEvent)=>{

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const createMachine = (options: any) => {
1616
returnMachine<CR.MachineContext,CR.MachineStateSchema,CR.MachineEvent>(
1717
{
1818
id:'root',
19-
initial:'Start',
19+
initial:'Setup',
2020
context:{
2121
error:null,
2222
env:{machineId:'',sessionId:'',token:''},
@@ -31,7 +31,7 @@ export const createMachine = (options: any) => {
3131
testStatus:null,
3232
},
3333
states:{
34-
Start:{
34+
Setup:{
3535
initial:'Startup',
3636
states:{
3737
Startup:{
@@ -46,7 +46,7 @@ export const createMachine = (options: any) => {
4646
Authenticate:{
4747
invoke:{
4848
src:services.authenticate,
49-
onDone:'NewOrContinue',
49+
onDone:'LoadStoredTutorial',
5050
onError:{
5151
target:'Error',
5252
actions:assign({
@@ -56,14 +56,23 @@ export const createMachine = (options: any) => {
5656
},
5757
},
5858
Error:{},
59-
NewOrContinue:{
59+
LoadStoredTutorial:{
6060
onEntry:['loadStoredTutorial'],
6161
on:{
62-
CONTINUE_TUTORIAL:{
63-
target:'ContinueTutorial',
64-
actions:['continueTutorial'],
62+
LOAD_STORED_TUTORIAL:{
63+
target:'Start',
64+
actions:['storeContinuedTutorial'],
6565
},
66+
START_NEW_TUTORIAL:'Start',
67+
},
68+
},
69+
Start:{
70+
on:{
6671
NEW_TUTORIAL:'SelectTutorial',
72+
CONTINUE_TUTORIAL:{
73+
target:'#tutorial-level',
74+
actions:['continueConfig'],
75+
},
6776
},
6877
},
6978
SelectTutorial:{
@@ -123,15 +132,6 @@ export const createMachine = (options: any) => {
123132
TUTORIAL_CONFIGURED:'#tutorial',
124133
},
125134
},
126-
ContinueTutorial:{
127-
on:{
128-
TUTORIAL_START:{
129-
target:'#tutorial-level',
130-
actions:['continueConfig'],
131-
},
132-
TUTORIAL_SELECT:'SelectTutorial',
133-
},
134-
},
135135
},
136136
},
137137
Tutorial:{

‎web-app/stories/Loading.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import{storiesOf}from'@storybook/react'
22
importReactfrom'react'
3-
importLoadingPagefrom'../src/containers/LoadingPage'
3+
importLoadingPagefrom'../src/containers/Loading'
44
importSideBarDecoratorfrom'./utils/SideBarDecorator'
55

66
storiesOf('Components',module)

‎web-app/stories/New.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const tutorialList = [
2323
},
2424
]
2525

26-
storiesOf('Start',module)
26+
storiesOf('Select Tutorial',module)
2727
.addDecorator(SideBarDecorator)
2828
.add('New Page',()=>{
2929
return<NewPagetutorialList={tutorialList}/>

‎web-app/stories/Start.stories.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import{storiesOf}from'@storybook/react'
2+
import{action}from'@storybook/addon-actions'
3+
importReactfrom'react'
4+
import{css,jsx}from'@emotion/core'
5+
importSideBarDecoratorfrom'./utils/SideBarDecorator'
6+
importStartPagefrom'../src/containers/Start'
7+
8+
conststyles={
9+
container:{},
10+
}
11+
12+
storiesOf('Start',module)
13+
.addDecorator(SideBarDecorator)
14+
.add('New',()=>{
15+
return(
16+
<divcss={styles.container}>
17+
<StartPagesend={action('send')}context={{}}/>
18+
</div>
19+
)
20+
})
21+
.add('Continue',()=>{
22+
consttutorial={
23+
summary:{
24+
title:'Tutorial Title',
25+
summary:'Tutorial Summary',
26+
},
27+
}
28+
return(
29+
<divcss={styles.container}>
30+
<StartPagesend={action('send')}context={{ tutorial}}/>
31+
</div>
32+
)
33+
})

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp