From a7e7ce3bfbfc74c7bc7a1b1b49ce56e534f180ef Mon Sep 17 00:00:00 2001
From: VinayJangotra <109384165+VinayJangotra@users.noreply.github.com>
Date: Sat, 27 Apr 2024 15:01:54 +0530
Subject: [PATCH] My Jobs

---
 frontend/src/components/Job/MyJobs.jsx | 359 ++++++++++++++++++++++++-
 1 file changed, 352 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Job/MyJobs.jsx b/frontend/src/components/Job/MyJobs.jsx
index 1e69355..47fbb69 100644
--- a/frontend/src/components/Job/MyJobs.jsx
+++ b/frontend/src/components/Job/MyJobs.jsx
@@ -1,11 +1,356 @@
-import React from 'react'
+import axios from "axios";
+import  { useContext, useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import { FaCheck } from "react-icons/fa6";
+import { RxCross2 } from "react-icons/rx";
+import { Context } from "../../main";
+import { useNavigate } from "react-router-dom";
 
 const MyJobs = () => {
+  const [myJobs, setMyJobs] = useState([]);
+  const [editingMode, setEditingMode] = useState(null);
+  const { isAuthorized, user } = useContext(Context);
+
+  const navigateTo = useNavigate();
+  //Fetching all jobs
+  useEffect(() => {
+    const fetchJobs = async () => {
+      try {
+        const { data } = await axios.get(
+          "http://localhost:4000/api/v1/job/getmyjobs",
+          { withCredentials: true }
+        );
+        setMyJobs(data.myJobs);
+      } catch (error) {
+        toast.error(error.response.data.message);
+        setMyJobs([]);
+      }
+    };
+    fetchJobs();
+  }, []);
+  if (!isAuthorized || (user && user.role !== "Employer")) {
+    navigateTo("/");
+  }
+
+  //Function For Enabling Editing Mode
+  const handleEnableEdit = (jobId) => {
+    //Here We Are Giving Id in setEditingMode because We want to enable only that job whose ID has been send.
+    setEditingMode(jobId);
+  };
+
+  //Function For Disabling Editing Mode
+  const handleDisableEdit = () => {
+    setEditingMode(null);
+  };
+
+  //Function For Updating The Job
+  const handleUpdateJob = async (jobId) => {
+    const updatedJob = myJobs.find((job) => job._id === jobId);
+    await axios
+      .put(`http://localhost:4000/api/v1/job/update/${jobId}`, updatedJob, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        toast.success(res.data.message);
+        setEditingMode(null);
+      })
+      .catch((error) => {
+        toast.error(error.response.data.message);
+      });
+  };
+
+  //Function For Deleting Job
+  const handleDeleteJob = async (jobId) => {
+    await axios
+      .delete(`http://localhost:4000/api/v1/job/delete/${jobId}`, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        toast.success(res.data.message);
+        setMyJobs((prevJobs) => prevJobs.filter((job) => job._id !== jobId));
+      })
+      .catch((error) => {
+        toast.error(error.response.data.message);
+      });
+  };
+
+  const handleInputChange = (jobId, field, value) => {
+    // Update the job object in the jobs state with the new value
+    setMyJobs((prevJobs) =>
+      prevJobs.map((job) =>
+        job._id === jobId ? { ...job, [field]: value } : job
+      )
+    );
+  };
+
   return (
-    <div>
-      
-    </div>
-  )
-}
+    <>
+      <div className="myJobs page">
+        <div className="container">
+          <h1>Your Posted Jobs</h1>
+          {myJobs.length > 0 ? (
+            <>
+              <div className="banner">
+                {myJobs.map((element) => (
+                  <div className="card" key={element._id}>
+                    <div className="content">
+                      <div className="short_fields">
+                        <div>
+                          <span>Title:</span>
+                          <input
+                            type="text"
+                            disabled={
+                              editingMode !== element._id ? true : false
+                            }
+                            value={element.title}
+                            onChange={(e) =>
+                              handleInputChange(
+                                element._id,
+                                "title",
+                                e.target.value
+                              )
+                            }
+                          />
+                        </div>
+                        <div>
+                          {" "}
+                          <span>Country:</span>
+                          <input
+                            type="text"
+                            disabled={
+                              editingMode !== element._id ? true : false
+                            }
+                            value={element.country}
+                            onChange={(e) =>
+                              handleInputChange(
+                                element._id,
+                                "country",
+                                e.target.value
+                              )
+                            }
+                          />
+                        </div>
+                        <div>
+                          <span>City:</span>
+                          <input
+                            type="text"
+                            disabled={
+                              editingMode !== element._id ? true : false
+                            }
+                            value={element.city}
+                            onChange={(e) =>
+                              handleInputChange(
+                                element._id,
+                                "city",
+                                e.target.value
+                              )
+                            }
+                          />
+                        </div>
+                        <div>
+                          <span>Category:</span>
+                          <select
+                            value={element.category}
+                            onChange={(e) =>
+                              handleInputChange(
+                                element._id,
+                                "category",
+                                e.target.value
+                              )
+                            }
+                            disabled={
+                              editingMode !== element._id ? true : false
+                            }
+                          >
+                            <option value="Graphics & Design">
+                              Graphics & Design
+                            </option>
+                            <option value="Mobile App Development">
+                              Mobile App Development
+                            </option>
+                            <option value="Frontend Web Development">
+                              Frontend Web Development
+                            </option>
+                            <option value="MERN Stack Development">
+                              MERN STACK Development
+                            </option>
+                            <option value="Account & Finance">
+                              Account & Finance
+                            </option>
+                            <option value="Artificial Intelligence">
+                              Artificial Intelligence
+                            </option>
+                            <option value="Video Animation">
+                              Video Animation
+                            </option>
+                            <option value="MEAN Stack Development">
+                              MEAN STACK Development
+                            </option>
+                            <option value="MEVN Stack Development">
+                              MEVN STACK Development
+                            </option>
+                            <option value="Data Entry Operator">
+                              Data Entry Operator
+                            </option>
+                          </select>
+                        </div>
+                        <div>
+                          <span>
+                            Salary:{" "}
+                            {element.fixedSalary ? (
+                              <input
+                                type="number"
+                                disabled={
+                                  editingMode !== element._id ? true : false
+                                }
+                                value={element.fixedSalary}
+                                onChange={(e) =>
+                                  handleInputChange(
+                                    element._id,
+                                    "fixedSalary",
+                                    e.target.value
+                                  )
+                                }
+                              />
+                            ) : (
+                              <div>
+                                <input
+                                  type="number"
+                                  disabled={
+                                    editingMode !== element._id ? true : false
+                                  }
+                                  value={element.salaryFrom}
+                                  onChange={(e) =>
+                                    handleInputChange(
+                                      element._id,
+                                      "salaryFrom",
+                                      e.target.value
+                                    )
+                                  }
+                                />
+                                <input
+                                  type="number"
+                                  disabled={
+                                    editingMode !== element._id ? true : false
+                                  }
+                                  value={element.salaryTo}
+                                  onChange={(e) =>
+                                    handleInputChange(
+                                      element._id,
+                                      "salaryTo",
+                                      e.target.value
+                                    )
+                                  }
+                                />
+                              </div>
+                            )}
+                          </span>
+                        </div>
+                        <div>
+                          {" "}
+                          <span>Expired:</span>
+                          <select
+                            value={element.expired}
+                            onChange={(e) =>
+                              handleInputChange(
+                                element._id,
+                                "expired",
+                                e.target.value
+                              )
+                            }
+                            disabled={
+                              editingMode !== element._id ? true : false
+                            }
+                          >
+                            <option value={true}>TRUE</option>
+                            <option value={false}>FALSE</option>
+                          </select>
+                        </div>
+                      </div>
+                      <div className="long_field">
+                        <div>
+                          <span>Description:</span>{" "}
+                          <textarea
+                            rows={5}
+                            value={element.description}
+                            disabled={
+                              editingMode !== element._id ? true : false
+                            }
+                            onChange={(e) =>
+                              handleInputChange(
+                                element._id,
+                                "description",
+                                e.target.value
+                              )
+                            }
+                          />
+                        </div>
+                        <div>
+                          <span>Location: </span>
+                          <textarea
+                            value={element.location}
+                            rows={5}
+                            disabled={
+                              editingMode !== element._id ? true : false
+                            }
+                            onChange={(e) =>
+                              handleInputChange(
+                                element._id,
+                                "location",
+                                e.target.value
+                              )
+                            }
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    {/* Out Of Content Class */}
+                    <div className="button_wrapper">
+                      <div className="edit_btn_wrapper">
+                        {editingMode === element._id ? (
+                          <>
+                            <button
+                              onClick={() => handleUpdateJob(element._id)}
+                              className="check_btn"
+                            >
+                              <FaCheck />
+                            </button>
+                            <button
+                              onClick={() => handleDisableEdit()}
+                              className="cross_btn"
+                            >
+                              <RxCross2 />
+                            </button>
+                          </>
+                        ) : (
+                          <button
+                            onClick={() => handleEnableEdit(element._id)}
+                            className="edit_btn"
+                          >
+                            Edit
+                          </button>
+                        )}
+                      </div>
+                      <button
+                        onClick={() => handleDeleteJob(element._id)}
+                        className="delete_btn"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          ) : (
+            <p>
+              You have not posted any job or may be you deleted all of your jobs!
+            </p>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
 
-export default MyJobs
+export default MyJobs;