delete tally.options and use tally.results (#274)

* delete tally.options and use tally.results * clean up * fix tests * fix some type error complaints * remove legacy endpoint Co-authored-by: Rafael Ventura <rafinskipg@gmail.com>
makerdao · Dec 15, 2021 · fba92b9 · fba92b9
1 parent c0c2fbe
commit fba92b9
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 99 deletions.
diff --git a/modules/app/components/Tabs.tsx b/modules/app/components/Tabs.tsx
@@ -9,7 +9,7 @@ type Props = {
   tabPanels: React.ReactNode[];
   tabListStyles?: ThemeUIStyleObject;
   hashRoute?: boolean;
-  banner?: JSX.Element;
+  banner?: JSX.Element | null;
 };
 
 const TabbedLayout = ({

diff --git a/modules/polling/components/PollVotePluralityResultsCompact.tsx b/modules/polling/components/PollVotePluralityResultsCompact.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js';
 import { Box } from 'theme-ui';
-import { PollTally, PollTallyPluralityOption } from '../types';
+import { PollTally, PluralityResult } from '../types';
 import { YesNoAbstainBar } from './YesNoAbstainBar';
 
 export function PollVotePluralityResultsCompact({
@@ -10,24 +10,18 @@ export function PollVotePluralityResultsCompact({
   tally: PollTally;
   showTitles?: boolean;
 }): React.ReactElement {
-  const max = new BigNumber(tally.totalMkrParticipation);
+  const voteTallyResults = tally.results as PluralityResult[];
 
-  const voteTallyOptions = tally.options as PollTallyPluralityOption;
-
-  const abstainValue = new BigNumber(voteTallyOptions['0'] ? voteTallyOptions['0'].mkrSupport : 0);
-  const yesValue = new BigNumber(voteTallyOptions['1'] ? voteTallyOptions['1'].mkrSupport : 0);
-  const noValue = new BigNumber(voteTallyOptions['2'] ? voteTallyOptions['2'].mkrSupport : 0);
-
-  const yesPercent = max.isGreaterThan(0) ? yesValue.dividedBy(max).multipliedBy(100).toFixed(0) : 0;
-  const abstainPercent = max.isGreaterThan(0) ? abstainValue.dividedBy(max).multipliedBy(100).toFixed(0) : 0;
-  const noPercent = max.isGreaterThan(0) ? noValue.dividedBy(max).multipliedBy(100).toFixed(0) : 0;
+  const yesPercent = voteTallyResults.find(({ optionId }) => optionId === '1')?.firstPct || 0;
+  const abstainPercent = voteTallyResults.find(({ optionId }) => optionId === '0')?.firstPct || 0;
+  const noPercent = voteTallyResults.find(({ optionId }) => optionId === '2')?.firstPct || 0;
 
   return (
     <Box>
       <YesNoAbstainBar
-        yesPercent={yesPercent}
-        noPercent={noPercent}
-        abstainPercent={abstainPercent}
+        yesPercent={new BigNumber(yesPercent).toFixed(0)}
+        noPercent={new BigNumber(noPercent).toFixed(0)}
+        abstainPercent={new BigNumber(abstainPercent).toFixed(0)}
         showTitles={showTitles}
       />
     </Box>

diff --git a/modules/polling/components/PollWinningOptionBox.tsx b/modules/polling/components/PollWinningOptionBox.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Poll, PollTally } from '../types';
+import { PluralityResult, Poll, PollTally, RankedChoiceResult } from '../types';
 import { Text, Flex } from 'theme-ui';
 import BigNumber from 'bignumber.js';
 import { isActivePoll } from '../helpers/utils';
@@ -18,17 +18,25 @@ export default function PollWinningOptionBox({
 
   return (
     <Flex sx={{ py: 2, justifyContent: 'center', fontSize: [1, 2], color: 'onSecondary' }}>
-      {tally && Object.keys(tally.options).length > 0 && tally.winningOptionName ? (
+      {tally && tally.results.length > 0 && tally.winningOptionName ? (
         <Text as="p" sx={{ textAlign: 'center', px: [3, 4], mb: 1, wordBreak: 'break-word' }}>
           {textWin}:{' '}
-          <span sx={{ color: getVoteColor(parseInt(tally.winner), poll.voteType) }}>
+          <span sx={{ color: getVoteColor(parseInt(tally?.winner || '0'), poll.voteType) }}>
             {tally?.winningOptionName}
           </span>{' '}
           {tally.pollVoteType === POLL_VOTE_TYPE.PLURALITY_VOTE &&
-            'with ' + new BigNumber(tally.options[tally.winner].mkrSupport).toFormat(2) + ' MKR supporting.'}
+            'with ' +
+              new BigNumber(
+                (tally.results as PluralityResult[]).find(({ optionId }) => optionId === tally.winner)
+                  ?.mkrSupport || '0'
+              ).toFormat(2) +
+              ' MKR supporting.'}
           {tally.pollVoteType === (POLL_VOTE_TYPE.RANKED_VOTE || POLL_VOTE_TYPE.UNKNOWN) &&
             'with ' +
-              new BigNumber(tally.options[tally.winner].firstChoice).toFormat(2) +
+              new BigNumber(
+                (tally.results as RankedChoiceResult[]).find(({ optionId }) => optionId === tally.winner)
+                  ?.firstChoice || '0'
+              ).toFormat(2) +
               ' MKR supporting as first choice.'}
         </Text>
       ) : (

diff --git a/modules/polling/components/__tests__/PollVoteHistoryItem.test.tsx b/modules/polling/components/__tests__/PollVoteHistoryItem.test.tsx
@@ -13,20 +13,20 @@ describe('Poll vote history item', () => {
       rounds: 1,
       winner: 1,
       totalMkrParticipation: 70288.579356787892861292,
-      options: {
-        0: {
+      results: [
+        {
           firstChoice: 2.001309,
           transfer: 0,
           winner: false,
           eliminated: false
         },
-        1: {
+        {
           firstChoice: 70286.578047787892861292,
           transfer: 0,
           winner: true,
           eliminated: false
         }
-      },
+      ],
       numVoters: 13
     });
   });

diff --git a/modules/polling/helpers/__tests__/getPollTally.spec.ts b/modules/polling/helpers/__tests__/getPollTally.spec.ts
@@ -1,8 +1,9 @@
 import { getPollTally } from '../getPollTaly';
 import { fetchPollTally } from '../../api/fetchPollTally';
 import { fetchVotesByAddresForPoll } from '../../api/fetchVotesByAddress';
-import { Poll } from '../../types';
+import { PluralityResult, Poll } from '../../types';
 import BigNumber from 'bignumber.js';
+import * as PRT from '../parseRawTally';
 
 jest.mock('../../api/fetchPollTally');
 jest.mock('../../api/fetchVotesByAddress');
@@ -13,7 +14,7 @@ const mockPoll: Poll = {
   discussionLink: '',
   endDate: new Date(2011, 10, 30),
   multiHash: '',
-  options: {},
+  options: { '0': 'Abstain', '1': 'Yes', '2': 'No' },
   pollId: 1,
   startDate: new Date(2011, 10, 30),
   slug: '',
@@ -23,9 +24,31 @@ const mockPoll: Poll = {
   ctx: {} as any
 };
 
+const expectedPRTArg = {
+  numVoters: 0,
+  pollVoteType: 'Plurality Voting',
+  totalMkrParticipation: new BigNumber(0),
+  votesByAddress: [],
+  winner: '0',
+  options: {
+    '0': {
+      mkrSupport: new BigNumber(0),
+      winner: false
+    },
+    '1': {
+      mkrSupport: new BigNumber(0),
+      winner: false
+    },
+    '2': {
+      mkrSupport: new BigNumber(0),
+      winner: false
+    }
+  }
+};
+
 describe('getPollTally', () => {
   // We add this test to check that we always return a non-empty options object to the FE so the components that rely on populated data won't crash
-  it('Returns a correct tally even when the options are empty', async () => {
+  it('Returns a correct tally for plurality votes even when the options are empty', async () => {
     (fetchPollTally as jest.Mock).mockReturnValue(
       Promise.resolve({
         totalMkrParticipation: new BigNumber(0),
@@ -35,14 +58,26 @@ describe('getPollTally', () => {
       })
     );
     (fetchVotesByAddresForPoll as jest.Mock).mockReturnValue(Promise.resolve([]));
+    jest.spyOn(PRT, 'parseRawPollTally');
 
     const poll = mockPoll;
     const tally = await getPollTally(poll);
-    expect(tally.options['0']).not.toBeUndefined();
-    expect(tally.options['0'].mkrSupport.toString()).toEqual('0');
-    expect(tally.options['1']).not.toBeUndefined();
-    expect(tally.options['1'].mkrSupport.toString()).toEqual('0');
-    expect(tally.options['2']).not.toBeUndefined();
-    expect(tally.options['2'].mkrSupport.toString()).toEqual('0');
+    const results = tally.results as PluralityResult[];
+
+    // When no options returned with tally, we manually add them in 'getPollTally'
+    expect(PRT.parseRawPollTally).toHaveBeenCalledWith(expectedPRTArg, poll);
+
+    // 'parseRawTally' returns the tally without the 'options' prop
+    expect('options' in tally).toBe(false);
+
+    // The tally results are created by looping over the poll options
+    expect(results.length).toBe(Object.keys(poll.options).length);
+
+    expect(results[0]).not.toBeUndefined();
+    expect(results[0].mkrSupport.toString()).toEqual('0');
+    expect(results[1]).not.toBeUndefined();
+    expect(results[1].mkrSupport.toString()).toEqual('0');
+    expect(results[2]).not.toBeUndefined();
+    expect(results[2].mkrSupport.toString()).toEqual('0');
   });
 });
diff --git a/modules/polling/helpers/parseRawTally.ts b/modules/polling/helpers/parseRawTally.ts
@@ -1,4 +1,3 @@
-import { MKR } from 'lib/maker';
 import BigNumber from 'bignumber.js';
 import invariant from 'tiny-invariant';
 import { Poll, PollTally, RawPollTally, PluralityResult, RankedChoiceResult } from '../types';
@@ -57,10 +56,16 @@ export function parseRawPollTally(rawTally: RawPollTally, poll: Poll): PollTally
       return valueA.gt(valueB) ? -1 : 1;
     });
 
+  // Now we have created the results object, we intentionally omit 'options' to avoid confusion
+  const {
+    options: _, // eslint-disable-line @typescript-eslint/no-unused-vars
+    ...remainder
+  } = rawTally;
+
   return {
-    ...rawTally,
+    ...remainder,
     results: poll.voteType === POLL_VOTE_TYPE.PLURALITY_VOTE ? pluralityResult : rankedChoiceResult,
-    totalMkrParticipation,
+    totalMkrParticipation: totalMkrParticipation.toNumber(),
     winningOptionName
   } as PollTally;
 }
diff --git a/modules/polling/types/pollTally.d.ts b/modules/polling/types/pollTally.d.ts
@@ -1,4 +1,3 @@
-import CurrencyObject from './currency';
 import BigNumber from 'bignumber.js';
 import { PollVoteType } from './pollVoteType';
 
@@ -16,7 +15,7 @@ export type RankedChoiceResult = {
 export type PluralityResult = {
   optionId: string;
   optionName: string;
-  winner;
+  winner: boolean;
   mkrSupport: BigNumber;
   winner: boolean;
   firstPct: BigNumber; // TODO rename to "percent"?
@@ -45,11 +44,9 @@ export type PollTallyVote = {
 export type RawPollTallyRankedChoice = {
   pollVoteType: PollVoteType;
   winner: string | null;
-  rounds?: number;
+  rounds: number;
   numVoters: number;
   options: Record<number, PollTallyRankedChoiceOption>;
-  results: RankedChoiceResult[];
-  winningOptionName: string;
   totalMkrParticipation: number;
   votesByAddress?: PollTallyVote[];
 };
@@ -59,6 +56,25 @@ export type RawPollTallyPlurality = {
   winner: string | null;
   numVoters: number;
   options: Record<number, PollTallyPluralityOption>;
+  totalMkrParticipation: number;
+  votesByAddress?: PollTallyVote[];
+};
+
+export type PollTallyRankedChoice = {
+  pollVoteType: PollVoteType;
+  winner: string | null;
+  numVoters: number;
+  results: RankedChoiceResult[];
+  winningOptionName: string;
+  totalMkrParticipation: number;
+  votesByAddress?: PollTallyVote[];
+  rounds?: number;
+};
+
+export type PollTallyPlurality = {
+  pollVoteType: PollVoteType;
+  winner: string | null;
+  numVoters: number;
   results: PluralityResult[];
   winningOptionName: string;
   totalMkrParticipation: number;

diff --git a/pages/api/polling/tally/legacy/[poll-id].ts b/pages/api/polling/tally/legacy/[poll-id].ts
diff --git a/pages/polling/[poll-hash].tsx b/pages/polling/[poll-hash].tsx
@@ -17,7 +17,7 @@ import { formatDateWithTime } from 'lib/datetime';
 
 // api
 import { getPolls, getPoll } from 'modules/polling/api/fetchPolls';
-import { Poll, PollTally } from 'modules/polling/types';
+import { Poll } from 'modules/polling/types';
 
 // stores
 import useAccountsStore from 'modules/app/stores/accounts';
@@ -282,14 +282,13 @@ const PollView = ({ poll }: { poll: Poll }) => {
                 )
               ]}
               banner={
-                tally &&
-                tally.totalMkrParticipation > 0 && (
+                tally && tally.totalMkrParticipation > 0 ? (
                   <Box>
                     <Divider my={0} />
                     <PollWinningOptionBox tally={tally} poll={poll} />
                     <Divider my={0} />
                   </Box>
-                )
+                ) : null
               }
             />
           </Card>