Merge branch 'no-task-background' of WrenchBoard/Users-Wrench into master

src/components/Cards/HomeBannerOffersCard.jsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import localImgLoad from "../../lib/localImgLoad";
-import bannerImage from "../../assets/images/banner-coupons.jpg";
 
 export default function HomeBannerOffersCard(props) {
   const [imageUrl, setImageUrl] = useState("");

src/components/MyTasks/MyJobTable.jsx

@@ -1,60 +1,55 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
-
 import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
-import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { useNavigate, useLocation } from "react-router-dom";
 
-import {useNavigate, useLocation} from 'react-router-dom'
+const noTasksBg = require("../../assets/images/no-task-background.jpg");
 
 export default function MyJobTable({ className, ActiveJobList }) {
-  let navigate = useNavigate()
-  let {pathname} = useLocation()
-
-  // const [tasksData, setTasksData] = useState(null);
-  // const [loader, setLoader] = useState(false);
-
-  // let apiCall = useMemo(() => new usersService(), []);
-
-  // const displayTasks = useCallback(async () => {
-  //   try {
-  //     const res = await apiCall.getMyActiveTaskList();
-  //     let {
-  //       data: { result_list },
-  //       internal_return,
-  //       statusText,
-  //     } = await res;
-  //     if (internal_return < 0 || statusText !== "OK") return;
-  //     setTasksData(result_list);
-  //     setLoader(false);
-  //   } catch (error) {
-  //     throw new Error(error);
-  //   }
-  // }, [apiCall]);
-
-  // useEffect(() => {
-  //   displayTasks();
-  // }, []);
+  let navigate = useNavigate();
+  let { pathname } = useLocation();
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentTask = ActiveJobList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  const currentTask = ActiveJobList?.data?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
 
+  // To navigate to task
+  const [btnLoader, setBtnLoader] = useState(false);
+  const navigateMarket = () => {
+    setBtnLoader(true);
+    setTimeout(() => {
+      navigate("/market", { replace: true });
+      setBtnLoader(false);
+    }, 2500);
+  };
+
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] relative ${
         className || ""
-      }`}
+      } bg-cover bg-center`}
+      style={{
+        backgroundImage: !ActiveJobList?.data.length
+          ? `url('${noTasksBg}')`
+          : "none",
+      }}
     >
+      {!ActiveJobList?.data.length && (
+        <div class="absolute inset-0 bg-black opacity-30"></div>
+      )}
       {ActiveJobList.loading ? (
-        <div className="w-full h-[500px] flex items-center justify-center">
+        <div className="w-full h-[520px] flex items-center justify-center">
           <LoadingSpinner size="16" color="sky-blue" />
         </div>
       ) : (
@@ -117,7 +112,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                       type="button"
                       onClick={() => {
                         navigate("/manage-active-job", {
-                          state: {...task, pathname},
+                          state: { ...task, pathname },
                         });
                       }}
                       className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -127,23 +122,27 @@ export default function MyJobTable({ className, ActiveJobList }) {
                   </div>
                 </div>
               ))
-            ) 
-            : 
-            (
-            ActiveJobList.status ?
-              <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                <div className="p-2">
-                  No Tasks!
+            ) : ActiveJobList.status ? (
+              <div className="flex flex-col items-center justify-center gap-9 my-5">
+                <div className="p-2 font-bold text-3xl text-white whitespace-nowrap">
+                  You currently have "0" task
                 </div>
+                <button
+                  className="w-[115px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  onClick={navigateMarket}
+                >
+                  {btnLoader ? (
+                    <div className="signup btn-loader"></div>
+                  ) : (
+                    "Find Task"
+                  )}
+                </button>
               </div>
-            :
-            <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-              <p className="p-2">
-                Error Occurred! Unable to display Tasks!
-              </p>
-            </div>
-            )
-            }
+            ) : (
+              <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                <p className="p-2">Error Occurred! Unable to display Tasks!</p>
+              </div>
+            )}
           </div>
 
           {/* PAGINATION BUTTON */}
@@ -166,5 +165,3 @@ export default function MyJobTable({ className, ActiveJobList }) {
     </div>
   );
 }
-
-/* */