Skip to content

Commit 073a742

Browse files
ShMcKShMcK
committed
refactor debugger
1 parent df5ff83 commit 073a742

File tree

8 files changed

+61
-57
lines changed

8 files changed

+61
-57
lines changed

‎typings/index.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ export interface MachineStateSchema {
125125
states: {
126126
Start: {
127127
states: {
128-
Initial: {}
129128
Startup: {}
130129
NewTutorial: {
131130
states: {

‎web-app/src/App.tsx‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,13 @@ import * as CR from 'typings'
44

55
import client from './services/apollo'
66
import currentTutorial from './services/current'
7-
import Debugger from './components/Debugger'
87
import Routes from './Routes'
98

109
interface ReceivedEvent {
1110
data: CR.Action
1211
}
1312

1413
const App = () => {
15-
const initialState = 'Start.Initial'
16-
17-
// set state machine state
18-
const [state, setState] = React.useState(initialState)
19-
const [debuggerInfo, setDebuggerInfo] = React.useState({
20-
progress: { levels: {}, stages: {}, steps: {}, complete: false},
21-
position: { levelId: '', stageId: '', stepId: ''},
22-
})
2314

2415
// event bus listener
2516
React.useEffect(() => {
@@ -28,17 +19,13 @@ const App = () => {
2819
const message = event.data
2920
// messages from core
3021

31-
if (message.type === 'SET_STATE') {
32-
// SET_STATE - set state machine state
33-
setState(message.payload.state)
34-
35-
} else if (message.type === 'SET_DATA') {
22+
if (message.type === 'SET_DATA') {
3623
// SET_DATA - set state machine context
3724
console.log('SET_DATA updated')
3825
const { progress, position } = message.payload
3926
if (process.env.REACT_APP_DEBUG) {
4027
console.log(`Position: ${position.levelId}/${position.stageId}/${position.stepId}`)
41-
setDebuggerInfo({ progress, position })
28+
// setDebuggerInfo({ progress, position })
4229
}
4330
console.log('set currentTutorial')
4431
currentTutorial.set({ position, progress })
@@ -53,18 +40,9 @@ const App = () => {
5340
}
5441
}, [])
5542

56-
// trigger progress when webview loaded
57-
// React.useEffect(() => {
58-
// editorDispatch('WEBVIEW_LOADED')
59-
// }, [])
60-
61-
// TODO: refactor cond to user <Router><Route> and accept first route as if/else if
6243
return (
6344
<ApolloProvider client={client}>
64-
<div>
65-
{process.env.REACT_APP_DEBUG && <Debugger state={state} {...debuggerInfo} />}
66-
<Routes state={state} />
67-
</div>
45+
<Routes />
6846
</ApolloProvider>
6947
)
7048
}

‎web-app/src/Routes.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,14 @@ import CompletedPage from './containers/Tutorial/CompletedPage'
1212

1313
const { Route } = Router
1414

15-
interface Props {
16-
state: any
17-
}
18-
1915
const styles = {
2016
page: {
2117
margin: 0,
2218
backgroundColor: 'white',
2319
},
2420
}
2521

26-
const Routes = ({ state }: Props) => {
22+
const Routes = () => {
2723
const [dimensions, setDimensions] = React.useState({
2824
width: window.innerWidth - 20,
2925
height: window.innerHeight - 20,
@@ -45,10 +41,7 @@ const Routes = ({ state }: Props) => {
4541

4642
return (
4743
<div style={{ ...styles.page, ...dimensions }}>
48-
<Router state={state}>
49-
<Route path="Start.Initial">
50-
<div>Initial</div>
51-
</Route>
44+
<Router>
5245
<Route path="Start.Startup">
5346
<LoadingPage text="Launching..." />
5447
</Route>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ import * as CR from 'typings'
33

44
interface Props {
55
state: string
6-
position: CR.Position
7-
progress: CR.Progress
6+
// position: CR.Position
7+
// progress: CR.Progress
8+
children: React.ReactElement
89
}
910

10-
const Debugger = ({ state, position, progress }: Props) => (
11+
const Debugger = ({ state, children }: Props) => (
1112
<div style={{ backgroundColor: '#FFFF99', color: 'black', padding: '.5rem' }}>
1213
<h4>state: {state}</h4>
13-
<p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
14-
<p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
14+
{/* <p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
15+
<p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p> */}
16+
{children}
1517
</div>
1618
)
1719

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

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,44 @@
11
import * as React from 'react'
22
import { useMachine } from '@xstate/react'
33
import machine from '../../services/state/machine'
4+
import Debugger from '../Debugger'
45
import Route from './Route'
6+
import stateToString from './stateToString'
57

68
interface Props {
7-
state: string
89
children: any
910
}
1011

11-
// const stateMatch = (state: string, path: string) => {
12-
// return !!(new RegExp(`^${state}`).exec(path))
13-
// }
12+
{/* {process.env.REACT_APP_DEBUG && <Debugger {...debuggerInfo} />} */}
13+
14+
const wrapDebugger = (element: React.ReactElement, state: any) => {
15+
if (process.env.REACT_APP_DEBUG) {
16+
return (
17+
<Debugger state={stateToString(state.value)}>
18+
{element}
19+
</Debugger>
20+
)
21+
}
22+
return element
23+
}
1424

1525
// router finds first state match of <Route path='' />
1626
const Router = ({ children }: Props) => {
17-
const [current, send] = useMachine(machine)
27+
const [state, send] = useMachine(machine)
1828

1929
const childArray = React.Children.toArray(children)
2030
for (const child of childArray) {
21-
if (current.matches(child.props.path)) {
31+
if (state.matches(child.props.path)) {
32+
let element
2233
if (child.props.send) {
23-
return React.cloneElement(child.props.children, { send })
34+
element = React.cloneElement(child.props.children, { send })
2435
} else {
25-
return child.props.children
36+
element = child.props.children
2637
}
27-
38+
return wrapDebugger(element, state)
2839
}
2940
}
30-
console.warn(`No Route matches for ${JSON.stringify(current)}`)
41+
console.warn(`No Route matches for ${JSON.stringify(state)}`)
3142
return null
3243
}
3344

‎web-app/src/components/Router/stateToString.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const stateToString = (state: string | object, str: string = ''): string => {
2+
if (typeof state === 'object') {
3+
const keys = Object.keys(state)
4+
if (keys && keys.length) {
5+
const key = keys[0]
6+
// @ts-ignore
7+
return stateToString(state[key], str.length ? `${str}.${key}` : key)
8+
}
9+
return str
10+
} else if (typeof state === 'string') {
11+
return str.length ? `${str}.${state}` : state
12+
}
13+
return ''
14+
}
15+
16+
export default stateToString

‎web-app/src/services/state/actions/index.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {send} from 'xstate'
12
// import {machine} from '../../extension'
23
// import {cache} from '../../services/apollo'
34
// import {editorDispatch} from '../../services/vscode'
@@ -6,7 +7,16 @@
67
// import tutorialConfig from '../../services/apollo/queries/tutorialConfig'
78

89

9-
export default {}
10+
export default {
11+
async newOrContinue() {
12+
console.log('new or continue')
13+
// verify that the user has an existing tutorial to continue
14+
15+
// TODO: verify continue or new
16+
const hasExistingTutorial: boolean = false
17+
send(hasExistingTutorial ? 'CONTINUE' : 'NEW')
18+
},
19+
}
1020

1121
// export default {
1222
// async newOrContinue() {

‎web-app/src/services/state/machine.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,8 @@ export const machine = Machine<{}, CR.MachineStateSchema, CR.MachineEvent>(
1010
initial: 'Start',
1111
states: {
1212
Start: {
13-
initial: 'Initial',
13+
initial: 'Startup',
1414
states: {
15-
Initial: {
16-
on: {
17-
WEBVIEW_INITIALIZED: 'Startup',
18-
},
19-
},
2015
Startup: {
2116
onEntry: ['newOrContinue'],
2217
on: {

0 commit comments

Comments
 (0)