Implement Election w/ state model and check state on ElectionPage (#32)

Election-Tech-Initiative · Oct 9, 2020 · f6ae393 · f6ae393
1 parent e286b1c
commit f6ae393
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 32 deletions.
diff --git a/src/components/ElectionPlaceholderMessage.tsx b/src/components/ElectionPlaceholderMessage.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text } from '@fluentui/react';
+import moment from 'moment';
+import { useTheme } from '@fluentui/react-theme-provider';
+
+// TODO #?? Resolve internalization of dates using i18n
+const dateFormat = 'MM/DD/YYYY h:mm a';
+
+export interface ElectionPlaceholderMessageProps {
+    endDate: string;
+}
+
+const ElectionPlaceholderMessage: React.FunctionComponent<ElectionPlaceholderMessageProps> = ({ endDate }) => {
+    const theme = useTheme();
+    return (
+        <Text variant="large" styles={{ root: { color: theme.palette.neutralSecondary } }}>
+            The election is not finished at this time. Please come back to check for results after
+            {' ' + moment(endDate).format(dateFormat)}.
+        </Text>
+    );
+};
+
+export default ElectionPlaceholderMessage;
diff --git a/src/components/ElectionResults.stories.tsx b/src/components/ElectionResults.stories.tsx
@@ -4,7 +4,7 @@ import { Story, Meta } from '@storybook/react/types-6-0';
 import ElectionResults from './ElectionResults';
 
 import electionDescription from '../mocks/description.json';
