Joblist cart

2023-06-19 21:24:57 +01:00
parent a9d982386c
commit 4d3fe6a799
4 changed files with 144 additions and 164 deletions
@@ -9,7 +9,7 @@ export default function MainSection({
 }) {
  // Creating All cart..
  let marketCategories = useMemo(
-    () => ({ All: "All", ...categories }),
+    () => ({ All: "All Categories", ...categories }),
    [categories]
  );
  const [tab, setTab] = useState(marketCategories.All);
@@ -42,6 +42,7 @@ export default function MainSection({
            <div className="md:flex md:space-x-8 space-x-2">
              {mappedArray.map(({ key, value }) => (
                <span
+                key={key}
                  onClick={() => tabHandler(key)}
                  className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
                    tab === key
@@ -1,11 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import dataImage2 from "../../assets/images/data-table-user-2.png";
 import SelectBox from "../Helpers/SelectBox";
 import DeleteJobPopout from "../jobPopout/DeleteJobPopout";
 import JobListPopout from "../jobPopout/JobListPopout";
-
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-
 import { useSelector } from "react-redux";
 import usersService from "../../services/UsersService";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
@@ -14,13 +12,28 @@ import EditJobPopOut from "../jobPopout/EditJobPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";

 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
+  // Getting the categories
+  const currentJobCart = MyJobList?.data?.categories;
+// DropDown Box
+  const filterCategories = { All: "All Categories", ...currentJobCart };
+
+  const [selectedCategory, setCategory] = useState(
+    Object.keys(filterCategories)[0]
+  );
+
+  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+
+  let [deleteJobPopout, setDeleteJobPopout] = useState({
+    show: false,
+    data: {},
+  }); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW
+  const [editJob, setEditJob] = useState({ show: false, data: {} });
+
  const [myCountry, setCountries] = useState("");
  const {
    userDetails: { country },
  } = useSelector((state) => state?.userDetails);

-  const { jobListTable } = useSelector((state) => state.tableReload);
-
  const userApi = useMemo(() => new usersService(), []);

  // Get Country Api
@@ -47,54 +60,22 @@ 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"];
-
-  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
-
-  let [deleteJobPopout, setDeleteJobPopout] = useState({
-    show: false,
-    data: {},
-  }); // STATE TO HOLD THE VALUE OF THE ITEM DETAILS TO DELETE AND DETERMINE WHEN TO SHOW
-  const [editJob, setEditJob] = useState({ show: false, data: {} });
-
  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentJobList = MyJobList?.data?.result_list?.slice(
+
+  const filterJobList = () => {
+    if (selectedCategory === "All") return MyJobList?.data?.result_list;
+    else
+      return MyJobList?.data?.result_list?.filter((item) =>
+        item.category.includes(selectedCategory)
+      );
+  };
+
+  const currentJobList = filterJobList();
+
+  const filteredCurrentJobList = currentJobList?.slice(
    indexOfFirstItem,
    indexOfLastItem
  );
@@ -103,6 +84,95 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
    handlePagingFunc(e, setCurrentPage);
  };

+  const handleSetCategory = (value) => {
+    setCurrentPage(0);
+    for (let i in filterCategories) {
+      if (filterCategories[i] == value) {
+        setCategory(i);
+      }
+    }
+  };
+
+  const JobListItem = ({ value, index }) => {
+    let thePrice = PriceFormatter(
+      value?.price * 0.01,
+      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" />
+              </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="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>
+    );
+  };
+
  return (
    <div
      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
@@ -116,8 +186,8 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
          </h1>
        </div>
        <SelectBox
-          action={setCategory}
-          datas={filterCategories}
+          action={handleSetCategory}
+          datas={Object.values(filterCategories)}
          className="Update-table-dropdown"
          contentBodyClasses="w-auto min-w-max"
        />
@@ -128,113 +198,27 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
          <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <tbody>
-              <tr className="text-base text-thin-light-gray border-b  default-border-b dark:border-[#5356fb29] ottom ">
-                <td className="py-1">.</td>
-                <td className="py-1 text-right">.</td>
-              </tr>
-
-              {selectedCategory === "All Categories" ? (
-                <>
-                  {MyJobList &&
-                  MyJobList?.data?.result_list &&
-                  MyJobList.data?.result_list.length > 0 ? (
-                    currentJobList.map((value, index) => {
-                      let thePrice = PriceFormatter(
-                        value?.price * 0.01,
-                        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"
-                                  />
-                                </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="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>
-                      );
-                    })
+              <>
+                {MyJobList &&
+                MyJobList?.data?.result_list &&
+                MyJobList.data?.result_list.length > 0 ? (
+                  filteredCurrentJobList?.length ? (
+                    filteredCurrentJobList.map((value, index) => (
+                      <JobListItem index={index} key={index} value={value} />
+                    ))
                  ) : (
                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                      <td className="p-2">No Jobs Avaliable!</td>
+                      <td className="p-2">
+                        No Jobs Available In This Category!
+                      </td>
                    </tr>
-                  )}
-                </>
-              ) : selectedCategory === "Explore" ? (
-                <></>
-              ) : (
-                <></>
-              )}
+                  )
+                ) : (
+                  <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                    <td className="p-2">No Jobs Avaliable!</td>
+                  </tr>
+                )}
+              </>
            </tbody>
          </table>

@@ -244,11 +228,11 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
            prev={currentPage == 0 ? true : false}
            next={
              currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-              MyJobList?.data?.result_list?.length
+              currentJobList?.length
                ? true
                : false
            }
-            data={MyJobList?.data?.result_list}
+            data={currentJobList}
            start={indexOfFirstItem}
            stop={indexOfLastItem}
          />
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
@@ -11,9 +10,6 @@ export default function MyJobs(props) {
    setPopUp((prev) => !prev);
  };

-  console.log("Checking getJobData props", props)
-
-
  return (
    <Layout>
      <CommonHead commonHeadData={props.commonHeadData} />
@@ -43,4 +39,4 @@ export default function MyJobs(props) {
      {/* End of Add Job List Popout */}
    </Layout>
  );
-}
+}
@@ -33,7 +33,6 @@ const initialValues = {

 function ReferralDisplay() {
  const apiCall = new usersService(); // GET API CALL
-  const navigate = useNavigate();

  let [refHistoryReload, setRefHistoryReload] = useState(false); // Determines when referral history reloads