Added create poll in frontend ✔️

2024-11-08 22:12:16 +05:30
parent af25c4b5fc
commit b84a031770
6 changed files with 255 additions and 54 deletions
--- a/frontend/src/helper/axiosInstance.js
+++ b/frontend/src/helper/axiosInstance.js
@@ -2,6 +2,10 @@ import axios from "axios";

 const axiosInstance = axios.create({
  baseURL: "http://localhost:3000/api/v1",
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
 });

 export default axiosInstance;
--- a/frontend/src/pages/CreatePollForm.jsx
+++ b/frontend/src/pages/CreatePollForm.jsx
@@ -1,64 +1,161 @@
 // CreatePollForm.js
 import React, { useState } from "react";
 import { FaPlus, FaTrashAlt } from "react-icons/fa";
+import { useMutation } from "react-query";
+import createPollService from "../services/createPollService";
+import { toast } from "react-toastify";

 function CreatePollForm() {
-  const [options, setOptions] = useState(["Option 1", "Option 2"]);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [options, setOptions] = useState([]);
+  const [optionInput, setOptionInput] = useState("");
+
+  const handleAddOption = () => {
+    if (optionInput.trim() == "") {
+      return;
+    }
+    setOptions((prev) => [...prev, optionInput]);
+    setOptionInput("");
+  };
+
+  const handleClearPoll = () => {
+    setTitle("");
+    setDescription("");
+    setOptions([]);
+    setOptionInput("");
+  };
+
+  const mutation = useMutation(createPollService, {
+    onSuccess: (data) => {
+      const message = data?.message || "Poll created successfully";
+      toast.success(message);
+      handleClearPoll();
+    },
+    onError: (error) => {
+      console.log(error);
+      const errorMessage =
+        error.response?.data?.errors?.[0]?.message ||
+        "An unexpected error occurred";
+      toast.error(errorMessage);
+    },
+  });
+
+  const handlePollSubmit = (e) => {
+    e.preventDefault();
+    if (title.trim() == "" || description.trim() == "" || options.length == 0) {
+      toast.error("All fields are required");
+      return;
+    }
+    mutation.mutate({ title, description, options });
+  };

  return (
-    <div className="min-h-screen bg-base-200 flex items-center justify-center p-4">
-      <div className="w-full max-w-lg bg-base-100 p-6 rounded-lg shadow-md text-white">
+    <div className="min-h-screen bg-base-200">
+      <div className="w-full p-6 text-white">
        <h1 className="text-2xl font-bold mb-6 text-center">Create New Poll</h1>
-
-        {/* Poll Title */}
-        <div className="mb-4">
-          <label className="block text-lg font-medium mb-2">Poll Title</label>
-          <input
-            type="text"
-            placeholder="Enter poll title"
-            className="input input-bordered w-full"
-          />
-        </div>
-
-        {/* Poll Description */}
-        <div className="mb-4">
-          <label className="block text-lg font-medium mb-2">Description</label>
-          <textarea
-            placeholder="Describe the purpose of the poll"
-            className="textarea textarea-bordered w-full"
-            rows="3"
-          ></textarea>
-        </div>
-
-        {/* Poll Options */}
-        <div className="mb-4">
-          <label className="block text-lg font-medium mb-2">Options</label>
-          {options.map((option, index) => (
-            <div key={index} className="flex items-center mb-2">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            {/* Poll Title */}
+            <div className="mb-4">
+              <label className="block text-lg font-medium mb-2">
+                Poll Title
+              </label>
              <input
                type="text"
-                value={option}
-                placeholder={`Option ${index + 1}`}
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Enter poll title"
                className="input input-bordered w-full"
-                readOnly
              />
-              {options.length > 2 && (
-                <button
-                  className="btn btn-error btn-circle btn-xs ml-2"
-                  title="Remove option"
-                >
-                  <FaTrashAlt />
-                </button>
-              )}
            </div>
-          ))}
-          <button className="btn btn-primary w-full mt-2" title="Add another option">
-            <FaPlus className="mr-2" /> Add Option
-          </button>
+
+            {/* Poll Description */}
+            <div className="mb-4">
+              <label className="block text-lg font-medium mb-2">
+                Description
+              </label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Describe the purpose of the poll"
+                className="textarea textarea-bordered w-full"
+                rows="3"
+              ></textarea>
+            </div>
+          </div>
+
+          <div>
+            {/* Poll Options */}
+            <div className="mb-4">
+              <label className="block text-lg font-medium mb-2">Options</label>
+
+              {options.map((option, index) => (
+                <div key={index} className="flex items-center mb-2">
+                  <input
+                    type="text"
+                    value={option}
+                    placeholder={`Option ${index + 1}`}
+                    className="input input-bordered w-full cursor-not-allowed"
+                    readOnly
+                  />
+                  {options.length > 2 && (
+                    <button
+                      className="btn btn-error btn-circle btn-xs ml-2"
+                      title="Remove option"
+                      onClick={() =>
+                        setOptions(options.filter((_, i) => i !== index))
+                      }
+                    >
+                      <FaTrashAlt />
+                    </button>
+                  )}
+                </div>
+              ))}
+
+              {/* Options input field  */}
+              <div className="mb-4">
+                <input
+                  type="text"
+                  value={optionInput}
+                  onChange={(e) => setOptionInput(e.target.value)}
+                  placeholder="Enter new option"
+                  className="input input-bordered w-full"
+                />
+              </div>
+              <button
+                className="btn btn-primary w-full mt-2"
+                title="Add another option"
+                onClick={handleAddOption}
+              >
+                <FaPlus className="mr-2" /> Add Option
+              </button>
+            </div>
+          </div>
        </div>

-        {/* Submit Button */}
-        <button className="btn btn-success w-full mt-4">Create Poll</button>
+        <div className="flex md:flex-row flex-col-reverse gap-4">
+          <button
+            className="btn btn-ghost w-full mt-4 md:w-1/2"
+            onClick={() => {
+              const sure = window.confirm(
+                "Are you sure you want to clear the poll?"
+              );
+              if (sure) {
+                handleClearPoll();
+              }
+            }}
+          >
+            Clear Poll
+          </button>
+          {/* Submit Button */}
+          <button
+            className="btn btn-success w-full  mt-4 md:w-1/2"
+            onClick={handlePollSubmit}
+          >
+            Create Poll
+          </button>
+        </div>
      </div>
    </div>
  );
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -2,10 +2,12 @@
 import React, { useState } from "react";
 import { FaPlus } from "react-icons/fa";
 import PollTableRow from "../components/PollTableRow/PollTableRow";
+import { useNavigate } from "react-router-dom";

 function Dashboard() {
-  const [showPollAddForm, setShowPollAddForm] = useState(false);
  
+  const navigator = useNavigate();
+
  const pollData = [
    { _id: "1", title: "Poll 1", description: "Description of Poll 1", totalVotes: 120, published: true },
    { _id: "2", title: "Poll 2", description: "Description of Poll 2", totalVotes: 45, published: false },
@@ -14,12 +16,6 @@ function Dashboard() {

  return (
    <div className="flex flex-col lg:flex-row min-h-screen bg-base-200">
-      {showPollAddForm && (
-        <div className="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
-          {/* Poll Add Form Component would go here */}
-        </div>
-      )}
-
      {/* User Profile Sidebar */}
      <aside className="w-min lg:w-1/4 bg-slate-800 rounded-md m-4 bg-opacity-50 shadow-lg p-4 flex flex-col items-center">
        <img
@@ -43,7 +39,7 @@ function Dashboard() {

        {/* Add New Poll Button */}
        <div className="flex justify-end mb-4">
-          <button className="btn btn-primary" onClick={() => setShowPollAddForm(!showPollAddForm)}>
+          <button className="btn btn-primary" onClick={() => navigator("/create")}>
            Add New Poll <FaPlus />
          </button>
        </div>
--- a/frontend/src/services/createPollService.js
+++ b/frontend/src/services/createPollService.js
@@ -0,0 +1,8 @@
+import axiosInstance from "../helper/axiosInstance";
+
+async function createPollService(data) {
+  const response = await axiosInstance.post("/poll/create", data);
+  return response.data;
+}
+
+export default createPollService
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,91 @@
+{
+  "name": "LivePoll",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react-toastify": "^10.0.6"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-toastify": {
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
+      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-toastify": "^10.0.6"
+  }
+}