Skip to content

Commit

Permalink
My Jobs
Browse files Browse the repository at this point in the history
  • Loading branch information
@VinayJangotra
VinayJangotra committed Apr 27, 2024
1 parent 422159b commit a7e7ce3
Showing 1 changed file with 352 additions and 7 deletions.
359 changes: 352 additions & 7 deletions frontend/src/components/Job/MyJobs.jsx
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit a7e7ce3

Please sign in to comment.