cleanup client state

Author: ShMcK

src/state/index.ts

@@ -20,10 +20,9 @@ class StateMachine {
 
 		// format state as a string and send it to the client
 		this.syncState = (state: any): void => {
-			console.log(state)
-			const stateValue: CR.MessageState = stateToString(state.value)
+			const stateValue: string = stateToString(state.value)
 			console.log(`STATE: ${stateValue}`)
-			editorDispatch('coderoad.send_state', stateValue)
+			editorDispatch('coderoad.send_state', {state: stateValue})
 		}
 
 		// callback on all state changes

typings/index.d.ts

@@ -170,7 +170,10 @@ interface MessageData {
 	progress: Progress
 }
 
-type MessageState = string
+interface MessageState {
+	state: string
+}
 
 
-export type EditorDispatch = (type: string, payload?: MessageData | MessageState) => void
+// todo: type each string param and payload
+export type EditorDispatch = (type: string, payload?: MessageData | MessageState | any) => void

web-app/src/App.tsx

@@ -13,7 +13,7 @@ interface ReceivedEvent {
 }
 
 const App = () => {
-  const initialState = { SelectTutorial: 'Initial' }
+  const initialState = 'SelectTutorial.Initial'
 
   // set state machine state
 	const [state, setState] = React.useState(initialState)

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

@@ -2,14 +2,14 @@ import * as React from 'react'
 import * as CR from 'typings'
 
 interface Props {
-	state: object
+	state: string
 	position: CR.Position
 	progress: CR.Progress
 }
 
 const Debugger = ({ state, position, progress }: Props) => (
   <div style={{ backgroundColor: '#FFFF99', color: 'black', padding: '.5rem' }}>
-    <h4>state: {JSON.stringify(state)}</h4>
+    <h4>state: {state}</h4>
     <p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
     <p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
   </div>