From 6daa4d6d4399da77976aea591d0b58d3d3c9b366 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 10 Jul 2023 19:22:03 +0100 Subject: [PATCH] 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 && (