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 (
}>