Skip to content

Commit 17fa85f

Browse files
ShMcKShMcK
committed
refactor starting pages
1 parent 18973c4 commit 17fa85f

File tree

11 files changed

+88
-42
lines changed

11 files changed

+88
-42
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 & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,13 @@ export interface MachineEvent {
6666

6767
export interface MachineStateSchema {
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: {}

‎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 * as React from 'react'
22
import useRouter from './components/Router'
33
import Workspace from './components/Workspace'
4-
import ContinuePage from './containers/Continue'
5-
import LoadingPage from './containers/LoadingPage'
4+
import LoadingPage from './containers/Loading'
5+
import StartPage from './containers/Start'
66
import NewPage from './containers/New'
77
import OverviewPage from './containers/Overview'
88
import CompletedPage from './containers/Tutorial/CompletedPage'
@@ -13,26 +13,26 @@ const Routes = () => {
1313
return (
1414
<Workspace>
1515
<Router>
16-
{/* Start */}
17-
<Route path={['Start.Startup', 'Start.Authenticate', 'Start.NewOrContinue']}>
16+
{/* Setup */}
17+
<Route path={['Setup.Startup', 'Setup.Authenticate', 'Setup.LoadStoredTutorial']}>
1818
<LoadingPage text="Launching..." context={context} />
1919
</Route>
20-
<Route path="Start.ContinueTutorial">
21-
<ContinuePage send={send} context={context} />
20+
<Route path="Setup.Start">
21+
<StartPage send={send} context={context} />
2222
</Route>
23-
<Route path={['Start.LoadTutorialSummary', 'Start.LoadTutorialData', 'Start.SetupNewTutorial']}>
23+
<Route path={['Setup.LoadTutorialSummary', 'Setup.LoadTutorialData', 'Setup.SetupNewTutorial']}>
2424
<LoadingPage text="Loading Tutorial..." context={context} />
2525
</Route>
26-
<Route path="Start.Error">
26+
<Route path="Setup.Error">
2727
<LoadingPage text="Error" context={context} />
2828
</Route>
29-
<Route path="Start.SelectTutorial">
29+
<Route path="Setup.SelectTutorial">
3030
<NewPage send={send} context={context} />
3131
</Route>
32-
<Route path="Start.Summary">
32+
<Route path="Setup.Summary">
3333
<OverviewPage send={send} context={context} />
3434
</Route>
35-
<Route path="Start.SetupNewTutorial">
35+
<Route path="Setup.SetupNewTutorial">
3636
<LoadingPage text="Configuring tutorial..." context={context} />
3737
</Route>
3838
{/* Tutorial */}

‎web-app/src/containers/LoadingPage.tsx‎ renamed 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 * as React from 'react'
22
import * as T from 'typings'
33
import { css, jsx } from '@emotion/core'
4-
import Loading from '../components/Loading'
5-
import Message from '../components/Message'
4+
import Loading from '../../components/Loading'
5+
import Message from '../../components/Message'
66

77
interface Props {
88
text: string

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import * as React from 'react'
2+
import * as T from 'typings'
3+
import { css, jsx } from '@emotion/core'
4+
import Loading from '../../components/Loading'
5+
import Message from '../../components/Message'
6+
7+
interface Props {
8+
text: string
9+
context: T.MachineContext
10+
}
11+
12+
const styles = {
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+
const LoadingPage = ({ text, context }: Props) => {
24+
const { error } = context
25+
if (error) {
26+
return (
27+
<div css={styles.page}>
28+
<Message type="error" title={error.title} content={error.description} />
29+
</div>
30+
)
31+
}
32+
return (
33+
<div css={styles.page}>
34+
<Loading text={text} />
35+
</div>
36+
)
37+
}
38+
39+
export default LoadingPage

‎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 * as G from 'typings/graphql'
55
import ErrorView from '../../components/Error'
66
import queryTutorials from '../../services/apollo/queries/tutorials'
7-
import LoadingPage from '../LoadingPage'
7+
import LoadingPage from '../Loading'
88
import NewPage from './NewPage'
99

1010
interface ContainerProps {

‎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
import ErrorView from '../../components/Error'
66
import queryTutorial from '../../services/apollo/queries/tutorial'
77
import OverviewPage from './OverviewPage'
8-
import LoadingPage from '../../containers/LoadingPage'
8+
import LoadingPage from '../Loading'
99

1010
interface PageProps {
1111
context: CR.MachineContext

‎web-app/src/containers/Launch/index.tsx‎ renamed to ‎web-app/src/containers/Start/index.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,19 @@ import * as G from 'typings/graphql'
44
import { Badge } from '@alifd/next'
55
import { css, jsx } from '@emotion/core'
66
import Button from '../../components/Button'
7-
import Card from '../../components/Card'
87

98
const styles = {
109
page: {
1110
position: 'relative' as 'relative',
12-
display: 'flex',
13-
flexDirection: 'column',
11+
display: 'flex' as 'flex',
12+
flexDirection: 'column' as 'column',
1413
width: '100%',
1514
height: window.innerHeight,
1615
},
1716
header: {
1817
flex: 1,
1918
display: 'flex' as 'flex',
20-
flexDirection: 'column',
19+
flexDirection: 'column' as 'column',
2120
justifyContent: 'flex-end' as 'flex-end',
2221
alignItems: 'center' as 'center',
2322
backgroundColor: '#EBEBEB',
@@ -54,7 +53,7 @@ interface Props {
5453
tutorial?: G.Tutorial
5554
}
5655

57-
export const LaunchPage = (props: Props) => (
56+
export const StartPage = (props: Props) => (
5857
<div css={styles.page}>
5958
<div css={styles.header}>
6059
<Badge content="beta" style={styles.betaBadge}>
@@ -85,11 +84,11 @@ interface ContainerProps {
8584
send(action: CR.Action | string): void
8685
}
8786

88-
const LaunchPageContainer = ({ context, send }: ContainerProps) => {
89-
const { tutorial } = context
87+
const StartPageContainer = ({ context, send }: ContainerProps) => {
88+
const tutorial = context.tutorial || undefined
9089
return (
91-
<LaunchPage onContinue={() => send('TUTORIAL_START')} onNew={() => send('TUTORIAL_SELECT')} tutorial={tutorial} />
90+
<StartPage onContinue={() => send('TUTORIAL_START')} onNew={() => send('TUTORIAL_SELECT')} tutorial={tutorial} />
9291
)
9392
}
9493

95-
export default LaunchPageContainer
94+
export default StartPageContainer

‎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
return event.payload.tutorial
2122
},
2223
progress: (context: T.MachineContext, event: T.MachineEvent) => {

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const createMachine = (options: any) => {
1616
return Machine<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,13 +56,19 @@ 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: {
71+
CONTINUE_TUTORIAL: 'ContinueTutorial',
6672
NEW_TUTORIAL: 'SelectTutorial',
6773
},
6874
},

0 commit comments

Comments
 (0)