8000 Merge pull request #21 from ShMcK/feature/loading · coderoad/coderoad-vscode@4de910f · GitHub
[go: up one dir, main page]
Skip to content

Commit 4de910f

Browse files
ShMcKShMcK
authored
Merge pull request #21 from ShMcK/feature/loading
Feature/loading
2 parents 773a72c + 4198aa8 commit 4de910f

File tree

14 files changed

+135
-39
lines changed

14 files changed

+135
-39
lines changed

‎web-app/src/Routes.tsx

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import * as React from 'react'
22

3-
import Cond from './components/Cond'
4-
import Loading from './components/Loading'
3+
import Router from './components/Router'
4+
import LoadingPage from './containers/LoadingPage'
55
import ContinuePage from './containers/Continue'
66
import NewPage from './containers/New'
77
import TutorialPage from './containers/Tutorial'
88

9+
const { Route } = Router
10+
911
interface Props {
1012
state: any
1113
}
@@ -37,21 +39,22 @@ const Routes = ({ state }: Props) => {
3739
}
3840
})
3941

40-
// TODO: refactor cond to user <Router><Route> and accept first route as if/else if
4142
return (
4243
<div style={{ ...styles.page, ...dimensions }}>
43-
<Cond state={state} path="SelectTutorial.Startup">
44-
<Loading />
45-
</Cond>
46-
<Cond state={state} path="SelectTutorial.NewTutorial">
47-
<NewPage />
48-
</Cond>
49-
<Cond state={state} path="SelectTutorial.ContinueTutorial">
50-
<ContinuePage />
51-
</Cond>
52-
<Cond state={state} path="Tutorial">
53-
<TutorialPage state={state} />
54-
</Cond>
44+
<Router state={state}>
45+
<Route path="SelectTutorial.Startup">
46+
<LoadingPage text="Launching..." />
47+
</Route>
48+
<Route path="SelectTutorial.NewTutorial">
49+
<NewPage />
50+
</Route>
51+
<Route path="SelectTutorial.ContinueTutorial">
52+
<ContinuePage />
53+
</Route>
54+
<Route path="Tutorial">
55+
<TutorialPage state={state} />
56+
</Route>
57+
</Router>
5558
</div>
5659
)
5760
}

‎web-app/src/components/Cond/utils/state.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export function stateMatch(state: any, statePath: string) {
22
let current = state
3-
let paths = statePath.split('.')
3+
const paths = statePath.split('.')
44
let complete = false
55
try {
66
for (const p of paths) {

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import * as React from 'react'
2+
import { Loading } from '@alifd/next'
23

3-
const Loading = () => {
4-
return <div>Loading...</div>
4+
interface Props {
5+
text: string
56
}
67

7-
export default Loading
8+
const LoadingComponent = ({ text }: Props) => {
9+
return <Loading tip={text} />
10+
}
11+
12+
export default LoadingComponent

‎web-app/src/components/Router/Route.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import * as React from 'react'
2+
3+
interface Props {
4+
children: any
5+
path: string
6+
}
7+
8+
const Route = ({ children }: Props) => children
9+
10+
export default Route

‎web-app/src/components/Router/index.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react'
2+
import Route from './Route'
3+
import { stateMatch } from '../Cond/utils/state'
4+
5+
interface Props {
6+
state: string
7+
children: any
8+
}
9+
10+
// router finds first state match of <Route path='' />
11+
const Router = ({ state, children }: Props) => {
12+
const childArray = React.Children.toArray(children)
13+
for (const child of childArray) {
14+
if (stateMatch(state, child.props.path)) {
15+
return child.props.children
16+
}
17+
}
18+
console.warn(`No Route matches for ${state}`)
19+
return null
20+
}
21+
22+
Router.Route = Route
23+
24+
export default Router

‎web-app/src/containers/LoadingPage.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react'
2+
import Loading from '../components/Loading'
3+
4+
interface Props {
5+
text: string
6+
}
7+
8+
const styles = {
9+
page: {
10+
display: 'flex',
11+
alignItems: 'center',
12+
justifyContent: 'center',
13+
width: '100%',
14+
height: '100%',
15+
},
16+
}
17+
18+
const LoadingPage = ({ text }: Props) => (
19+
<div style={styles.page}>
20+
<Loading text={text} />
21+
</div>
22+
)
23+
24+
export default LoadingPage

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import * as React from 'react'
22
import { Button } from '@alifd/next'
3+
34
import Cond from '../../components/Cond'
45
import DataContext from '../../utils/DataContext'
56
import { send } from '../../utils/vscode'
7+
import LoadingPage from '../../containers/LoadingPage'
68

79
interface Props {
810
onNew(tutorialId: string): void
@@ -27,7 +29,7 @@ export const NewPage = (props: Props) => {
2729
</div>
2830
</Cond>
2931
<Cond state={state} path="SelectTutorial.NewTutorial.InitializeTutorial">
30-
<div>Initializing tutorial...</div>
32+
<LoadingPage text="Launching Tutorial..." />
3133
</Cond>
3234
</div>
3335
)

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Level from '../../components/Level'
44

55
interface LevelProps {
66
send(action: string): void
7-
state: any
87
}
98

109
const LevelPage = (props: LevelProps) => {

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import DataContext from '../../utils/DataContext'
33
import Stage from '../../components/Stage'
44

55
interface PageProps {
6-
state: any
76
send(action: string): void
87
}
98

‎web-app/src/containers/Tutorial/SummaryPage.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Summary from '../../components/Summary'
44

55
interface PageProps {
66
send(action: string): void
7-
state: any
87
}
98

109
const SummaryPage = (props: PageProps) => {

0 commit comments

Comments
 (0)
0