Skip to content

Commit 517def6

Browse files
BilalAlGhaziBilalAlGhazi
committed
fix(new-issuer): dividends checkpoint loading indicator
1 parent e1cecc2 commit 517def6

2 files changed

Lines changed: 80 additions & 70 deletions

File tree

‎packages/new-polymath-issuer/src/components/CheckpointList/Container.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,8 @@ export class CheckpointListContainerBase extends Component<Props> {
7474
securityTokenSymbol,
7575
}),
7676
]}
77-
render={(data: { checkpoints: types.CheckpointEntity[] }) => {
77+
render={(data: { checkpoints: types.CheckpointEntity[] }, loading) => {
7878
const { checkpoints } = data;
79-
8079
const fetchers = checkpoints.map(({ index }) =>
8180
createDividendsByCheckpointFetcher(
8281
{
@@ -89,6 +88,7 @@ export class CheckpointListContainerBase extends Component<Props> {
8988

9089
return (
9190
<DataFetcher
91+
watchProps={[loading]}
9292
fetchers={fetchers}
9393
render={(dividendsData: {
9494
[key: string]: types.DividendEntity[];
@@ -129,6 +129,7 @@ export class CheckpointListContainerBase extends Component<Props> {
129129
checkpoints={sortedCheckpoints}
130130
securityTokenSymbol={securityTokenSymbol}
131131
downloadOwnershipList={this.downloadOwnershipList}
132+
loading={loading}
132133
/>
133134
);
134135
}}

‎packages/new-polymath-issuer/src/components/CheckpointList/Presenter.tsx‎

Lines changed: 77 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
22
import { groupBy } from 'lodash';
33
import { types, formatters } from '@polymathnetwork/new-shared';
44
import {
@@ -9,6 +9,7 @@ import {
99
Icon,
1010
icons,
1111
IconText,
12+
LoadingDots,
1213
} from '@polymathnetwork/new-ui';
1314
import { DividendList } from '~/components/DividendList';
1415
import * as sc from './styles';
@@ -19,88 +20,96 @@ export interface Props {
1920
securityTokenSymbol: string;
2021
downloadOwnershipList: (checkpoint: types.CheckpointEntity) => void;
2122
allDividendsCompleted: boolean;
23+
loading?: boolean;
2224
}
2325

2426
export const CheckpointListPresenter = ({
2527
checkpoints,
2628
securityTokenSymbol,
2729
downloadOwnershipList,
2830
allDividendsCompleted,
31+
loading,
2932
}: Props) => {
3033
const checkpointsByYear = groupBy(checkpoints, checkpoint =>
3134
checkpoint.createdAt.getFullYear()
3235
);
3336

3437
return (
35-
<sc.Container alignItems="flex-start" vertical gridGap={7}>
36-
{Object.keys(checkpointsByYear).map(year => {
37-
const yearCheckpoints = checkpointsByYear[year];
38+
<Fragment>
39+
{loading && <LoadingDots />}
40+
<sc.Container alignItems="flex-start" vertical gridGap={7}>
41+
{Object.keys(checkpointsByYear).map(year => {
42+
const yearCheckpoints = checkpointsByYear[year];
3843

39-
return (
40-
<sc.Checkpoints key={year}>
41-
<Grid gridAutoFlow="column" gridAutoColumns="200px 1fr">
42-
<Grid.Item gridColumn="2">
43-
<sc.Year>{year}</sc.Year>
44-
</Grid.Item>
45-
</Grid>
46-
<List vertical>
47-
{yearCheckpoints.map(checkpoint => {
48-
const isLastDividend =
49-
yearCheckpoints.indexOf(checkpoint) ===
50-
yearCheckpoints.length - 1 &&
51-
Object.keys(checkpointsByYear).indexOf(year) !==
52-
Object.keys(checkpointsByYear).length - 1;
44+
return (
45+
<sc.Checkpoints key={year}>
46+
<Grid gridAutoFlow="column" gridAutoColumns="200px 1fr">
47+
<Grid.Item gridColumn="2">
48+
<sc.Year>{year}</sc.Year>
49+
</Grid.Item>
50+
</Grid>
51+
<List vertical>
52+
{yearCheckpoints.map(checkpoint => {
53+
const isLastDividend =
54+
yearCheckpoints.indexOf(checkpoint) ===
55+
yearCheckpoints.length - 1 &&
56+
Object.keys(checkpointsByYear).indexOf(year) !==
57+
Object.keys(checkpointsByYear).length - 1;
5358

54-
return (
55-
<sc.YearCheckpoints key={checkpoint.index}>
56-
<Grid gridAutoFlow="column" gridAutoColumns="200px 1fr">
57-
<Grid.Item pr="gridGap">
58-
<Paragraph fontSize={1} textAlign="right">
59-
<IconText>
60-
<Icon Asset={icons.SvgCalendar} color="secondary" />{' '}
61-
<span>
62-
{formatters.toDateFormat(checkpoint.createdAt)}
63-
</span>
64-
</IconText>
65-
<br />
66-
{formatters.toTimeFormat(checkpoint.createdAt)}
67-
</Paragraph>
68-
<Paragraph color="primary" textAlign="right">
69-
<Button
70-
variant="ghostSecondary"
71-
iconPosition="right"
72-
onClick={() => downloadOwnershipList(checkpoint)}
73-
>
74-
Ownership list <Icon Asset={icons.SvgDownload} />
75-
</Button>
76-
</Paragraph>
77-
</Grid.Item>
78-
<Grid.Item>
79-
<sc.Dividends>
80-
<sc.ProgressIndicator isLastChild={isLastDividend}>
81-
<sc.StepIcon
82-
Asset={icons.SvgCheckmark}
83-
width={iconSize}
84-
height={iconSize}
85-
scale={0.8}
86-
color="primary"
59+
return (
60+
<sc.YearCheckpoints key={checkpoint.index}>
61+
<Grid gridAutoFlow="column" gridAutoColumns="200px 1fr">
62+
<Grid.Item pr="gridGap">
63+
<Paragraph fontSize={1} textAlign="right">
64+
<IconText>
65+
<Icon
66+
Asset={icons.SvgCalendar}
67+
color="secondary"
68+
/>{' '}
69+
<span>
70+
{formatters.toDateFormat(checkpoint.createdAt)}
71+
</span>
72+
</IconText>
73+
<br />
74+
{formatters.toTimeFormat(checkpoint.createdAt)}
75+
</Paragraph>
76+
<Paragraph color="primary" textAlign="right">
77+
<Button
78+
variant="ghostSecondary"
79+
iconPosition="right"
80+
onClick={() => downloadOwnershipList(checkpoint)}
81+
>
82+
Ownership list <Icon Asset={icons.SvgDownload} />
83+
</Button>
84+
</Paragraph>
85+
</Grid.Item>
86+
<Grid.Item>
87+
<sc.Dividends>
88+
<sc.ProgressIndicator isLastChild={isLastDividend}>
89+
<sc.StepIcon
90+
Asset={icons.SvgCheckmark}
91+
width={iconSize}
92+
height={iconSize}
93+
scale={0.8}
94+
color="primary"
95+
/>
96+
</sc.ProgressIndicator>
97+
<DividendList
98+
allDividendsCompleted={allDividendsCompleted}
99+
checkpointIndex={checkpoint.index}
100+
securityTokenSymbol={securityTokenSymbol}
87101
/>
88-
</sc.ProgressIndicator>
89-
<DividendList
90-
allDividendsCompleted={allDividendsCompleted}
91-
checkpointIndex={checkpoint.index}
92-
securityTokenSymbol={securityTokenSymbol}
93-
/>
94-
</sc.Dividends>
95-
</Grid.Item>
96-
</Grid>
97-
</sc.YearCheckpoints>
98-
);
99-
})}
100-
</List>
101-
</sc.Checkpoints>
102-
);
103-
})}
104-
</sc.Container>
102+
</sc.Dividends>
103+
</Grid.Item>
104+
</Grid>
105+
</sc.YearCheckpoints>
106+
);
107+
})}
108+
</List>
109+
</sc.Checkpoints>
110+
);
111+
})}
112+
</sc.Container>
113+
</Fragment>
105114
);
106115
};

0 commit comments

Comments
 (0)