diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index 1c4c0cd..211d656 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -1,101 +1,69 @@ -import React, { - Suspense, - lazy, - useCallback, - useEffect, - useMemo, - useReducer, - useState, -} from "react"; -import { Navigate, Outlet, Route, Routes } from "react-router-dom"; +import React, { Suspense, lazy, useCallback, useEffect, useState } from "react"; import usersService from "../../services/UsersService"; import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; - -// const AddFund = lazy(() => import("./AddFund")); -// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund")); -// const TransferFund = lazy(() => import("./TransferFund")); const WalletBox = lazy(() => import("./WalletBox")); -// const NairaWithdraw = lazy(() => import("./Popup/NairaWithdraw")); -// const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw")); -// const AddRecipient = lazy(() => import("./AddRecipient")); -// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer")); - -// function Wallet() { -// return ( -// -// -// -// ); -// } - -const initialState = { - loading: true, - data: [], - error: false, -}; - -// Currently learning better about useReducer, so I converted this since it seemed like something complex -const reducer = (state, action) => { - switch (action.type) { - case "FETCH_SUCCESS": - return { - ...state, - loading: false, - data: action.payload, - }; - case "FETCH_ERROR": - return { - ...state, - loading: false, - error: true, - }; - default: - return state; - } -}; const WalletRoutes = () => { const apiCall = new usersService(); - const [walletList, setWalletList] = useState({loading: true, data: []}); - const [paymentHistory, setPaymentHistory] = useState({loading: true, data: []}); + const [walletList, setWalletList] = useState({ loading: true, data: [] }); + const [paymentHistory, setPaymentHistory] = useState({ + loading: true, + data: [], + }); - const getWalletList = () => { - apiCall + const getWalletList = useCallback(() => { + return apiCall .getUserWallets() .then((res) => { if (res.data.internal_return < 0) { - setWalletList({loading: false, data: []}) + setWalletList({ loading: false, data: [] }); } else { - setWalletList({loading: false, data: res.data?.result_list}) + setWalletList({ loading: false, data: res.data?.result_list }); } }) .catch(() => { - setWalletList({loading: false, data: []}) + setWalletList({ loading: false, data: [] }); }); - } + }, [apiCall]); - const getPaymentHistory = () => { - apiCall + const getPaymentHistory = useCallback(() => { + return apiCall .getPaymentHx() .then((res) => { if (res.data.internal_return < 0) { - setPaymentHistory({loading: false, data: []}) + setPaymentHistory({ loading: false, data: [] }); } else { - setPaymentHistory({loading: false, data: res.data?.result_list}) + setPaymentHistory({ loading: false, data: res.data?.result_list }); } }) .catch(() => { - setPaymentHistory({loading: false, data: []}) + setPaymentHistory({ loading: false, data: [] }); }); - } + }, [apiCall]); useEffect(() => { - getWalletList(); - getPaymentHistory(); - }, []); + let isMounted = true; + const fetchData = async () => { + try { + await Promise.all([getWalletList(), getPaymentHistory()]); + } catch (error) { + console.error(error); + } finally { + if (isMounted) { + return (isMounted = false); + } + } + }; + + fetchData(); + + return () => { + isMounted = false; + }; + }, [getWalletList, getPaymentHistory]); return ( }>