Skip to content

Commit d80ed09

Browse files
christianalfonichristianalfoni
committed
feat(overmind): custom delimiter for state paths
1 parent 271c428 commit d80ed09

File tree

19 files changed

+156
-56
lines changed

19 files changed

+156
-56
lines changed

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import { createElement, FunctionComponent, Fragment } from 'react'
1+
import { css } from 'emotion'
2+
import { Fragment, FunctionComponent, createElement } from 'react'
3+
4+
import { useOvermind } from '../../overmind'
25
import {
3-
Operator as OperatorType,
4-
EventType,
56
Effect,
6-
Mutation,
7+
EventType,
78
Flush,
9+
Mutation,
10+
Operator as OperatorType,
811
} from '../../overmind/types'
9-
import ValueInspector from '../ValueInspector'
10-
import * as styles from './styles'
11-
import * as actionStyles from '../Action/styles'
1212
import * as textStyles from '../../styles/text'
13-
import { css } from 'emotion'
1413
import { colors } from '../../theme'
15-
import ActionFlush from '../ActionFlush'
1614
import Action from '../Action'
17-
import { useOvermind } from '../../overmind'
15+
import * as actionStyles from '../Action/styles'
16+
import ActionFlush from '../ActionFlush'
17+
import ValueInspector from '../ValueInspector'
18+
import * as styles from './styles'
1819

