From 505136c38eff3c1fba51349d7cd8f30dd2a3dcda Mon Sep 17 00:00:00 2001 From: Kushal Baral <136962554+kushal1o1@users.noreply.github.com> Date: Tue, 2 Jul 2024 20:40:12 +0545 Subject: [PATCH] build:maintained poll percentage ,voted poll using localstorage and added styles --- BackEnd/db.sqlite3 | Bin 163840 -> 167936 bytes FrontEnd/polling-app/src/App.css | 118 +++++++++++++++---- FrontEnd/polling-app/src/components/Polls.js | 92 ++++++++++++--- 3 files changed, 169 insertions(+), 41 deletions(-) diff --git a/BackEnd/db.sqlite3 b/BackEnd/db.sqlite3 index 847f0b91cc7a7ad6739107164872256d782d58bb..2e7bc16304aceb9e3962fea44d983f57fb4d4e0f 100644 GIT binary patch delta 7203 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 { const [polls, setPolls] = useState([]); + const [votedPolls, setVotedPolls] = useState({}); useEffect(() => { fetchPolls(); + loadVotedPollsFromStorage(); // Load voted polls from localStorage on component mount }, []); const fetchPolls = async () => { @@ -21,9 +21,10 @@ const Polls = () => { const handleVote = async (pollId, choiceId) => { try { - const response = await axios.post(`http://localhost:8000/polls/${pollId}/vote/`, { choice_id: choiceId }); - alert(response.data.status); - fetchPolls(); // Refresh the poll data after voting + await axios.post(`http://localhost:8000/polls/${pollId}/vote/`, { choice_id: choiceId }); + const updatedVotedPolls = { ...votedPolls, [pollId]: choiceId }; + setVotedPolls(updatedVotedPolls); + saveVotedPollsToStorage(updatedVotedPolls); // Save updated voted polls to localStorage } catch (error) { if (error.response && error.response.data.error) { alert(error.response.data.error); @@ -33,24 +34,77 @@ const Polls = () => { } }; + const calculatePercentage = (choiceVotes, totalVotes) => { + return totalVotes === 0 ? 0 : ((choiceVotes / totalVotes) * 100).toFixed(1); + }; + + const loadVotedPollsFromStorage = () => { + const storedVotedPolls = localStorage.getItem('votedPolls'); + if (storedVotedPolls) { + setVotedPolls(JSON.parse(storedVotedPolls)); + } + }; + + const saveVotedPollsToStorage = (updatedVotedPolls) => { + localStorage.setItem('votedPolls', JSON.stringify(updatedVotedPolls)); + }; + return ( -
-

Vote on Polls

- {polls.map((poll) => ( -
-

{poll.question}

-
    - {poll.choices.map((choice) => ( -
  • - {choice.choice_text} - {choice.votes} votes - -
    • - ))} -
+
+

Vote on Polls

+ {polls.length > 0 && ( +
+

Latest Poll

+
+
+

{polls[0].question}

+
+
    + {polls[0].choices.map((choice) => { + const totalVotes = polls[0].choices.reduce((acc, c) => acc + c.votes, 0); + const percentage = calculatePercentage(choice.votes, totalVotes); + const isVoted = votedPolls[polls[0].id] === choice.id; + return ( +
  • handleVote(polls[0].id, choice.id)}> + {choice.choice_text} +
    + {percentage}% +
    +
    • + ); + })} +
+
- ))} + )} +
+

Poll History

+ {polls.map((poll) => ( +
+
+

{poll.question}

+
+
    + {poll.choices.map((choice) => { + const totalVotes = poll.choices.reduce((acc, c) => acc + c.votes, 0); + const percentage = calculatePercentage(choice.votes, totalVotes); + const isVoted = votedPolls[poll.id] === choice.id; + return ( +
  • + {choice.choice_text} +
    + {percentage}% +
    +
    • + ); + })} +
+
+ ))} +
); }; export default Polls; +