Auto refresh AcceptedVotes list

README.md

@@ -21,7 +21,7 @@ TODO:
 - [x] Submit Voters vote
   - [x] Validate ballot before sending
 - [x] Admin endpoint to receive submitted votes & validate vote token
-- [ ] Bulletin board of all valid received votes
+- [x] Bulletin board of all valid received votes
 - [x] Admin sends voter confirmation that vote was received
 - [ ] Vote Tokens can only be used once
 - [ ] Admin can manually close voting early

package.json

@@ -55,6 +55,7 @@
     "jsbn": "^1.1.0",
     "lodash-es": "^4.17.15",
     "mailgun-js": "^0.22.0",
+    "ms": "^2.1.2",
     "next": "latest",
     "next-transpile-modules": "^4.0.3",
     "react": "^16.13.1",
@@ -64,6 +65,7 @@
   },
   "devDependencies": {
     "@types/mailgun-js": "^0.22.10",
+    "@types/ms": "^0.7.31",
     "@types/node": "^13.9.5",
     "@types/react": "^16.9.27",
     "@typescript-eslint/eslint-plugin": "^3.4.0",

src/status/AcceptedVotes.tsx

@@ -1,3 +1,4 @@
+import ms from 'ms'
 import { useRouter } from 'next/router'
 import useSWR from 'swr'
 
@@ -7,7 +8,9 @@ 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)
+  const { data, error } = useSWR(election_id ? `/api/election/${election_id}/accepted-votes` : null, fetcher, {
+    refreshInterval: ms('10s'),
+  })
 
   if (error) return <div>Error loading Accepted Votes</div>
   if (!data) return <div>Loading...</div>
@@ -16,7 +19,7 @@ export const AcceptedVotes = (): JSX.Element => {
     <div>
       <h3>Accepted Votes</h3>
       <ol>
-        {data.map((vote, index: number) => (
+        {data.map((vote: NodeJS.Dict<string>, index: number) => (
           <li key={index}>{JSON.stringify(vote)}</li>
         ))}
       </ol>