File tree Expand file tree Collapse file tree 6 files changed +87
-28
lines changed Expand file tree Collapse file tree 6 files changed +87
-28
lines changed Original file line number Diff line number Diff line change 11import * 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 '
55import ContinuePage from './containers/Continue'
66import NewPage from './containers/New'
77import TutorialPage from './containers/Tutorial'
88
9+ const { Route } = Router
10+
911interface Props {
1012 state : any
1113}
@@ -40,18 +42,20 @@ const Routes = ({ state }: Props) => {
4042 // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
4143 return (
4244 < 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 >
45+ < Router state = { state } >
46+ < Route path = "SelectTutorial.Startup" >
47+ < LoadingPage text = "Launching..." />
48+ </ Route >
49+ < Route path = "SelectTutorial.NewTutorial" >
50+ < NewPage />
51+ </ Route >
52+ < Route path = "SelectTutorial.ContinueTutorial" >
53+ < ContinuePage />
54+ </ Route >
55+ < Route path = "Tutorial" >
56+ < TutorialPage state = { state } />
57+ </ Route >
58+ </ Router >
5559 </ div >
5660 )
5761}
Original file line number Diff line number Diff line change 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
Original file line number Diff line number Diff line change 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+ return null
19+ }
20+
21+ Router . Route = Route
22+
23+ export default Router
Original file line number Diff line number Diff line change 11import * as React from 'react'
22import { Button } from '@alifd/next'
3+
34import Cond from '../../components/Cond'
45import DataContext from '../../utils/DataContext'
56import { send } from '../../utils/vscode'
7+ import LoadingPage from '../../containers/LoadingPage'
68
79interface 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 )
Original file line number Diff line number Diff line change 11import * as React from 'react'
22import { send } from '../../utils/vscode'
33
4- import Cond from '../../components/Cond '
5- import Loading from '../../components/Loading '
4+ import Router from '../../components/Router '
5+ import LoadingPage from '../LoadingPage '
66import SummaryPage from './SummaryPage'
77import LevelPage from './LevelPage'
88import StagePage from './StagePage'
99
10+ const { Route } = Router
11+
1012interface Props {
1113 state : any
1214}
1315
1416const Tutorial = ( props : Props ) => {
1517 return (
16- < div >
17- < Cond state = { props . state } path = "Tutorial.LoadNext" >
18- < Loading />
19- </ Cond >
20- < Cond state = { props . state } path = "Tutorial.Summary" >
18+ < Router state = { props . state } >
19+ < Route path = "Tutorial.LoadNext" >
20+ < LoadingPage text = " Loading Tutorial..." />
21+ </ Route >
22+ < Route path = "Tutorial.Summary" >
2123 < SummaryPage state = { props . state } send = { send } />
22- </ Cond >
23- < Cond state = { props . state } path = "Tutorial.Level" >
24+ </ Route >
25+ < Route path = "Tutorial.Level" >
2426 < LevelPage state = { props . state } send = { send } />
25- </ Cond >
26- < Cond state = { props . state } path = "Tutorial.Stage" >
27+ </ Route >
28+ < Route path = "Tutorial.Stage" >
2729 < StagePage state = { props . state } send = { send } />
28- </ Cond >
29- </ div >
30+ </ Route >
31+ </ Router >
3032 )
3133}
3234
Original file line number Diff line number Diff line change 1+ import React from 'react'
2+
3+ import { storiesOf } from '@storybook/react'
4+ import SideBarDecorator from './utils/SideBarDecorator'
5+
6+ import Router from '../src/components/Router'
7+
8+ const { Route } = Router
9+
10+ storiesOf ( 'Components' , module )
11+ . addDecorator ( SideBarDecorator )
12+ . add ( 'Router' , ( ) => (
13+ < Router state = "Third" >
14+ < Route path = "First" > First</ Route >
15+ < Route path = "Second" > Second</ Route >
16+ < Route path = "Third" > Third</ Route >
17+ </ Router >
18+ ) )
You can’t perform that action at this time.
0 commit comments