Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a filter in display jobs page based on salaries #57

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added a filter in display jobs page based on salaries #57

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions pages/frontend/displayJobs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import NavBar from "@/components/NavBar";
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setJobData } from "@/Utils/JobSlice";
import JobsCard from "@/components/JobsCard";
import useSWR from "swr";
import { toast } from "react-toastify";
import { useEffect } from "react";
import { BiSearch } from "react-icons/bi";

export default function DisplayJobs() {
const dispatch = useDispatch();
const [search, setSearch] = useState("");
const [filteredData, setFilteredData] = useState([]);
const JobData = useSelector((state) => state?.Job?.JobData);

const { data, error, isLoading } = useSWR("/getAllJobs", () => get_job());

useEffect(() => {
Expand All @@ -23,6 +22,7 @@ export default function DisplayJobs() {
if (error) toast.error(error);

useEffect(() => {
// Initial filter based on search term
if (search === "") {
setFilteredData(JobData);
} else {
Expand All @@ -37,10 +37,18 @@ export default function DisplayJobs() {
}
}, [search, JobData]);

// Function to sort jobs based on salary
const sortBySalary = () => {
const sortedData = [...filteredData].sort((a, b) => {
return (a.salary || 0) - (b.salary || 0); // Sort in ascending order
});
setFilteredData(sortedData);
};

return (
<>
<NavBar />
<div className="w-full py-20 flex items-center md:px-8 px-2 justify-center flex-col">
<div className="w-full py-20 flex items-center md:px-8 px-2 justify-center flex-col">
<h1 className="px-4 mx-2 py-2 mt-8 mb-4 leading-relaxed uppercase tracking-wider border-b-2 border-b-indigo-600 text-3xl font-semibold">
Available Jobs
</h1>
Expand All @@ -54,17 +62,23 @@ export default function DisplayJobs() {
placeholder={"Search by title, company or category..."}
/>
</div>
<div className="w-full h-full py-4 flex overflow-y-auto items-center justify-center flex-wrap">
{/* map */}

{/* Sort Button */}
<button
className="mt-4 py-2 px-4 bg-green-600 text-white rounded hover:bg-green-700"
onClick={sortBySalary}
>
Sort by Salary
</button>

<div className="w-full h-full py-4 flex overflow-y-auto items-center justify-center flex-wrap">
{Array.isArray(filteredData) && filteredData.length > 0 ? (
filteredData?.map((job) => {
filteredData.map((job) => {
return <JobsCard job={job} key={job?._id} />;
})
) : (
<p>No jobs found</p>
)}

{/* map */}
</div>
</div>
</>
Expand Down