Unify a single Election page

src/App.tsx

@@ -3,21 +3,16 @@ import { Switch, Route, Redirect } from 'react-router-dom';
 import 'normalize.css';
 
 import Layout from './components/Layout';
-import InputTrackerPage from './pages/InputTrackerPage';
-import ResultsPage from './pages/ResultsPage';
 import NotFoundPage from './pages/NotFoundPage';
 
 import './App.css';
+import ElectionPage from './pages/ElectionPage';
 
 function App() {
     return (
         <Layout>
             <Switch>
-                <Route path="/" exact>
-                    <Redirect to="/confirm-ballot" />
-                </Route>
-                <Route path="/confirm-ballot" component={InputTrackerPage} />
-                <Route path="/results" component={ResultsPage} />
+                <Route path="/" exact component={ElectionPage} />
                 <Route component={NotFoundPage} />
             </Switch>
         </Layout>

src/pages/ElectionPage.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Label, SearchBox, Stack } from '@fluentui/react';
+
+import ElectionHeader from '../components/ElectionTitle';
+import LargeCard from '../components/LargeCard';
+import { useLocalization } from '../localization/LocalizationProvider';
+import { useElectionDescription, useElectionResults } from '../data/queries';
+import AsyncContent from '../components/AsyncContent';
+import ElectionResults from '../components/ElectionResults';
+
+export interface ElectionPageProps {}
+
+const ElectionPage: React.FunctionComponent<ElectionPageProps> = () => {
+    const history = useHistory();
+
+    const goToResults = () => {
+        history.push('/results');
+    };
+
+    const { translate } = useLocalization();
+    const electionQuery = useElectionDescription();
+
+    const electionId = electionQuery.data?.election_scope_id || '';
+    const electionResultsQuery = useElectionResults(electionId);
+
+    return (
+        <Stack>
+            <AsyncContent query={electionQuery} errorMessage="Unable to load the election at this time.">
+                {(election) => (
+                    <>
+                        <ElectionHeader
+                            electionName={translate(election.name)}
+                            startDate={election.start_date}
+                            endDate={election.end_date}
+                        />
+
+                        <LargeCard alignToStart>
+                            <Label>Ballot Search</Label>
+                            <SearchBox
+                                styles={{ root: { width: '100%', maxWidth: 600 } }}
+                                placeholder="Input Ballot Tracker"
+                            />
+                        </LargeCard>
+
+                        <ElectionResults election={election} electionResultsQuery={electionResultsQuery} />
+                    </>
+                )}
+            </AsyncContent>
+        </Stack>
+    );
+};
+
+export default ElectionPage;

src/pages/InputTrackerPage.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { Label, PrimaryButton, SearchBox } from '@fluentui/react';
-
-import ElectionHeader from '../components/ElectionTitle';
-import LargeCard from '../components/LargeCard';
-
-const electionName = 'Mock Election';
-const startDate = '2020-03-01T08:00:00-05:00';
-const endDate = '2020-10-01T08:00:00-05:00';
-
-export interface InputTrackerPageProps {}
-
-const InputTrackerPage: React.FunctionComponent<InputTrackerPageProps> = () => {
-    const history = useHistory();
-
-    const goToResults = () => {
-        history.push('/results');
-    };
-
-    return (
-        <>
-            <ElectionHeader electionName={electionName} startDate={startDate} endDate={endDate} />
-            <LargeCard alignToStart>
-                <Label>Ballot Search</Label>
-                <SearchBox styles={{ root: { width: '100%', maxWidth: 600 } }} placeholder="Input Ballot Tracker" />
-                <Label>Election Results</Label>
-                <PrimaryButton styles={{ root: { width: '100%', maxWidth: 150 } }} onClick={goToResults}>
-                    View
-                </PrimaryButton>
-            </LargeCard>
-        </>
-    );
-};
-
-export default InputTrackerPage;

src/pages/ResultsPage.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import ElectionHeader from '../components/ElectionTitle';
-import ElectionResults from '../components/ElectionResults';
-import { useElectionDescription, useElectionResults } from '../data/queries';
-import { useLocalization } from '../localization/LocalizationProvider';
-import AsyncContent from '../components/AsyncContent';
-
-export interface ResultsPageProps {}
-
-const ResultsPage: React.FunctionComponent<ResultsPageProps> = () => {
-    const { translate } = useLocalization();
-    const electionQuery = useElectionDescription();
-
-    const electionId = electionQuery.data?.election_scope_id || '';
-    const electionResultsQuery = useElectionResults(electionId);
-
-    return (
-        <AsyncContent query={electionQuery} errorMessage="Unable to load the election at this time.">
-            {(election) => (
-                <>
-                    <ElectionHeader
-                        electionName={translate(election.name)}
-                        startDate={election.start_date}
-                        endDate={election.end_date}
-                    />
-                    <ElectionResults election={election} electionResultsQuery={electionResultsQuery} />
-                </>
-            )}
-        </AsyncContent>
-    );
-};
-
-export default ResultsPage;