diff --git a/packages/chakra-components/src/components/Election/Schedule.tsx b/packages/chakra-components/src/components/Election/Schedule.tsx index 47b8c39b..7295d1e3 100644 --- a/packages/chakra-components/src/components/Election/Schedule.tsx +++ b/packages/chakra-components/src/components/Election/Schedule.tsx @@ -1,28 +1,78 @@ import { HeadingProps } from '@chakra-ui/layout' import { chakra, forwardRef, useMultiStyleConfig } from '@chakra-ui/system' import { useDatesLocale, useElection, useLocalize } from '@vocdoni/react-providers' -import { PublishedElection } from '@vocdoni/sdk' -import { format as dformat } from 'date-fns' +import { ElectionStatus, PublishedElection } from '@vocdoni/sdk' +import { format as dformat, formatDistance } from 'date-fns' export type ElectionScheduleProps = HeadingProps & { format?: string + showRemaining?: boolean // If true, it return the remaining time to start, end, if ended or paused, instead of the full schedule } -export const ElectionSchedule = forwardRef(({ format = 'PPp', ...rest }, ref) => { - const styles = useMultiStyleConfig('ElectionSchedule', rest) - const { election } = useElection() - const locale = useDatesLocale() - const t = useLocalize() +export const ElectionSchedule = forwardRef( + ({ format = 'PPp', showRemaining = false, ...rest }, ref) => { + const styles = useMultiStyleConfig('ElectionSchedule', rest) + const { election } = useElection() + const locale = useDatesLocale() + const t = useLocalize() - if (!election || !(election instanceof PublishedElection)) return null + if (!election || !(election instanceof PublishedElection)) return null + + const getRemaining = (): string => { + const endDate = election.endDate + const startDate = election.startDate + switch (election.status) { + case ElectionStatus.ONGOING: + case ElectionStatus.RESULTS: { + if (endDate < new Date()) { + return t('schedule.ended', { + distance: formatDistance(endDate, new Date(), { + addSuffix: true, + locale, + }), + }) + } + return formatDistance(endDate, new Date(), { addSuffix: true, locale }) + } + case ElectionStatus.ENDED: + return t('schedule.ended', { + distance: formatDistance(endDate, new Date(), { + addSuffix: true, + locale, + }), + }) + case ElectionStatus.PAUSED: + if (new Date() < startDate) { + return t('schedule.paused_start', { + distance: formatDistance(startDate, new Date(), { + addSuffix: true, + locale, + }), + }) + } + return t('schedule.paused_end', { + distance: formatDistance(endDate, new Date(), { + addSuffix: true, + locale, + }), + }) + case ElectionStatus.UPCOMING: + default: + return formatDistance(startDate, new Date(), { addSuffix: true, locale }) + } + } + + return ( + + {showRemaining + ? getRemaining() + : t('schedule.from_begin_to_end', { + begin: dformat(new Date(election.startDate), format, { locale }), + end: dformat(new Date(election.endDate), format, { locale }), + })} + + ) + } +) - return ( - - {t('schedule', { - begin: dformat(new Date(election.startDate), format, { locale }), - end: dformat(new Date(election.endDate), format, { locale }), - })} - - ) -}) ElectionSchedule.displayName = 'ElectionSchedule' diff --git a/packages/chakra-components/src/i18n/locales.ts b/packages/chakra-components/src/i18n/locales.ts index 64b030ec..6544ce03 100644 --- a/packages/chakra-components/src/i18n/locales.ts +++ b/packages/chakra-components/src/i18n/locales.ts @@ -47,7 +47,12 @@ export const locales = { multichoice_cannot_abstain: 'Too many options selected', weighted_voting: 'Weighted Voting', }, - schedule: 'Voting from {{ begin }} to {{ end }}', + schedule: { + from_begin_to_end: 'Voting from {{ begin }} to {{ end }}', + ended: 'Ended {{ distance }}', + paused_start: '(Paused) Starts {{ distance }}', + paused_end: '(Paused) Ends {{ distance }}', + }, // results component results: { date_format: 'd-L-y HH:mm',