Skip to content

Commit 6d12ff3

Browse files
author
Lucas Araujo
committed
[DDW-796] Fund phase components
1 parent 0376de6 commit 6d12ff3

File tree

15 files changed

+349
-144
lines changed

15 files changed

+349
-144
lines changed

‎source/renderer/app/components/voting/voting-info/CurrentPhase.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,7 @@
3838
}
3939
}
4040

41-
.rectangle {
42-
background-color: var(--theme-voting-separator-color);
43-
height: 1px;
44-
opacity: 0.15;
41+
.resultsButton {
42+
margin-top: 28px;
4543
}
4644
}

‎source/renderer/app/components/voting/voting-info/FundResults.js‎ renamed to ‎source/renderer/app/components/voting/voting-info/ResultsPhase.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import type { Locale } from '../../../../../common/types/locales.types';
1313
import { ExternalLinkButton } from '../../widgets/ExternalLinkButton';
1414
import type { Intl } from '../../../types/i18nTypes';
1515
import styles from './CurrentPhase.scss';
16-
import { messages } from './FundResults.messages';
16+
import { messages } from './ResultsPhase.messages';
17+
import { messages as currentPhaseMessages } from './CurrentPhase.messages';
1718

1819
type Props = {
1920
currentLocale: Locale,
@@ -23,7 +24,7 @@ type Props = {
2324
intl: Intl,
2425
};
2526

26-
function FundResults({
27+
function ResultsPhase({
2728
currentLocale,
2829
currentDateFormat,
2930
currentTimeFormat,
@@ -45,26 +46,28 @@ function FundResults({
4546
return (
4647
<section className={styles.root}>
4748
<h1 className={styles.fundName}>
48-
{intl.formatMessage(messages.currentFundName, {
49+
{intl.formatMessage(currentPhaseMessages.currentFundName, {
4950
currentVotingFundNumber: CURRENT_VOTING_FUND_NUMBER,
5051
})}
5152
</h1>
5253

5354
<div className={styles.block}>
5455
<span className={styles.label}>
55-
{intl.formatMessage(messages.date)}
56+
{intl.formatMessage(messages.endDateLabel)}
5657
</span>
5758
<span className={styles.value}>{endDate}</span>
5859
</div>
5960

60-
<ExternalLinkButton
61-
label={intl.formatMessage(messages.viewResultsLinkLabel)}
62-
onClick={() =>
63-
onExternalLinkClick(intl.formatMessage(messages.viewResultsLinkURL))
64-
}
65-
/>
61+
<div className={styles.resultsButton}>
62+
<ExternalLinkButton
63+
label={intl.formatMessage(messages.viewResultsLinkLabel)}
64+
onClick={() =>
65+
onExternalLinkClick(intl.formatMessage(messages.viewResultsLinkURL))
66+
}
67+
/>
68+
</div>
6669
</section>
6770
);
6871
}
6972

70-
export default injectIntl(FundResults);
73+
export default injectIntl(ResultsPhase);

‎source/renderer/app/components/voting/voting-info/FundResults.messages.js‎ renamed to ‎source/renderer/app/components/voting/voting-info/ResultsPhase.messages.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
import { defineMessages } from 'react-intl';
33

44
export const messages = defineMessages({
5-
headingForEndDate: {
6-
id: 'voting.fundResults.headingForEndDate',
5+
endDateLabel: {
6+
id: 'voting.resultsPhase.endDateLabel',
77
defaultMessage: '!!!End of voting:',
88
description: 'Headline for end date',
99
},
1010
viewResultsLinkLabel: {
11-
id: 'voting.fundResults.viewResultsLinkLabel',
11+
id: 'voting.resultsPhase.viewResultsLinkLabel',
1212
defaultMessage: '!!!View results',
1313
description: 'View resuls link label for Fund{currentVotingFundNumber}',
1414
},
1515
viewResultsLinkURL: {
16-
id: 'voting.fundResults.viewResultsLinkURL',
16+
id: 'voting.resultsPhase.viewResultsLinkURL',
1717
defaultMessage: 'https://cardano.ideascale.com/a/pages/results',
1818
description: 'View results from Fund{currentVotingFundNumber}',
1919
},

‎source/renderer/app/components/voting/voting-info/UpcomingFund.js‎ renamed to ‎source/renderer/app/components/voting/voting-info/SnapshotPhase.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {
1414
import type { Locale } from '../../../../../common/types/locales.types';
1515
import type { Intl } from '../../../types/i18nTypes';
1616
import styles from './CurrentPhase.scss';
17-
import { messages } from './UpcomingFund.messages';
18-
import { messages as votingMessages } from './CurrentPhase.messages';
17+
import { messages } from './SnapshotPhase.messages';
18+
import { messages as currentPhase } from './CurrentPhase.messages';
1919

2020
type Props = {
2121
currentLocale: Locale,
@@ -24,7 +24,7 @@ type Props = {
2424
intl: Intl,
2525
};
2626

27-
function UpcomingFund({
27+
function SnapshotPhase({
2828
currentLocale,
2929
currentDateFormat,
3030
currentTimeFormat,
@@ -55,7 +55,7 @@ function UpcomingFund({
5555
return (
5656
<section className={styles.root}>
5757
<h1 className={styles.fundName}>
58-
{intl.formatMessage(votingMessages.currentFundName, {
58+
{intl.formatMessage(currentPhase.currentFundName, {
5959
currentVotingFundNumber: CURRENT_VOTING_FUND_NUMBER,
6060
})}
6161
</h1>
@@ -77,4 +77,4 @@ function UpcomingFund({
7777
);
7878
}
7979

80-
export default injectIntl(UpcomingFund);
80+
export default injectIntl(SnapshotPhase);

‎source/renderer/app/components/voting/voting-info/UpcomingFund.messages.js‎ renamed to ‎source/renderer/app/components/voting/voting-info/SnapshotPhase.messages.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { defineMessages } from 'react-intl';
33

44
export const messages = defineMessages({
55
snapshotDateLabel: {
6-
id: 'voting.upcomingFund.snapshotDateLabel',
6+
id: 'voting.snapshotPhase.snapshotDateLabel',
77
defaultMessage: '!!!Snapshot date:',
88
description: 'Snapshot date label',
99
},
1010
votingDateLabel: {
11-
id: 'voting.upcomingFund.votingDateLabel',
11+
id: 'voting.snapshotPhase.votingDateLabel',
1212
defaultMessage: '!!!Next voting period:',
1313
description: 'Next voting date label',
1414
},

‎source/renderer/app/components/voting/voting-info/TallyingPhase.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
// @flow
2+
import React from 'react';
3+
import { injectIntl } from 'react-intl';
4+
import {
5+
CURRENT_VOTING_FUND_NUMBER,
6+
VOTING_RESULTS_DATE,
7+
VOTING_CAST_END_DATE,
8+
} from '../../../config/votingConfig';
9+
import {
10+
formattedDateTime,
11+
mapToLongDateTimeFormat,
12+
} from '../../../utils/formatters';
13+
import type { Locale } from '../../../../../common/types/locales.types';
14+
import type { Intl } from '../../../types/i18nTypes';
15+
import styles from './CurrentPhase.scss';
16+
import { messages } from './TallyingPhase.messages';
17+
import { messages as currentPhaseMessages } from './CurrentPhase.messages';
18+
19+
type Props = {
20+
currentLocale: Locale,
21+
currentDateFormat: string,
22+
currentTimeFormat: string,
23+
intl: Intl,
24+
};
25+
26+
function TallyingPhase({
27+
currentLocale,
28+
currentDateFormat,
29+
currentTimeFormat,
30+
intl,
31+
}: Props) {
32+
const mappedFormats = mapToLongDateTimeFormat({
33+
currentLocale,
34+
currentDateFormat,
35+
currentTimeFormat,
36+
});
37+
38+
const endDated = formattedDateTime(VOTING_CAST_END_DATE, {
39+
currentLocale,
40+
currentDateFormat: mappedFormats.currentDateFormat,
41+
});
42+
43+
const resultsDate = formattedDateTime(VOTING_RESULTS_DATE, {
44+
currentLocale,
45+
currentDateFormat: mappedFormats.currentDateFormat,
46+
});
47+
48+
return (
49+
<section className={styles.root}>
50+
<h1 className={styles.fundName}>
51+
{intl.formatMessage(currentPhaseMessages.currentFundName, {
52+
currentVotingFundNumber: CURRENT_VOTING_FUND_NUMBER,
53+
})}
54+
</h1>
55+
<div className={styles.block}>
56+
<span className={styles.label}>
57+
{intl.formatMessage(messages.endDateLabel)}
58+
</span>
59+
<span className={styles.value}>{endDated}</span>
60+
</div>
61+
<div className={styles.block}>
62+
<span className={styles.label}>
63+
{intl.formatMessage(messages.resultsLabel)}
64+
</span>
65+
<span className={styles.value}>{resultsDate}</span>
66+
</div>
67+
</section>
68+
);
69+
}
70+
71+
export default injectIntl(TallyingPhase);

‎source/renderer/app/components/voting/voting-info/TallyingPhase.messages.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// @flow
2+
import { defineMessages } from 'react-intl';
3+
4+
export const messages = defineMessages({
5+
endDateLabel: {
6+
id: 'voting.tallyingPhase.endDateLabel',
7+
defaultMessage: '!!!Voting ended:',
8+
description: 'Voting end date label',
9+
},
10+
resultsLabel: {
11+
id: 'voting.tallyingPhase.resultsLabel',
12+
defaultMessage: '!!!Check back for results:',
13+
description: 'Results date label',
14+
},
15+
});

‎source/renderer/app/components/voting/voting-info/VotingInfo.js‎

Lines changed: 54 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,76 @@
11
// @flow
2-
import React, { Component } from 'react';
2+
import React from 'react';
33
import { observer } from 'mobx-react';
4-
import { intlShape } from 'react-intl';
4+
import { injectIntl } from 'react-intl';
55
import BorderedBox from '../../widgets/BorderedBox';
66
import type { Locale } from '../../../../../common/types/locales.types';
77
import styles from './VotingInfo.scss';
8-
import UpcomingFund from './UpcomingFund';
9-
import VotingOpen from './VotingOpen';
8+
import ResultsPhase from './ResultsPhase';
9+
import SnapshotPhase from './SnapshotPhase';
10+
import VotingPhase from './VotingPhase';
11+
import TallyingPhase from './TallyingPhase';
1012
import Headline from './Headline';
1113
import AppStore from './AppStore';
1214
import RegisterToVote from './RegisterToVote';
13-
import {
14-
VOTING_SNAPSHOT_DATE,
15-
VOTING_CAST_START_DATE,
16-
VOTING_CAST_END_DATE,
17-
} from '../../../config/votingConfig';
15+
import { FundPhase, FundPhases } from '../../../stores/VotingStore';
1816

1917
type Props = {
2018
currentLocale: Locale,
2119
currentDateFormat: string,
2220
currentTimeFormat: string,
21+
fundPhase: FundPhase,
2322
onRegisterToVoteClick: Function,
2423
onExternalLinkClick: Function,
2524
};
2625

27-
@observer
28-
export default class VotingInfo extends Component<Props> {
29-
static contextTypes = {
30-
intl: intlShape.isRequired,
31-
};
26+
const phaseToComponentMap = {
27+
[FundPhases.SNAPSHOT]: SnapshotPhase,
28+
[FundPhases.VOTING]: VotingPhase,
29+
[FundPhases.TALLYING]: TallyingPhase,
30+
[FundPhases.RESULTS]: ResultsPhase,
31+
};
3232

33-
render() {
34-
const {
35-
currentLocale,
36-
currentDateFormat,
37-
currentTimeFormat,
38-
onRegisterToVoteClick,
39-
onExternalLinkClick,
40-
} = this.props;
33+
const VotingInfo = ({
34+
currentLocale,
35+
currentDateFormat,
36+
currentTimeFormat,
37+
fundPhase,
38+
onRegisterToVoteClick,
39+
onExternalLinkClick,
40+
}: Props) => {
41+
const PhaseComponent = phaseToComponentMap[fundPhase || FundPhases.SNAPSHOT];
4142

42-
return (
43-
<div className={styles.component}>
44-
<BorderedBox>
45-
<Headline onExternalLinkClick={onExternalLinkClick} />
46-
<hr className={styles.separator} />
47-
<div className={styles.bottomContent}>
48-
<div className={styles.leftContent}>
49-
<VotingOpen
50-
currentLocale={currentLocale}
51-
currentDateFormat={currentDateFormat}
52-
currentTimeFormat={currentTimeFormat}
53-
/>
54-
<div className={styles.appStoreSpacing}>
55-
<AppStore
56-
onAppleStoreLinkClick={onExternalLinkClick}
57-
onAndroidStoreLinkClick={onExternalLinkClick}
58-
/>
59-
</div>
60-
</div>
61-
<div className={styles.rightContent}>
62-
<RegisterToVote
63-
currentLocale={currentLocale}
64-
currentDateFormat={currentDateFormat}
65-
currentTimeFormat={currentTimeFormat}
66-
onRegisterToVoteClick={onRegisterToVoteClick}
43+
return (
44+
<div className={styles.component}>
45+
<BorderedBox>
46+
<Headline onExternalLinkClick={onExternalLinkClick} />
47+
<hr className={styles.separator} />
48+
<div className={styles.bottomContent}>
49+
<div className={styles.leftContent}>
50+
<PhaseComponent
51+
currentLocale={currentLocale}
52+
currentDateFormat={currentDateFormat}
53+
currentTimeFormat={currentTimeFormat}
54+
/>
55+
<div className={styles.appStoreSpacing}>
56+
<AppStore
57+
onAppleStoreLinkClick={onExternalLinkClick}
58+
onAndroidStoreLinkClick={onExternalLinkClick}
6759
/>
6860
</div>
6961
</div>
70-
</BorderedBox>
71-
</div>
72-
);
73-
}
74-
}
62+
<div className={styles.rightContent}>
63+
<RegisterToVote
64+
currentLocale={currentLocale}
65+
currentDateFormat={currentDateFormat}
66+
currentTimeFormat={currentTimeFormat}
67+
onRegisterToVoteClick={onRegisterToVoteClick}
68+
/>
69+
</div>
70+
</div>
71+
</BorderedBox>
72+
</div>
73+
);
74+
};
75+
76+
export default injectIntl(observer(VotingInfo));

0 commit comments

Comments
 (0)