create Router, Route

Author: ShMcK

web-app/src/Routes.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react'
 
-import Cond from './components/Cond'
-import Loading from './components/Loading'
+import Router from './components/Router'
+import LoadingPage from './containers/LoadingPage'
 import ContinuePage from './containers/Continue'
 import NewPage from './containers/New'
 import TutorialPage from './containers/Tutorial'
 
+const { Route } = Router
+
 interface Props {
   state: any
 }
@@ -40,18 +42,20 @@ const Routes = ({ state }: Props) => {
   // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
   return (
     <div style={{ ...styles.page, ...dimensions }}>
-      <Cond state={state} path="SelectTutorial.Startup">
-        <Loading />
-      </Cond>
-      <Cond state={state} path="SelectTutorial.NewTutorial">
-        <NewPage />
-      </Cond>
-      <Cond state={state} path="SelectTutorial.ContinueTutorial">
-        <ContinuePage />
-      </Cond>
-      <Cond state={state} path="Tutorial">
-        <TutorialPage state={state} />
-      </Cond>
+      <Router state={state}>
+        <Route path="SelectTutorial.Startup">
+          <LoadingPage text="Launching..." />
+        </Route>
+        <Route path="SelectTutorial.NewTutorial">
+          <NewPage />
+        </Route>
+        <Route path="SelectTutorial.ContinueTutorial">
+          <ContinuePage />
+        </Route>
+        <Route path="Tutorial">
+          <TutorialPage state={state} />
+        </Route>
+      </Router>
     </div>
   )
 }

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

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+interface Props {
+  children: any
+  path: string
+}
+
+const Route = ({ children }: Props) => children
+
+export default Route

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

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import Route from './Route'
+import { stateMatch } from '../Cond/utils/state'
+
+interface Props {
+  state: string
+  children: any
+}
+
+// router finds first state match of <Route path='' />
+const Router = ({ state, children }: Props) => {
+  const childArray = React.Children.toArray(children)
+  for (const child of childArray) {
+    if (stateMatch(state, child.props.path)) {
+      return child.props.children
+    }
+  }
+  return null
+}
+
+Router.Route = Route
+
+export default Router

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

@@ -1,8 +1,10 @@
 import * as React from 'react'
 import { Button } from '@alifd/next'
+
 import Cond from '../../components/Cond'
 import DataContext from '../../utils/DataContext'
 import { send } from '../../utils/vscode'
+import LoadingPage from '../../containers/LoadingPage'
 
 interface Props {
   onNew(tutorialId: string): void
@@ -27,7 +29,7 @@ export const NewPage = (props: Props) => {
         </div>
       </Cond>
       <Cond state={state} path="SelectTutorial.NewTutorial.InitializeTutorial">
-        <div>Initializing tutorial...</div>
+        <LoadingPage text="Launching Tutorial..." />
       </Cond>
     </div>
   )

web-app/src/containers/Tutorial/index.tsx

@@ -1,32 +1,34 @@
 import * as React from 'react'
 import { send } from '../../utils/vscode'
 
-import Cond from '../../components/Cond'
-import Loading from '../../components/Loading'
+import Router from '../../components/Router'
+import LoadingPage from '../LoadingPage'
 import SummaryPage from './SummaryPage'
 import LevelPage from './LevelPage'
 import StagePage from './StagePage'
 
+const { Route } = Router
+
 interface Props {
   state: any
 }
 
 const Tutorial = (props: Props) => {
   return (
-    <div>
-      <Cond state={props.state} path="Tutorial.LoadNext">
-        <Loading />
-      </Cond>
-      <Cond state={props.state} path="Tutorial.Summary">
+    <Router state={props.state}>
+      <Route path="Tutorial.LoadNext">
+        <LoadingPage text="Loading Tutorial..." />
+      </Route>
+      <Route path="Tutorial.Summary">
         <SummaryPage state={props.state} send={send} />
-      </Cond>
-      <Cond state={props.state} path="Tutorial.Level">
+      </Route>
+      <Route path="Tutorial.Level">
         <LevelPage state={props.state} send={send} />
-      </Cond>
-      <Cond state={props.state} path="Tutorial.Stage">
+      </Route>
+      <Route path="Tutorial.Stage">
         <StagePage state={props.state} send={send} />
-      </Cond>
-    </div>
+      </Route>
+    </Router>
   )
 }
 

web-app/stories/Router.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import SideBarDecorator from './utils/SideBarDecorator'
+
+import Router from '../src/components/Router'
+
+const { Route } = Router
+
+storiesOf('Components', module)
+  .addDecorator(SideBarDecorator)
+  .add('Router', () => (
+    <Router state="Third">
+      <Route path="First">First</Route>
+      <Route path="Second">Second</Route>
+      <Route path="Third">Third</Route>
+    </Router>
+  ))