1920
type Props = {
2021
operator: OperatorType
@@ -28,6 +29,7 @@ const ActionOperator: FunctionComponent<Props> = ({
2829
flush,
2930
}) => {
3031
const { state } = useOvermind()
32+
const delimiter = state.currentApp.delimiter
3133

3234
return (
3335
<div className={actionStyles.pipe}>
@@ -45,7 +47,7 @@ const ActionOperator: FunctionComponent<Props> = ({
4547
<span className={styles.operatorName}>{operator.name}</span>
4648
<div className={styles.value}>
4749
{value === undefined ? null : (
48-
<ValueInspector value={value} small />
50+
<ValueInspector delimiter={delimiter} value={value} small />
4951
)}
5052
</div>
5153
{flush ? <ActionFlush flush={flush} /> : null}
@@ -81,7 +83,7 @@ const ActionOperator: FunctionComponent<Props> = ({
8183
(
8284
{effect.args.map((arg, argIndex) => (
8385
<Fragment key={argIndex}>
84-
<ValueInspector small value={arg} />
86+
<ValueInspector delimiter={delimiter} small value={arg} />
8587
{argIndex === effect.args.length - 1 ? null : (
8688
<span>,</span>
8789
)}
@@ -100,7 +102,7 @@ const ActionOperator: FunctionComponent<Props> = ({
100102
</span>
101103
)}
102104
{effect.result === undefined ? null : (
103-
<ValueInspector small value={effect.result} />
105+
<ValueInspector delimiter={delimiter} small value={effect.result} />
104106
)}
105107
{effect.error ? (
106108
<span className={styles.effectError}>{effect.error}</span>
@@ -132,7 +134,7 @@ const ActionOperator: FunctionComponent<Props> = ({
132134
{mutation.path}
133135
</span>
134136
{mutation.args.map((arg, argIndex) => (
135-
<ValueInspector key={argIndex} small value={arg} />
137+
<ValueInspector delimiter={delimiter} key={argIndex} small value={arg} />
136138
))}
137139
</div>
138140
)

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

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { css } from 'emotion'
2-
import { FunctionComponent, createElement, Fragment, useState } from 'react'
2+
import { Fragment, FunctionComponent, createElement, useState } from 'react'
3+
import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
34

45
import { useOvermind } from '../../overmind'
56
import { Chart, NestedChart } from '../../overmind/types'
67
import { nameToColor } from '../../overmind/utils'
78
import * as textStyles from '../../styles/text'
89
import * as styles from './styles'
9-
import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
1010

1111
type Props = {
1212
chart: Chart
@@ -23,6 +23,8 @@ const ChartComponent: FunctionComponent<Props> = ({
2323
}) => {
2424
const [expandedIds, setExpandedIds] = useState([])
2525
const { state, actions } = useOvermind()
26+
27+
const delimiter = state.currentApp.delimiter
2628

2729
return (
2830
<div className={styles.outerWrapper}>
@@ -32,7 +34,7 @@ const ChartComponent: FunctionComponent<Props> = ({
3234
return chart.states.reduce((aggr, state) => {
3335
if (aggr) return true
3436

35-
return state.join('.').startsWith(statePath.concat(chartId, key).join('.'))
37+
return state.join(delimiter).startsWith(statePath.concat(chartId, key).join(delimiter))
3638
}, false)
3739
})
3840

@@ -47,7 +49,7 @@ const ChartComponent: FunctionComponent<Props> = ({
4749
const isActiveState = chart.states.reduce((aggr, state) => {
4850
if (aggr) return true
4951

50-
return state.join('.').startsWith(statePath.concat(chartId, key).join('.'))
52+
return state.join(delimiter).startsWith(statePath.concat(chartId, key).join(delimiter))
5153
}, false)
5254

5355
return (
@@ -57,7 +59,7 @@ const ChartComponent: FunctionComponent<Props> = ({
5759
className={styles.stateName}
5860
style={{
5961
backgroundColor: isActiveState
60-
? nameToColor(chart.path.join('.'))
62+
? nameToColor(chart.path.join(delimiter))
6163
: null,
6264
}}
6365
>
@@ -69,7 +71,7 @@ const ChartComponent: FunctionComponent<Props> = ({
6971
className={styles.selectedLine}
7072
style={{
7173
backgroundColor: isActiveState
72-
? nameToColor(chart.path.join('.'))
74+
? nameToColor(chart.path.join(delimiter))
7375
: null,
7476
}}
7577
/>
@@ -80,7 +82,7 @@ const ChartComponent: FunctionComponent<Props> = ({
8082
className={styles.stateAction}
8183
style={{
8284
borderColor: isActiveState
83-
? nameToColor(chart.path.join('.'))
85+
? nameToColor(chart.path.join(delimiter))
8486
: null,
8587
}}
8688
>
@@ -95,7 +97,7 @@ const ChartComponent: FunctionComponent<Props> = ({
9597
className={styles.selectedLine}
9698
style={{
9799
backgroundColor: isActiveState
98-
? nameToColor(chart.path.join('.'))
100+
? nameToColor(chart.path.join(delimiter))
99101
: null,
100102
}}
101103
/>
@@ -106,7 +108,7 @@ const ChartComponent: FunctionComponent<Props> = ({
106108
className={styles.selectedLine}
107109
style={{
108110
backgroundColor: isActiveState
109-
? nameToColor(chart.path.join('.'))
111+
? nameToColor(chart.path.join(delimiter))
110112
: null,
111113
}}
112114
/>
@@ -115,7 +117,7 @@ const ChartComponent: FunctionComponent<Props> = ({
115117
className={styles.onCell}
116118
style={{
117119
borderColor: isActiveState
118-
? nameToColor(chart.path.join('.'))
120+
? nameToColor(chart.path.join(delimiter))
119121
: null,
120122
}}
121123
>
@@ -139,15 +141,15 @@ const ChartComponent: FunctionComponent<Props> = ({
139141
chart.actions[onKey]
140142
? () =>
141143
actions.selectQueryAction(
142-
chart.path.concat(onKey).join('.')
144+
chart.path.concat(onKey).join(delimiter)
143145
)
144146
: null
145147
}
146148
className={css(
147149
styles.stateNameCell,
148150
styles.onName,
149151
chart.actions[onKey] && styles.activeAction,
150-
chart.path.concat(onKey).join('.') ===
152+
chart.path.concat(onKey).join(delimiter) ===
151153
state.currentApp.selectedActionQuery &&
152154
styles.selectedAction
153155
)}
@@ -184,7 +186,7 @@ const ChartComponent: FunctionComponent<Props> = ({
184186
className={styles.selectedLine}
185187
style={{
186188
backgroundColor: isActiveState
187-
? nameToColor(chart.path.join('.'))
189+
? nameToColor(chart.path.join(delimiter))
188190
: null,
189191
}}
190192
/>
@@ -198,7 +200,7 @@ const ChartComponent: FunctionComponent<Props> = ({
198200
className={styles.stateAction}
199201
style={{
200202
borderColor: isActiveState
201-
? nameToColor(chart.path.join('.'))
203+
? nameToColor(chart.path.join(delimiter))
202204
: null,
203205
}}
204206
>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { createElement, FunctionComponent } from 'react'
1+
import { FunctionComponent, createElement } from 'react'
2+
23
import { useOvermind } from '../../overmind'
34
import ConsoleRow from '../ConsoleRow'
45
import * as styles from './styles'
@@ -9,7 +10,7 @@ const Console: FunctionComponent = () => {
910
return (
1011
<div className={styles.wrapper}>
1112
{state.currentApp.messages.map((message, index) => (
12-
<ConsoleRow key={index} message={message} />
13+
<ConsoleRow delimiter={state.currentApp.delimiter} key={index} message={message} />
1314
))}
1415
</div>
1516
)

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import { createElement, FunctionComponent, useState } from 'react'
1+
import { FunctionComponent, createElement, useState } from 'react'
2+
3+
import { AppMessage } from '../../overmind/types'
24
import Inspector from '../Inspector'
35
import * as styles from './styles'
4-
import { AppMessage } from '../../overmind/types'
56

67
type Props = {
78
message: AppMessage<any>
9+
delimiter: string
810
}
911

10-
const ConsoleRow: FunctionComponent<Props> = ({ message }) => {
12+
const ConsoleRow: FunctionComponent<Props> = ({ message, delimiter }) => {
1113
const [expandedPaths, setExpandedPaths] = useState<string[]>([])
1214

1315
function onToggleExpand(pathArray: string[]) {
@@ -27,6 +29,7 @@ const ConsoleRow: FunctionComponent<Props> = ({ message }) => {
2729
<div className={styles.wrapper}>
2830
<div className={styles.type}>{message.type}</div>
2931
<Inspector
32+
delimiter={delimiter}
3033
value={message.data}
3134
expandedPaths={expandedPaths}
3235
onToggleExpand={onToggleExpand}

0 commit comments

Comments
 (0)