From 3ee7e1fb84ba68ff5cda52e43733a96fbc03ac88 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 29 May 2023 17:05:40 +0100
Subject: [PATCH] Centralized button and removed horinzontal scroll

---
 src/components/MyTasks/MyJobTable.jsx    | 10 ++---
 src/components/MyTasks/MyOffersTable.jsx | 56 +++++++++++++++++-------
 src/views/MyTaskPage.jsx                 |  6 ++-
 3 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx
index 9c79fa6..da369d1 100644
--- a/src/components/MyTasks/MyJobTable.jsx
+++ b/src/components/MyTasks/MyJobTable.jsx
@@ -58,15 +58,15 @@ export default function MyJobTable({ className, ActiveJobList }) {
           <LoadingSpinner size="16" color="sky-blue" />
         </div>
       ) : (
-        <div className="relative w-full overflow-x-auto sm:rounded-lg">
-          <div className="overflow-y-auto h-auto w-full">
+        <div className="relative w-full sm:rounded-lg">
+          <div className="h-auto w-full">
             {ActiveJobList?.data?.length > 0 ? (
               currentTask?.map((task, idx) => (
                 <div
                   className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
                   key={idx}
                 >
-                  <div className=" py-4">
+                  <div className="py-4 max-w-[80%]">
                     <div className="flex space-x-2 items-center">
                       <div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                         <img
@@ -76,7 +76,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                         />
                       </div>
                       <div className="flex flex-col flex-[0.9]">
-                        <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                           {task?.title}
                         </h1>
                         <span className="text-base text-gray-600">
@@ -112,7 +112,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                     </div>
                   </div>
 
-                  <div className="text-right py-4 px-2">
+                  <div className="flex justify-center items-center py-4 px-2">
                     <button
                       type="button"
                       onClick={() => {
diff --git a/src/components/MyTasks/MyOffersTable.jsx b/src/components/MyTasks/MyOffersTable.jsx
index 550814c..562045f 100644
--- a/src/components/MyTasks/MyOffersTable.jsx
+++ b/src/components/MyTasks/MyOffersTable.jsx
@@ -7,6 +7,7 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 
 import OfferJobPopout from '../jobPopout/OfferJobPopout'
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 
 export default function MyOffersTable({ className, MyActiveOffersList}) {
@@ -49,9 +50,9 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
         // }
     };
 
-   if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
-       return(''); // want blank or no appear when no items
-   }
+//    if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
+//        return(''); // want blank or no appear when no items
+//    }
 
     return (
         <>
@@ -112,37 +113,40 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
                             </div>
                             <div className="slider-content">
                                 <SliderCom settings={settings} selector={sellSlider}>
-
-                                    {MyActiveOffersList &&
-                                        MyActiveOffersList?.result_list?.length > 0 &&
-                                        MyActiveOffersList.result_list.map((value, index) => (
-
+                                {   MyActiveOffersList.loading ?
+                                        <LoadingSpinner size={16} color='sky-blue' />
+                                    :
+                                    MyActiveOffersList?.data?.length > 0 ?
+                                        MyActiveOffersList.data.map((value, index) => (
                                             <div className="item" key={index}>
-                                                <div className="offer-slide-item" >
+                                                <div className="offer-slide-item flex flex-col justify-between items-center">
                                                     {/* title */}
                                                     <div className="flex justify-center">
-                                                        <p className="text-2xl text-dark-gray dark:text-white font-bold mb-2">
+                                                        <p className="text-xl text-dark-gray dark:text-white font-bold mb-2">
                                                             {value.title}
                                                         </p>
                                                     </div>
                                                     {/* username */}
-                                                    <div className="flex justify-center mb-1">
+                                                    <div className="flex flex-col justify-center my-1">
                                                         <p className="text-xs text-thin-light-gray">
                                                             {value.timeline_days} Days
                                                         </p>
-                                                    </div>
-                                                    {/* items */}
-                                                    <div className="flex justify-center">
-                                                        <div className="flex space-x-1 items-center text-purple text-xs">
+                                                        <div className="my-2 flex space-x-1 items-center text-purple text-xs">
                                                             <span>{value.price*0.01} {value.currency}</span>
                                                         </div>
                                                     </div>
+                                                    {/* items */}
+                                                    {/* <div className="flex justify-center">
+                                                        <div className="flex space-x-1 items-center text-purple text-xs">
+                                                            <span>{value.price*0.01} {value.currency}</span>
+                                                        </div>
+                                                    </div> */}
                                                     <button
                                                         type="button"
                                                         onClick={() => {
                                                             setOfferPopout({ show: true, data: value });
                                                         }}
-                                                        className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                        className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
                                                     >
                                                         Start Task
                                                     </button>
@@ -150,7 +154,25 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
                                                 </div>
 
                                             </div>
-                                        ))}
+                                        ))
+                                    :
+                                    MyActiveOffersList.status ?
+                                        (
+                                            <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                                <div className="p-2">
+                                                    No Tasks!
+                                                </div>
+                                            </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>
+                                        )
+                                }
 
 
 
diff --git a/src/views/MyTaskPage.jsx b/src/views/MyTaskPage.jsx
index d57608e..8b5ac2b 100644
--- a/src/views/MyTaskPage.jsx
+++ b/src/views/MyTaskPage.jsx
@@ -9,7 +9,7 @@ export default function MyTaskPage() {
     const {jobListTable} = useSelector((state) => state.tableReload)
 
     const [MyActiveJobList, setMyActiveJobList] = useState({loading: true, status:false, data:[]});
-    const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
+    const [MyActiveOffersList, setMyActiveOffersList] = useState({loading: true, status:false, data:[]});
     const api = new usersService();
     const commonHeadData =()=>{
         console.log("COMMON HEAD DATA ----------------=====---------------------");
@@ -26,10 +26,12 @@ export default function MyTaskPage() {
         }
     };
     const getMyActiveOffersList = async () => {
+        setMyActiveOffersList({loading: true, status:false, data:[]});
         try {
             const res = await api.getOffersList();
-            setMyActiveOffersList(res.data);
+            setMyActiveOffersList({loading: false, status:true, data:res.data.result_list});
         } catch (error) {
+            setMyActiveOffersList({loading: false, status:false, data:[]});
             console.log("Error getting offers");
         }
     };