Users-Wrench/src/components/MyActiveJobs/MyActiveJobTable.jsx

import React, { useState } from "react";
import dataImage2 from "../../assets/images/data-table-user-2.png";

import { useNavigate, useLocation } from "react-router-dom";

import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";

export default function MyActiveJobTable({ MyJobList, className }) {
  const navigate = useNavigate();
  let {pathname} = useLocation()

  const filterCategories = ["All Categories", "Explore", "Featured"];
  const [selectedCategory, setCategory] = useState(filterCategories[0]);

  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
  const currentActiveJobList = MyJobList?.result_list?.slice(
    indexOfFirstItem,
    indexOfLastItem
  );

  const handlePagination = (e) => {
    handlePagingFunc(e, setCurrentPage);
  };

  return (
    <div
      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
        className || ""
      }`}
    >
      {MyJobList && MyJobList?.result_list && (
        <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <tbody>
              {/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
              {/*    <td className="py-4">All Product</td>*/}
              {/*    <td className="py-4 text-right">.</td>*/}
              {/*</tr>*/}

              {
                <>
                  {MyJobList &&
                    MyJobList?.result_list &&
                    MyJobList.result_list.length > 0 &&
                    currentActiveJobList.map((value, index) => (
                      <tr
                        key={index}
                        className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
                      >
                        <td className=" py-4">
                          <div className="flex space-x-2 items-center w-full">
                            <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] 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">
                                  {value.price * 0.01}
                                </span>
                              </span>
                              <span className="text-sm text-thin-light-gray">
                                Duration:{" "}
                                <span className="text-purple">
                                  {" "}
                                  {value.timeline_days} day(s)
                                </span>
                              </span>
                              <span className="text-sm text-thin-light-gray">
                                Expire:{" "}
                                <span className="text-purple">
                                  {" "}
                                  {value.expire}
                                </span>
                              </span>
                              <span className="text-sm text-thin-light-gray">
                                Send to:{" "}
                                <span className="text-purple">
                                  {" "}
                                  {value.job_to}
                                </span>
                              </span>
                            </div>
                          </div>
                        </td>

                        <td className="text-right py-4 px-2">
                          <div className="flex justify-center items-center">
                            <button
                              type="button"
                              onClick={() => {
                                navigate("/manage-active-job", {
                                  state: {...value, pathname},
                                });
                              }}
                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
                              View
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                </>
              }
            </tbody>
          </table>
          {/* PAGINATION BUTTON */}
          <PaginatedList
            onClick={handlePagination}
            prev={currentPage == 0 ? true : false}
            next={
              currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
              MyJobList?.result_list.length
                ? true
                : false
            }
            data={MyJobList?.result_list}
            start={indexOfFirstItem}
            stop={indexOfLastItem}
          />
          {/* END OF PAGINATION BUTTON */}
        </div>
      )}
    </div>
  );
}