@@ -58,7 +60,7 @@ function Bookmark() {
- {data?.data?.map((bookmark, index) => (
+ {formatDataByDate(data.data).map((bookmark, index) => (
| {index + 1} |
diff --git a/frontend/src/pages/CreatePollForm.jsx b/frontend/src/pages/CreatePollForm.jsx
index 9858423..bddec0f 100644
--- a/frontend/src/pages/CreatePollForm.jsx
+++ b/frontend/src/pages/CreatePollForm.jsx
@@ -4,12 +4,14 @@ import { FaPlus, FaTrashAlt } from "react-icons/fa";
import { useMutation } from "react-query";
import createPollService from "../services/createPollService";
import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
function CreatePollForm() {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [options, setOptions] = useState([]);
const [optionInput, setOptionInput] = useState("");
+ const navigate = useNavigate();
const handleAddOption = () => {
if (optionInput.trim() == "") {
@@ -31,6 +33,7 @@ function CreatePollForm() {
const message = data?.message || "Poll created successfully";
toast.success(message);
handleClearPoll();
+ navigate(`/view/${data?.data?._id}`);
},
onError: (error) => {
console.log(error);
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index bbdf943..371d7cd 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -8,6 +8,7 @@ import useLogout from "../hooks/useLogout";
import { useQuery } from "react-query";
import getUserPollData from "../services/getUserPollData";
import ErrorFallback from "../components/Errors/ErrorFallback";
+import { formatDataByDate } from "../utils/util";
function Dashboard() {
const navigator = useNavigate();
@@ -23,7 +24,6 @@ function Dashboard() {
}
);
- console.log(data);
const pollData = [
{
@@ -108,7 +108,7 @@ function Dashboard() {
|
- {data.map((poll, index) => (
+ {formatDataByDate(data)?.map((poll, index) => (
// Replace with actual path
))}
diff --git a/frontend/src/pages/Polls.jsx b/frontend/src/pages/Polls.jsx
index bd5a006..fbf9f96 100644
--- a/frontend/src/pages/Polls.jsx
+++ b/frontend/src/pages/Polls.jsx
@@ -1,38 +1,59 @@
-import React, { useState } from 'react'
-import { useQuery } from 'react-query'
-import getPollsService from '../services/getPollsService'
-import PollCard from '../components/PollCard/PollCard'
-import ErrorFallback from '../components/Errors/ErrorFallback'
+import React, { useState } from "react";
+import { useQuery } from "react-query";
+import getPollsService from "../services/getPollsService";
+import PollCard from "../components/PollCard/PollCard";
+import ErrorFallback from "../components/Errors/ErrorFallback";
function Polls() {
-
const [page, setPage] = useState(1);
const [limit, setLimit] = useState(6);
-
- const {data, isLoading, isError, isSuccess, refetch} = useQuery(["polls", page, limit], () => getPollsService(page, limit), {
- cacheTime: 1000 * 60 * 5, // 5 minutes
- staleTime: 1000 * 60 * 10, // 10 minutes
- })
+
+ const { data, isLoading, isError, isSuccess, refetch } = useQuery(
+ ["polls", page, limit],
+ () => getPollsService(page, limit),
+ {
+ cacheTime: 1000 * 60 * 5,
+ staleTime: 1000 * 60 * 10,
+ }
+ );
return (
-
Polls
- {isSuccess &&
- {data?.data?.polls?.map((poll) => (
-
- ))}
-
}
- {isLoading &&
}
- {isError &&
- refetch()} />
-
}
+
Polls
+ {isSuccess && (
+
+ {data?.data?.polls?.map((poll) => (
+
+ ))}
+
+ )}
+ {isLoading && (
+
+ )}
+ {isError && (
+
+ refetch()} />
+
+ )}
-
-
-
+
+
+
+
-
- )
+ );
}
-export default Polls
+export default Polls;
diff --git a/frontend/src/pages/VotingPage.jsx b/frontend/src/pages/VotingPage.jsx
index b9f3381..9338d8c 100644
--- a/frontend/src/pages/VotingPage.jsx
+++ b/frontend/src/pages/VotingPage.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
@@ -15,30 +15,73 @@ import { FaBookmark } from "react-icons/fa";
import { toast } from "react-toastify";
import { makeChartDataObjFromPollData } from "../utils/util";
import useBookmark from "../hooks/useBookmark";
+import { io } from "socket.io-client";
ChartJS.register(BarElement, CategoryScale, LinearScale);
function VotingPage() {
const { pollId } = useParams();
- const [seletedOption, setSeletedOption] = useState(null);
- const {handleBookmark} = useBookmark()
+ const [selectedOption, setSelectedOption] = useState(null);
+ const { handleBookmark } = useBookmark();
+ const [poll, setPoll] = useState(null);
+ const [socket, setSocket] = useState(null);
+
+ useEffect(() => {
+ const s = io("http://localhost:3000");
+ setSocket(s);
+
+ s.on("connect", () => {
+ console.log("Connected to the server");
+ s.emit("joinPoll", pollId);
+ });
+
+ return () => {
+ s.disconnect();
+ };
+ }, [pollId]);
+
const {
- data: poll,
+ data,
isLoading,
isError,
refetch,
} = useQuery(["poll", pollId], () => getPollData(pollId), {
- cacheTime: 10 * 100 * 60, // 10 minutes
- staleTime: 20 * 100 * 60, // 20 minutes
+ cacheTime: 10 * 60 * 1000, // 10 minutes
+ staleTime: 20 * 60 * 1000, // 20 minutes
+ onSuccess: (data) => {
+ setPoll(data);
+ },
});
+
+ useEffect(() => {
+ if (socket) {
+ socket.on("pollDataUpdated", (data) => {
+ console.log("Received updated poll data:", data);
+ setPoll(data);
+ });
+
+ socket.on("error", (error) => {
+ console.error("Socket error:", error.message);
+ });
+
+ return () => {
+ socket.off("pollDataUpdated");
+ socket.off("error");
+ };
+ }
+ }, [socket]);
+
const mutation = useMutation(createVoteService, {
onSuccess: (data) => {
- toast.success("Vote given successfully");
+ toast.success("Vote submitted successfully");
+ if (socket) {
+ socket.emit("vote", { pollId, success: data?.success });
+ }
},
onError: (error) => {
- console.log(error);
+ console.error(error);
toast.error(
error?.response?.data?.message || "An unexpected error occurred"
);
@@ -46,6 +89,7 @@ function VotingPage() {
});
const handleOptionSelect = (id) => {
+ setSelectedOption(id);
mutation.mutate({ pollId, optionId: id });
};
@@ -61,6 +105,9 @@ function VotingPage() {
);
}
+ const chartData = makeChartDataObjFromPollData(poll);
+
+
return (
@@ -99,9 +146,9 @@ function VotingPage() {
onClick={() => handleOptionSelect(option._id)}
key={option._id}
className={`md:p-4 p-2 ${
- seletedOption == option._id ? "bg-blue-500" : "bg-base-100"
+ selectedOption == option._id ? "bg-blue-500" : "bg-base-100"
} rounded-lg shadow-md flex items-center justify-center cursor-pointer ${
- seletedOption == option._id ? "outline" : "hover:bg-base-300"
+ selectedOption == option._id ? "outline" : "hover:bg-base-300"
} transition`}
>
{option.name}
diff --git a/frontend/src/utils/util.js b/frontend/src/utils/util.js
index 846412b..b5bcddd 100644
--- a/frontend/src/utils/util.js
+++ b/frontend/src/utils/util.js
@@ -19,4 +19,9 @@ export const makeChartDataObjFromPollData = (poll) => {
},
],
};
+}
+
+export const formatDataByDate = (data) => {
+ const fromatedData = data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+ return fromatedData;
}
\ No newline at end of file