Added options selected in frontend

This commit is contained in:
Manik Maity
2024-11-13 22:05:19 +05:30
parent 131b921d96
commit 698a84e903
3 changed files with 25 additions and 1 deletions

View File

@@ -111,3 +111,7 @@ A basic diagram for this system would include:
3. **Database (MongoDB)**: Stores collections for users, polls, votes, and bookmarks. 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. 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`

View File

@@ -16,6 +16,7 @@ import { toast } from "react-toastify";
import { makeChartDataObjFromPollData } from "../utils/util"; import { makeChartDataObjFromPollData } from "../utils/util";
import useBookmark from "../hooks/useBookmark"; import useBookmark from "../hooks/useBookmark";
import { io } from "socket.io-client"; import { io } from "socket.io-client";
import { getPollSelectedOptionData } from "../services/getPollSelectedOptionData";
ChartJS.register(BarElement, CategoryScale, LinearScale); ChartJS.register(BarElement, CategoryScale, LinearScale);
@@ -28,6 +29,7 @@ function VotingPage() {
useEffect(() => { useEffect(() => {
const s = io("https://livepoll-anjx.onrender.com"); const s = io("https://livepoll-anjx.onrender.com");
// const s = io("http://localhost:3000");
setSocket(s); setSocket(s);
s.on("connect", () => { s.on("connect", () => {
@@ -41,6 +43,8 @@ function VotingPage() {
}, [pollId]); }, [pollId]);
const { const {
data, data,
isLoading, isLoading,
@@ -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(() => { useEffect(() => {
if (socket) { if (socket) {
@@ -89,7 +101,9 @@ function VotingPage() {
}); });
const handleOptionSelect = (id) => { const handleOptionSelect = (id) => {
setSelectedOption(id); if (!selectedOption){
setSelectedOption(id);
}
mutation.mutate({ pollId, optionId: id }); mutation.mutate({ pollId, optionId: id });
}; };

View File

@@ -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;
}