Show accepted votes on ElectionStatusPage

package.json

@@ -59,7 +59,8 @@
     "next-transpile-modules": "^4.0.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-flip-move": "^3.0.4"
+    "react-flip-move": "^3.0.4",
+    "swr": "^0.3.0"
   },
   "devDependencies": {
     "@types/mailgun-js": "^0.22.10",

src/status/AcceptedVotes.tsx

@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router'
+import useSWR from 'swr'
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json())
+
+export const AcceptedVotes = (): JSX.Element => {
+  const { election_id } = useRouter().query
+
+  // Grab votes from api
+  const { data, error } = useSWR(election_id ? `/api/election/${election_id}/accepted-votes` : null, fetcher)
+
+  if (error) return <div>Error loading Accepted Votes</div>
+  if (!data) return <div>Loading...</div>
+
+  return (
+    <div>
+      <h3>Accepted Votes</h3>
+      <ol>
+        {data.map((vote, index: number) => (
+          <li key={index}>{JSON.stringify(vote)}</li>
+        ))}
+      </ol>
+    </div>
+  )
+}

src/status/ElectionStatusPage.tsx

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router'
 
 import { GlobalCSS } from '../GlobalCSS'
 import { Head } from '../Head'
+import { AcceptedVotes } from './AcceptedVotes'
 
 export const ElectionStatusPage = (): JSX.Element => {
   const { election_id } = useRouter().query
@@ -12,6 +13,7 @@ export const ElectionStatusPage = (): JSX.Element => {
       <main>
         <h1>Election Status</h1>
         <h2>ID: {election_id}</h2>
+        <AcceptedVotes />
       </main>
 
       <style jsx>{`