added icons

src/components/History/JobsCompleted.jsx

@@ -40,9 +40,6 @@ function JobsCompleted() {
         }).catch((error)=>{
             setJobHistory(prev => ({...prev, loading: false, error: true}))
         })
-        setTimeout(()=>{
-            setJobHistory(prev => ({...prev, loading: false, error:true}))
-        },3000)
     }
 
     useEffect(()=>{
@@ -51,7 +48,7 @@ function JobsCompleted() {
 
   return (
     <div className='p-4 flex flex-col justify-between min-h-[500px]'>
-    {jobHistory.loading ? 
+    {jobHistory?.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : jobHistory?.data?.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
@@ -64,7 +61,7 @@ function JobsCompleted() {
             </tr>
         </thead>
         <tbody>
-            {currentReward.map((item, index) => {
+            {currentReward?.map((item, index) => {
                 let date = new Date(item?.delivery_date).toLocaleDateString()
                 return (
                     <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
@@ -86,7 +83,7 @@ function JobsCompleted() {
             )}
         </tbody>
     </table>
-    :jobHistory.error ?
+    :jobHistory?.error ?
     <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
         <span>Opps! an error occurred. Please try again!</span>
     </div>

src/components/History/index.jsx

@@ -19,9 +19,32 @@ export default function History() {
 
     const apiCall = new usersService()
 
-    let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
     const [selectedTab, setSelectedTab] = useState("purchases");
-    const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
+    // let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
+    // const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
+
+    const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+        {
+            id: 1,
+            title: "purchases",
+            iconName: "history",
+          },
+          {
+            id: 2,
+            title: "recent activity",
+            iconName: "history",
+          },
+          {
+            id: 3,
+            title: "rewards",
+            iconName: "history",
+          },
+          {
+            id: 4,
+            title: "jobs completed",
+            iconName: "history",
+          },
+    ]
 
     let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
         loading: true,
@@ -91,12 +114,15 @@ export default function History() {
                     <div className="content-tab-items lg:w-[230px] w-full mr-2">
                         <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
                             {tabs.map((item) => (
-                                <TabButton 
-                                    key={item}
-                                    item={item}
-                                    selectedTab={selectedTab}
-                                    setSelectedTab={setSelectedTab}
-                                />
+                                <div key={item.id} className='w-full'>
+                                    <TabButton 
+                                        key={item.id}
+                                        item={item.title}
+                                        iconName={item.iconName}
+                                        selectedTab={selectedTab}
+                                        setSelectedTab={setSelectedTab}
+                                    />
+                                </div>
                             ))}
                         </div>
                     </div>

src/components/customTabs/TabButton.jsx

@@ -1,16 +1,22 @@
 import React from 'react'
+import Icons from '../Helpers/Icons'
 
-export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
+export default function TabButton({ item='', iconName='', selectedTab='', setSelectedTab=()=>{} }) {
   return (
     <button
-      className={`text-18 tracking-wide flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
         selectedTab === item ? "text-purple" : " text-thin-light-gray"
       }`}
       value={item}
       name={item}
       onClick={() => setSelectedTab(item)}
     >
-      {item[0].toUpperCase() + item.slice(1)}
+      <div>
+        <Icons name={iconName} />
+      </div>
+      <div>
+        <p className="text-18 tracking-wide">{item[0].toUpperCase() + item.slice(1)}</p>
+      </div>
     </button>
   )
 }