router progress

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/services/state/routeString.test.ts

@@ -0,0 +1,16 @@
+import { createRouteString } from './useStateMachine'
+
+describe('route string', () => {
+  it('should take a single key route', () => {
+    const result = createRouteString('a')
+    expect(result).toBe('a')
+  })
+  it('should take a 1 level nested key route', () => {
+    const result = createRouteString({ a: 'b' })
+    expect(result).toBe('a.b')
+  })
+  it('should take a 3 level nested key route', () => {
+    const result = createRouteString({ a: { b: { c: 'd' } } })
+    expect(result).toBe('a.b.c.d')
+  })
+})

web-app/src/services/state/useStateMachine.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import * as T from 'typings'
-import { State } from 'xstate'
 import { createMachine } from './machine'
 import { useMachine } from '../xstate-react'
 import logger from '../logger'
@@ -13,9 +12,27 @@ interface Output {
 
 declare let acquireVsCodeApi: any
 
-const createRouteString = (routeObject: object) => {
-  let paths = []
-  const key = Object.keys(routeObject)[0]
+export const createRouteString = (route: object | string): string => {
+  if (typeof route === 'string') {
+    return route
+  }
+  const paths: string[] = []
+  let current: object | string | undefined = route
+  while (current) {
+    // current is final string value
+    if (typeof current === 'string') {
+      paths.push(current)
+      break
+    }
+
+    // current is object
+    const next: string = Object.keys(current)[0]
+    paths.push(next)
+    // @ts-ignore
+    current = current[next]
+  }
+
+  return paths.join('.')
 }
 
 const editor = acquireVsCodeApi()
@@ -33,8 +50,6 @@ const useStateMachine = (): Output => {
     send(action)
   }
 
-  console.log(`STATE: ${JSON.stringify(state.value)}`)
-
   // event bus listener
   React.useEffect(() => {
     const listener = 'message'
@@ -54,9 +69,13 @@ const useStateMachine = (): Output => {
     }
   }, [])
 
+  // convert route to a string to avoid unnecessary React re-renders on deeply nested objects
+  const route = createRouteString(state.value)
+  console.log(`STATE: ${route}`)
+
   return {
     context: state.context,
-    route: '',
+    route,
     send: sendWithLog,
   }
 }