Started Poll View Page Frontend 📊

frontend/src/App.jsx

@@ -28,7 +28,7 @@ function App() {
           <Route element={<PrivateRoute />}>
             <Route path="dashboard" element={<Dashboard />} />
             <Route path="bookmark" element={<Bookmark />} />
-            <Route path="/voting/:pollId" element={<VotingPage />} />
+            <Route path="/view/:pollId" element={<VotingPage />} />
             <Route path="/create" element={<CreatePollForm />} />
           </Route>
         </Routes>

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 }) {
           )}
         </td>
         <td>
-          <div className="flex md:flex-row flex-col gap-2 flex-nowrap">
+          <div className="flex md:flex-row flex-wrap flex-col gap-2">
+          <button onClick={handleViewOnClick} className="btn btn-sm btn-primary flex items-center">
+              <FaTrashAlt className="mr-1" /> View
+            </button>
             <button onClick={handleDelete} className="btn btn-sm btn-error flex items-center">
               <FaTrashAlt className="mr-1" /> Delete
             </button>

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

frontend/src/main.jsx

@@ -4,7 +4,5 @@ import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
     <App />
-  </StrictMode>,
 )

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: [

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;