Skip to content

Commit 4ead51a

Browse files
christianalfonichristianalfoni
authored
Merge pull request cerebral#181 from cerebral/effectState
Effect state
2 parents fbfa173 + e7d070e commit 4ead51a

File tree

18 files changed

+518
-277
lines changed

18 files changed

+518
-277
lines changed

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const ActionFlush: SFC<Props> = ({ flush }) => {
1515
const { state, actions } = useOvermind()
1616
const isExpanded = state.expandAllActionDetails || !flush.isCollapsed
1717

18-
return flush.components.length || flush.derived.length ? (
18+
return (
1919
<div className={actionStyles.pipe}>
2020
<Path />
2121
<div className={styles.flush}>
@@ -29,9 +29,13 @@ const ActionFlush: SFC<Props> = ({ flush }) => {
2929
<span className={textStyles.hint}>
3030
<Icon>chain</Icon> {flush.derived.length}
3131
</span>
32-
<span className={textStyles.hint}>
33-
{isExpanded ? <Icon>chevron-down</Icon> : <Icon>chevron-up</Icon>}
34-
</span>
32+
{flush.components.length || flush.derived.length ? (
33+
<span className={textStyles.hint}>
34+
{isExpanded ? <Icon>chevron-down</Icon> : <Icon>chevron-up</Icon>}
35+
</span>
36+
) : (
37+
<span className={textStyles.hint} />
38+
)}
3539
</div>
3640
{isExpanded ? (
3741
<div>
@@ -54,6 +58,6 @@ const ActionFlush: SFC<Props> = ({ flush }) => {
5458
) : null}
5559
</div>
5660
</div>
57-
) : null
61+
)
5862
}
5963
export default ActionFlush

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

Lines changed: 96 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { createElement, SFC } from 'react'
22
import { useOvermind } from '../../overmind'
3-
import { Operator as OperatorType } from '../../overmind/types'
3+
import {
4+
Operator as OperatorType,
5+
EventType,
6+
Effect,
7+
Mutation,
8+
} from '../../overmind/types'
49
import ValueInspector from '../ValueInspector'
510
import Icon from '../common/Icon'
611
import Path from '../ActionPath'
@@ -56,15 +61,14 @@ const ActionOperator: SFC<Props> = ({
5661
<div
5762
className={css(
5863
styles.operator(
59-
operator.type === 'mutate'
64+
operator.type === 'action'
6065
? 'var(--color-purple)'
6166
: 'var(--color-primary)'
6267
),
63-
operator.mutations.length ||
64-
(operator.effects.length && styles.operatorClickable)
68+
operator.events.length && styles.operatorClickable
6569
)}
6670
onClick={
67-
operator.mutations.length || operator.effects.length
71+
operator.events.length
6872
? () => actions.toggleCollapsedOperator(operatorIndex)
6973
: null
7074
}
@@ -88,7 +92,7 @@ const ActionOperator: SFC<Props> = ({
8892
>
8993
{operator.name}
9094
</span>
91-
{operator.mutations.length || operator.effects.length ? (
95+
{operator.events.length ? (
9296
<span className={css(textStyles.hint, styles.chevron)}>
9397
{isExpanded ? (
9498
<Icon>chevron-down</Icon>
@@ -100,72 +104,95 @@ const ActionOperator: SFC<Props> = ({
100104
</div>
101105
{isExpanded ? (
102106
<div onClick={(event) => event.stopPropagation()}>
103-
{operator.effects.map((effect, index) => (
104-
<div className={styles.operatorItem} key={index}>
105-
<span
106-
className={css(
107-
textStyles.description,
108-
textStyles.purple,
109-
textStyles.monospace
110-
)}
111-
>
112-
{effect.name
113-
? effect.name + '.' + effect.method
114-
: effect.method}
115-
</span>
116-
{effect.args.length === 1 &&
117-
effect.args[0] === undefined ? null : (
118-
<ValueInspector
119-
small
120-
value={
121-
effect.args.length > 1 ? effect.args : effect.args[0]
122-
}
123-
/>
124-
)}
125-
{effect.result === undefined ? null : (
126-
<span
107+
{operator.events.map((event, index) => {
108+
if (event.type === EventType.Effect) {
109+
const effect = event.data as Effect
110+
111+
return (
112+
<div
127113
className={css(
128-
textStyles.description,
129-
textStyles.monospace
114+
styles.operatorItem,
115+
effect.isPending && styles.pendingOperatorItem
130116
)}
117+
key={index}
131118
>
132-
=>
133-
</span>
134-
)}
135-
{effect.result === undefined ? null : (
136-
<ValueInspector small value={effect.result} />
137-
)}
138-
</div>
139-
))}
140-
{operator.mutations.map((mutation, index) => (
141-
<div className={styles.operatorItem} key={index}>
142-
<span
143-
className={css(
144-
textStyles.description,
145-
textStyles.yellow,
146-
textStyles.monospace
147-
)}
148-
>
149-
{mutation.method}
150-
</span>
151-
<span
152-
className={css(
153-
textStyles.description,
154-
textStyles.monospace
155-
)}
156-
>
157-
{mutation.path}
158-
</span>
159-
<ValueInspector
160-
small
161-
value={
162-
mutation.args.length > 1
163-
? mutation.args
164-
: mutation.args[0]
165-
}
166-
/>
167-
</div>
168-
))}
119+
<span
120+
className={css(
121+
textStyles.description,
122+
textStyles.purple,
123+
textStyles.monospace
124+
)}
125+
>
126+
{effect.name
127+
? effect.name + '.' + effect.method
128+
: effect.method}
129+
</span>
130+
{effect.args.length ? (
131+
<ValueInspector
132+
small
133+
value={
134+
effect.args.length > 1
135+
? effect.args
136+
: effect.args[0]
137+
}
138+
/>
139+
) : null}
140+
{effect.result === undefined && !effect.error ? null : (
141+
<span
142+
className={css(
143+
textStyles.description,
144+
textStyles.monospace
145+
)}
146+
>
147+
=>
148+
</span>
149+
)}
150+
{effect.result === undefined ? null : (
151+
<ValueInspector small value={effect.result} />
152+
)}
153+
{effect.error ? (
154+
<span className={styles.effectError}>
155+
{effect.error}
156+
</span>
157+
) : null}
158+
</div>
159+
)
160+
}
161+
162+
if (event.type === EventType.Mutation) {
163+
const mutation = event.data as Mutation
164+
165+
return (
166+
<div className={styles.operatorItem} key={index}>
167+
<span
168+
className={css(
169+
textStyles.description,
170+
textStyles.yellow,
171+
textStyles.monospace
172+
)}
173+
>
174+
{mutation.method}
175+
</span>
176+
<span
177+
className={css(
178+
textStyles.description,
179+
textStyles.monospace
180+
)}
181+
>
182+
{mutation.path}
183+
</span>
184+
<ValueInspector
185+
small
186+
value={
187+
mutation.args.length > 1
188+
? mutation.args
189+
: mutation.args[0]
190+
}
191+
/>
192+
</div>
193+
)
194+
}
195+
})}
169196
</div>
170197
) : null}
171198
</div>

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { css } from 'emotion'
1+
import { css, keyframes } from 'emotion'
22

33
export const operator = (borderColor: string) => css`
44
flex: 1;
@@ -47,3 +47,25 @@ export const operatorItem = css`
4747
margin-right: 10px;
4848
}
4949
`
50+
51+
export const effectError = css`
52+
background-color: var(--color-red);
53+
color: var(--color-white-1);
54+
padding: var(--padding-1) var(--padding-3);
55+
font-size: var(--font-size-2);
56+
border-radius: 2px;
57+
`
58+
59+
const pulse = keyframes`
60+
from {
61+
opacity: 0.5;
62+
}
63+
to {
64+
opacity: 1;
65+
}
66+
`
67+
68+
export const pendingOperatorItem = css`
69+
animation: ${pulse} 1s ease-out infinite;
70+
animation-direction: alternate;
71+
`

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createElement, SFC } from 'react'
1+
import { Fragment, createElement, SFC } from 'react'
22
import { useOvermind } from '../../overmind'
33
import { getAppShortName, nameToColor } from '../../overmind/utils'
44
import * as styles from './styles'
@@ -14,25 +14,25 @@ const Apps: SFC = () => {
1414
>
1515
{getAppShortName(state.currentAppName)}
1616
</div>
17-
{state.showApps
18-
? [
19-
<div className={styles.overlay} onClick={actions.toggleShowApps} />,
20-
<div className={styles.appsList}>
21-
{Object.keys(state.apps).map((appName) => (
22-
<div
23-
className={css(
24-
styles.app,
25-
state.currentAppName === appName && styles.appSelected
26-
)}
27-
key={appName}
28-
onClick={() => actions.selectApp(appName)}
29-
>
30-
{appName}
31-
</div>
32-
))}
33-
</div>,
34-
]
35-
: null}
17+
{state.showApps ? (
18+
<Fragment>
19+
<div className={styles.overlay} onClick={actions.toggleShowApps} />
20+
<div className={styles.appsList}>
21+
{Object.keys(state.apps).map((appName) => (
22+
<div
23+
className={css(
24+
styles.app,
25+
state.currentAppName === appName && styles.appSelected
26+
)}
27+
key={appName}
28+
onClick={() => actions.selectApp(appName)}
29+
>
30+
{appName}
31+
</div>
32+
))}
33+
</div>
34+
</Fragment>
35+
) : null}
3636
</div>
3737
)
3838
}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,25 @@ export const wrapper = css`
77
height: 50px;
88
justify-content: center;
99
align-items: center;
10+
z-index: 99999;
1011
`
1112

1213
export const app = css`
1314
outline: none;
1415
border: 0;
1516
width: 100%;
1617
cursor: pointer;
17-
background-color: var(--color-dark-1);
18+
background-color: var(--color-white-1);
1819
display: flex;
1920
align-items: center;
2021
color: var(--color-black-1);
2122
padding: var(--padding-3) var(--padding-4);
2223
white-space: nowrap;
24+
cursor: pointer;
2325
`
2426

2527
export const appSelected = css`
26-
background-color: var(--color-dark-2);
28+
background-color: var(--color-white-2);
2729
`
2830

2931
export const currentApp = (color: string) => css`
@@ -47,14 +49,13 @@ export const overlay = css`
4749
left: 0;
4850
width: 100vw;
4951
height: 100vh;
50-
z-index: 99999;
5152
`
5253

5354
export const appsList = css`
5455
position: absolute;
5556
left: calc(100% + 1px);
5657
top: 0;
5758
background-color: #fff;
58-
border-right: 1px solid var(--color-white-2);
59-
border-bottom: 1px solid var(--color-white-2);
59+
border-right: 1px solid var(--color-dark-2);
60+
border-bottom: 1px solid var(--color-dark-2);
6061
`

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ injectGlobal`
1717
--color-purple: #c5a5c5;
1818
--color-yellow: #fac863;
1919
--color-blue: #79b6f2;
20+
--color-blue: #79b6f2;
21+
--color-red: #cc0000;
2022
2123
--color-dark-1: hsl(206, 57%, 17%);
2224
--color-dark-2: hsl(206, 57%, 13%);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
updateOperator,
2121
updateAction,
2222
addMutations,
23-
addEffect,
23+
updateEffect,
2424
setPortExists,
2525
isPortExistsMessage,
2626
getMessages,
@@ -55,7 +55,7 @@ const handleClientMessage: Operator<Message, any> = pipe(
5555
[ExecutionType.FLUSH]: addFlushAndRunMutations,
5656
[ExecutionType.DERIVED]: updateDerived,
5757
[ExecutionType.MUTATIONS]: addMutations,
58-
[ExecutionType.EFFECT]: addEffect,
58+
[ExecutionType.EFFECT]: updateEffect,
5959
[ExecutionType.COMPONENT_ADD]: addComponent,
6060
[ExecutionType.COMPONENT_UPDATE]: updateComponent,
6161
[ExecutionType.COMPONENT_REMOVE]: removeComponent,

0 commit comments

Comments
 (0)