Merge branch 'develop' of https://github.com/makerdao/governance-port…

…al-v2 into chore/sc-481/update-categories-in-the-validator-function

modules/polling/api/__tests__/parsePollMetadata.spec.ts

@@ -0,0 +1,85 @@
+import { Poll } from '../../types';
+import { sortPolls } from '../parsePollMetadata';
+
+describe('Parse poll metadata', () => {
+  const polls: Poll[] = [
+    {
+      categories: ['a'],
+      content: '',
+      discussionLink: '',
+      endDate: new Date(2011, 10, 30),
+      multiHash: '',
+      options: {},
+      pollId: 1,
+      startDate: new Date(2011, 10, 30),
+      slug: '',
+      summary: '',
+      title: '2011,10,30',
+      voteType: 'Plurality Voting',
+      ctx: {} as any
+    },
+    {
+      categories: ['a'],
+      content: '',
+      discussionLink: '',
+      endDate: new Date(2011, 10, 30),
+      multiHash: '',
+      options: {},
+      pollId: 2,
+      startDate: new Date(2011, 10, 31),
+      slug: '',
+      summary: '',
+      title: '2011,10,31',
+      voteType: 'Plurality Voting',
+      ctx: {} as any
+    },
+    {
+      categories: ['a'],
+      content: '',
+      discussionLink: '',
+      endDate: new Date(2021, 10, 31),
+      multiHash: '',
+      options: {},
+      pollId: 3,
+      startDate: new Date(2021, 10, 31),
+      slug: '',
+      summary: '',
+      title: '2021,10,31',
+      voteType: 'Plurality Voting',
+      ctx: {} as any
+    },
+    {
+      categories: ['a'],
+      content: '',
+      discussionLink: '',
+      endDate: new Date(2021, 11, 31),
+      multiHash: '',
+      options: {},
+      pollId: 4,
+      startDate: new Date(2021, 11, 31),
+      slug: '',
+      summary: '',
+      title: '2021,11,31',
+      voteType: 'Plurality Voting',
+      ctx: {} as any
+    }
+  ];
+
+  test('The first poll is the one ending sooner', () => {
+    const results = sortPolls(polls);
+
+    expect(results[0].pollId).toEqual(2);
+  });
+
+  test('The second poll is the one with the same date as 1 but different start date', () => {
+    const results = sortPolls(polls);
+
+    expect(results[1].pollId).toEqual(1);
+  });
+
+  test('The 4 poll is the one ending later', () => {
+    const results = sortPolls(polls);
+
+    expect(results[3].pollId).toEqual(4);
+  });
+});

modules/polling/api/parsePollMetadata.ts

@@ -5,6 +5,18 @@ import { backoffRetry, timeoutPromise } from 'lib/utils';
 import matter from 'gray-matter';
 import { parsePollMetadata } from '../helpers/parser';
 
+export function sortPolls(pollList: Poll[]): Poll[] {
+  return pollList.sort((a, b) => {
+    // closest to expiration shown first, if some have same expiration date, sort by startdate
+    const dateEndDiff = a.endDate.getTime() - b.endDate.getTime();
+
+    // Sort by more recent first if they end at the same time
+    const sortedByStartDate = a.startDate.getTime() < b.startDate.getTime() ? 1 : -1;
+
+    return dateEndDiff < 0 ? -1 : dateEndDiff > 0 ? 1 : sortedByStartDate;
+  });
+}
+
 export async function parsePollsMetadata(pollList): Promise<Poll[]> {
   let numFailedFetches = 0;
   const failedPollIds: number[] = [];
@@ -48,11 +60,5 @@ export async function parsePollsMetadata(pollList): Promise<Poll[]> {
     IDs: ${failedPollIds}`
   );
 
-  return (
-    polls
-      // closest to expiration shown first
-      .sort((a, b) =>
-        Date.now() - new Date(a.endDate).getTime() < Date.now() - new Date(b.endDate).getTime() ? -1 : 1
-      )
-  );
+  return sortPolls(polls);
 }

pages/polling/[poll-hash].tsx

@@ -48,10 +48,10 @@ import VoteBreakdown from 'modules/polling/components/VoteBreakdown';
 import VoteBox from 'modules/polling/components/VoteBox';
 import SystemStatsSidebar from 'modules/app/components/SystemStatsSidebar';
 import ResourceBox from 'modules/app/components/ResourceBox';
-import PollOptionBadge from 'modules/polling/components/PollOptionBadge';
 import MobileVoteSheet from 'modules/polling/components/MobileVoteSheet';
 import VotesByAddress from 'modules/polling/components/VotesByAddress';
 import { PollCategoryTag } from 'modules/polling/components/PollCategoryTag';
+import { getVoteColor } from 'modules/polling/helpers/getVoteColor';
 
 function prefetchTally(poll) {
   if (typeof window !== 'undefined' && poll) {
@@ -65,6 +65,30 @@ const editMarkdown = content => {
   return content.replace(/^<h1>.*<\/h1>|^<h2>.*<\/h2>/, '');
 };
 
+const WinningOptionText = ({
+  tally,
+  voteType
+}: {
+  tally: PollTally;
+  voteType: string;
+}): JSX.Element | null => {
+  if (!tally.winner) return null;
+  return (
+    <>
+      <Divider my={1} />
+      <Flex sx={{ py: 2, justifyContent: 'center', fontSize: [1, 2], color: 'onSecondary' }}>
+        <Text sx={{ textAlign: 'center', px: [3, 4] }}>
+          Winning Option:{' '}
+          <Text sx={{ color: getVoteColor(parseInt(tally.winner), voteType) }}>
+            {tally.winningOptionName}
+          </Text>
+        </Text>
+      </Flex>
+      <Divider sx={{ mt: 1 }} />
+    </>
+  );
+};
+
 const PollView = ({ poll, polls: prefetchedPolls }: { poll: Poll; polls: Poll[] }) => {
   const network = getNetwork();
   const account = useAccountsStore(state => state.currentAccount);
@@ -214,19 +238,6 @@ const PollView = ({ poll, polls: prefetchedPolls }: { poll: Poll; polls: Poll[]
                           </ExternalLink>
                         </Box>
                       )}
-
-                      {hasPollEnded ? (
-                        <PollOptionBadge
-                          poll={poll}
-                          sx={{
-                            ml: 'auto',
-                            mt: [3, 0],
-                            mb: [3, 0],
-                            width: ['100%', 'auto'],
-                            textAlign: 'center'
-                          }}
-                        />
-                      ) : null}
                     </Flex>
                   </Box>
                 </Flex>
@@ -327,6 +338,11 @@ const PollView = ({ poll, polls: prefetchedPolls }: { poll: Poll; polls: Poll[]
                   ]
                 )
               ]}
+              banner={
+                hasPollEnded && tally ? (
+                  <WinningOptionText tally={tally} voteType={poll.voteType} />
+                ) : undefined
+              }
             />
           </Card>
         </div>