setup cond rendering route

coderoad · ShMcK · Jun 9, 2019 · Jun 8, 2019 · Jun 8, 2019 · Jun 9, 2019
commit 864a26ed7732f8ad05c2c7a692d2db820d09f5f5
diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react'
 import * as CR from 'typings'
+import NewPage from './components/New'
+import ContinuePage from './components/Continue'
+import Cond from './components/Cond'
 
 interface ReceivedEvent {
     data: CR.Action
@@ -24,8 +27,16 @@ const Routes = () => {
             window.removeEventListener(listener, handleEvent)
         }
     })
+
     return (
-        <div>State: {JSON.stringify(state)}</div>
+      <div>
+        <Cond state={state} path="SelectTutorial.NewTutorial">
+          <NewPage onNew={() => console.log('new!')} />
+        </Cond>
+        <Cond state={state} path="SelectTutorial.ContinueTutorial">
+          <ContinuePage onContinue={() => console.log('continue!')} tutorials={[]} />
+        </Cond>
+      </div>
     )
 }
 

diff --git a/web-app/src/components/Cond/index.tsx b/web-app/src/components/Cond/index.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { stateMatch } from './utils/state'
+
+interface Props {
+    state: any
+    path: string
+    children: React.ReactElement
+}
+
+const Cond = (props: Props) => {
+    if (!stateMatch(props.state, props.path)) {
+        return null
+    }
+    return props.children
+}
+
+export default Cond
diff --git a/web-app/src/components/Cond/utils/state.ts b/web-app/src/components/Cond/utils/state.ts
@@ -0,0 +1,12 @@
+export function stateMatch(state: any, statePath: string) {
+    let current = state
+    let paths = statePath.split('.')
+    try {
+        for (const p of paths) {
+            current = current[p]
+        }
+    } catch (error) {
+        return false
+    }
+    return current !== undefined
+}