Skip to content

Commit 5924fbd

Browse files
jamaljsrjamaljsr
authored
Merge pull request #35 from lightninglabs/refactor-mobx
Refactor mobx stores
2 parents cd2759e + 40ce2dc commit 5924fbd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1695
-1650
lines changed

‎app/.storybook/preview.tsx

Lines changed: 9 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,18 @@
11
import React from 'react';
22
import 'mobx-react-lite/batchingForReactDom';
3-
import { addDecorator, addParameters } from '@storybook/react';
3+
import { addDecorator } from '@storybook/react';
44
import '../src/App.scss';
55
import '../src/i18n';
6-
import { createActions } from '../src/action';
7-
import { Background } from '../src/components/common/base';
8-
import { ThemeProvider } from '../src/components/theme';
9-
import { Store, StoreProvider } from '../src/store';
10-
import { sampleApiResponses } from '../src/util/tests/sampleData';
6+
import StoryWrapper from '../src/__stories__/StoryWrapper';
117

128
/**
13-
* Create a store with dummy data to use for stories
14-
*/
15-
const store = new Store();
16-
17-
/**
18-
* Create dummy actions to use for stories
19-
*/
20-
21-
// mock the GRPC client to return sample data instead of making an actual request
22-
const grpc = {
23-
request: (methodDescriptor: any) => {
24-
const endpoint = `${methodDescriptor.service.serviceName}.${methodDescriptor.methodName}`;
25-
const data = sampleApiResponses[endpoint] || {};
26-
// the calling function expects the return value to have a `toObject` function
27-
const response: any = { toObject: () => data };
28-
return Promise.resolve(response);
29-
},
30-
};
31-
const actions = createActions(store, grpc);
32-
33-
// execute actions to populate the store data with the sample API responses
34-
actions.node.getBalances();
35-
actions.channel.getChannels();
36-
actions.swap.listSwaps();
37-
actions.swap.getTerms();
38-
39-
/**
40-
* add the mobx store to Storybook parameters so that stories can manipulate it
41-
*/
42-
addParameters({ store });
43-
44-
/**
45-
* decorator function to wrap all stories with the necessary providers
9+
* adds a common wrapper component around all stories to:
10+
* - set the background color
11+
* - include the theme & store providers
12+
* - use Storybook parameters to customize the width of the wrapper
4613
*/
4714
addDecorator((StoryFn, ctx) => (
48-
<StoreProvider store={store} actions={actions}>
49-
<ThemeProvider>
50-
{/* modify the bg styles so it isn't too big in docs mode */}
51-
<Background style={{ minHeight: 'inherit', height: '100%' }}>
52-
{ctx.parameters.centered ? (
53-
// wrap the component in a centered div for small components
54-
<div style={{ width: 300, margin: 'auto', padding: '100px 0' }}>
55-
<StoryFn {...ctx} />
56-
</div>
57-
) : ctx.parameters.contained ? (
58-
// or wrap in a full width container for larger components
59-
<div
60-
style={{
61-
width: '98%',
62-
maxWidth: '1440px',
63-
margin: 'auto',
64-
overflow: 'hidden',
65-
}}
66-
>
67-
<StoryFn {...ctx} />
68-
</div>
69-
) : (
70-
// or don't wrap for the layout
71-
<StoryFn {...ctx} />
72-
)}
73-
</Background>
74-
</ThemeProvider>
75-
</StoreProvider>
15+
<StoryWrapper centered={ctx.parameters.centered} contained={ctx.parameters.contained}>
16+
<StoryFn {...ctx} />
17+
</StoryWrapper>
7618
));

‎app/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import './App.scss';
3-
import { Store, StoreProvider } from 'store';
3+
import { createStore, StoreProvider } from 'store';
44
import { Layout } from 'components/layout';
55
import LoopPage from 'components/loop/LoopPage';
66
import { ThemeProvider } from 'components/theme';
77

