-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add an election progress bar (#4556)
* Fix 4006: ElectionProgressBar.tsx * Fix 4006: adjusting the tooltip's arrow to progress * Fix 4006 : fix lint issue * Fix 4006 : Fixed test.tsx * Fix 4006 : Updted the progress bar description by following figma * Fix 4006: updated the code by Thesan's suggestion * Updated progress bar to remove idle block and fix comment issue * Added storybook and removed idle section since idlePeriod == 1 * adjust sample value for currentBlock in stories.tsx * moved the idle period to the first * Updated the changes for UI * Updated the suggestion * refactored stage parameters calculation * Refactoerd description update code * Merge dev into branch * Fixed the issue after merged dev * yarn lint:fix * Updated the code by following Thesan's * added useCouncilPeriodInformation * updated the election.tsx * updated the code * lint issue * Remove `remainingPeriod` check * Updated for responsive layout * updated responsive card & added genersis block timestamp * updated date calculation --------- Co-authored-by: Mark Gui <[email protected]> Co-authored-by: Theophile Sandoz <[email protected]>
- Loading branch information
3 people
authored
Dec 19, 2023
1 parent
4b9a450
commit 1267cf9
Showing
7 changed files
with
789 additions
and
27 deletions.
There are no files selected for viewing
163 changes: 163 additions & 0 deletions
163
packages/ui/src/app/pages/Election/Election.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| import { Meta, StoryContext, StoryObj } from '@storybook/react' | ||
| import { FC } from 'react' | ||
|
|
||
| import { GetCurrentElectionDocument } from '@/council/queries' | ||
| import { joy } from '@/mocks/helpers' | ||
| import { MocksParameters } from '@/mocks/providers' | ||
|
|
||
| import { Election } from './Election' | ||
|
|
||
| type Args = { | ||
| electionStage: 'announcing' | 'revealing' | 'voting' | 'inactive' | ||
| remainingPeriod: number | ||
| } | ||
|
|
||
| type Story = StoryObj<FC<Args>> | ||
|
|
||
| export default { | ||
| title: 'Pages/Election/Election', | ||
| component: Election, | ||
| argTypes: { | ||
| electionStage: { | ||
| control: { type: 'radio' }, | ||
| options: ['inactive', 'announcing', 'voting', 'revealing'], | ||
| }, | ||
| }, | ||
| args: { | ||
| electionStage: 'announcing', | ||
| remainingPeriod: 10000, | ||
| }, | ||
| parameters: { | ||
| currentBlock: 480_2561, | ||
| idlePeriodDuration: 14400, | ||
| budgetRefillPeriod: 14400, | ||
| announcingPeriodDuration: 129600, | ||
| voteStageDuration: 43200, | ||
| revealStageDuration: 43200, | ||
| mocks: ({ args, parameters }: StoryContext<Args>): MocksParameters => { | ||
| const councilStageDuration = | ||
| parameters[args.electionStage === 'inactive' ? 'idlePeriodDuration' : 'announcingPeriodDuration'] | ||
| return { | ||
| chain: { | ||
| consts: { | ||
| council: { | ||
| councilSize: 3, | ||
| idlePeriodDuration: parameters.idlePeriodDuration, | ||
| announcingPeriodDuration: parameters.announcingPeriodDuration, | ||
| budgetRefillPeriod: parameters.budgetRefillPeriod, | ||
| minCandidateStake: joy(166_666.666666), | ||
| }, | ||
| referendum: { | ||
| voteStageDuration: parameters.voteStageDuration, | ||
| revealStageDuration: parameters.revealStageDuration, | ||
| minimumStake: joy(166.666666666), | ||
| }, | ||
| }, | ||
| rpc: { | ||
| chain: { | ||
| subscribeNewHeads: { | ||
| number: parameters.currentBlock, | ||
| }, | ||
| }, | ||
| }, | ||
| query: { | ||
| council: { | ||
| stage: { | ||
| stage: { | ||
| isIdle: args.electionStage === 'inactive', | ||
| isAnnouncing: args.electionStage === 'announcing', | ||
| }, | ||
| changedAt: Math.max(0, parameters.currentBlock - councilStageDuration + args.remainingPeriod), | ||
| }, | ||
| }, | ||
| referendum: { | ||
| stage: { | ||
| isVoting: args.electionStage === 'voting', | ||
| isRevealing: args.electionStage === 'revealing', | ||
| asVoting: { | ||
| started: Math.max(0, parameters.currentBlock - parameters.voteStageDuration + args.remainingPeriod), | ||
| }, | ||
| asRevealing: { | ||
| started: Math.max(0, parameters.currentBlock - parameters.revealStageDuration + args.remainingPeriod), | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| gql: { | ||
| queries: [ | ||
| { | ||
| query: GetCurrentElectionDocument, | ||
| data: { | ||
| electionRounds: [ | ||
| { | ||
| __typename: 'ElectionRound', | ||
| cycleId: 23, | ||
| candidates: [ | ||
| { | ||
| id: '0000003s', | ||
| member: { | ||
| id: '0', | ||
| name: 'Jennifer_123', | ||
| rootAccount: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY', | ||
| controllerAccount: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY', | ||
| handle: 'Jennifer_123', | ||
| isVerified: true, | ||
| isFoundingMember: true, | ||
| isCouncilMember: false, | ||
| roles: [ | ||
| { | ||
| __typename: 'Worker', | ||
| id: 'membershipWorkingGroup-0', | ||
| createdAt: '2021', | ||
| isLead: true, | ||
| group: { | ||
| __typename: 'WorkingGroup', | ||
| name: 'Jennifer_123', | ||
| }, | ||
| }, | ||
| ], | ||
| boundAccounts: [], | ||
| inviteCount: 0, | ||
| createdAt: '', | ||
| metadata: { | ||
| name: 'Jennifer_123', | ||
| }, | ||
| }, | ||
| noteMetadata: { | ||
| header: 'Jennifer_123', | ||
| bannerUri: | ||
| 'https://upload.wikimedia.org/wikipedia/commons/b/be/Bliss_location%2C_Sonoma_Valley_in_2006.jpg', | ||
| bulletPoints: [ | ||
| 'Amet minim mollit non deserunt ullamco est sit liqua dolor', | ||
| 'Amet minim mollit non deserunt ullamco est sit liqua dolor', | ||
| 'Amet minim mollit non deserunt ullamco est sit liqua dolor Amet minim mollit non deserunt ullamco est sit liqua dolor Amet minim mollit non deserunt ullamco est sit liqua dolor Amet minim mollit non deserunt ullamco est sit liqua dolor', | ||
| ], | ||
| description: 'Test member', | ||
| }, | ||
| stake: '16660000000000', | ||
| stakingAccountId: 'j4Sba211111111', | ||
| status: 'ACTIVE', | ||
| votesReceived: [], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| } | ||
| }, | ||
| }, | ||
| } satisfies Meta<Args> | ||
|
|
||
| export const Announcing: Story = { | ||
| args: { electionStage: 'announcing' }, | ||
| } | ||
| export const Voting: Story = { | ||
| args: { electionStage: 'voting' }, | ||
| } | ||
| export const Revealing: Story = { | ||
| args: { electionStage: 'revealing' }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
1267cf9There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
pioneer-2-storybook – ./
pioneer-2-storybook.vercel.app
pioneer-2-storybook-joystream.vercel.app
pioneer-2-storybook-git-dev-joystream.vercel.app
1267cf9There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
pioneer-2 – ./
pioneer-2-joystream.vercel.app
pioneer-2.vercel.app
pioneer-2-git-dev-joystream.vercel.app