Wallet modifications and Intro to Credit Popup
This commit is contained in:
@@ -1,85 +1,176 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import {Routes, Route, Outlet, Navigate} from 'react-router-dom'
|
||||
import usersService from '../../services/UsersService'
|
||||
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";
|
||||
|
||||
import Layout from '../Partials/Layout'
|
||||
|
||||
import Balance from './Balance'
|
||||
import TransferFund from './TransferFund'
|
||||
import AddFund from './AddFund'
|
||||
import AddRecipient from './AddRecipient'
|
||||
import ConfirmTransfer from './ConfirmTransfer'
|
||||
import ConfirmAddFund from './ConfirmAddFund'
|
||||
import WalletBox from "./WalletBox";
|
||||
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 />
|
||||
<Outlet />
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const initialState = {
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false,
|
||||
};
|
||||
|
||||
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 apiCall = useMemo(() => new usersService(), []);
|
||||
|
||||
let [walletList, setWalletList] = useState({ // FOR WALLET LIST
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false
|
||||
})
|
||||
const [walletList, dispatchWalletList] = useReducer(reducer, initialState);
|
||||
const [paymentHistory, dispatchPaymentHistory] = useReducer(
|
||||
reducer,
|
||||
initialState
|
||||
);
|
||||
|
||||
let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false
|
||||
})
|
||||
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]);
|
||||
|
||||
//FUNCTION TO GET WALLET LIST
|
||||
const getWalletList = ()=>{
|
||||
apiCall.getUserWallets(null).then((res)=>{
|
||||
if(res.data.internal_return < 0){ // success but no data
|
||||
setWalletList(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
setWalletList(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setWalletList(prev => ({...prev, loading: false, error: true}))
|
||||
})
|
||||
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();
|
||||
}
|
||||
|
||||
//FUNCTION TO GET PAYMENT HISTORY
|
||||
const getPaymentHistory = ()=>{
|
||||
apiCall.getPaymentHx().then((res)=>{
|
||||
if(res.data.internal_return < 0){ // success but no data
|
||||
setPaymentHistory(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
setPaymentHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setPaymentHistory(prev => ({...prev, loading: false, error: true}))
|
||||
})
|
||||
}
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [getWalletList, getPaymentHistory]);
|
||||
|
||||
useEffect(()=>{
|
||||
getWalletList()
|
||||
getPaymentHistory()
|
||||
}, [])
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<Wallet />}>
|
||||
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
|
||||
<Route path='add-fund/confirm-add-fund' element={<ConfirmAddFund payment={paymentHistory} />} />
|
||||
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
|
||||
{/*<Route index element={<Balance wallet={walletList} />} />*/}
|
||||
<Route index element={<WalletBox wallet={walletList} />} />
|
||||
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
|
||||
<Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
|
||||
<Route path='*' element={<Navigate to='/' />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Routes>
|
||||
<Route
|
||||
element={
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
<Wallet />
|
||||
</Suspense>
|
||||
}
|
||||
>
|
||||
{/* <Route
|
||||
path="add-fund"
|
||||
element={
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
<AddFund payment={paymentHistory} />
|
||||
</Suspense>
|
||||
}
|
||||
/> */}
|
||||
<Route
|
||||
path="add-fund/confirm-add-fund"
|
||||
element={
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
<ConfirmAddFund payment={paymentHistory} />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="transfer-fund"
|
||||
element={
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
<TransferFund payment={paymentHistory} wallet={walletList} />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
{/*<Route index element={<Balance wallet={walletList} />} />*/}
|
||||
<Route
|
||||
index
|
||||
element={
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
<WalletBox wallet={walletList} payment={paymentHistory} />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="transfer-fund/add-recipient"
|
||||
element={
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
<AddRecipient />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="transfer-fund/confirm-transfer"
|
||||
element={
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
<ConfirmTransfer payment={paymentHistory} wallet={walletList} />
|
||||
</Suspense>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
export default WalletRoutes
|
||||
export default WalletRoutes;
|
||||
Reference in New Issue
Block a user