From 5556b04a41d931faeed017a6a5c88274da1c81c1 Mon Sep 17 00:00:00 2001 From: Rebecca Date: Mon, 26 Oct 2020 23:17:24 -0400 Subject: [PATCH] vote result page --- client/src/components/App.tsx | 7 +- client/src/components/Pages/Result/index.tsx | 146 ++++++++++++++++++ client/src/components/Pages/Result/result.css | 32 ++++ client/src/components/Pages/Vote/index.tsx | 4 +- client/src/components/index.ts | 1 + service/index.ts | 13 +- 6 files changed, 195 insertions(+), 8 deletions(-) create mode 100644 client/src/components/Pages/Result/index.tsx create mode 100644 client/src/components/Pages/Result/result.css diff --git a/client/src/components/App.tsx b/client/src/components/App.tsx index a25abec..8e4e716 100644 --- a/client/src/components/App.tsx +++ b/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)} /> + diff --git a/client/src/components/Pages/Result/index.tsx b/client/src/components/Pages/Result/index.tsx new file mode 100644 index 0000000..2c541f6 --- /dev/null +++ b/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(); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(false); + + const [poll, setPoll] = useState(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 ? : + error ?
Something went wrong : (
: + poll === undefined ? +
Poll not found : (
: +
+
+
{poll.name} {ended ? "Final" : null} Results
+
+ {ended? null :
These are refreshed every 10 seconds
} +
+ {Object.entries(poll.results).map(function(option, idx){ + return (
  • {option[0]} : {option[1]}
    • ) + })} +
    +
    +
    +
    + {evals && !ended ? : } +
    + +
    + ) +} + +export default Result; diff --git a/client/src/components/Pages/Result/result.css b/client/src/components/Pages/Result/result.css new file mode 100644 index 0000000..cf779e1 --- /dev/null +++ b/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; +} diff --git a/client/src/components/Pages/Vote/index.tsx b/client/src/components/Pages/Vote/index.tsx index d45a197..32ea94a 100644 --- a/client/src/components/Pages/Vote/index.tsx +++ b/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"); diff --git a/client/src/components/index.ts b/client/src/components/index.ts index 2613c3d..a57b7c1 100644 --- a/client/src/components/index.ts +++ b/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"; diff --git a/service/index.ts b/service/index.ts index 36c140e..e7d8f87 100644 --- a/service/index.ts +++ b/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?