From a970411719724eea170090bd7dac865e4917ad75 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 29 Aug 2023 09:47:35 +0100 Subject: [PATCH] made wallet to reload on coupon redeem --- src/components/MyCoupons/CouponPopup.jsx | 3 ++- src/components/MyCoupons/MyCoupons.jsx | 4 +-- src/components/MyWallet/Wallet.jsx | 33 +++--------------------- src/components/MyWallet/WalletBox.jsx | 2 +- src/components/MyWallet/WalletHeader.jsx | 4 +-- src/components/Partials/Header.jsx | 19 +++----------- src/middleware/AuthRoute.jsx | 18 ++++++++++++- src/store/walletDetails.js | 9 ++++--- 8 files changed, 37 insertions(+), 55 deletions(-) diff --git a/src/components/MyCoupons/CouponPopup.jsx b/src/components/MyCoupons/CouponPopup.jsx index ac6cfd8..3127db5 100644 --- a/src/components/MyCoupons/CouponPopup.jsx +++ b/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); diff --git a/src/components/MyCoupons/MyCoupons.jsx b/src/components/MyCoupons/MyCoupons.jsx index a43cc7e..d009193 100644 --- a/src/components/MyCoupons/MyCoupons.jsx +++ b/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 ( <> diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index 4b63383..5965446 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/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 ( }> - + ); diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx index ec3ac39..7316e76 100644 --- a/src/components/MyWallet/WalletBox.jsx +++ b/src/components/MyWallet/WalletBox.jsx @@ -13,7 +13,7 @@ export default function WalletBox({ wallet, payment }) { ) : wallet.data.length ? ( wallet.data.map((item, index) => ( -
+
)) diff --git a/src/components/MyWallet/WalletHeader.jsx b/src/components/MyWallet/WalletHeader.jsx index e4cfd60..e8ba3b6 100644 --- a/src/components/MyWallet/WalletHeader.jsx +++ b/src/components/MyWallet/WalletHeader.jsx @@ -41,8 +41,8 @@ export default function WalletHeader(props) {
    {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( diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx index a489441..66c5f42 100644 --- a/src/components/Partials/Header.jsx +++ b/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 }) { {/*
    */} { const apiCall = useMemo(() => new usersService(), []); @@ -19,7 +20,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => { const [loadProfileDetails, setLoadProfileDetails] = useState([]); const navigate = useNavigate(); - const { jobListTable } = useSelector((state) => state.tableReload); + const { jobListTable, walletTable } = useSelector((state) => state.tableReload); const { userDetails: { username, uid, session }, @@ -177,6 +178,21 @@ const AuthRoute = ({ redirectPath = "/login", children }) => { getMyJobList(); }, [jobListTable]); + useEffect(() => { + const getMyWalletList = async () => { + dispatch(updateWalletDetails({ loading: true, data:[] })); + try { + const res = await apiCall.getUserWallets(); + console.log("wallet - >", res.data); + dispatch(updateWalletDetails({ loading: false, data:res.data?.result_list })); + } catch (error) { + dispatch(updateWalletDetails({ loading: false, data:[] })); + console.log("Error getting mode"); + } + }; + getMyWalletList(); + }, [walletTable]); + useEffect(() => { // Getting market data const getMarketActiveJobList = async () => { diff --git a/src/store/walletDetails.js b/src/store/walletDetails.js index a6bc68c..0ca678d 100644 --- a/src/store/walletDetails.js +++ b/src/store/walletDetails.js @@ -1,18 +1,21 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { - walletDetails: {}, + walletDetails: { + loading: true, + data: [] + }, }; export const walletSlice = createSlice({ name: "walletDetails", initialState, reducers: { - viewWalletDetails: (state, action) => { + updateWalletDetails: (state, action) => { state.walletDetails = { ...action.payload }; }, }, }); -export const { viewWalletDetails } = walletSlice.actions; +export const { updateWalletDetails } = walletSlice.actions; export default walletSlice.reducer;