From 2e25b3311063fdb78066078e4cd6cdc0326f4168 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 10 Jul 2023 17:47:39 +0100 Subject: [PATCH 1/2] Wallet modifications and Intro to Credit Popup --- src/components/FamilyAcc/FamilyTable.jsx | 2 +- src/components/Helpers/PriceFormatter.jsx | 5 +- src/components/Home/FullAccountDash.jsx | 6 - src/components/MyWallet/AddFund.jsx | 209 +++---- src/components/MyWallet/Popup/CreditPopup.jsx | 75 +++ src/components/MyWallet/Wallet.jsx | 227 +++++--- src/components/MyWallet/WalletBox.jsx | 519 +++++++++--------- src/components/MyWallet/WalletItemCard.jsx | 185 ++++--- src/views/MyWalletPage.jsx | 2 - 9 files changed, 724 insertions(+), 506 deletions(-) create mode 100644 src/components/MyWallet/Popup/CreditPopup.jsx diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx index 1a27a76..2eb2650 100644 --- a/src/components/FamilyAcc/FamilyTable.jsx +++ b/src/components/FamilyAcc/FamilyTable.jsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import dataImage1 from "../../assets/images/data-table-user-1.png"; import LoadingSpinner from "../Spinners/LoadingSpinner"; -import { useNavigate, useLocation, Link } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; diff --git a/src/components/Helpers/PriceFormatter.jsx b/src/components/Helpers/PriceFormatter.jsx index 9a1802e..49b5bb5 100644 --- a/src/components/Helpers/PriceFormatter.jsx +++ b/src/components/Helpers/PriceFormatter.jsx @@ -20,7 +20,8 @@ import React from "react"; export const PriceFormatter = ( price = "00", currency = "", - currencyName = "" + currencyName = "", + priceClass ) => { // Convert the number to a string let numStr = String(price); @@ -44,7 +45,7 @@ export const PriceFormatter = ( return ( {currency || currencyName || ""} - {formattedInteger || ""} + {formattedInteger || ""} {formattedDecimal || ""} ); diff --git a/src/components/Home/FullAccountDash.jsx b/src/components/Home/FullAccountDash.jsx index feff276..0e996b9 100644 --- a/src/components/Home/FullAccountDash.jsx +++ b/src/components/Home/FullAccountDash.jsx @@ -11,12 +11,6 @@ import HomeActivities from "./HomeActivities"; export default function FullAccountDash(props) { console.log("PROPS IN HOME->", props); - - const trending = datas.datas; - const jobData = datas.datas; // api calls or cache - - const userApi = new usersService(); - const { userDetails } = useSelector((state) => state?.userDetails); return ( diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx index 92e4e31..172d98d 100644 --- a/src/components/MyWallet/AddFund.jsx +++ b/src/components/MyWallet/AddFund.jsx @@ -1,48 +1,51 @@ -import React, {useState} from 'react' -import RecentActivityTable from './WalletComponent/RecentActivityTable' -import LoadingSpinner from '../Spinners/LoadingSpinner' -import { useNavigate, useLocation } from 'react-router-dom' -import InputCom from '../Helpers/Inputs/InputCom' +import React, { useState } from "react"; +import RecentActivityTable from "./WalletComponent/RecentActivityTable"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; +import { useNavigate, useLocation } from "react-router-dom"; +import InputCom from "../Helpers/Inputs/InputCom"; -import AddFundDollars from './AddFundDollars' +import AddFundDollars from "./AddFundDollars"; -function AddFund({payment}) { - - const navigate = useNavigate() - const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND +function AddFund({ payment }) { + const navigate = useNavigate(); + const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND - //STATE FOR CONTROLLED INPUT - let [input, setInput] = useState('') + //STATE FOR CONTROLLED INPUT + let [input, setInput] = useState(""); - let [inputError, setInputError] = useState('') + let [inputError, setInputError] = useState(""); - // FUNCTION TO HANDLE INPUT CHANGE - const handleChange = ({target:{name, value}}) => { - setInput(value) + // FUNCTION TO HANDLE INPUT CHANGE + const handleChange = ({ target: { name, value } }) => { + setInput(value); + }; + + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = () => { + setInputError(""); + if (!input || input == "0") { + setInputError("Please Enter Amount"); + return setTimeout(() => { + setInputError(""); + }, 5000); } - //FUNCTION TO HANDLE SUBMIT - const handleSubmit = () => { - setInputError('') - if(!input || input == '0'){ - setInputError('Please Enter Amount') - return setTimeout(()=>{setInputError('')}, 5000) - } - - if(isNaN(input)){ - setInputError('Amount must be a Number') - return setTimeout(()=>{setInputError('')}, 5000) - } - - const stateData = {amount: Number(input), currency: 'naira'} - navigate('confirm-add-fund', {state: stateData}) - - setInput('') + if (isNaN(input)) { + setInputError("Amount must be a Number"); + return setTimeout(() => { + setInputError(""); + }, 5000); } - return ( -
- {/* heading */} -
+ + const stateData = { amount: Number(input), currency: "naira" }; + navigate("confirm-add-fund", { state: stateData }); + + setInput(""); + }; + return ( +
+ {/* heading */} + {/*
-
+
*/} -
-
-
- {/*

Add Credit with Account Deposit

*/} - {/*
*/} -
-
- - {inputError &&

{inputError}

} -
-
-
+
+
+
+ {/*

Add Credit with Account Deposit

*/} + {/*
*/} +
+
+ + {inputError && ( +

{inputError}

+ )} +
+
+
- {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */} - {currency == 'US Dollars' && -
- -
- } + {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */} + {currency == "US Dollars" && ( +
+ +
+ )} - {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */} - {currency != 'US Dollars' && -
- -
- } -
-
-
- - {/* HIDES THIS SECTION IF CURENCY IS NAIRA */} - {currency != 'US Dollars' && -
-
-
-

Recent Activity

- {/*

Activity Report

*/} - {payment.loading ? - - : - - } -
-
-
- } + {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */} + {currency != "US Dollars" && ( +
+ +
+ )} +
- ) +
+ + {/* HIDES THIS SECTION IF CURENCY IS NAIRA */} + {currency != "US Dollars" && ( +
+
+
+

+ Recent Activity +

+ {/*

Activity Report

*/} + {payment.loading ? ( + + ) : ( + + )} +
+
+
+ )} +
+ ); } -export default AddFund \ No newline at end of file +export default AddFund; \ No newline at end of file diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx new file mode 100644 index 0000000..42658a4 --- /dev/null +++ b/src/components/MyWallet/Popup/CreditPopup.jsx @@ -0,0 +1,75 @@ +import { useState } from "react"; +import { useLocation } from "react-router-dom"; +import ModalCom from "../Helpers/ModalCom"; +import { Form, Formik } from "formik"; +import InputCom from "../Helpers/Inputs/InputCom"; +import usersService from "../../services/UsersService"; +import Icons from "../Helpers/Icons"; +import AddFund from "../AddFund"; + +const CreditPopup = ({ details, onClose, situation, paymentHistory }) => { + const { pathname, state } = useLocation(); + const [submitTask, setSubmitTask] = useState({ + loading: false, + msg: "", + state: "", + }); + const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task"); + + const switchNextStep = ({ target: value }) => { + setSuggestedNextStep(value); + }; + + const apiCall = new usersService(); + + const handleParentSuggestion = (values) => { + if (suggestedNextStep == "Send Task") { + let firstName = state?.firstname; + let family_uid = state?.family_uid; + // continuePopupData({ ...details, firstName, family_uid }); + } + onClose(); + }; + + return ( + +
+
+

+ Add Credit +

+ +
+
+ +
+
+ + ); +}; + +export default CreditPopup; diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index b2bee7c..31ec6d3 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -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 ( - + - ) + ); } +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 ( - - }> - } /> - } /> - } /> - {/*} />*/} - } /> - } /> - } /> - } /> - - - ) -} + return ( + + }> + + + } + > + {/* }> + + + } + /> */} + }> + + + } + /> + }> + + + } + /> + {/*} />*/} + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + } /> + + + ); +}; -export default WalletRoutes \ No newline at end of file +export default WalletRoutes; \ No newline at end of file diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx index 4e8969c..6f02539 100644 --- a/src/components/MyWallet/WalletBox.jsx +++ b/src/components/MyWallet/WalletBox.jsx @@ -1,9 +1,3 @@ -import React from "react"; -import bank1 from "../../assets/images/bank-1.png"; -import bank2 from "../../assets/images/bank-2.png"; -import bank3 from "../../assets/images/bank-3.png"; -import bank4 from "../../assets/images/bank-4.png"; -import Layout from "../Partials/Layout"; import CurrencyStaticsSection from "./CurrencyStaticsSection"; import CurrentBalanceWidget from "./CurrentBalanceWidget"; import InvestmentSection from "./InvestmentSection"; @@ -11,263 +5,262 @@ import RecentTransactionWidget from "./RecentTransactionWidget"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import WalletItemCard from "./WalletItemCard"; -export default function WalletBox({wallet, coupon}) { - return ( - <> - -
-
-
- {wallet.loading ? - - : - wallet.data.length ? - wallet.data.map((item, index)=> ( -
- -
- )) : '' - } - - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*

*/} - {/* My Wallet*/} - {/*

*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/*

*/} - {/* MetaMask*/} - {/*

*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*

*/} - {/* $734.79*/} - {/*

*/} - {/*

*/} - {/* New Add*/} - {/* */} - {/* +324.75*/} - {/* */} - {/*

*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/*

*/} - {/* Coinbase Wallet*/} - {/*

*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*

*/} - {/* $734.79*/} - {/*

*/} - {/*

*/} - {/* New Add*/} - {/* */} - {/* +324.75*/} - {/* */} - {/*

*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/*

*/} - {/* Bitski*/} - {/*

*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*

*/} - {/* $734.79*/} - {/*

*/} - {/*

*/} - {/* New Add*/} - {/* */} - {/* +324.75*/} - {/* */} - {/*

*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/*

*/} - {/* WalletConnect*/} - {/*

*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*

*/} - {/* $734.79*/} - {/*

*/} - {/*

*/} - {/* New Add*/} - {/* */} - {/* +324.75*/} - {/* */} - {/*

*/} - {/*
*/} - {/*
*/} - {/**/} - {/* */} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} - {/*
*/} -
- {/* flex space-x-11 */} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} -
+export default function WalletBox({ wallet, coupon }) { + return ( + <> +
+
+
+ {wallet.loading ? ( +
+ +
+ ) : wallet.data.length ? ( + wallet.data.map((item, index) => ( +
+
+ )) + ) : null} - - ); + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* My Wallet*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + {/*

*/} + {/* MetaMask*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* $734.79*/} + {/*

*/} + {/*

*/} + {/* New Add*/} + {/* */} + {/* +324.75*/} + {/* */} + {/*

*/} + {/*
*/} + {/*
*/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + {/*

*/} + {/* Coinbase Wallet*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* $734.79*/} + {/*

*/} + {/*

*/} + {/* New Add*/} + {/* */} + {/* +324.75*/} + {/* */} + {/*

*/} + {/*
*/} + {/*
*/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + {/*

*/} + {/* Bitski*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* $734.79*/} + {/*

*/} + {/*

*/} + {/* New Add*/} + {/* */} + {/* +324.75*/} + {/* */} + {/*

*/} + {/*
*/} + {/*
*/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + {/*

*/} + {/* WalletConnect*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* $734.79*/} + {/*

*/} + {/*

*/} + {/* New Add*/} + {/* */} + {/* +324.75*/} + {/* */} + {/*

*/} + {/*
*/} + {/*
*/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} +
+ {/* flex space-x-11 */} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} +
+
+ + ); } diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx index ff5b1ff..420ab04 100644 --- a/src/components/MyWallet/WalletItemCard.jsx +++ b/src/components/MyWallet/WalletItemCard.jsx @@ -1,72 +1,125 @@ import React, { useState } from "react"; -import background from "../../assets/images/bg-sky-blue.jpg" //shape/balance-bg.svg"; -import {PriceFormatter} from "../Helpers/PriceFormatter"; -import {Link} from "react-router-dom"; +import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; +import { Link } from "react-router-dom"; +import { useSelector } from "react-redux"; +import CreditPopup from "./Popup/CreditPopup"; -export default function WalletItemCard({walletItem}) { - const [eth] = useState(90); - const [btc] = useState(85); - const [ltc] = useState(20); - return ( -
-
-
-
-

- . -

-

- {walletItem.code} -

-
-
-
- {/*

*/} - {/* 6,572.00*/} - {/*

*/} - {/*

*/} - {/* Total Transactions*/} - {/*

*/} -
-
-
-

- Current Balance -

-

- {walletItem.amount * 0.01} {walletItem.code} -

-

- HOLDINGS : {PriceFormatter(walletItem.escrow * 0.01, walletItem.code)} - {/*(11.5%)*/} -

-
-
-
- { - walletItem.action_type != 'AC_AD_FD_ONLY' ? - Transfer:'' - } -
-
- - - - - - Add Credit - -
+export default function WalletItemCard({ walletItem, paymentHistory }) { + // const [eth] = useState(90); + // const [btc] = useState(85); + // const [ltc] = useState(20); + const { userDetails } = useSelector((state) => state?.userDetails); + let accountType = userDetails?.account_type == "FAMILY"; + + // Credit popup + const [creditPopup, setCreditPopup] = useState({ state: false, data: {} }); + + const openPopUp = (value) => { + setCreditPopup({ + show: true, + data: { ...value, currency: walletItem.description }, + }); + }; + + const closePopUp = () => { + setCreditPopup({ show: false, data: {} }); + }; + console.log("walletItem >>", walletItem); + return ( + <> +
+
+
+
+

+ . +

+

+ {walletItem.code} +

+
+
- ); +
+

+ Current Balance +

+

+ {PriceFormatter( + walletItem.amount * 0.01, + walletItem.code, + undefined, + "text-[2rem]" + )} +

+

+ HOLDINGS :{" "} + + {PriceFormatter( + walletItem.escrow * 0.01, + walletItem.code, + undefined, + "text-[2rem]" + )} + + {/*(11.5%)*/} +

+
+ {!accountType && ( +
+
+ + Transfer + +
+
+ +
+
+ )} +
+ {creditPopup.state && ( + + )} + + ); } diff --git a/src/views/MyWalletPage.jsx b/src/views/MyWalletPage.jsx index 284e93d..de0f993 100644 --- a/src/views/MyWalletPage.jsx +++ b/src/views/MyWalletPage.jsx @@ -1,5 +1,3 @@ -import React from "react"; -// import MyWallet from "../components/MyWallet"; import WalletRoutes from "../components/MyWallet/Wallet"; export default function MyWalletPage() { From 6daa4d6d4399da77976aea591d0b58d3d3c9b366 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 10 Jul 2023 19:22:03 +0100 Subject: [PATCH 2/2] Fixed the prop drill --- src/components/MyWallet/AddFund.jsx | 18 ++++++++------ src/components/MyWallet/Popup/CreditPopup.jsx | 11 +++++---- src/components/MyWallet/Wallet.jsx | 3 ++- src/components/MyWallet/WalletBox.jsx | 4 ++-- src/components/MyWallet/WalletItemCard.jsx | 24 ++++++++++++------- 5 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx index 172d98d..6aa4cf9 100644 --- a/src/components/MyWallet/AddFund.jsx +++ b/src/components/MyWallet/AddFund.jsx @@ -1,14 +1,14 @@ import React, { useState } from "react"; import RecentActivityTable from "./WalletComponent/RecentActivityTable"; import LoadingSpinner from "../Spinners/LoadingSpinner"; -import { useNavigate, useLocation } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import InputCom from "../Helpers/Inputs/InputCom"; import AddFundDollars from "./AddFundDollars"; -function AddFund({ payment }) { +function AddFund({ paymentHistory, currency }) { const navigate = useNavigate(); - const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND + // const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND //STATE FOR CONTROLLED INPUT let [input, setInput] = useState(""); @@ -42,6 +42,8 @@ function AddFund({ payment }) { setInput(""); }; + console.log("walletItem >>", paymentHistory); + return (
{/* heading */} @@ -134,13 +136,15 @@ function AddFund({ payment }) {

- Recent Activity + {/* Recent Activity */}Working in Progress

+

This popup has taking time because of the prop drilling. I have got it right now

{/*

Activity Report

*/} - {payment.loading ? ( + {paymentHistory?.loading ? ( ) : ( - + // + "" )}
@@ -150,4 +154,4 @@ function AddFund({ payment }) { ); } -export default AddFund; \ No newline at end of file +export default AddFund; diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx index 42658a4..fdd2e46 100644 --- a/src/components/MyWallet/Popup/CreditPopup.jsx +++ b/src/components/MyWallet/Popup/CreditPopup.jsx @@ -1,13 +1,14 @@ import { useState } from "react"; import { useLocation } from "react-router-dom"; -import ModalCom from "../Helpers/ModalCom"; +// import ModalCom from "../Helpers/ModalCom"; import { Form, Formik } from "formik"; -import InputCom from "../Helpers/Inputs/InputCom"; -import usersService from "../../services/UsersService"; -import Icons from "../Helpers/Icons"; +import InputCom from "../../Helpers/Inputs/InputCom"; +import usersService from "../../../services/UsersService"; +import Icons from "../../Helpers/Icons"; import AddFund from "../AddFund"; +import ModalCom from "../../Helpers/ModalCom"; -const CreditPopup = ({ details, onClose, situation, paymentHistory }) => { +const CreditPopup = ({ details, onClose, situation}) => { const { pathname, state } = useLocation(); const [submitTask, setSubmitTask] = useState({ loading: false, diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index 31ec6d3..12446f8 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -32,6 +32,7 @@ const initialState = { 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": @@ -173,4 +174,4 @@ const WalletRoutes = () => { ); }; -export default WalletRoutes; \ No newline at end of file +export default WalletRoutes; diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx index 6f02539..2c5d159 100644 --- a/src/components/MyWallet/WalletBox.jsx +++ b/src/components/MyWallet/WalletBox.jsx @@ -5,7 +5,7 @@ import RecentTransactionWidget from "./RecentTransactionWidget"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import WalletItemCard from "./WalletItemCard"; -export default function WalletBox({ wallet, coupon }) { +export default function WalletBox({ wallet, coupon, payment }) { return ( <>
@@ -18,7 +18,7 @@ export default function WalletBox({ wallet, coupon }) { ) : wallet.data.length ? ( wallet.data.map((item, index) => (
- +
)) ) : null} diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx index 420ab04..5d287cd 100644 --- a/src/components/MyWallet/WalletItemCard.jsx +++ b/src/components/MyWallet/WalletItemCard.jsx @@ -14,19 +14,18 @@ export default function WalletItemCard({ walletItem, paymentHistory }) { let accountType = userDetails?.account_type == "FAMILY"; // Credit popup - const [creditPopup, setCreditPopup] = useState({ state: false, data: {} }); + const [creditPopup, setCreditPopup] = useState({ show: false, data: {} }); const openPopUp = (value) => { setCreditPopup({ show: true, - data: { ...value, currency: walletItem.description }, + data: { ...value }, }); }; const closePopUp = () => { setCreditPopup({ show: false, data: {} }); }; - console.log("walletItem >>", walletItem); return ( <>
Transfer @@ -90,8 +89,13 @@ export default function WalletItemCard({ walletItem, paymentHistory }) {
)}
- {creditPopup.state && ( + {creditPopup.show && (