88
const App = () => {
9-
const store = new Store();
9+
const store = createStore();
1010
return (
1111
<StoreProvider store={store}>
1212
<ThemeProvider>

‎app/src/__stories__/ChannelBalance.stories.tsx

Lines changed: 18 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
2-
import { BalanceLevel } from 'types/state';
3-
import { StoryContext } from '@storybook/addons';
4-
import { Store } from 'store';
2+
import { lndListChannelsOne } from 'util/tests/sampleData';
3+
import { Channel } from 'store/models';
54
import ChannelBalance from 'components/loop/ChannelBalance';
65

76
export default {
@@ -10,45 +9,27 @@ export default {
109
parameters: { centered: true },
1110
};
1211

13-
export const Good = (ctx: StoryContext) => {
14-
// grab the store from the Storybook parameter defined in preview.tsx
15-
const store = ctx.parameters.store as Store;
16-
const channel = {
17-
...store.channels[0],
18-
localPercent: 59,
19-
balanceLevel: BalanceLevel.good,
20-
};
21-
return <ChannelBalance channel={channel} />;
12+
const getChannel = (ratio: number) => {
13+
const channel = new Channel(lndListChannelsOne.channelsList[0]);
14+
channel.localBalance = channel.capacity * ratio;
15+
channel.remoteBalance = channel.capacity * (1 - ratio);
16+
return channel;
2217
};
2318

24-
export const Warn = (ctx: StoryContext) => {
25-
// grab the store from the Storybook parameter defined in preview.tsx
26-
const store = ctx.parameters.store as Store;
27-
const channel = {
28-
...store.channels[0],
29-
localPercent: 28,
30-
balanceLevel: BalanceLevel.warn,
31-
};
32-
return <ChannelBalance channel={channel} />;
19+
export const Good = () => {
20+
return <ChannelBalance channel={getChannel(0.59)} />;
3321
};
3422

35-
export const Bad = (ctx: StoryContext) => {
36-
// grab the store from the Storybook parameter defined in preview.tsx
37-
const store = ctx.parameters.store as Store;
38-
const channel = {
39-
...store.channels[0],
40-
localPercent: 91,
41-
balanceLevel: BalanceLevel.bad,
42-
};
43-
return <ChannelBalance channel={channel} />;
23+
export const Warn = () => {
24+
return <ChannelBalance channel={getChannel(0.28)} />;
25+
};
26+
27+
export const Bad = () => {
28+
return <ChannelBalance channel={getChannel(0.91)} />;
4429
};
4530

46-
export const Inactive = (ctx: StoryContext) => {
47-
// grab the store from the Storybook parameter defined in preview.tsx
48-
const store = ctx.parameters.store as Store;
49-
const channel = {
50-
...store.channels[0],
51-
active: false,
52-
};
31+
export const Inactive = () => {
32+
const channel = getChannel(0.45);
33+
channel.active = false;
5334
return <ChannelBalance channel={channel} />;
5435
};

‎app/src/__stories__/ChannelList.stories.tsx

Lines changed: 16 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import { action } from '@storybook/addon-actions';
3-
import { StoryContext } from '@storybook/addons';
4-
import { Store } from 'store';
2+
import { observable } from 'mobx';
3+
import { useStore } from 'store';
4+
import { Channel } from 'store/models';
55
import ChannelList from 'components/loop/ChannelList';
66

77
export default {
@@ -11,58 +11,21 @@ export default {
1111
};
1212

1313
export const NoChannels = () => {
14-
return (
15-
<ChannelList
16-
channels={[]}
17-
enableSelection={false}
18-
selectedChannels={[]}
19-
onSelectionChange={() => action('onSelectionChange')}
20-
disabled={false}
21-
/>
22-
);
14+
const store = useStore();
15+
store.channelStore.channels = observable.map();
16+
return <ChannelList />;
2317
};
2418

25-
export const FewChannels = (ctx: StoryContext) => {
26-
// grab the store from the Storybook parameter defined in preview.tsx
27-
const store = ctx.parameters.store as Store;
28-
return (
29-
<ChannelList
30-
channels={store.channels.slice(0, 10)}
31-
enableSelection={false}
32-
selectedChannels={[]}
33-
onSelectionChange={() => action('onSelectionChange')}
34-
disabled={false}
35-
/>
36-
);
19+
export const FewChannels = () => {
20+
const store = useStore();
21+
const channels = store.channelStore.sortedChannels.slice(0, 10).reduce((result, c) => {
22+
result[c.chanId] = c;
23+
return result;
24+
}, {} as Record<string, Channel>);
25+
store.channelStore.channels = observable.map(channels);
26+
return <ChannelList />;
3727
};
3828

39-
export const ManyChannels = (ctx: StoryContext) => {
40-
// grab the store from the Storybook parameter defined in preview.tsx
41-
const store = ctx.parameters.store as Store;
42-
return (
43-
<ChannelList
44-
channels={store.channels}
45-
enableSelection={false}
46-
selectedChannels={[]}
47-
onSelectionChange={() => action('onSelectionChange')}
48-
disabled={false}
49-
/>
50-
);
51-
};
52-
53-
export const SortedChannels = (ctx: StoryContext) => {
54-
// grab the store from the Storybook parameter defined in preview.tsx
55-
const store = ctx.parameters.store as Store;
56-
const channels = store.channels
57-
.slice()
58-
.sort((a, b) => b.balancePercent - a.balancePercent);
59-
return (
60-
<ChannelList
61-
channels={channels}
62-
enableSelection={false}
63-
selectedChannels={[]}
64-
onSelectionChange={() => action('onSelectionChange')}
65-
disabled={false}
66-
/>
67-
);
29+
export const ManyChannels = () => {
30+
return <ChannelList />;
6831
};

0 commit comments

Comments
 (0)