made wallet to reload on coupon redeem

src/components/MyCoupons/CouponPopup.jsx

@@ -26,7 +26,8 @@ const CouponPopup = ({ popUpHandler, data }) => {
         setStatusMsg({ error: "An error occurred" });
       else setStatusMsg({ success: res.data?.status_text });
 
-      dispatch(tableReload({ type: "COUPONTABLE" }));
+      // dispatch(tableReload({ type: "COUPONTABLE" }));
+      dispatch(tableReload({ type: "WALLETTABLE" }));
       setTimeout(() => {
         popUpHandler();
         setLoader(false);

src/components/MyCoupons/MyCoupons.jsx

@@ -7,7 +7,7 @@ import { useSelector } from "react-redux";
 
 export default function MyCoupons() {
   const apiCall = useMemo(() => new usersService(), []);
-  const {couponTable} = useSelector(state => state.tableReload)
+  const {couponTable, walletTable} = useSelector(state => state.tableReload)
   let [couponHistory, setCouponHistory] = useState({
     // FOR COUPON HISTORY
     loading: true,
@@ -38,7 +38,7 @@ export default function MyCoupons() {
 
   useEffect(() => {
     getCouponHistory();
-  }, [couponTable]);
+  }, [couponTable, walletTable]);
 
   return (
     <>

src/components/MyWallet/Wallet.jsx

@@ -5,34 +5,17 @@ import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 const WalletBox = lazy(() => import("./WalletBox"));
 
+
 const WalletRoutes = () => {
   const apiCall = new usersService();
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
   const { walletTable } = useSelector((state) => state.tableReload);
-  const [walletList, setWalletList] = useState({
-    loading: true,
-    data: [],
-    reload: false,
-  });
+
   const [paymentHistory, setPaymentHistory] = useState({
     loading: true,
     data: [],
   });
 
-  const getWalletList = () => {
-    apiCall
-      .getUserWallets()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setWalletList({ loading: false, data: [] });
-        } else {
-          setWalletList({ loading: false, data: res.data?.result_list });
-        }
-      })
-      .catch(() => {
-        setWalletList({ loading: false, data: [] });
-      });
-  };
-
   const getPaymentHistory = () => {
     apiCall
       .getPaymentHx()
@@ -49,21 +32,13 @@ const WalletRoutes = () => {
   };
 
   useEffect(() => {
-    // const fetchData = async () => {
-    //   await Promise.all([getWalletList(), getPaymentHistory()]);
-    // };
-
-    // if (walletList.loading) {
-    //   fetchData();
-    // }
-    getWalletList();
     getPaymentHistory();
   }, [walletTable]);
 
   return (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-        <WalletBox wallet={walletList} payment={paymentHistory} />
+        <WalletBox wallet={walletDetails} payment={paymentHistory} />
       </Suspense>
     </Layout>
   );

src/components/MyWallet/WalletBox.jsx

@@ -13,7 +13,7 @@ export default function WalletBox({ wallet, payment }) {
               </div>
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
-                <div className="lg:w-full h-full mb-10 lg:mb-0">
+                <div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))

src/components/MyWallet/WalletHeader.jsx

@@ -41,8 +41,8 @@ export default function WalletHeader(props) {
           <div className="content px-7 pb-7">
             <ul>
               {props.myWalletList &&
-                props.myWalletList?.result_list?.length > 0 &&
-                props.myWalletList.result_list.map((value, index) => 
+                props.myWalletList?.length > 0 &&
+                props.myWalletList.map((value, index) => 
                 {
                   let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
                   return(

src/components/Partials/Header.jsx

@@ -15,7 +15,7 @@ import WalletHeader from "../MyWallet/WalletHeader";
 import { useDispatch, useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
 import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
-import { viewWalletDetails } from "../../store/walletDetails";
+// import { updateWalletDetails } from "../../store/walletDetails";
 import TimeDifference from "../Helpers/TimeDifference";
 
 const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
@@ -34,20 +34,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const navigate = useNavigate();
 
   const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
-
-  const getMyWalletList = async () => {
-    try {
-      const res = await api.getUserWallets(null);
-      console.log("wallet - > ", res.data);
-      dispatch(viewWalletDetails({ ...res.data }));
-      setMyWalletList(res.data);
-    } catch (error) {
-      console.log("Error getting mode");
-    }
-  };
-  useEffect(() => {
-    getMyWalletList();
-  }, [walletTable]);
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
 
   const handlerBalance = () => {
     setbalanceValue.toggle();
@@ -242,7 +229,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
             {/*<div className="lg:hidden block"></div>*/}
             <WalletHeader
-              myWalletList={myWalletList}
+              myWalletList={walletDetails.data}
               handlerBalance={handlerBalance}
               balanceDropdown={balanceDropdown}
               addMoneyHandler={addMoneyHandler}