Merge pull request #21 from ShMcK/feature/loading

Feature/loading

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
 }
@@ -37,21 +39,22 @@ 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/Cond/utils/state.ts

@@ -1,6 +1,6 @@
 export function stateMatch(state: any, statePath: string) {
   let current = state
-  let paths = statePath.split('.')
+  const paths = statePath.split('.')
   let complete = false
   try {
     for (const p of paths) {

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

@@ -1,7 +1,12 @@
 import * as React from 'react'
+import { Loading } from '@alifd/next'
 
-const Loading = () => {
-  return <div>Loading...</div>
+interface Props {
+  text: string
 }
 
-export default Loading
+const LoadingComponent = ({ text }: Props) => {
+  return <Loading tip={text} />
+}
+
+export default LoadingComponent

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,24 @@
+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
+    }
+  }
+  console.warn(`No Route matches for ${state}`)
+  return null
+}
+
+Router.Route = Route
+
+export default Router

web-app/src/containers/LoadingPage.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import Loading from '../components/Loading'
+
+interface Props {
+  text: string
+}
+
+const styles = {
+  page: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  },
+}
+
+const LoadingPage = ({ text }: Props) => (
+  <div style={styles.page}>
+    <Loading text={text} />
+  </div>
+)
+
+export default LoadingPage

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/LevelPage.tsx

@@ -4,7 +4,6 @@ import Level from '../../components/Level'
 
 interface LevelProps {
   send(action: string): void
-  state: any
 }
 
 const LevelPage = (props: LevelProps) => {

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

@@ -3,7 +3,6 @@ import DataContext from '../../utils/DataContext'
 import Stage from '../../components/Stage'
 
 interface PageProps {
-  state: any
   send(action: string): void
 }
 

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

@@ -4,7 +4,6 @@ import Summary from '../../components/Summary'
 
 interface PageProps {
   send(action: string): void
-  state: any
 }
 
 const SummaryPage = (props: PageProps) => {