-
Notifications
You must be signed in to change notification settings - Fork 94
/
index.js
116 lines (107 loc) 路 3.38 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from "react"
import { ActionTypes, reducer, globalScope } from "react-async"
import { Root, Range, Checkbox, Label, Small, Ol, Li, Button } from "./components"
const storage = globalScope.sessionStorage
const state = {
intercept: (storage && storage.getItem("intercept") === "true") || false,
latency: (storage && storage.getItem("latency")) || "0",
update: () => {},
}
globalScope.__REACT_ASYNC__.devToolsDispatcher = (action, dispatch) => {
const run = () => {
dispatch(action)
state.update(action)
}
switch (action.type) {
case ActionTypes.start:
if (state.intercept) {
dispatch({ ...action, payload: undefined })
state.update(action, run)
} else run()
break
case ActionTypes.fulfill:
case ActionTypes.reject:
setTimeout(run, state.latency * 1000)
break
default:
run()
}
}
const DevTools = () => {
const [instances, setInstances] = React.useState({})
const [interceptState, setIntercept] = React.useState(state.intercept)
const intercept = React.useRef(interceptState)
const [latencyState, setLatency] = React.useState(state.latency)
const delay = React.useRef(latencyState * 1000)
state.update = (action, run) => {
const label = action.meta.debugLabel
setInstances(instances => ({
...instances,
[label]: { label, state: reducer(instances[label], action), run },
}))
}
const updateLatency = event => {
storage && storage.setItem("latency", event.target.value)
delay.current = event.target.value * 1000
state.latency = event.target.value
setLatency(event.target.value)
}
const updateIntercept = event => {
storage && storage.setItem("intercept", event.target.checked ? "true" : "false")
state.intercept = event.target.checked
intercept.current = event.target.checked
setIntercept(event.target.checked)
}
const states = Object.keys(instances).map(label => instances[label])
const pending = states.filter(({ state }) => state.status === "pending")
const fulfilled = states.filter(({ state }) => state.status === "fulfilled")
const rejected = states.filter(({ state }) => state.status === "rejected")
return (
<Root>
<Label>
Latency:{" "}
<b>
{latencyState} {latencyState === "1" ? "second" : "seconds"}
</b>
<Range max="5" value={latencyState} onChange={updateLatency} />
</Label>
<Label>
<Checkbox checked={interceptState} onChange={updateIntercept} />
Pause new requests
</Label>
{pending.length > 0 && (
<section>
<Small>Pending</Small>
<Ol>
{pending.map(({ label, run }, index) => (
<Li key={index}>
{label} {run && <Button onClick={run}>run</Button>}
</Li>
))}
</Ol>
</section>
)}
{fulfilled.length > 0 && (
<section>
<Small>Fulfilled</Small>
<Ol>
{fulfilled.map((promise, index) => (
<Li key={index}>{promise.label}</Li>
))}
</Ol>
</section>
)}
{rejected.length > 0 && (
<section>
<Small>Rejected</Small>
<Ol>
{rejected.map((promise, index) => (
<Li key={index}>{promise.label}</Li>
))}
</Ol>
</section>
)}
</Root>
)
}
export default DevTools