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

Commit1109c29

Browse files
committed
cleanup router code
1 parent409df47 commit1109c29

File tree

2 files changed

+40
-37
lines changed

2 files changed

+40
-37
lines changed

‎web-app/src/Routes.tsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import*asReactfrom'react'
22
import*asCRfrom'typings'
3-
importRouterfrom'./components/Router'
3+
importuseRouterfrom'./components/Router'
44
importWorkspacefrom'./components/Workspace'
55
importContinuePagefrom'./containers/Continue'
66
importLoadingPagefrom'./containers/LoadingPage'
@@ -9,44 +9,41 @@ import OverviewPage from './containers/Overview'
99
importCompletedPagefrom'./containers/Tutorial/CompletedPage'
1010
importLevelSummaryPagefrom'./containers/Tutorial/LevelPage'
1111

12-
const{ Route}=Router
13-
14-
consttempSend=(action:any)=>console.log('sent')
15-
1612
constRoutes=()=>{
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
<Routepath={['Start.Startup','Start.Authenticate','Start.NewOrContinue']}>
22-
<LoadingPagetext="Launching..."context={{}asCR.MachineContext}/>
19+
<LoadingPagetext="Launching..."context={context}/>
2320
</Route>
2421
<Routepath={'Start.Error'}>
2522
<div>Something went wrong wrong</div>
2623
</Route>
2724
<Routepath="Start.SelectTutorial">
28-
<NewPagesend={tempSend}context={{}asCR.MachineContext}/>
25+
<NewPagesend={send}context={context}/>
2926
</Route>
3027
<Routepath="Start.ContinueTutorial">
31-
<ContinuePagesend={tempSend}context={{}asCR.MachineContext}/>
28+
<ContinuePagesend={send}context={context}/>
3229
</Route>
3330
<Routepath={'Tutorial.Error'}>
3431
<div>Something went wrong wrong</div>
3532
</Route>
3633
<Routepath="Tutorial.Initialize">
37-
<LoadingPagetext="Initializing..."context={{}asCR.MachineContext}/>
34+
<LoadingPagetext="Initializing..."context={context}/>
3835
</Route>
3936
<Routepath="Tutorial.LoadNext">
40-
<LoadingPagetext="Loading..."context={{}asCR.MachineContext}/>
37+
<LoadingPagetext="Loading..."context={context}/>
4138
</Route>
4239
<Routepath="Tutorial.Summary">
43-
<OverviewPagesend={tempSend}context={{}asCR.MachineContext}/>
40+
<OverviewPagesend={send}context={context}/>
4441
</Route>
4542
<Routepath="Tutorial.Level">
46-
<LevelSummaryPagesend={tempSend}context={{}asCR.MachineContext}/>
43+
<LevelSummaryPagesend={send}context={context}/>
4744
</Route>
4845
<Routepath="Tutorial.Completed">
49-
<CompletedPagesend={tempSend}context={{}asCR.MachineContext}/>
46+
<CompletedPagesend={send}context={context}/>
5047
</Route>
5148
</Router>
5249
</Workspace>

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

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as React from 'react'
22
import*asCRfrom'typings'
33
import{createMachine}from'../../services/state/machine'
44
import{useMachine}from'../../services/xstate-react'
5-
importdebuggerWrapperfrom'../Debugger/debuggerWrapper'
65
importRoutefrom'./Route'
76
importonErrorfrom'../../services/sentry/onError'
87

@@ -20,7 +19,7 @@ declare let acquireVsCodeApi: any
2019
consteditor=acquireVsCodeApi()
2120

2221
// router finds first state match of <Route path='' />
23-
constRouter=({ children}:Props):React.ReactElement<CloneElementProps>|null=>{
22+
constuseRouter=()=>{
2423
const[state,send]=useMachine(createMachine({editorSend:editor.postMessage}))
2524

2625
// event bus listener
@@ -42,29 +41,36 @@ const Router = ({ children }: Props): React.ReactElement<CloneElementProps> | nu
4241
}
4342
},[])
4443

45-
constchildArray=React.Children.toArray(children)
46-
for(constchildofchildArray){
47-
const{ path}=child.props
48-
letpathMatch
49-
if(typeofpath==='string'){
50-
pathMatch=state.matches(path)
51-
}elseif(Array.isArray(path)){
52-
pathMatch=path.some(p=>state.matches(p))
53-
}else{
54-
thrownewError(`Invalid route path${JSON.stringify(path)}`)
55-
}
56-
if(pathMatch){
57-
//@ts-ignore
58-
constelement=React.cloneElement<CloneElementProps>(child.props.children,{ send,context:state.context})
59-
returndebuggerWrapper(element,state)
44+
constRouter=({ children}:Props):React.ReactElement<CloneElementProps>|null=>{
45+
constchildArray=React.Children.toArray(children)
46+
for(constchildofchildArray){
47+
// match path
48+
const{ path}=child.props
49+
letpathMatch
50+
if(typeofpath==='string'){
51+
pathMatch=state.matches(path)
52+
}elseif(Array.isArray(path)){
53+
pathMatch=path.some(p=>state.matches(p))
54+
}else{
55+
thrownewError(`Invalid route path${JSON.stringify(path)}`)
56+
}
57+
if(pathMatch){
58+
//@ts-ignore
59+
returnchild.props.children
60+
}
6061
}
62+
constmessage=`No Route matches for${JSON.stringify(state)}`
63+
onError(newError(message))
64+
console.warn(message)
65+
returnnull
6166
}
62-
constmessage=`No Route matches for${JSON.stringify(state)}`
63-
onError(newError(message))
64-
console.warn(message)
65-
returnnull
66-
}
6767

68-
Router.Route=Route
68+
return{
69+
context:state.context,
70+
send,
71+
Router,
72+
Route,
73+
}
74+
}
6975

70-
exportdefaultRouter
76+
exportdefaultuseRouter

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp