diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index d81f195..714e3a7 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -28,7 +28,7 @@ function App() { }> } /> } /> - } /> + } /> } /> diff --git a/frontend/src/components/PollTableRow/PollTableRow.jsx b/frontend/src/components/PollTableRow/PollTableRow.jsx index 3898817..7dd215b 100644 --- a/frontend/src/components/PollTableRow/PollTableRow.jsx +++ b/frontend/src/components/PollTableRow/PollTableRow.jsx @@ -1,29 +1,16 @@ -import React, { useState } from "react"; -import { FaTrashAlt, FaUserEdit } from "react-icons/fa"; -import {useMutation} from "react-query" -import deletePollService from "../../services/deletePollService"; -import { toast } from "react-toastify"; +import React, { } from "react"; +import { FaTrashAlt} from "react-icons/fa"; +import useDeletePoll from "../../hooks/usedeletePoll"; +import { useNavigate } from "react-router-dom"; function PollTableRow({ poll, index, refetch }) { + const navigator = useNavigate(); + const handleDelete = useDeletePoll(poll._id, refetch); - const mutation = useMutation(deletePollService, { - onSuccess : (data) => { - console.log(data); - refetch(); - toast.success(data?.message); - }, - onError : (error) => { - toast.error("An unexpected error occurred"); - console.log(error); - } - }) - - const handleDelete = () => { - const sure = window.confirm("Are you sure you want to delete this poll?"); - if (!sure) return; - mutation.mutate(poll._id); - }; + const handleViewOnClick = () => { + navigator(`/view/${poll._id}`); + } return ( <> @@ -42,7 +29,10 @@ function PollTableRow({ poll, index, refetch }) { )} -
+
+ diff --git a/frontend/src/hooks/useDeletePoll.js b/frontend/src/hooks/useDeletePoll.js new file mode 100644 index 0000000..a97fd4d --- /dev/null +++ b/frontend/src/hooks/useDeletePoll.js @@ -0,0 +1,29 @@ +import React from 'react' +import { useMutation } from 'react-query'; +import { toast } from 'react-toastify'; +import deletePollService from '../services/deletePollService'; + +function useDeletePoll(id, refetch) { + + const mutation = useMutation(deletePollService, { + onSuccess : (data) => { + console.log(data); + refetch(); + toast.success(data?.message); + }, + onError : (error) => { + toast.error("An unexpected error occurred"); + console.log(error); + } + }) + + const handleDelete = () => { + const sure = window.confirm("Are you sure you want to delete this poll?"); + if (!sure) return; + mutation.mutate(id); + }; + + return handleDelete; +} + +export default useDeletePoll diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index b9a1a6d..4d3b2a2 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -4,7 +4,5 @@ import './index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( - - , ) diff --git a/frontend/src/pages/VotingPage.jsx b/frontend/src/pages/VotingPage.jsx index 5ba1313..9e4fd6e 100644 --- a/frontend/src/pages/VotingPage.jsx +++ b/frontend/src/pages/VotingPage.jsx @@ -2,11 +2,22 @@ import React from "react"; import { Bar } from "react-chartjs-2"; import { Chart as ChartJS, BarElement, CategoryScale, LinearScale } from "chart.js"; +import { useQuery } from "react-query"; +import { useParams } from "react-router-dom"; +import getPollData from "../services/getPollData"; ChartJS.register(BarElement, CategoryScale, LinearScale); function VotingPage() { - // Dummy poll data + + const { pollId } = useParams(); + + const { data: poll, isLoading, isError } = useQuery(["poll", pollId], () => getPollData(pollId), { + cacheTime : 10*100*60, // 10 minutes + staleTime : 20*100*60, // 20 minutes + }); + console.log(poll); + const pollData = { title: "What's your favorite programming language?", options: [ diff --git a/frontend/src/services/getPollData.js b/frontend/src/services/getPollData.js new file mode 100644 index 0000000..4d3f83f --- /dev/null +++ b/frontend/src/services/getPollData.js @@ -0,0 +1,8 @@ +import axiosInstance from "../helper/axiosInstance"; + +async function getPollData(pollId) { + const response = await axiosInstance.get(`/poll/data/${pollId}`); + return response.data; +} + +export default getPollData;