137 lines
3.2 KiB
React
137 lines
3.2 KiB
React
import React, {
|
|
Suspense,
|
|
lazy,
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useReducer,
|
|
} from "react";
|
|
import { Routes, Route, Outlet, Navigate } from "react-router-dom";
|
|
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 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 = useMemo(() => new usersService(), []);
|
|
|
|
const [walletList, dispatchWalletList] = useReducer(reducer, initialState);
|
|
const [paymentHistory, dispatchPaymentHistory] = useReducer(
|
|
reducer,
|
|
initialState
|
|
);
|
|
|
|
const getWalletList = useCallback(() => {
|
|
apiCall
|
|
.getUserWallets(null)
|
|
.then((res) => {
|
|
if (res.data.internal_return < 0) {
|
|
dispatchWalletList({ type: "FETCH_SUCCESS", payload: [] });
|
|
} else {
|
|
dispatchWalletList({
|
|
type: "FETCH_SUCCESS",
|
|
payload: res.data.result_list,
|
|
});
|
|
}
|
|
})
|
|
.catch(() => {
|
|
dispatchWalletList({ type: "FETCH_ERROR" });
|
|
});
|
|
}, [apiCall]);
|
|
|
|
const getPaymentHistory = useCallback(() => {
|
|
apiCall
|
|
.getPaymentHx()
|
|
.then((res) => {
|
|
if (res.data.internal_return < 0) {
|
|
dispatchPaymentHistory({ type: "FETCH_SUCCESS", payload: [] });
|
|
} else {
|
|
dispatchPaymentHistory({
|
|
type: "FETCH_SUCCESS",
|
|
payload: res.data.result_list,
|
|
});
|
|
}
|
|
})
|
|
.catch(() => {
|
|
dispatchPaymentHistory({ type: "FETCH_ERROR" });
|
|
});
|
|
}, [apiCall]);
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
if (isMounted) {
|
|
getWalletList();
|
|
getPaymentHistory();
|
|
}
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, [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="*" element={<Navigate to="/" />} />
|
|
</Route>
|
|
</Routes>
|
|
);
|
|
};
|
|
|
|
export default WalletRoutes;
|