Merge master into session-implement

src/components/AuthPages/Login/index.jsx

@@ -17,6 +17,10 @@ import { updateUserDetails } from "../../../store/UserDetails";
 import ReCAPTCHA from "react-google-recaptcha";
 
 export default function Login() {
+
+  const queryParams = new URLSearchParams(location?.search);
+  const sessionExpired = queryParams.get("sessionExpired")
+
   const dispatch = useDispatch();
   const { state } = useLocation();
 
@@ -255,6 +259,13 @@ export default function Login() {
                   </Link>
                 </span>
               </div>
+              
+              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired == 'true' &&
+              <div className="w-full p-1">
+                <p className="text-red-500 text-sm text-center">Your session expired and will need to login again</p>
+              </div>
+              }
 
               {/* switch login component */}
               <div className="ml-7 flex justify-start items-center gap-3">

src/components/FamilyAcc/index.jsx

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import SiteService from "../../services/SiteService";
+import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 import Layout from "../Partials/Layout";
@@ -27,7 +27,7 @@ export default function FamilyAcc() {
     last_name: "",
   });
 
-  const apiCall = useMemo(() => new SiteService(), []);
+  const apiCall = useMemo(() => new usersService(), []);
 
   const popUpHandler = () => {
     setPopUp((prev) => !prev);

src/components/History/RewardsTable.jsx

@@ -50,7 +50,7 @@ function RewardsTable() {
     <div className='flex flex-col justify-between min-h-[500px]'>
     {familyRewardHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-    : familyRewardHistory.data.length ?
+    :
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -60,6 +60,8 @@ function RewardsTable() {
             <th className="p-2">Confirmation</th>
             </tr>
         </thead>
+        {familyRewardHistory.data.length ?
+        (
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
@@ -82,15 +84,24 @@ function RewardsTable() {
             }
             )}
         </tbody>
+        )
+        :
+        familyRewardHistory.error ? 
+        (
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+            </tr>
+        </tbody>
+        )
+        :
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>No Rewards History Found!</td>
+            </tr>
+        </tbody>
+        }
     </table>
-    :familyRewardHistory.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>
-    :
-    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-        <span>No Rewards History Found!</span>
-    </div>
     }
 
     {/* PAGINATION BUTTON */}

src/components/History/index.jsx

@@ -255,9 +255,9 @@ export default function History() {
                     {/* PURCHASE SECTION */}
                     {tab == 'purchases' &&
                         <div className="wallet w-full border-t">
-                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
+                            <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1>
                             {purchaseHistory.loading ? 
-                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+                            <LoadingSpinner size='16' color='sky-blue' />
                             :
                             <PurchasesTable purchase={purchaseHistory} />
                             }
@@ -268,10 +268,10 @@ export default function History() {
                     {/* RECENT ACTIVITY SECTION */}
                     {tab == 'recent' &&
                         <div className="wallet w-full border-t">
-                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
+                            <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1>
                             {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                             {paymentHistory.loading ? 
-                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+                            <LoadingSpinner size='16' color='sky-blue' />
                             :
                             <RecentActivityTable payment={paymentHistory} />
                         }

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -16,36 +16,45 @@ function PurchasesTable({purchase}) {
 
   return (
     <div className='flex flex-col justify-between min-h-[500px]'>
+    <table className="wallet-activity w-full table-auto border-collapse text-left">
+        <thead className='border-b-2'>
+            <tr className='text-slate-600'>
+            <th className="p-2">Trx.</th>
+            <th className="p-2">Amount</th>
+            <th className="p-2">Fee</th>
+            </tr>
+        </thead>
         {purchase.data.length ?
-        <table className="wallet-activity w-full table-auto border-collapse text-left">
-            <thead className='border-b-2'>
-                <tr className='text-slate-600'>
-                <th className="p-2">Trx.</th>
-                <th className="p-2">Amount</th>
-                <th className="p-2">Fee</th>
-                </tr>
-            </thead>
-            <tbody>
-                {currentPurchase.map((item, index) => (
-                <tr key={index} className='text-slate-500'>
-                    <td className="p-2">{item.added_date}<br />
-                    <b>{item.confirmation} </b>
-                    </td>
-                    <td className="p-2">{item.amount}</td>
-                    <td className="p-2">{item.fee}</td>
-                </tr>
-                ))}
-            </tbody>
-        </table>
-        :purchase.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>
+        (
+        <tbody>
+            {currentPurchase.map((item, index) => (
+            <tr key={index} className='text-slate-500'>
+                <td className="p-2">{item.added_date}<br />
+                   <b>{item.confirmation} </b>
+                </td>
+                <td className="p-2">{item.amount}</td>
+                <td className="p-2">{item.fee}</td>
+            </tr>
+            ))}
+        </tbody>
+        )
         :
-        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-            <span>No Purchase History Found!</span>
-        </div> 
+        purchase.error ? 
+        (
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+            </tr>
+        </tbody>
+        )
+        :
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>No Purchase History Found!</td>
+            </tr>
+        </tbody>
         }
+    </table>
 
     {/* PAGINATION BUTTON */}
     <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -19,16 +19,16 @@ function RecentActivityTable({ payment }) {
 
   return (
     <div className="flex flex-col justify-between min-h-[500px]">
-      {payment?.data?.length > 0 ? 
-        <table className="wallet-activity w-full table-auto border-collapse text-left">
-          <thead className="border-b-2">
-            <tr className="text-slate-600">
-              <th className="p-2">Date</th>
-              <th className="p-4">Trx.</th>
-              <th className="p-2">Amnt./Fee</th>
-              <th className="p-2">Status</th>
-            </tr>
-          </thead>
+      <table className="wallet-activity w-full table-auto border-collapse text-left">
+        <thead className="border-b-2">
+          <tr className="text-slate-600">
+            <th className="p-2">Date</th>
+            <th className="p-4">Trx.</th>
+            <th className="p-2">Amnt./Fee</th>
+            <th className="p-2">Status</th>
+          </tr>
+        </thead>
+        {payment?.data?.length > 0 ? (
           <tbody>
             {currentActivity.map((item, index) => (
               <tr key={index} className="text-slate-500">
@@ -46,16 +46,24 @@ function RecentActivityTable({ payment }) {
               </tr>
             ))}
           </tbody>
-        </table>
-      :payment.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>
-        :
-        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
-            <span>No Payment History Found!</span>
-        </div> 
-      }
+        ) : payment?.error ? (
+          <tbody>
+            <tr className="text-slate-500">
+              <td className="p-2" colSpan={4}>
+                Opps! an error occurred. Please try again!
+              </td>
+            </tr>
+          </tbody>
+        ) : (
+          <tbody>
+            <tr className="text-slate-500">
+              <td className="p-2" colSpan={4}>
+                No Payment History Found!
+              </td>
+            </tr>
+          </tbody>
+        )}
+      </table>
 
       {/* PAGINATION BUTTON */}
       <PaginatedList

src/components/jobPopout/JobListPopout.jsx

@@ -1,7 +1,7 @@
 import { Field, Form, Formik } from "formik";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import * as Yup from "yup";
-import SiteService from "../../services/SiteService";
+import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -36,7 +36,7 @@ const dispatch = useDispatch()
     },
   });
 
-  const apiCall = useMemo(() => new SiteService(), []);
+  const apiCall = useMemo(() => new usersService(), []);
 
   // member listing
   const memberList = useCallback(async () => {

src/services/UsersService.js

@@ -1237,6 +1237,10 @@ class usersService {
         console.log(response);
         // res = response;
         console.log("~~~~~~~ Toks2 POST ~~~~~~~~");
+        if(response.data.internal_return == '-9999'){
+          localStorage.clear()
+          window.location.href=`/login?sessionExpired=true`
+        }
         return response;
       })
       .catch((error) => {