-import { ElectionDescription } from '../models/election';
+import { Election } from '../models/election';
 import { queryArgTypes, QueryStoryArgs } from '../util/queryStory';
 
 export default {
@@ -18,7 +18,12 @@ export default {
 interface StoryArgs extends QueryStoryArgs {}
 
 const Template: Story<StoryArgs> = ({ queryState }) => {
-    return <ElectionResults election={electionDescription as ElectionDescription} />;
+    var election = {
+        id: electionDescription.election_scope_id,
+        election_description: electionDescription,
+        state: 'Published',
+    } as Election;
+    return <ElectionResults election={election} />;
 };
 
 export const Success = Template.bind({});

diff --git a/src/components/ElectionResults.tsx b/src/components/ElectionResults.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useElectionResults } from '../data/queries';
-import { ElectionDescription } from '../models/election';
+import { Election } from '../models/election';
 import { ElectionResultsSummary } from '../models/tally';
 import AsyncContent from './AsyncContent';
 import ContestResults from './ContestResults';
@@ -9,14 +9,14 @@ import LargeCard from './LargeCard';
 const errorMessage = 'Unable to retrieve election results at this time.';
 
 export interface ElectionResultsProps {
-    election: ElectionDescription;
+    election: Election;
 }
 
 /**
  * Render the results of the election
  */
 const ElectionResults: React.FunctionComponent<ElectionResultsProps> = ({ election }) => {
-    const electionResultsQuery = useElectionResults(election.election_scope_id);
+    const electionResultsQuery = useElectionResults(election.id);
 
     return (
         <AsyncContent query={electionResultsQuery} errorMessage={errorMessage}>
@@ -29,7 +29,7 @@ const ElectionResults: React.FunctionComponent<ElectionResultsProps> = ({ electi
                                 <ContestResults
                                     results={contest.results}
                                     contest={contest.description!}
-                                    candidates={election.candidates}
+                                    candidates={election.election_description.candidates}
                                 />
                             </LargeCard>
                         ))}
@@ -40,12 +40,12 @@ const ElectionResults: React.FunctionComponent<ElectionResultsProps> = ({ electi
     );
 };
 
-function getContests(election: ElectionDescription, results: ElectionResultsSummary) {
+function getContests(election: Election, results: ElectionResultsSummary) {
     const contests = Object.entries(results.election_results)
         .map(([contestId, contestResults]) => ({
             id: contestId,
             results: contestResults,
-            description: election.contests.find((c) => c.object_id === contestId),
+            description: election.election_description.contests.find((c) => c.object_id === contestId),
         }))
         .filter((c) => !!c.description);
     return contests;

diff --git a/src/components/ElectionTitle.tsx b/src/components/ElectionTitle.tsx
@@ -7,7 +7,7 @@ import { useTheme } from '@fluentui/react-theme-provider';
 // TODO #?? Resolve internalization of language using i18n
 const defaultElectionName = 'Election';
 // TODO #?? Resolve internalization of dates using i18n
-const dateFormat = 'MM/DD/YYYY';
+const dateFormat = 'MM/DD/YYYY h:mm a';
 
 export interface ElectionTitleProps {
     electionName?: string;
@@ -21,7 +21,7 @@ const ElectionTitle: React.FunctionComponent<ElectionTitleProps> = ({ electionNa
         <Title title={electionName ?? defaultElectionName}>
             <Text as="span" styles={{ root: { color: theme.palette.neutralSecondary } }}>{`${moment(startDate).format(
                 dateFormat
-            )}-${moment(endDate).format(dateFormat)}`}</Text>
+            )} - ${moment(endDate).format(dateFormat)}`}</Text>
         </Title>
     );
 };

diff --git a/src/data/DataAccess.ts b/src/data/DataAccess.ts
@@ -1,12 +1,12 @@
-import { ElectionDescription } from '../models/election';
+import { Election } from '../models/election';
 import { ElectionResultsSummary } from '../models/tally';
 import { TrackedBallot } from '../models/tracking';
 
 /**
  * Provides access to election data and search functionality.
  */
 export interface DataAccess {
-    getElections(): Promise<ElectionDescription[]>;
+    getElections(): Promise<Election[]>;
     getElectionResults(electionId: string): Promise<ElectionResultsSummary>;
     searchBallots(electionId: string, query: string): Promise<TrackedBallot[]>;
 }
diff --git a/src/data/PublishedDataAccess.ts b/src/data/PublishedDataAccess.ts
@@ -1,5 +1,5 @@
 import path from 'path';
-import { ElectionDescription } from '../models/election';
+import { Election, ElectionDescription } from '../models/election';
 import {
     CiphertextAcceptedBallot,
     PlaintextTally,
@@ -14,9 +14,14 @@ import { DataAccess } from './DataAccess';
  * DataAccess implementation for static published ElectionGuard data.
  */
 export class PublishedDataAccess implements DataAccess {
-    async getElections(): Promise<ElectionDescription[]> {
-        const election = await loadPublishedFile('description.json');
-        return [election as ElectionDescription];
+    async getElections(): Promise<Election[]> {
+        const electionDescription = await loadPublishedFile<ElectionDescription>('description.json');
+        const election: Election = {
+            id: electionDescription.election_scope_id,
+            election_description: electionDescription,
+            state: 'Published',
+        };
+        return [election];
     }
 
     async getElectionResults(electionId: string): Promise<ElectionResultsSummary> {

diff --git a/src/data/queries.ts b/src/data/queries.ts
@@ -1,5 +1,5 @@
 import { useQuery } from 'react-query';
-import { ElectionDescription } from '../models/election';
+import { Election } from '../models/election';
 import { ElectionResultsSummary } from '../models/tally';
 import { TrackedBallot } from '../models/tracking';
 import { useDataAccess } from './DataAccessProvider';
@@ -18,10 +18,10 @@ export interface QueryResult<T> {
 }
 
 /**
- * Fetch the available election descriptions
+ * Fetch the available elections
  * @param condition An optional boolean value which, if false, will prevent the query from running.
  */
-export function useElections(condition: boolean = true): QueryResult<ElectionDescription[]> {
+export function useElections(condition: boolean = true): QueryResult<Election[]> {
     const dataAccess = useDataAccess();
     return useQuery(QUERIES.ELECTIONS, () => dataAccess.getElections(), { enabled: condition });
 }

diff --git a/src/mocks/MockDataAccess.ts b/src/mocks/MockDataAccess.ts
@@ -4,7 +4,7 @@ import mockDescription from './description.json';
 import mockTally from './tally.json';
 import mockBallots from './ballots.json';
 import { CiphertextAcceptedBallot, transformBallotForTracking, transformTallyResults } from '../models/electionguard';
-import { ElectionDescription } from '../models/election';
+import { Election } from '../models/election';
 import { ElectionResultsSummary } from '../models/tally';
 import { TrackedBallot } from '../models/tracking';
 
@@ -17,8 +17,13 @@ const trackedBallots = (mockBallots as CiphertextAcceptedBallot[]).map((ballot)
  * DataAccess implementation for in-memory synchronous mocked data
  */
 export class MockDataAccess implements DataAccess {
-    async getElections(): Promise<ElectionDescription[]> {
-        return [mockDescription as any];
+    async getElections(): Promise<Election[]> {
+        const mockElection: Election = {
+            id: mockDescription.election_scope_id,
+            election_description: mockDescription,
+            state: 'Published',
+        };
+        return [mockElection];
     }
 
     async getElectionResults(electionId: string): Promise<ElectionResultsSummary> {

diff --git a/src/models/election.ts b/src/models/election.ts
@@ -1,5 +1,13 @@
 import { InternationalizedText } from './internationalizedText';
 
+export type ElectionState = 'New' | 'Open' | 'Closed' | 'Published';
+
+export interface Election {
+    id: string;
+    election_description: ElectionDescription;
+    state: ElectionState;
+}
+
 export interface ElectionDescription {
     election_scope_id: string;
     start_date: string;

diff --git a/src/pages/ElectionPage.tsx b/src/pages/ElectionPage.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Stack } from '@fluentui/react';
+import { Stack, Text } from '@fluentui/react';
 
 import AsyncContent from '../components/AsyncContent';
 import ElectionTitle from '../components/ElectionTitle';
+import ElectionPlaceholderMessage from '../components/ElectionPlaceholderMessage';
 import TrackerSearch from '../components/TrackerSearch';
 import ElectionResults from '../components/ElectionResults';
 import { useElections } from '../data/queries';
@@ -21,7 +22,7 @@ const ElectionPage: React.FunctionComponent<ElectionPageProps> = () => {
         <Stack>
             <AsyncContent query={electionsQuery} errorMessage="Unable to load the election at this time.">
                 {(elections) => {
-                    const election = elections.find((e) => e.election_scope_id === electionId);
+                    const election = elections.find((e) => e.id === electionId);
 
                     if (!election) {
                         return <Title title="We're having trouble finding this election. Please try again." />;
@@ -30,14 +31,18 @@ const ElectionPage: React.FunctionComponent<ElectionPageProps> = () => {
                     return (
                         <>
                             <ElectionTitle
-                                electionName={translate(election!.name)}
-                                startDate={election!.start_date}
-                                endDate={election!.end_date}
+                                electionName={translate(election!.election_description.name)}
+                                startDate={election!.election_description.start_date}
+                                endDate={election!.election_description.end_date}
                             />
-
-                            <TrackerSearch electionId={election!.election_scope_id} />
-
-                            <ElectionResults election={election!} />
+                            {election.state === 'Published' ? (
+                                <>
+                                    <TrackerSearch electionId={election!.id} />
+                                    <ElectionResults election={election!} />
+                                </>
+                            ) : (
+                                <ElectionPlaceholderMessage endDate={election!.election_description.end_date} />
+                            )}
                         </>
                     );
                 }}

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -15,7 +15,7 @@ const ElectionPage: React.FunctionComponent<HomePageProps> = () => {
             <AsyncContent query={electionsQuery} errorMessage="Unable to load any elections at this time.">
                 {(elections) => {
                     const election = elections[0];
-                    return <Redirect to={`/${election.election_scope_id}`} />;
+                    return <Redirect to={`/${election.id}`} />;
                 }}
             </AsyncContent>
         </Stack>