Skip to content

Commit 7df86e6

Browse files
christianalfonichristianalfoni
committed
fix(overmind-devtools-client): refactor to new hooks
1 parent aec24e8 commit 7df86e6

File tree

24 files changed

+212
-200
lines changed

24 files changed

+212
-200
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createElement, FunctionComponent, Fragment } from 'react'
2-
import { useOvermind } from '../../overmind'
2+
import { useAppState } from '../../overmind'
33
import * as styles from './styles'
44
import ActionOperator from '../ActionOperator'
55
import {
@@ -15,7 +15,7 @@ type Props = {
1515
}
1616

1717
const Action: FunctionComponent<Props> = ({ action, inline }) => {
18-
const { state } = useOvermind()
18+
const state = useAppState()
1919
const operatorsByPath = getOperatorsByPath(action)
2020

2121
function renderOperators(operatorsByPath: OperatorsByPath) {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createElement, FunctionComponent } from 'react'
2-
import { useOvermind } from '../../overmind'
2+
import { useAppState } from '../../overmind'
33
import { Flush as FlushType } from '../../overmind/types'
44
import * as actionStyles from '../Action/styles'
55
import * as styles from './styles'
@@ -12,7 +12,7 @@ type Props = {
1212
}
1313

1414
const ActionFlush: FunctionComponent<Props> = ({ flush }) => {
15-
const { state } = useOvermind()
15+
const state = useAppState()
1616

1717
return (
1818
<div className={styles.flush}>

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

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from 'emotion'
22
import { Fragment, FunctionComponent, createElement } from 'react'
33

4-
import { useOvermind } from '../../overmind'
4+
import { useAppState } from '../../overmind'
55
import {
66
Effect,
77
EventType,
@@ -28,7 +28,7 @@ const ActionOperator: FunctionComponent<Props> = ({
2828
value,
2929
flush,
3030
}) => {
31-
const { state } = useOvermind()
31+
const state = useAppState()
3232
const delimiter = state.currentApp.delimiter
3333

3434
return (
@@ -83,7 +83,11 @@ const ActionOperator: FunctionComponent<Props> = ({
8383
(
8484
{effect.args.map((arg, argIndex) => (
8585
<Fragment key={argIndex}>
86-
<ValueInspector delimiter={delimiter} small value={arg} />
86+
<ValueInspector
87+
delimiter={delimiter}
88+
small
89+
value={arg}
90+
/>
8791
{argIndex === effect.args.length - 1 ? null : (
8892
<span>,</span>
8993
)}
@@ -98,11 +102,15 @@ const ActionOperator: FunctionComponent<Props> = ({
98102
textStyles.monospace
99103
)}
100104
>
101-
=>
105+
{'=>'}
102106
</span>
103107
)}
104108
{effect.result === undefined ? null : (
105-
<ValueInspector delimiter={delimiter} small value={effect.result} />
109+
<ValueInspector
110+
delimiter={delimiter}
111+
small
112+
value={effect.result}
113+
/>
106114
)}
107115
{effect.error ? (
108116
<span className={styles.effectError}>{effect.error}</span>
@@ -134,7 +142,12 @@ const ActionOperator: FunctionComponent<Props> = ({
134142
{mutation.path.split(delimiter).join('.')}
135143
</span>
136144
{mutation.args.map((arg, argIndex) => (
137-
<ValueInspector delimiter={delimiter} key={argIndex} small value={arg} />
145+
<ValueInspector
146+
delimiter={delimiter}
147+
key={argIndex}
148+
small
149+
value={arg}
150+
/>
138151
))}
139152
</div>
140153
)

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { FunctionComponent, createElement, useEffect, useRef } from 'react'
22

3-
import { useOvermind } from '../../overmind'
3+
import { useAppState, useActions, useReaction } from '../../overmind'
44
import { isValidJson } from '../../overmind/utils'
55
import { colors } from '../../theme'
66
import * as styles from './styles'
77

88
const ActionPayload: FunctionComponent = () => {
9-
const { state, actions, reaction } = useOvermind()
9+
const state = useAppState()
10+
const actions = useActions()
11+
const reaction = useReaction()
1012
const input = useRef(null)
1113

1214
useEffect(() => {
@@ -30,9 +32,7 @@ const ActionPayload: FunctionComponent = () => {
3032
!state.currentApp.selectedActionQuery || state.isExecutingAction
3133
}
3234
placeholder={
33-
state.currentApp.selectedActionQuery
34-
? 'Add some payload...'
35-
: null
35+
state.currentApp.selectedActionQuery ? 'Add some payload...' : null
3636
}
3737
onKeyDown={(event) => {
3838
if (event.keyCode === 13) {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { createElement, FunctionComponent, Fragment } from 'react'
22
import * as styles from './styles'
3-
import { useOvermind } from '../../overmind'
3+
import { useAppState, useActions } from '../../overmind'
44
import { nameToColor } from '../../overmind/utils'
55
import { css } from 'emotion'
66

77
const ActionSelector: FunctionComponent = () => {
8-
const { state, actions } = useOvermind()
8+
const state = useAppState()
9+
const actions = useActions()
910
const app = state.currentApp
1011

1112
if (app.isQueryingAction) {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { createElement, FunctionComponent } from 'react'
22
import SplitPane from 'react-split-pane'
3-
import { useOvermind } from '../../overmind'
3+
import { useAppState, useActions } from '../../overmind'
44
import ActionsList from '../ActionsList'
55
import Action from '../Action'
66
import * as styles from './styles'
77
import * as textStyles from '../../styles/text'
88
import ActionsTools from '../ActionsTools'
99

1010
const Actions: FunctionComponent = () => {
11-
const { state, actions } = useOvermind()
11+
const state = useAppState()
12+
const actions = useActions()
1213

1314
return (
1415
<div className={styles.wrapper}>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@ import { css } from 'emotion'
22
import { Fragment, FunctionComponent, createElement } from 'react'
33
import { FaChevronDown } from 'react-icons/fa'
44

5-
import { useOvermind } from '../../overmind'
5+
import { useAppState, useActions } from '../../overmind'
66
import { ActionsListItemType } from '../../overmind/types'
77
import { nameToColor } from '../../overmind/utils'
88
import * as textStyles from '../../styles/text'
99
import * as styles from './styles'
1010

1111
const ActionsList: FunctionComponent = () => {
12-
const { state, actions } = useOvermind()
12+
const state = useAppState()
13+
const actions = useActions()
1314

1415
return (
1516
<div className={styles.wrapper}>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { FunctionComponent, createElement } from 'react'
22
import { FaRocket } from 'react-icons/fa'
33

4-
import { useOvermind } from '../../overmind'
4+
import { useActions, useAppState } from '../../overmind'
55
import { colors } from '../../theme'
66
import ActionPayload from '../ActionPayload'
77
import ActionSelector from '../ActionSelector'
88
import * as styles from './styles'
99

1010
const ActionsTools: FunctionComponent = () => {
11-
const { state, actions } = useOvermind()
11+
const state = useAppState()
12+
const actions = useActions()
1213

1314
return (
1415
<form

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { Fragment, createElement, FunctionComponent } from 'react'
2-
import { useOvermind } from '../../overmind'
2+
import { useAppState, useActions } from '../../overmind'
33
import { getAppShortName, nameToColor } from '../../overmind/utils'
44
import * as styles from './styles'
55
import { css } from 'emotion'
66

77
const Apps: FunctionComponent = () => {
8-
const { state, actions } = useOvermind()
8+
const state = useAppState()
9+
const actions = useActions()
910

1011
if (!state.currentApp) {
1112
return <div className={styles.wrapper}>N/A</div>

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

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { css } from 'emotion'
22
import { Fragment, FunctionComponent, createElement, useState } from 'react'
33
import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
44

5-
import { useOvermind } from '../../overmind'
5+
import { useAppState, useActions } from '../../overmind'
66
import { Chart, NestedChart } from '../../overmind/types'
77
import { nameToColor } from '../../overmind/utils'
88
import * as textStyles from '../../styles/text'
@@ -22,36 +22,56 @@ const ChartComponent: FunctionComponent<Props> = ({
2222
nestedCharts = chart.charts,
2323
}) => {
2424
const [expandedIds, setExpandedIds] = useState([])
25-
const { state, actions } = useOvermind()
26-
25+
const state = useAppState()
26+
const actions = useActions()
27+
2728
const delimiter = state.currentApp.delimiter
2829

2930
return (
30-
<div className={styles.outerWrapper}>
31+
<div className={styles.outerWrapper}>
3132
{Object.keys(nestedCharts).map((chartId) => {
3233
const nestedChart = nestedCharts[chartId]
33-
const keys = expandedIds.includes(chartId) ? Object.keys(nestedChart.states) : Object.keys(nestedChart.states).filter((key) => {
34-
return chart.states.reduce((aggr, state) => {
35-
if (aggr) return true
34+
const keys = expandedIds.includes(chartId)
35+
? Object.keys(nestedChart.states)
36+
: Object.keys(nestedChart.states).filter((key) => {
37+
return chart.states.reduce((aggr, state) => {
38+
if (aggr) return true
3639

37-
return state.join(delimiter).startsWith(statePath.concat(chartId, key).join(delimiter))
38-
}, false)
39-
})
40+
return state
41+
.join(delimiter)
42+
.startsWith(statePath.concat(chartId, key).join(delimiter))
43+
}, false)
44+
})
4045

4146
return (
42-
4347
<Fragment key={chartId}>
44-
<div className={styles.id} onClick={() => {
45-
setExpandedIds(expandedIds.includes(chartId) ? expandedIds.filter((id) => id !== chartId) : expandedIds.concat(chartId))
46-
}}>{expandedIds.includes(chartId) ? <FaChevronDown /> : <FaChevronUp />} {chartId}</div>
48+
<div
49+
className={styles.id}
50+
onClick={() => {
51+
setExpandedIds(
52+
expandedIds.includes(chartId)
53+
? expandedIds.filter((id) => id !== chartId)
54+
: expandedIds.concat(chartId)
55+
)
56+
}}
57+
>
58+
{expandedIds.includes(chartId) ? (
59+
<FaChevronDown />
60+
) : (
61+
<FaChevronUp />
62+
)}{' '}
63+
{chartId}
64+
</div>
4765
<div className={styles.wrapper}>
4866
{keys.map((key) => {
4967
const isActiveState = chart.states.reduce((aggr, state) => {
5068
if (aggr) return true
51-
52-
return state.join(delimiter).startsWith(statePath.concat(chartId, key).join(delimiter))
69+
70+
return state
71+
.join(delimiter)
72+
.startsWith(statePath.concat(chartId, key).join(delimiter))
5373
}, false)
54-
74+
5575
return (
5676
<div key={key} className={styles.stateItem}>
5777
<div className={styles.stateNameCell}>
@@ -141,7 +161,9 @@ const ChartComponent: FunctionComponent<Props> = ({
141161
chart.actions[onKey]
142162
? () =>
143163
actions.selectQueryAction(
144-
chart.path.concat(onKey).join(delimiter)
164+
chart.path
165+
.concat(onKey)
166+
.join(delimiter)
145167
)
146168
: null
147169
}
@@ -154,14 +176,18 @@ const ChartComponent: FunctionComponent<Props> = ({
154176
styles.selectedAction
155177
)}
156178
>
157-
<span className={textStyles.normal}>{onKey}</span>
179+
<span className={textStyles.normal}>
180+
{onKey}
181+
</span>
158182
</div>
159183
<div className={styles.stateLineCell}>
160184
{target ? (
161185
<div className={styles.transitionLine} />
162186
) : null}
163187
</div>
164-
<div className={styles.transitionCell}>{target}</div>
188+
<div className={styles.transitionCell}>
189+
{target}
190+
</div>
165191
<div className={styles.nestedRoomCell} />
166192
</div>
167193
)
@@ -214,11 +240,11 @@ const ChartComponent: FunctionComponent<Props> = ({
214240
)}
215241
</div>
216242
)
217-
})}
218-
</div>
219-
</Fragment>
220-
)
221-
})}
243+
})}
244+
</div>
245+
</Fragment>
246+
)
247+
})}
222248
</div>
223249
)
224250
}

0 commit comments

Comments
 (0)