Skip to content

Commit 553b093

Browse files
christianalfonichristianalfoni
committed
feat(overmind-devtools): indicate break, skipped and remember more settings in devtools
1 parent 411f8df commit 553b093

File tree

10 files changed

+167
-99
lines changed

10 files changed

+167
-99
lines changed

‎packages/node_modules/overmind-devtools/src/components/Action/index.tsx‎

Lines changed: 12 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,12 @@ import { useOvermind } from '../../overmind'
33
import * as styles from './styles'
44
import ActionOperator from '../ActionOperator'
55
import { getOperatorId, nameToColor } from '../../overmind/utils'
6-
import { Operator } from '../../overmind/types'
6+
import { OperatorsByPath } from '../../overmind/types'
77

8-
type OperatorsByPath = Array<{
9-
path: string
10-
operator: Operator
11-
childrenByPath: OperatorsByPath[]
12-
value: any
13-
}>
14-
15-
// TODO: Remove flush by action id?
168
const Action: FunctionComponent = () => {
179
const { state } = useOvermind()
18-
const operators = Object.keys(state.currentAction.operators)
19-
.map((id) => Number(id))
20-
.sort((a, b) => a - b)
21-
.map((operatorId) => state.currentAction.operators[operatorId])
22-
const operatorsByPath = operators.reduce(
23-
(aggr, operator): OperatorsByPath[] => {
24-
let currentValue = state.currentAction.value
25-
const traversePath = operator.path.slice()
26-
traversePath.unshift('')
27-
traversePath.reduce((childrenByPath, key, index) => {
28-
const isLastKey = index === traversePath.length - 1
29-
const matchingChildren = childrenByPath.find(
30-
(children) => children[0].path === key
31-
)
32-
const lastChildByPath = matchingChildren
33-
? matchingChildren[matchingChildren.length - 1]
34-
: null
35-
36-
if (isLastKey) {
37-
const newChild = {
38-
path: key,
39-
operator,
40-
childrenByPath: [],
41-
value: matchingChildren
42-
? lastChildByPath.operator.result
43-
: currentValue,
44-
}
45-
46-
matchingChildren
47-
? matchingChildren.push(newChild)
48-
: childrenByPath.push([newChild])
49-
50-
return
51-
}
10+
const operatorsByPath = state.currentOperatorsByPath
5211

53-
currentValue = lastChildByPath.value
54-
55-
return lastChildByPath.childrenByPath
56-
}, aggr)
57-
58-
return aggr
59-
},
60-
[]
61-
)
6212
function renderOperators(operatorsByPath: OperatorsByPath) {
6313
return operatorsByPath.map((operatorByPath, index) => {
6414
const flushReference =
@@ -69,12 +19,20 @@ const Action: FunctionComponent = () => {
6919
flushReference && state.currentApp.flushes[flushReference.flushId]
7020

7121
return (
72-
<div key={operatorByPath.path + index}>
22+
<div
23+
key={operatorByPath.path + index}
24+
style={{
25+
opacity: operatorByPath.operator.isSkipped ? 0.5 : 1,
26+
}}
27+
>
7328
<ActionOperator
7429
operator={operatorByPath.operator}
7530
flush={flush}
7631
value={operatorByPath.value}
7732
/>
33+
{operatorByPath.operator.isIntercepted ? (
34+
<div className={styles.breakStyle}>break</div>
35+
) : null}
7836
{operatorByPath.childrenByPath.length
7937
? operatorByPath.childrenByPath.map(
8038
(childOperatorsByPath, index) => (
@@ -101,15 +59,8 @@ const Action: FunctionComponent = () => {
10159
})
10260
}
10361

104-
console.log(operatorsByPath)
105-
10662
return (
107-
<div className={styles.wrapper}>
108-
{operatorsByPath.map(renderOperators)}
109-
{state.currentAction.isIntercepted ? (
110-
<div className={styles.breakStyle}>break</div>
111-
) : null}
112-
</div>
63+
<div className={styles.wrapper}>{operatorsByPath.map(renderOperators)}</div>
11364
)
11465
}
11566

‎packages/node_modules/overmind-devtools/src/components/ActionsTools/index.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,19 @@ import { useOvermind } from '../../overmind'
44
import ActionSelector from '../ActionSelector'
55
import ActionPayload from '../ActionPayload'
66
import { colors } from '../../theme'
7+
import { FaRocket } from 'react-icons/fa'
78

89
const ActionsTools: FunctionComponent = () => {
910
const { state, actions } = useOvermind()
1011

1112
return (
12-
<div className={styles.wrapper}>
13+
<form
14+
className={styles.wrapper}
15+
onSubmit={(event) => {
16+
event.preventDefault()
17+
actions.executeAction()
18+
}}
19+
>
1320
<ActionSelector />
1421
<ActionPayload />
1522
<div
@@ -21,9 +28,9 @@ const ActionsTools: FunctionComponent = () => {
2128
: colors.white2,
2229
}}
2330
>
24-
EXECUTE
31+
<FaRocket />
2532
</div>
26-
</div>
33+
</form>
2734
)
2835
}
2936

‎packages/node_modules/overmind-devtools/src/components/ActionsTools/styles.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export const button = css({
1616
boxSizing: 'border-box',
1717
borderTopRightRadius: 3,
1818
borderBottomRightRadius: 3,
19-
width: 110,
2019
justifyContent: 'center',
2120
display: 'flex',
2221
alignItems: 'center',

‎packages/node_modules/overmind-devtools/src/overmind/actions.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,10 @@ export const addConnection: Action = ({ state, effects }) => {
9191
effects.connector.connect(state.port)
9292
}
9393

94-
export const changeTab: Action<Tab> = ({ state }, tab) =>
95-
(state.currentTab = tab)
94+
export const changeTab: Action<Tab> = ({ state, effects }, tab) => {
95+
state.currentTab = tab
96+
effects.storage.set(`${state.currentApp.name}.currentTab`, tab)
97+
}
9698

9799
export const toggleExpandState: Action<string[]> = ({ state }, path) => {
98100
const pathString = path.join('.')
@@ -196,6 +198,8 @@ export const executeAction: Action = ({ state, effects }) => {
196198
name: state.currentApp.selectedActionQuery,
197199
payload: state.currentApp.actionQueryPayload,
198200
})
201+
202+
effects.storage.set(`${state.currentApp.name}.actionQueryPayload`, payload)
199203
}
200204

201205
export const setActionQueryPayload: Action<string> = ({ state }, payload) => {

‎packages/node_modules/overmind-devtools/src/overmind/operators.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
Effect,
2525
GetterMessage,
2626
StateMessage,
27+
Tab,
2728
} from './types'
2829
import {
2930
createApp,
@@ -105,10 +106,19 @@ export const ensureApp: Operator<Message> = mutate(
105106
const selectedActionQuery: string = await effects.storage.get(
106107
`${message.appName}.selectedActionQuery`
107108
)
109+
const actionQueryPayload: string = await effects.storage.get(
110+
`${message.appName}.actionQueryPayload`
111+
)
112+
const tab = await effects.storage.get<Tab>(
113+
`${message.appName}.currentTab`
114+
)
115+
108116
state.apps[message.appName] = createApp({
109117
name: message.appName,
110118
selectedActionQuery: selectedActionQuery || '',
119+
actionQueryPayload: actionQueryPayload || '',
111120
})
121+
state.currentTab = tab || state.currentTab
112122
}
113123
}
114124
)
@@ -198,7 +208,6 @@ export const addAction: Operator<StartActionMessage> = mutate(
198208
isRunning: true,
199209
operators: {},
200210
hasError: false,
201-
isIntercepted: false,
202211
}
203212

204213
if (
@@ -256,6 +265,8 @@ export const updateOperator: Operator<EndOperatorMessage> = mutate(
256265
operator.isRunning = false
257266
operator.result = operatorData.result
258267
operator.error = operatorData.error
268+
operator.isIntercepted = operatorData.isIntercepted
269+
operator.isSkipped = operatorData.isSkipped
259270
}
260271
)
261272

@@ -277,7 +288,6 @@ export const updateAction: Operator<EndActionMessage> = mutate(
277288
const id = `${action.actionId}_${action.executionId}`
278289

279290
app.actions[id].isRunning = false
280-
app.actions[id].isIntercepted = action.isIntercepted
281291
}
282292
)
283293

‎packages/node_modules/overmind-devtools/src/overmind/state.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
FlushHistoryRecord,
1717
EffectMessage,
1818
EffectHistoryRecord,
19+
OperatorsByPath,
1920
} from './types'
2021

2122
type State = {
@@ -37,6 +38,7 @@ type State = {
3738
flushesStatePathCount: Derive<State, number>
3839
groupedComponents: Derive<State, GroupedComponents>
3940
history: Derive<State, HistoryRecord[]>
41+
currentOperatorsByPath: Derive<State, OperatorsByPath[]>
4042
}
4143

4244
const state: State = {
@@ -159,6 +161,50 @@ const state: State = {
159161
return aggr.concat(effectRecord)
160162
}
161163

164+
return aggr
165+
}, [])
166+
},
167+
currentOperatorsByPath: (state) => {
168+
const operators = Object.keys(state.currentAction.operators)
169+
.map((id) => Number(id))
170+
.sort((a, b) => a - b)
171+
.map((operatorId) => state.currentAction.operators[operatorId])
172+
173+
return operators.reduce((aggr, operator): OperatorsByPath[] => {
174+
let currentValue = state.currentAction.value
175+
const traversePath = operator.path.slice()
176+
traversePath.unshift('')
177+
traversePath.reduce((childrenByPath, key, index) => {
178+
const isLastKey = index === traversePath.length - 1
179+
const matchingChildren = childrenByPath.find(
180+
(children) => children[0].path === key
181+
)
182+
const lastChildByPath = matchingChildren
183+
? matchingChildren[matchingChildren.length - 1]
184+
: null
185+
186+
if (isLastKey) {
187+
const newChild = {
188+
path: key,
189+
operator,
190+
childrenByPath: [],
191+
value: matchingChildren
192+
? lastChildByPath.operator.result
193+
: currentValue,
194+
}
195+
196+
matchingChildren
197+
? matchingChildren.push(newChild)
198+
: childrenByPath.push([newChild])
199+
200+
return
201+
}
202+
203+
currentValue = lastChildByPath.value
204+
205+
return lastChildByPath.childrenByPath
206+
}, aggr)
207+
162208
return aggr
163209
}, [])
164210
},

‎packages/node_modules/overmind-devtools/src/overmind/types.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ export type Mutation = {
44
path: string
55
}
66

7+
export type OperatorsByPath = Array<{
8+
path: string
9+
operator: Operator
10+
childrenByPath: OperatorsByPath[]
11+
value: any
12+
}>
13+
714
export type Effect = {
815
args: any[]
916
method: string
@@ -68,6 +75,8 @@ export type Operator = {
6875
path: string[]
6976
result?: any
7077
error?: string
78+
isIntercepted?: boolean
79+
isSkipped?: boolean
7180
}
7281

7382
export type Action = {
@@ -80,7 +89,6 @@ export type Action = {
8089
}
8190
value: any
8291
hasError: boolean
83-
isIntercepted: boolean
8492
}
8593

8694
export type Actions = {
@@ -299,6 +307,8 @@ export type EndOperatorMessage = AppMessage<{
299307
isAsync: boolean
300308
result: any
301309
error?: string
310+
isIntercepted?: boolean
311+
isSkipped?: boolean
302312
}>
303313

304314
export type AsyncOperatorMessage = AppMessage<{
@@ -313,10 +323,7 @@ export type AsyncOperatorMessage = AppMessage<{
313323
result: any
314324
}>
315325

316-
export type EndActionMessage = StartActionMessage &
317-
AppMessage<{
318-
isIntercepted?: boolean
319-
}>
326+
export type EndActionMessage = StartActionMessage
320327

321328
export type MutationsMessage = AppMessage<{
322329
actionId: number

‎packages/node_modules/overmind/src/index.ts‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -467,7 +467,6 @@ export class Overmind<ThisConfig extends IConfiguration>
467467
this.eventHub.emit(EventType.ACTION_END, {
468468
...finalContext.execution,
469469
operatorId: finalContext.execution.operatorId - 1,
470-
isIntercepted: finalContext.isIntercepted,
471470
})
472471
if (err) reject(err)
473472
else
@@ -1148,7 +1147,10 @@ export function catchError<Input, ThisConfig extends IConfiguration = Config>(
11481147
getFunctionName(operation),
11491148
(err, context, value, next) => {
11501149
if (err) next(null, operation(context, err))
1151-
else next(null, value)
1150+
else
1151+
next(null, value, {
1152+
isSkipped: true,
1153+
})
11521154
}
11531155
)
11541156
}
@@ -1218,8 +1220,10 @@ export function fork<
12181220
else {
12191221
const path = operation(context, value)
12201222
next(null, value, {
1221-
name: String(path),
1222-
operator: paths[path],
1223+
path: {
1224+
name: String(path),
1225+
operator: paths[path],
1226+
},
12231227
})
12241228
}
12251229
}
@@ -1245,13 +1249,17 @@ export function when<
12451249
if (err) next(err, value)
12461250
else if (operation(context, value))
12471251
next(null, value, {
1248-
name: 'true',
1249-
operator: paths.true,
1252+
path: {
1253+
name: 'true',
1254+
operator: paths.true,
1255+
},
12501256
})
12511257
else
12521258
next(null, value, {
1253-
name: 'false',
1254-
operator: paths.false,
1259+
path: {
1260+
name: 'false',
1261+
operator: paths.false,
1262+
},
12551263
})
12561264
}
12571265
)

0 commit comments

Comments
 (0)