made withdrawal a pop up

src/components/MyWallet/Wallet.jsx

@@ -5,8 +5,9 @@ import React, {
   useEffect,
   useMemo,
   useReducer,
+  useState,
 } from "react";
-import { Routes, Route, Outlet, Navigate } from "react-router-dom";
+import { Navigate, Outlet, Route, Routes } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -15,18 +16,18 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 // const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
 // const TransferFund = lazy(() => import("./TransferFund"));
 const WalletBox = lazy(() => import("./WalletBox"));
-const NairaWithdraw = lazy(() => import("./NairaWithdraw"));
-const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw"));
+// 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>
-  );
-}
+// function Wallet() {
+//   return (
+//     <Layout>
+//       <Outlet />
+//     </Layout>
+//   );
+// }
 
 const initialState = {
   loading: true,
@@ -55,99 +56,52 @@ const reducer = (state, action) => {
 };
 
 const WalletRoutes = () => {
-  const apiCall = useMemo(() => new usersService(), []);
+  const apiCall = new usersService();
 
-  const [walletList, dispatchWalletList] = useReducer(reducer, initialState);
-  const [paymentHistory, dispatchPaymentHistory] = useReducer(
-    reducer,
-    initialState
-  );
+  const [walletList, setWalletList] = useState({loading: true, data: []});
+  const [paymentHistory, setPaymentHistory] = useState({loading: true, data: []});
 
-  const getWalletList = useCallback(() => {
+  const getWalletList = () => {
     apiCall
-      .getUserWallets(null)
+      .getUserWallets()
       .then((res) => {
         if (res.data.internal_return < 0) {
-          dispatchWalletList({ type: "FETCH_SUCCESS", payload: [] });
+          setWalletList({loading: false, data: []})
         } else {
-          dispatchWalletList({
-            type: "FETCH_SUCCESS",
-            payload: res.data.result_list,
-          });
+          setWalletList({loading: false, data: res.data?.result_list})
         }
       })
       .catch(() => {
-        dispatchWalletList({ type: "FETCH_ERROR" });
+        setWalletList({loading: false, data: []})
       });
-  }, [apiCall]);
+  }
 
-  const getPaymentHistory = useCallback(() => {
+  const getPaymentHistory = () => {
     apiCall
       .getPaymentHx()
       .then((res) => {
         if (res.data.internal_return < 0) {
-          dispatchPaymentHistory({ type: "FETCH_SUCCESS", payload: [] });
+          setPaymentHistory({loading: false, data: []})
         } else {
-          dispatchPaymentHistory({
-            type: "FETCH_SUCCESS",
-            payload: res.data.result_list,
-          });
+          setPaymentHistory({loading: false, data: res.data?.result_list})
         }
       })
       .catch(() => {
-        dispatchPaymentHistory({ type: "FETCH_ERROR" });
+        setPaymentHistory({loading: false, data: []})
       });
-  }, [apiCall]);
+  }
 
   useEffect(() => {
-    let isMounted = true;
-
-    if (isMounted) {
-      getWalletList();
-      getPaymentHistory();
-    }
-
-    return () => {
-      isMounted = false;
-    };
-  }, [getWalletList, getPaymentHistory]);
+    getWalletList();
+    getPaymentHistory();
+  }, []);
 
   return (
-    <Routes>
-      <Route
-        element={
-          <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-            <Wallet />
-          </Suspense>
-        }
-      >
-        <Route
-          index
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <WalletBox wallet={walletList} payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route
-          path="withdraw-naira"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <NairaWithdraw wallet={walletList} payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route
-          path="withdraw-naira/confirm-withdraw-naira"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <ConfirmNairaWithdraw wallet={walletList} payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route path="*" element={<Navigate to="/" />} />
-      </Route>
-    </Routes>
+    <Layout>
+      <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
+        <WalletBox wallet={walletList} payment={paymentHistory} />
+      </Suspense>
+    </Layout>
   );
 };