Skip to content

Commit d37fb98

Browse files
usulprousulpro
committed
Support async actions
1 parent beec9ce commit d37fb98

File tree

9 files changed

+320
-96
lines changed

9 files changed

+320
-96
lines changed

‎.babelrc‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
{
2-
"presets": ["@babel/preset-env", "@babel/preset-react"],
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"targets": {
7+
"node": "current"
8+
}
9+
}
10+
],
11+
"@babel/preset-react"
12+
],
313
"plugins": ["@babel/plugin-proposal-class-properties"]
414
}

‎dev/register.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ const AddonPanel = ({
2828
update,
2929
theme,
3030
data,
31-
comment
31+
comment,
32+
request
3233
}) => {
3334
return (
3435
<LayoutBlock style={{ padding: 0 }}>
@@ -42,6 +43,7 @@ const AddonPanel = ({
4243
Update
4344
</button>
4445
<button onClick={() => comment()}> comment </button>
46+
<button onClick={() => request()}> request </button>
4547
</AddonBlock>
4648
{/* <Block style={blockStyle}>
4749
<small>{JSON.stringify(api.getCurrentStoryData())}</small>
@@ -54,6 +56,10 @@ const AddonPanel = ({
5456
);
5557
};
5658

59+
const AsyncRequest = () => new Promise(resolve => {
60+
setTimeout(() => resolve(), 3000);
61+
})
62+
5763
register(
5864
{
5965
themeInd: store => store.currentTheme,
@@ -75,6 +81,13 @@ register(
7581
...store,
7682
comment: 'comment',
7783
})),
84+
request: local(async store => {
85+
await AsyncRequest();
86+
return ({
87+
...store,
88+
result: 'Request Success',
89+
})
90+
}),
7891
})
7992
)(AddonPanel);
8093

‎dev/withAdk.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ const DecoratorUI = ({ context, getStory, theme, info }) => (
1313
export const withAdk = createDecorator({
1414
theme: store => store.themes[store.currentTheme],
1515
info: store => JSON.stringify(store, null, 2)
16-
})(DecoratorUI, { isGlobal: false });
16+
})(DecoratorUI, { isGlobal: true });
1717
export const adkParams = setParameters();

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"@storybook/react": "^5.1.9",
3939
"@usulpro/package-prepare": "^1.1.4",
4040
"babel-eslint": "^10.0.1",
41-
"babel-jest": "^24.7.1",
41+
"babel-jest": "^24.9.0",
4242
"babel-loader": "^8.0.2",
4343
"nodemon": "^1.18.9",
4444
"prettier": "^1.18.2",

‎src/ChannelStore.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,14 +124,14 @@ export default class ChannelStore {
124124
});
125125

126126
_createAction = (reducer, getSubId) => {
127-
return payload => {
127+
return async payload => {
128128
const subId = getSubId();
129129
const subData = this.store[subId];
130130
const current = {
131131
...subData.init,
132132
...subData.over,
133133
};
134-
const over = (reducer || this.defaultReducer)(current, payload);
134+
const over = await (reducer || this.defaultReducer)(current, payload);
135135
subData.over = over;
136136

137137
this.send();

‎src/__tests__/ChannelStore.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -233,9 +233,9 @@ describe('ChannelStore Actions', () => {
233233
index: store.index + step,
234234
});
235235

236-
it('should create global action / call subscriber / send event', () => {
236+
it('should create global action / call subscriber / send event', async () => {
237237
const incAction = store.createGlobalAction(reducer);
238-
incAction(2);
238+
await incAction(2);
239239
const newData = initWith({ index: 2 });
240240
const newStore = {
241241
global: {

‎src/__tests__/__mocks__/storybook-addons.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ const channel = {
22
on: (event, cb) => console.log('on', event),
33
};
44

5-
console.log('TCL: channel', channel);
6-
75
const addons = {
86
getChannel: () => channel,
97
};

‎src/withChannel.js‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -26,73 +26,73 @@ const withChannel = ({
2626
storeSelectors = {},
2727
createActions = {},
2828
}) => WrappedComponent =>
29-
class extends React.Component {
30-
static displayName = `WithChannel(${getDisplayName(WrappedComponent)})`;
31-
32-
constructor(props, ...args) {
33-
super(props, ...args);
34-
const initStateData = {
35-
...initData,
36-
...props.initData,
37-
...parameters,
38-
};
29+
class extends React.Component {
30+
static displayName = `WithChannel(${getDisplayName(WrappedComponent)})`;
31+
32+
constructor(props, ...args) {
33+
super(props, ...args);
34+
const initStateData = {
35+
...initData,
36+
...props.initData,
37+
...parameters,
38+
};
3939

40-
const isReceived = false;
40+
const isReceived = false;
4141

42-
this.state = {
43-
data: initStateData,
44-
selectors: isReceived ? this.prepareSelectors(initStateData) : {},
42+
this.state = {
43+
data: initStateData,
44+
selectors: isReceived ? this.prepareSelectors(initStateData) : {},
4545
isReceived,
4646
};
4747

4848
this.store = (panel ? getSingleStore : getNewStore)({
4949
EVENT_ID_INIT,
5050
EVENT_ID_DATA,
5151
EVENT_ID_BACK,
52-
name: props.pointName,
53-
initData: this.state.data,
54-
isPanel: this.isPanel,
55-
storyId,
56-
});
52+
name: props.pointName,
53+
initData: this.state.data,
54+
isPanel: this.isPanel,
55+
storyId,
56+
});
5757

58-
this.actions = this.prepareActions();
59-
}
58+
this.actions = this.prepareActions();
59+
}
6060

61-
isPanel = this.props.panel || panel;
61+
isPanel = this.props.panel || panel;
6262

63-
prepareSelectors = store => {
64-
return Object.entries(storeSelectors)
65-
.map(([name, selector]) => ({
66-
[name]: tryToSelect(selector)(store),
67-
}))
68-
.reduce((akk, cur) => ({ ...akk, ...cur }), {});
69-
};
63+
prepareSelectors = store => {
64+
return Object.entries(storeSelectors)
65+
.map(([name, selector]) => ({
66+
[name]: tryToSelect(selector)(store),
67+
}))
68+
.reduce((akk, cur) => ({ ...akk, ...cur }), {});
69+
};
7070

71-
prepareActions = () => {
72-
const {
73-
createGlobalAction: global,
74-
createLocalAction: local,
75-
} = this.store;
76-
const isFn = typeof createActions === 'function';
77-
const actions = isFn
78-
? createActions({ global, local })
79-
: Object.entries(createActions)
71+
prepareActions = () => {
72+
const {
73+
createGlobalAction: global,
74+
createLocalAction: local,
75+
} = this.store;
76+
const isFn = typeof createActions === 'function';
77+
const actions = isFn
78+
? createActions({ global, local })
79+
: Object.entries(createActions)
8080
.map(([name, reducer]) => ({ [name]: global(reducer) }))
8181
.reduce((acc, cur) => ({ ...acc, ...cur }), {});
82-
return actions;
83-
};
82+
return actions;
83+
};
8484

85-
componentDidMount() {
86-
this.debugLog('componentDidMount');
87-
this.store.onData(this.onData);
88-
if (this.state.data && !this.isPanel) {
89-
this.store.onConnected(() => this.store.sendInit(this.state.data));
85+
componentDidMount() {
86+
this.debugLog('componentDidMount');
87+
this.store.onData(this.onData);
88+
if (this.state.data && !this.isPanel) {
89+
this.store.onConnected(() => this.store.sendInit(this.state.data));
90+
}
91+
this.store.connect();
9092
}
91-
this.store.connect();
92-
}
9393

94-
componentWillUnmount() {
95-
this.debugLog('componentWillUnmount');
94+
componentWillUnmount() {
95+
this.debugLog('componentWillUnmount');
9696
this.store.disconnect();
9797
}
9898

@@ -101,43 +101,43 @@ const withChannel = ({
101101

102102
debugLog = message => {
103103
if (!this.debug) {
104-
return;
105-
}
106-
console.log(
107-
this.store.isPanel ? 'Panel:\n' : 'Preview:\n',
108-
message,
109-
this.store.store
110-
);
111-
};
104+
return;
105+
}
106+
console.log(
107+
this.store.isPanel ? 'Panel:\n' : 'Preview:\n',
108+
message,
109+
this.store.store
110+
);
111+
};
112112

113-
onData = data => {
114-
this.setState({
115-
data,
116-
isReceived: true,
117-
selectors: this.prepareSelectors(data),
118-
});
119-
};
113+
onData = data => {
114+
this.setState({
115+
data,
116+
isReceived: true,
117+
selectors: this.prepareSelectors(data),
118+
});
119+
};
120120

121-
render() {
122-
const { pointName, initData, active, onData, ...props } = this.props;
123-
const { data, isReceived, selectors } = this.state;
124-
125-
if (active === false) return null;
126-
127-
return (
128-
<WrappedComponent
129-
data={data}
130-
setData={this.store.send}
131-
store={this.store}
132-
active={active}
133-
parameters={parameters}
134-
selectors={selectors}
135-
actions={this.actions}
136-
isFirstDataReceived={isReceived}
137-
{...props}
138-
/>
139-
);
140-
}
141-
};
121+
render() {
122+
const { pointName, initData, active, onData, ...props } = this.props;
123+
const { data, isReceived, selectors } = this.state;
124+
125+
if (active === false) return null;
126+
127+
return (
128+
<WrappedComponent
129+
data={data}
130+
setData={this.store.send}
131+
store={this.store}
132+
active={active}
133+
parameters={parameters}
134+
selectors={selectors}
135+
actions={this.actions}
136+
isFirstDataReceived={isReceived}
137+
{...props}
138+
/>
139+
);
140+
}
141+
};
142142

143143
export default withChannel;

0 commit comments

Comments
 (0)