Skip to content

Commit 411f8df

Browse files
christianalfonichristianalfoni
committed
fix(overmind-devtools): fix traversing operators
1 parent 79a4b07 commit 411f8df

File tree

5 files changed

+106
-105
lines changed

5 files changed

+106
-105
lines changed

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

Lines changed: 61 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import ActionOperator from '../ActionOperator'
55
import { getOperatorId, nameToColor } from '../../overmind/utils'
66
import { Operator } from '../../overmind/types'
77

8-
type OperatorsByPath = {
8+
type OperatorsByPath = Array<{
99
path: string
10-
operators: Operator[]
11-
children: OperatorsByPath[]
10+
operator: Operator
11+
childrenByPath: OperatorsByPath[]
1212
value: any
13-
}
13+
}>
1414

1515
// TODO: Remove flush by action id?
1616
const Action: FunctionComponent = () => {
@@ -24,85 +24,78 @@ const Action: FunctionComponent = () => {
2424
let currentValue = state.currentAction.value
2525
const traversePath = operator.path.slice()
2626
traversePath.unshift('')
27-
traversePath.reduce((children, key, index) => {
27+
traversePath.reduce((childrenByPath, key, index) => {
2828
const isLastKey = index === traversePath.length - 1
29-
let child = children.reduce(
30-
(hit, child) => (child.path === key ? child : hit),
31-
null
29+
const matchingChildren = childrenByPath.find(
30+
(children) => children[0].path === key
3231
)
32+
const lastChildByPath = matchingChildren
33+
? matchingChildren[matchingChildren.length - 1]
34+
: null
3335

3436
if (isLastKey) {
35-
if (child && !child.children.length) {
36-
child.operators.push(operator)
37-
} else {
38-
child = {
39-
path: key,
40-
parent: child,
41-
operators: [operator],
42-
children: [],
43-
value:
44-
child && child.operators.length
45-
? child.operators[child.operators.length - 1].result
46-
: child
47-
? child.value
48-
: currentValue,
49-
}
50-
children.push(child)
37+
const newChild = {
38+
path: key,
39+
operator,
40+
childrenByPath: [],
41+
value: matchingChildren
42+
? lastChildByPath.operator.result
43+
: currentValue,
5144
}
45+
46+
matchingChildren
47+
? matchingChildren.push(newChild)
48+
: childrenByPath.push([newChild])
49+
50+
return
5251
}
5352

54-
currentValue = child.value
53+
currentValue = lastChildByPath.value
5554

56-
return child.children
55+
return lastChildByPath.childrenByPath
5756
}, aggr)
5857

5958
return aggr
6059
},
6160
[]
6261
)
63-
function renderOperators(operators: OperatorsByPath[]) {
64-
return operators.map((operatorsByPath, index) => {
65-
return (
66-
<div
67-
key={operatorsByPath.path + index}
68-
className={styles.operatorChildren}
69-
>
70-
{operatorsByPath.path ? (
71-
<div
72-
className={styles.path}
73-
style={{
74-
backgroundColor: nameToColor(operatorsByPath.path),
75-
}}
76-
>
77-
{operatorsByPath.path}
78-
</div>
79-
) : null}
80-
<div className={styles.pathOperators}>
81-
{operatorsByPath.operators.map((operator, index) => {
82-
const flushReference =
83-
state.currentApp.flushByOperatorId[getOperatorId(operator)]
84-
const flush =
85-
flushReference &&
86-
state.currentApp.flushes[flushReference.flushId]
62+
function renderOperators(operatorsByPath: OperatorsByPath) {
63+
return operatorsByPath.map((operatorByPath, index) => {
64+
const flushReference =
65+
state.currentApp.flushByOperatorId[
66+
getOperatorId(operatorByPath.operator)
67+
]
68+
const flush =
69+
flushReference && state.currentApp.flushes[flushReference.flushId]
8770

88-
return (
89-
<Fragment key={getOperatorId(operator)}>
90-
<ActionOperator
91-
operator={operator}
92-
flush={flush}
93-
value={
94-
index === 0
95-
? operatorsByPath.value
96-
: operatorsByPath.operators[index - 1].result
97-
}
98-
/>
99-
</Fragment>
71+
return (
72+
<div key={operatorByPath.path + index}>
73+
<ActionOperator
74+
operator={operatorByPath.operator}
75+
flush={flush}
76+
value={operatorByPath.value}
77+
/>
78+
{operatorByPath.childrenByPath.length
79+
? operatorByPath.childrenByPath.map(
80+
(childOperatorsByPath, index) => (
81+
<div key={index} className={styles.operatorChildren}>
82+
<div
83+
className={styles.path}
84+
style={{
85+
backgroundColor: nameToColor(
86+
childOperatorsByPath[0].path
87+
),
88+
}}
89+
>
90+
{childOperatorsByPath[0].path}
91+
</div>
92+
<div className={styles.pathOperators}>
93+
{renderOperators(childOperatorsByPath)}
94+
</div>
95+
</div>
96+
)
10097
)
101-
})}
102-
{operatorsByPath.children.length
103-
? renderOperators(operatorsByPath.children)
104-
: null}
105-
</div>
98+
: null}
10699
</div>
107100
)
108101
})
@@ -112,7 +105,7 @@ const Action: FunctionComponent = () => {
112105

113106
return (
114107
<div className={styles.wrapper}>
115-
{renderOperators(operatorsByPath)}
108+
{operatorsByPath.map(renderOperators)}
116109
{state.currentAction.isIntercepted ? (
117110
<div className={styles.breakStyle}>break</div>
118111
) : null}

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Operator, action, forEach, fork, when, map } from 'overmind'
1+
import { Operator, mutate, forEach, fork, when, map } from 'overmind'
22
import {
33
Message,
44
AppMessage,
@@ -33,15 +33,15 @@ import {
3333
runMutation,
3434
} from './utils'
3535

36-
export const ensureCurrentApp: Operator<Message> = action(
36+
export const ensureCurrentApp: Operator<Message> = mutate(
3737
({ state }, message) => {
3838
if (!state.currentAppName) {
3939
state.currentAppName = message.appName
4040
}
4141
}
4242
)
4343

44-
export const runGetterMutation: Operator<GetterMessage> = action(
44+
export const runGetterMutation: Operator<GetterMessage> = mutate(
4545
({ state }, message) => {
4646
runMutation(state.apps[message.appName].state)({
4747
method: 'set',
@@ -51,7 +51,7 @@ export const runGetterMutation: Operator<GetterMessage> = action(
5151
}
5252
)
5353

54-
export const setPortExists: Operator<any> = action(({ state }) => {
54+
export const setPortExists: Operator<any> = mutate(({ state }) => {
5555
state.error = 'PORT_EXISTS'
5656
})
5757

@@ -63,7 +63,7 @@ export const isPortExistsMessage: (
6363
) => Operator<Message> = (paths) =>
6464
when((_, message) => message.messages[0].type === 'PORT_EXISTS', paths)
6565

66-
export const addStateAndActions: Operator<InitMessage> = action(
66+
export const addStateAndActions: Operator<InitMessage> = mutate(
6767
({ state }, message) => {
6868
state.isConnecting = false
6969
state.error = null
@@ -72,7 +72,7 @@ export const addStateAndActions: Operator<InitMessage> = action(
7272
}
7373
)
7474

75-
export const addFlushAndRunMutations: Operator<FlushMessage> = action(
75+
export const addFlushAndRunMutations: Operator<FlushMessage> = mutate(
7676
({ state }, message) => {
7777
ensureFlushExists(state.apps[message.appName].flushes, message.data)
7878
state.apps[message.appName].flushes[message.data.flushId].mutations =
@@ -96,7 +96,7 @@ export const addFlushAndRunMutations: Operator<FlushMessage> = action(
9696
}
9797
)
9898

99-
export const ensureApp: Operator<Message> = action(
99+
export const ensureApp: Operator<Message> = mutate(
100100
async ({ state, effects }, message) => {
101101
if (
102102
!state.apps[message.appName] ||
@@ -113,7 +113,7 @@ export const ensureApp: Operator<Message> = action(
113113
}
114114
)
115115

116-
export const addClientMessages: Operator<Message> = action(
116+
export const addClientMessages: Operator<Message> = mutate(
117117
({ state }, message) => {
118118
state.apps[message.appName].messages = JSON.parse(
119119
JSON.stringify(message.messages)
@@ -123,7 +123,7 @@ export const addClientMessages: Operator<Message> = action(
123123
}
124124
)
125125

126-
export const addComponent: Operator<AddComponentMessage> = action(
126+
export const addComponent: Operator<AddComponentMessage> = mutate(
127127
({ state }, message) => {
128128
const id = `${message.data.componentId}_${message.data.componentInstanceId}`
129129

@@ -138,7 +138,7 @@ export const addComponent: Operator<AddComponentMessage> = action(
138138
}
139139
)
140140

141-
export const updateComponent: Operator<UpdateComponentMessage> = action(
141+
export const updateComponent: Operator<UpdateComponentMessage> = mutate(
142142
({ state }, message) => {
143143
const id = `${message.data.componentId}_${message.data.componentInstanceId}`
144144

@@ -156,15 +156,15 @@ export const updateComponent: Operator<UpdateComponentMessage> = action(
156156
}
157157
)
158158

159-
export const removeComponent: Operator<RemoveComponentMessage> = action(
159+
export const removeComponent: Operator<RemoveComponentMessage> = mutate(
160160
({ state }, message) => {
161161
const id = `${message.data.componentId}_${message.data.componentInstanceId}`
162162

163163
state.apps[message.appName].components[id].isMounted = false
164164
}
165165
)
166166

167-
export const updateDerived: Operator<DerivedMessage> = action(
167+
export const updateDerived: Operator<DerivedMessage> = mutate(
168168
({ state }, message) => {
169169
const appState = state.apps[message.appName].state
170170
const path = message.data.path.split('.')
@@ -176,7 +176,7 @@ export const updateDerived: Operator<DerivedMessage> = action(
176176
}
177177
)
178178

179-
export const updateFlushWithDerived: Operator<DirtyDerivedMessage> = action(
179+
export const updateFlushWithDerived: Operator<DirtyDerivedMessage> = mutate(
180180
({ state }, message) => {
181181
ensureFlushExists(state.apps[message.appName].flushes, message.data)
182182
state.apps[message.appName].flushes[message.data.flushId].derived.push(
@@ -185,7 +185,7 @@ export const updateFlushWithDerived: Operator<DirtyDerivedMessage> = action(
185185
}
186186
)
187187

188-
export const addAction: Operator<StartActionMessage> = action(
188+
export const addAction: Operator<StartActionMessage> = mutate(
189189
({ state }, message) => {
190190
const app = state.apps[message.appName]
191191
const action = message.data
@@ -230,7 +230,7 @@ export const addAction: Operator<StartActionMessage> = action(
230230
}
231231
)
232232

233-
export const addOperator: Operator<StartOperatorMessage> = action(
233+
export const addOperator: Operator<StartOperatorMessage> = mutate(
234234
({ state }, message) => {
235235
const operatorData = message.data
236236
const actionId = getActionId(operatorData)
@@ -245,7 +245,7 @@ export const addOperator: Operator<StartOperatorMessage> = action(
245245
}
246246
)
247247

248-
export const updateOperator: Operator<EndOperatorMessage> = action(
248+
export const updateOperator: Operator<EndOperatorMessage> = mutate(
249249
({ state }, message) => {
250250
const operatorData = message.data
251251
const actionId = getActionId(operatorData)
@@ -259,7 +259,7 @@ export const updateOperator: Operator<EndOperatorMessage> = action(
259259
}
260260
)
261261

262-
export const updateState: Operator<StateMessage> = action(
262+
export const updateState: Operator<StateMessage> = mutate(
263263
({ state }, message) => {
264264
const app = state.apps[message.appName]
265265
const path = message.data.path
@@ -270,7 +270,7 @@ export const updateState: Operator<StateMessage> = action(
270270
}
271271
)
272272

273-
export const updateAction: Operator<EndActionMessage> = action(
273+
export const updateAction: Operator<EndActionMessage> = mutate(
274274
({ state }, message) => {
275275
const app = state.apps[message.appName]
276276
const action = message.data
@@ -281,7 +281,7 @@ export const updateAction: Operator<EndActionMessage> = action(
281281
}
282282
)
283283

284-
export const addMutations: Operator<MutationsMessage> = action(
284+
export const addMutations: Operator<MutationsMessage> = mutate(
285285
({ state }, message) => {
286286
const mutations = message.data
287287
const id = `${mutations.actionId}_${mutations.executionId}`
@@ -297,7 +297,7 @@ export const addMutations: Operator<MutationsMessage> = action(
297297
}
298298
)
299299

300-
export const updateEffect: Operator<EffectMessage> = action(
300+
export const updateEffect: Operator<EffectMessage> = mutate(
301301
({ state }, message) => {
302302
const effect = message.data
303303
const id = getActionId(effect)
@@ -337,6 +337,6 @@ export const forkEachMessage: (
337337
) => Operator<AppMessage<any>[]> = (paths) =>
338338
forEach(fork((_, value) => value.type, paths) as Operator<AppMessage<any>>)
339339

340-
export const updateOperatorAsync: Operator<AsyncOperatorMessage> = action(
340+
export const updateOperatorAsync: Operator<AsyncOperatorMessage> = mutate(
341341
() => {}
342342
)

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1088,12 +1088,19 @@ export function filter<Input, ThisConfig extends IConfiguration = Config>(
10881088
)
10891089
}
10901090

1091+
let hasShownActionDeprecation = false
10911092
export function action<Input, ThisConfig extends IConfiguration = Config>(
10921093
operation: (context: IContext<ThisConfig>, value: Input) => void
10931094
): IOperator<ThisConfig, Input, Input> {
1094-
console.warn(
1095-
'DEPRECATION - The action operator is deprecated in favor of "mutate". The reason is to avoid confusion between actions and operators.'
1096-
)
1095+
if (!hasShownActionDeprecation) {
1096+
console.warn(
1097+
`DEPRECATION - The action operator is deprecated in favor of "mutate". The reason is to avoid confusion between actions and operators. Check out action "${getFunctionName(
1098+
operation
1099+
)}"`
1100+
)
1101+
hasShownActionDeprecation = true
1102+
}
1103+
10971104
return createMutationOperator<ThisConfig>(
10981105
'action',
10991106
getFunctionName(operation),

0 commit comments

Comments
 (0)