Wallet update

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 (
-//     <Layout>
-//       <Outlet />
-//     </Layout>
-//   );
-// }
-
-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 (
     <Layout>
       <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>