Added options selected in frontend
This commit is contained in:
@@ -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`
|
||||||
@@ -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 });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
6
frontend/src/services/getPollSelectedOptionData.js
Normal file
6
frontend/src/services/getPollSelectedOptionData.js
Normal 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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user