- {categories.map((element) => {
+ {fetchEachCategory.map((element) => {
return (
-
-
{element.icon}
+
{
+ handleClick(element);
+ }}
+ >
+
{element}
+ {/*
{element.icon}
-
{element.title}
{element.subTitle}
-
+
*/}
);
})}
diff --git a/frontend/src/components/Job/Jobs.jsx b/frontend/src/components/Job/Jobs.jsx
index b74e5cd0..a5c53b51 100644
--- a/frontend/src/components/Job/Jobs.jsx
+++ b/frontend/src/components/Job/Jobs.jsx
@@ -2,45 +2,71 @@ import React, { useContext, useEffect, useState } from "react";
import axios from "axios";
import { Link, useNavigate } from "react-router-dom";
import { Context } from "../../main";
+import { useDispatch, useSelector } from "react-redux";
+import { getJobs } from "../../Redux/actions";
const Jobs = () => {
- const [jobs, setJobs] = useState([]);
+ const jobs = useSelector((state) => state.jobs.jobs);
+ const loading = useSelector((state) => state.jobs.loading);
+
const { isAuthorized } = useContext(Context);
const navigateTo = useNavigate();
+
+ const dispatch = useDispatch();
+
useEffect(() => {
- try {
- axios
- .get("http://localhost:4000/api/v1/job/getall", {
- withCredentials: true,
- })
- .then((res) => {
- setJobs(res.data);
- });
- } catch (error) {
- console.log(error);
+ dispatch(getJobs());
+
+ if (!isAuthorized) {
+ navigateTo("/");
}
- }, []);
- if (!isAuthorized) {
- navigateTo("/");
- }
+ }, [dispatch]);
+
+ // const [jobs, setJobs] = useState([]);
+
+ // useEffect(() => {
+ // try {
+ // axios
+ // .get("http://localhost:4000/api/v1/job/getall", {
+ // withCredentials: true,
+ // })
+ // .then((res) => {
+ // setJobs(res.data);
+ // });
+ // } catch (error) {
+ // console.log(error);
+ // }
+ // }, []);
+ // if (!isAuthorized) {
+ // navigateTo("/");
+ // }
return (
ALL AVAILABLE JOBS
-
- {jobs.jobs &&
- jobs.jobs.map((element) => {
- return (
-
-
{element.title}
-
{element.category}
-
{element.country}
-
Job Details
-
- );
- })}
-
+
+ {loading ? (
+ <>
+
Loading...
+
+ ) : (
+ <>
+
+ {jobs &&
+ jobs.map((element) => {
+ return (
+
+
{element.title}
+
{element.category}
+
{element.country}
+
Job Details
+
+ );
+ })}
+
+
+ )}
);
diff --git a/frontend/src/components/Job/SelectedCategoryDetail.jsx b/frontend/src/components/Job/SelectedCategoryDetail.jsx
new file mode 100644
index 00000000..f7b32559
--- /dev/null
+++ b/frontend/src/components/Job/SelectedCategoryDetail.jsx
@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Link, useParams } from "react-router-dom";
+import { getJobs } from "../../Redux/actions";
+
+const SelectedCategoryDetail = () => {
+ const allJobs = useSelector((state) => state.jobs.jobs);
+ const loading = useSelector((state) => state.jobs.loading);
+ const dispatch = useDispatch();
+ useEffect(() => {
+ dispatch(getJobs());
+ }, [dispatch]);
+ const { category } = useParams();
+ const filteredJobs = allJobs.filter(
+ (job) => job.category.toLowerCase() === category.toLowerCase()
+ );
+ return (
+
+
+
All {category} Jobs
+
+ {loading ? (
+ <>
+
Loading...
+
+ ) : (
+ <>
+
+ {filteredJobs &&
+ filteredJobs.map((element) => {
+ return (
+
+
{element.title}
+
{element.category}
+
{element.country}
+
Job Details
+
+ );
+ })}
+
+
+ )}
+
+ );
+};
+
+export default SelectedCategoryDetail;
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 1eacd775..5e3ddd4d 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,6 +1,8 @@
import React, { createContext, useState } from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
+import store from "./Redux/store.js";
+import { Provider } from "react-redux";
export const Context = createContext({
isAuthorized: false,
@@ -26,6 +28,8 @@ const AppWrapper = () => {
ReactDOM.createRoot(document.getElementById("root")).render(
-
+
+
+
);