From 698a84e903fee59ef2b0cd668c277772be19c93f Mon Sep 17 00:00:00 2001
From: Manik Maity <manikmaity156@gmail.com>
Date: Wed, 13 Nov 2024 22:05:19 +0530
Subject: [PATCH] Added options selected in frontend

---
 README.md                                        |  4 ++++
 frontend/src/pages/VotingPage.jsx                | 16 +++++++++++++++-
 .../src/services/getPollSelectedOptionData.js    |  6 ++++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/services/getPollSelectedOptionData.js

diff --git a/README.md b/README.md
index bb453ce..0e90012 100644
--- a/README.md
+++ b/README.md
@@ -111,3 +111,7 @@ A basic diagram for this system would include:
 3. **Database (MongoDB)**: Stores collections for users, polls, votes, and bookmarks.
 4. **Socket.io/WebSocket**: Handles real-time updates from the server to the clients as votes come in.
 
+## To go from deployed to local:
+- change the backend .env url to `http://localhost:3000`
+- chnage the axios base url to `http://localhost:3000/api/v1`
+- change the io url in the vottingPage to `http://localhost:3000`
\ No newline at end of file
diff --git a/frontend/src/pages/VotingPage.jsx b/frontend/src/pages/VotingPage.jsx
index 9122f52..f99bbb1 100644
--- a/frontend/src/pages/VotingPage.jsx
+++ b/frontend/src/pages/VotingPage.jsx
@@ -16,6 +16,7 @@ import { toast } from "react-toastify";
 import { makeChartDataObjFromPollData } from "../utils/util";
 import useBookmark from "../hooks/useBookmark";
 import { io } from "socket.io-client";
+import { getPollSelectedOptionData } from "../services/getPollSelectedOptionData";
 
 ChartJS.register(BarElement, CategoryScale, LinearScale);
 
@@ -28,6 +29,7 @@ function VotingPage() {
 
   useEffect(() => {
     const s = io("https://livepoll-anjx.onrender.com");
+    // const s = io("http://localhost:3000");
     setSocket(s);
   
     s.on("connect", () => {
@@ -39,6 +41,8 @@ function VotingPage() {
       s.disconnect();
     };
   }, [pollId]);
+
+  
   
 
   const {
@@ -54,6 +58,14 @@ function VotingPage() {
     },
   });
 
+  useQuery(["selectedOption", pollId], () => getPollSelectedOptionData(pollId), {
+    cacheTime: 10 * 60 * 1000, // 10 minutes
+    staleTime: 20 * 60 * 1000, 
+    onSuccess: (data) => {
+      setSelectedOption(data?.data?.optionId || null);
+    },
+  });
+
 
   useEffect(() => {
     if (socket) {
@@ -89,7 +101,9 @@ function VotingPage() {
   });
 
   const handleOptionSelect = (id) => {
-    setSelectedOption(id);
+    if (!selectedOption){
+      setSelectedOption(id);
+    }
     mutation.mutate({ pollId, optionId: id });
   };
 
diff --git a/frontend/src/services/getPollSelectedOptionData.js b/frontend/src/services/getPollSelectedOptionData.js
new file mode 100644
index 0000000..5776584
--- /dev/null
+++ b/frontend/src/services/getPollSelectedOptionData.js
@@ -0,0 +1,6 @@
+import axiosInstance from "../helper/axiosInstance";
+
+export async function getPollSelectedOptionData(pollId) {
+    const response = await axiosInstance.get(`vote/voted/${pollId}`);
+    return response.data;
+}
\ No newline at end of file