Vote Result Page

client/src/components/App.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
 import { withOidcSecure } from "@axa-fr/react-oidc-context";
-import { Home, Vote, Create } from "./index";
+import { Home, Vote, Create, Result } from "./index";
 import PageContainer from "../containers/PageContainer";
 
 class App extends Component {
@@ -17,6 +17,11 @@ class App extends Component {
               component={withOidcSecure(Vote)}
             />
             <Route exact path="/create" component={withOidcSecure(Create)} />
+            <Route
+              exact
+              path="/result/:voteId"
+              component={withOidcSecure(Result)}
+            />
           </Switch>
         </PageContainer>
       </Router>

client/src/components/Pages/Result/index.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from "react";
+import { useParams, useHistory } from 'react-router-dom';
+import Spinner from "../../Spinner";
+import "./result.css";
+
+type RouteParams = {
+  voteId: string
+}
+
+type Poll = {
+  name: string,
+  results: Object
+}
+
+export const Result: React.FunctionComponent = () =>{
+  const { voteId } = useParams<RouteParams>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const [poll, setPoll] = useState<Poll|undefined>(undefined);
+  const [ended, setEnded] = useState(false);
+  const evals = true;
+  let history = useHistory();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+        if(!ended) {
+        fetch("http://localhost:5000/api/getCount", {
+            headers: {"content-type": "application/json"},
+            method: "POST",
+            body: JSON.stringify({"voteId": voteId})
+          })
+              .then((res) => {
+                switch(res.status) {
+                  case 200:
+                      return res.json()
+                  case 404:
+                      return undefined
+                  default:
+                    throw new Error("Error Getting Poll Details");
+                }
+              })
+              .then((result) => {
+                setLoading(false);
+                setPoll(result)
+                console.log(result)
+              },
+              (error) => {
+                setLoading(false);
+                setError(true);
+                console.log(error);
+              });
+            }
+    }, 10000);
+    return () => clearInterval(interval);
+  }, [voteId, ended]);
+
+  useEffect(() => {
+    fetch("http://localhost:5000/api/getCount", {
+      headers: {"content-type": "application/json"},
+      method: "POST",
+      body: JSON.stringify({"voteId": voteId})
+    })
+        .then((res) => {
+          switch(res.status) {
+            case 200:
+                return res.json()
+            case 404:
+                return undefined
+            default:
+              throw new Error("Error Getting Poll Details");
+          }
+        })
+        .then((result) => {
+          setLoading(false);
+          setPoll(result)
+          console.log(result)
+        },
+        (error) => {
+          setLoading(false);
+          setError(true);
+          console.log(error);
+        });
+  }, [voteId])
+
+  function endVoting() {
+    if(window.confirm("End Voting?")){
+      setLoading(true)
+      fetch("http://localhost:5000/api/endPoll", {
+      headers: {"content-type": "application/json"},
+      method: "POST",
+      body: JSON.stringify({"voteId": voteId})
+    })
+        .then((res) => {
+          switch(res.status) {
+            case 200:
+                return res.json()
+            case 404:
+                return undefined
+            default:
+              throw new Error("Error Getting Poll Details");
+          }
+        })
+        .then((result) => {
+          setLoading(false);
+          setPoll(result)
+          setEnded(true)
+          console.log(result)
+        },
+        (error) => {
+          setLoading(false);
+          setError(true);
+          console.log(error);
+        });
+    }
+  }
+
+  return(
+    loading ? <Spinner className="vote"></Spinner> :
+      error ? <div>Something went wrong : (</div> :
+        poll === undefined ? 
+      <div>Poll not found : (</div> :
+        <div>
+        <div className="result-list">
+            <div className="result-title-panel">{poll.name} {ended ? "Final" : null} Results </div>
+            <div>
+            {ended? null :<div className="refresh-message">These are refreshed every 10 seconds</div>}
+            <div className="result-list-items">
+            {Object.entries(poll.results).map(function(option, idx){
+                return (<li key={idx}>{option[0]} : {option[1]}</li>)
+            })}
+            </div>
+            </div>
+            </div>
+            <div className="exit-button">
+            {evals && !ended ? <button className="btn btn-danger" onClick={() => endVoting()}>End Voting</button> : <button 
+            onClick={() => history.push("/")} 
+            className="btn btn-primary submit-button"
+            >Exit</button>}
+            </div>
+
+        </div>
+  )
+}
+
+export default Result;

client/src/components/Pages/Result/result.css

@@ -0,0 +1,32 @@
+.result-title-panel {
+    color: inherit;
+    font-size: 20px;
+    padding: 20px;
+}
+
+.result-list {
+    border: none;
+    border-radius: 2px;
+    box-shadow: 0 1px 4px rgba(0,0,0,.3);
+}
+
+.refresh-message {
+    padding: 12px;
+}
+
+.result-list-items{
+    background-color: white;
+    font-size: 14px;
+    padding:12px;
+    padding-right: 16px;
+}
+
+.result-list-items li {
+    list-style: none;
+    padding-top: 12px;
+}
+
+.exit-button {
+    margin-top: 24px;
+    text-align: center;
+}

client/src/components/Pages/Vote/index.tsx

@@ -58,9 +58,7 @@ export const Vote: React.FunctionComponent = () =>{
               .then((res) => {
                 switch(res.status) {
                   case 204:
-                      //TODO- probably better to route to a "voted" screen than home
-                      //but this is prob okay for mvp
-                      history.push("/")
+                      history.push("/result/" + voteId)
                       return;
                   default:
                     throw new Error("Error Voting");

client/src/components/index.ts

@@ -2,3 +2,4 @@ export { default as Home } from "./Pages/Home";
 export { default as NavBar } from "./NavBar";
 export { default as Vote } from "./Pages/Vote";
 export { default as Create } from "./Pages/Create";
+export { default as Result } from "./Pages/Result";

service/index.ts

@@ -11,6 +11,11 @@ let currentPolls = [{"id": 1, "name": "eat a whole cake conditional", "voteOptio
 {"id": 2, "name": "fail chad", "voteOptions": ["fail", "conditional", "abstain"]}
 ];
 
+const sampleCount = {
+    "name": "Potate's Vote",
+    "results": {"option1": 1, "option2": 2, "option3": 0} 
+}
+
 app.use(express.static(path.join(__dirname, "/../build")));
 
 // Returns list of all current polls
@@ -46,13 +51,13 @@ app.post("/api/initializePoll", (req,res) => {
 });
 
 // get the count without ending the poll
-app.get("/api/getCount", (req,res) => {
-    res.json({"countYes": 1, "countNo": 2, "countAbstain": 0, "totalCount": 3});
+app.post("/api/getCount", (req,res) => {
+    res.json(sampleCount);
 });
 
 // end the poll and get the final results, called from evals view  
-app.get("/api/endPoll", (req,res) => {
-    res.json({"countYes": 1, "countNo": 2, "countAbstain": 0, "totalCount": 3});
+app.post("/api/endPoll", (req,res) => {
+    res.json(sampleCount);
 });
 /**
  *  TODO - what other endpoints will we need?