Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit073a742

Browse files
committed
refactor debugger
1 parentdf5ff83 commit073a742

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-
importDebuggerfrom'./components/Debugger'
87
import Routes from './Routes'
98

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

1413
const App = () => {
15-
constinitialState='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-
}elseif(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&&<Debuggerstate={state}{...debuggerInfo}/>}
66-
<Routesstate={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-
interfaceProps{
16-
state:any
17-
}
18-
1915
const styles = {
2016
page: {
2117
margin: 0,
2218
backgroundColor: 'white',
2319
},
2420
}
2521

26-
constRoutes=({ 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-
<Routerstate={state}>
49-
<Routepath="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

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)
[8]ページ先頭
©2009-2025 Movatter.jp