This repository has been archived by the owner on Sep 2, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
ConnectionStream.stories.tsx
67 lines (57 loc) · 1.82 KB
/
ConnectionStream.stories.tsx
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
import {action} from "@storybook/addon-actions";
import {storiesOf} from "@storybook/react";
import React from "react";
import {CounterContext} from "../test-support/connectionContextFixtures";
interface ICounterProps {
count: number;
delayInSeconds: number;
}
const effect = action("[CounterSubscriber]: Update");
storiesOf("Connection stream", module)
.addDecorator(story => (
<CounterContext.Provider>
<div>{story()}</div>
</CounterContext.Provider>
))
.add("subscription", () => {
function Subscriber(props: ICounterProps) {
const streamState = CounterContext.useStream<number>(
conn =>
conn.stream("ObservableCounter", props.count, props.delayInSeconds),
[props.count, props.delayInSeconds]
);
const {value, error, done} = streamState;
if (done) {
return <span>{value} done ✔</span>;
}
if (error) {
return <span>Subscription error ❌</span>;
}
if (value || value === 0) {
return <span>{value.toString()}</span>;
}
return <span>Connecting...</span>;
}
return <Subscriber count={5} delayInSeconds={1} />;
})
.add("subscription w/ side effects", () => {
function SubscriberWithEffects(props: ICounterProps) {
const streamState = CounterContext.useStream<number>(
conn =>
conn.stream("ObservableCounter", props.count, props.delayInSeconds),
[props.count, props.delayInSeconds]
);
React.useEffect(() => {
effect(streamState);
}, [streamState.value, streamState.error, streamState.done]);
return null;
}
return (
<React.Fragment>
<p>
See the <strong>Action Logger</strong> section for updates
</p>
<SubscriberWithEffects count={5} delayInSeconds={1} />
</React.Fragment>
);
});