From a9d982386ce6e6f28c286aaf3f1fe08a715f897d Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Sun, 18 Jun 2023 22:46:42 +0100
Subject: [PATCH] .

---
 src/components/MyJobs/MyJobTable.jsx | 187 ++++++++++++++++-----------
 src/components/MyJobs/index.jsx      |   3 +
 src/views/MyJobsPage.jsx             |   5 +-
 3 files changed, 118 insertions(+), 77 deletions(-)

diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx
index be596aa..9ea5b11 100644
--- a/src/components/MyJobs/MyJobTable.jsx
+++ b/src/components/MyJobs/MyJobTable.jsx
@@ -19,6 +19,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
     userDetails: { country },
   } = useSelector((state) => state?.userDetails);
 
+  const { jobListTable } = useSelector((state) => state.tableReload);
+
   const userApi = useMemo(() => new usersService(), []);
 
   // Get Country Api
@@ -45,8 +47,40 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
     getCountryList();
   }, [getCountryList]);
 
+  const [jobCategories, setJobCategories] = useState({
+    loading: false,
+    data: null,
+  });
+
+  useEffect(() => {
+    const getMyJobList = async () => {
+      setJobCategories({ loading: true, data: null });
+      try {
+        const res = await userApi.getActiveJobList();
+        setJobCategories({ loading: false, data: res.data?.categories });
+      } catch (error) {
+        setJobCategories({ loading: true, data: null });
+        throw new Error(error);
+      }
+    };
+    getMyJobList();
+  }, [jobListTable]);
+
+  // Creating All cart..
+  let _jobCategories = useMemo(
+    () => ({ All: "All", ...jobCategories.data }),
+    [jobCategories]
+  );
+  console.log("Checking getJobData", _jobCategories);
+
+  const [selectedCategory, setCategory] = useState(_jobCategories.All);
+
+ // Convert to array in order to map
+ const mappedArray = Object.entries(_jobCategories).map(([key, value]) => {
+  return { key, value };
+});
+
   const filterCategories = ["All Categories", "Explore", "Featured"];
-  const [selectedCategory, setCategory] = useState(filterCategories[0]);
 
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
@@ -110,85 +144,86 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      return(
-                      <tr
-                        key={index}
-                        className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                      >
-                        <td className="py-9">
-                          <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
-                            <div className="flex space-x-2 items-center job-items w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
-                                <img
-                                  src={dataImage2}
-                                  alt="data"
-                                  className="w-full h-full"
-                                />
+                      return (
+                        <tr
+                          key={index}
+                          className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
+                        >
+                          <td className="py-9">
+                            <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
+                              <div className="flex space-x-2 items-center job-items w-full">
+                                <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
+                                  <img
+                                    src={dataImage2}
+                                    alt="data"
+                                    className="w-full h-full"
+                                  />
+                                </div>
+                                <div className="flex flex-col flex-[0.9]">
+                                  <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                    {value.title}
+                                  </h1>
+                                  <div>{value.description}</div>
+                                  <span className="text-sm text-thin-light-gray">
+                                    Price:{" "}
+                                    <span className="text-purple">
+                                      {thePrice}
+                                    </span>
+                                  </span>
+                                  <span className="text-sm text-thin-light-gray">
+                                    Duration:{" "}
+                                    <span className="text-purple">
+                                      {" "}
+                                      {value.timeline_days} day(s)
+                                    </span>
+                                  </span>
+                                </div>
                               </div>
-                              <div className="flex flex-col flex-[0.9]">
-                                <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                  {value.title}
-                                </h1>
-                                <div>{value.description}</div>
-                                <span className="text-sm text-thin-light-gray">
-                                  Price:{" "}
-                                  <span className="text-purple">
-                                    {thePrice}
-                                  </span>
-                                </span>
-                                <span className="text-sm text-thin-light-gray">
-                                  Duration:{" "}
-                                  <span className="text-purple">
-                                    {" "}
-                                    {value.timeline_days} day(s)
-                                  </span>
-                                </span>
+
+                              <div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
+                                <button
+                                  type="button"
+                                  className="p-2 w-[60px] h-11"
+                                  onClick={() => {
+                                    setDeleteJobPopout({
+                                      show: true,
+                                      data: value,
+                                    });
+                                  }}
+                                >
+                                  [Delete]
+                                </button>
+                                <span>|</span>
+                                <button
+                                  type="button"
+                                  className="p-2 w-[40px] h-11"
+                                  onClick={() => {
+                                    setEditJob({
+                                      show: true,
+                                      data: value,
+                                    });
+                                  }}
+                                >
+                                  Edit
+                                </button>
                               </div>
                             </div>
+                          </td>
 
-                            <div className="min-w-[110px] max-w-[110px] bg-yellow-300 mx-2 rounded-md flex flex-nowrap space-x-2 justify-center items-center self-end">
-                              <button
-                                type="button"
-                                className="p-2 w-[60px] h-11"
-                                onClick={() => {
-                                  setDeleteJobPopout({
-                                    show: true,
-                                    data: value,
-                                  });
-                                }}
-                              >
-                                [Delete]
-                              </button>
-                              <span>|</span>
-                              <button
-                                type="button"
-                                className="p-2 w-[40px] h-11"
-                                onClick={() => {
-                                  setEditJob({
-                                    show: true,
-                                    data: value,
-                                  });
-                                }}
-                              >
-                                Edit
-                              </button>
-                            </div>
-                          </div>
-                        </td>
-
-                        <td className="text-right py-9 px-2">
-                          <button
-                            type="button"
-                            onClick={() => {
-                              setJobPopout({ show: true, data: value });
-                            }}
-                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          >
-                            Manage
-                          </button>
-                        </td>
-                      </tr>
-                    )})
+                          <td className="text-right py-9 px-2">
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setJobPopout({ show: true, data: value });
+                              }}
+                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                              Manage
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })
                   ) : (
                     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                       <td className="p-2">No Jobs Avaliable!</td>
diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx
index 4b2ab77..e041593 100644
--- a/src/components/MyJobs/index.jsx
+++ b/src/components/MyJobs/index.jsx
@@ -11,6 +11,9 @@ export default function MyJobs(props) {
     setPopUp((prev) => !prev);
   };
 
+  console.log("Checking getJobData props", props)
+
+
   return (
     <Layout>
       <CommonHead commonHeadData={props.commonHeadData} />
diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx
index b37060d..ce69c18 100644
--- a/src/views/MyJobsPage.jsx
+++ b/src/views/MyJobsPage.jsx
@@ -1,9 +1,12 @@
-import MyJobs from "../components/MyJobs";
+import { useEffect, useState } from "react";
+import MyJobs from "../components/MyJobs"; 
 import { useSelector } from "react-redux";
 
 export default function MyJobsPage() {
   let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
   const { userJobList } = useSelector((state) => state.userJobList);
+
+  
   return (
     <>
       <MyJobs