Skip to content

Commit e18999e

Browse files
ShMcKShMcK
authored
Merge pull request coderoad#84 from ShMcK/feature/cleanup
Feature/cleanup
2 parents f8aa748 + 82d22a4 commit e18999e

File tree

19 files changed

+414
-483
lines changed

19 files changed

+414
-483
lines changed

‎src/channel/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ class Channel implements Channel {
4040
const onError = (error: T.ErrorMessage) => this.send({ type: 'ERROR', payload: { error } })
4141

4242
switch (actionType) {
43-
case 'ENV_GET':
43+
case 'EDITOR_ENV_GET':
4444
this.send({
4545
type: 'ENV_LOAD',
4646
payload: {

‎typings/index.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export interface MachineStateSchema {
6363
states: {
6464
Startup: {}
6565
Authenticate: {}
66+
Error: {}
6667
NewOrContinue: {}
6768
SelectTutorial: {}
6869
ContinueTutorial: {}
@@ -73,6 +74,7 @@ export interface MachineStateSchema {
7374
Initialize: {}
7475
Summary: {}
7576
LoadNext: {}
77+
Error: {}
7678
Level: {
7779
states: {
7880
Load: {}

‎web-app/src/Routes.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import * as CR from 'typings'
3-
import Router from './components/Router'
3+
import useRouter from './components/Router'
44
import Workspace from './components/Workspace'
55
import ContinuePage from './containers/Continue'
66
import LoadingPage from './containers/LoadingPage'
@@ -9,38 +9,41 @@ import OverviewPage from './containers/Overview'
99
import CompletedPage from './containers/Tutorial/CompletedPage'
1010
import LevelSummaryPage from './containers/Tutorial/LevelPage'
1111

12-
const { Route } = Router
13-
14-
const tempSend = (action: any) => console.log('sent')
15-
1612
const Routes = () => {
13+
const { context, send, Router, Route } = useRouter()
1714
// TODO refactor for typescript to understand send & context passed into React.cloneElement's
1815
return (
1916
<Workspace>
2017
<Router>
2118
<Route path={['Start.Startup', 'Start.Authenticate', 'Start.NewOrContinue']}>
22-
<LoadingPage text="Launching..." context={{} as CR.MachineContext} />
19+
<LoadingPage text="Launching..." context={context} />
20+
</Route>
21+
<Route path={'Start.Error'}>
22+
<div>Something went wrong wrong</div>
2323
</Route>
2424
<Route path="Start.SelectTutorial">
25-
<NewPage send={tempSend} context={{} as CR.MachineContext} />
25+
<NewPage send={send} context={context} />
2626
</Route>
2727
<Route path="Start.ContinueTutorial">
28-
<ContinuePage send={tempSend} context={{} as CR.MachineContext} />
28+
<ContinuePage send={send} context={context} />
29+
</Route>
30+
<Route path={'Tutorial.Error'}>
31+
<div>Something went wrong wrong</div>
2932
</Route>
3033
<Route path="Tutorial.Initialize">
31-
<LoadingPage text="Initializing..." context={{} as CR.MachineContext} />
34+
<LoadingPage text="Initializing..." context={context} />
3235
</Route>
3336
<Route path="Tutorial.LoadNext">
34-
<LoadingPage text="Loading..." context={{} as CR.MachineContext} />
37+
<LoadingPage text="Loading..." context={context} />
3538
</Route>
3639
<Route path="Tutorial.Summary">
37-
<OverviewPage send={tempSend} context={{} as CR.MachineContext} />
40+
<OverviewPage send={send} context={context} />
3841
</Route>
3942
<Route path="Tutorial.Level">
40-
<LevelSummaryPage send={tempSend} context={{} as CR.MachineContext} />
43+
<LevelSummaryPage send={send} context={context} />
4144
</Route>
4245
<Route path="Tutorial.Completed">
43-
<CompletedPage send={tempSend} context={{} as CR.MachineContext} />
46+
<CompletedPage send={send} context={context} />
4447
</Route>
4548
</Router>
4649
</Workspace>

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,28 @@ const styles = {
99
color: '#D8000C',
1010
backgroundColor: '#FFBABA',
1111
padding: '1rem',
12+
width: '100%',
13+
height: '100%',
1214
},
1315
}
1416

1517
interface Props {
16-
error: ApolloError
18+
error?: ApolloError
1719
}
1820

1921
const ErrorView = ({ error }: Props) => {
2022
// log error
2123
React.useEffect(() => {
22-
console.log(error)
23-
onError(error)
24+
if (error) {
25+
console.log(error)
26+
onError(error)
27+
}
2428
}, [])
2529

30+
if (!error) {
31+
return null
32+
}
33+
2634
return (
2735
<div css={styles.container}>
2836
<h1>Error</h1>

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

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,70 @@
11
import * as React from 'react'
2-
import * as CR from 'typings'
3-
import channel from '../../services/channel'
4-
import messageBusReceiver from '../../services/channel/receiver'
5-
import machine from '../../services/state/machine'
2+
import { createMachine } from '../../services/state/machine'
63
import { useMachine } from '../../services/xstate-react'
7-
import debuggerWrapper from '../Debugger/debuggerWrapper'
84
import Route from './Route'
95
import onError from '../../services/sentry/onError'
106

117
interface Props {
128
children: any
139
}
1410

15-
interface CloneElementProps {
16-
context: CR.MachineContext
17-
send(action: CR.Action): void
18-
}
11+
declare let acquireVsCodeApi: any
1912

20-
// router finds first state match of <Route path='' />
21-
const Router = ({ children }: Props): React.ReactElement<CloneElementProps> | null => {
22-
const [state, send] = useMachine(machine, {
23-
interpreterOptions: {
24-
logger: console.log.bind('XSTATE:'),
25-
},
26-
})
13+
const editor = acquireVsCodeApi()
2714

28-
channel.setMachineSend(send)
15+
// router finds first state match of <Route path='' />
16+
const useRouter = () => {
17+
const [state, send] = useMachine(createMachine({ editorSend: editor.postMessage }))
2918

3019
// event bus listener
31-
React.useEffect(messageBusReceiver, [])
32-
33-
const childArray = React.Children.toArray(children)
34-
for (const child of childArray) {
35-
const { path } = child.props
36-
let pathMatch
37-
if (typeof path === 'string') {
38-
pathMatch = state.matches(path)
39-
} else if (Array.isArray(path)) {
40-
pathMatch = path.some(p => state.matches(p))
41-
} else {
42-
throw new Error(`Invalid route path ${JSON.stringify(path)}`)
20+
React.useEffect(() => {
21+
const listener = 'message'
22+
// propograte channel event to state machine
23+
const handler = (action: any) => {
24+
// NOTE: must call event.data, cannot destructure. VSCode acts odd
25+
const event = action.data
26+
// ignore browser events from plugins
27+
if (event.source) {
28+
return
29+
}
30+
send(event)
31+
}
32+
window.addEventListener(listener, handler)
33+
return () => {
34+
window.removeEventListener(listener, handler)
4335
}
44-
if (pathMatch) {
45-
const element = React.cloneElement<CloneElementProps>(child.props.children, { send, context: state.context })
46-
return debuggerWrapper(element, state)
36+
}, [])
37+
38+
const Router = ({ children }: Props): React.ReactElement<any> | null => {
39+
const childArray = React.Children.toArray(children)
40+
for (const child of childArray) {
41+
// match path
42+
const { path } = child.props
43+
let pathMatch
44+
if (typeof path === 'string') {
45+
pathMatch = state.matches(path)
46+
} else if (Array.isArray(path)) {
47+
pathMatch = path.some(p => state.matches(p))
48+
} else {
49+
throw new Error(`Invalid route path ${JSON.stringify(path)}`)
50+
}
51+
if (pathMatch) {
52+
// @ts-ignore
53+
return child.props.children
54+
}
4755
}
56+
const message = `No Route matches for ${JSON.stringify(state)}`
57+
onError(new Error(message))
58+
console.warn(message)
59+
return null
4860
}
49-
const message = `No Route matches for ${JSON.stringify(state)}`
50-
onError(new Error(message))
51-
console.warn(message)
52-
return null
53-
}
5461

55-
Router.Route = Route
62+
return {
63+
context: state.context,
64+
send,
65+
Router,
66+
Route,
67+
}
68+
}
5669

57-
export default Router
70+
export default useRouter

‎web-app/src/containers/New/NewPage.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react'
2+
import * as T from 'typings'
23
import * as G from 'typings/graphql'
34
import { css, jsx } from '@emotion/core'
45
import TutorialList from './TutorialList'
@@ -23,6 +24,7 @@ const styles = {
2324
}
2425

2526
interface Props {
27+
send(action: T.Action): void
2628
tutorialList: G.Tutorial[]
2729
}
2830

@@ -34,7 +36,7 @@ const NewPage = (props: Props) => (
3436
<div css={styles.banner}>
3537
<span>Select a Tutorial to Start</span>
3638
</div>
37-
<TutorialList tutorialList={props.tutorialList} />
39+
<TutorialList tutorialList={props.tutorialList} send={props.send} />
3840
</div>
3941
)
4042

‎web-app/src/containers/New/TutorialList/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import * as React from 'react'
2+
import * as T from 'typings'
23
import * as G from 'typings/graphql'
3-
import channel from '../../../services/channel'
44
import TutorialItem from './TutorialItem'
55

66
interface Props {
7+
send(action: T.Action): void
78
tutorialList: G.Tutorial[]
89
}
910

1011
const TutorialList = (props: Props) => {
1112
const onSelect = (tutorial: G.Tutorial) => {
12-
channel.machineSend({
13+
props.send({
1314
type: 'TUTORIAL_START',
1415
payload: {
1516
tutorial,

‎web-app/src/containers/New/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const NewPageContainer = (props: ContainerProps) => {
3131
return null
3232
}
3333

34-
return <NewPage tutorialList={data.tutorials} />
34+
return <NewPage tutorialList={data.tutorials} send={props.send} />
3535
}
3636

3737
export default NewPageContainer

‎web-app/src/services/channel/index.ts

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎web-app/src/services/channel/mock.ts

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)