diff --git a/src/components/pages/Expense/Common/ExpenseLayout.js b/src/components/pages/Expense/Common/ExpenseLayout.js index 727eeb5..f0649df 100644 --- a/src/components/pages/Expense/Common/ExpenseLayout.js +++ b/src/components/pages/Expense/Common/ExpenseLayout.js @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import { Outlet } from 'react-router-dom'; - import '../Common/ExpenseLayout.css'; import TotalExpenseAmount from '../ExpenseAmount/TotalExpenseAmount'; @@ -8,14 +7,21 @@ const ExpenseLayout = () => { const [totalAmount, setTotalAmount] = useState(0); const [category, setCategory] = useState(''); + const handleManualAmountChange = (amount) => { + setTotalAmount(amount); + }; + return (
-
- - +
); }; diff --git a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js index 27a391e..c438113 100644 --- a/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/ExpenseAmount.js @@ -12,22 +12,16 @@ function ExpenseAmount() { const [totalAmount, setTotalAmount] = useOutletContext(); const [isClickable, setIsClickable] = useState(true); - const [lastAddedAmount, setLastAddedAmount] = useState(0); - const handleCoinClick = (amount) => { + const handleCoinClick = (coinAmount) => { if (isClickable) { - setTotalAmount((prevAmount) => prevAmount + amount); - setLastAddedAmount(amount); + // Update totalAmount based on coin click + const newAmount = parseFloat(totalAmount) + coinAmount; + setTotalAmount(newAmount); // Update the total amount setIsClickable(false); setTimeout(() => { setIsClickable(true); }, 500); - } - }; - - const handleSubtractClick = (amount) => { - if (totalAmount >= amount) { // Ensure you do not go negative - setTotalAmount((prevAmount) => prevAmount - amount); } }; @@ -73,15 +67,6 @@ function ExpenseAmount() {
1000
- -
- - -
); } diff --git a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js index c4a24f8..dd43170 100644 --- a/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js +++ b/src/components/pages/Expense/ExpenseAmount/TotalExpenseAmount.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import '../ExpenseAmount/TotalExpenseAmount.css'; -function TotalExpenseAmount({ totalAmount, category, setCategory }) { +function TotalExpenseAmount({ totalAmount, category, setCategory, handleManualAmountChange }) { const [amount, setAmount] = useState(totalAmount || ''); const location = useLocation(); const { entryType } = location.state || {}; @@ -118,7 +118,10 @@ function TotalExpenseAmount({ totalAmount, category, setCategory }) { id="amount-input" type="number" value={amount} - onChange={(e) => setAmount(e.target.value)} + onChange={(e) => { + setAmount(e.target.value); + handleManualAmountChange(e.target.value); // Ensure it's called properly + }} onMouseDown={handleAmountMouseDown} onDoubleClick={handleAmountDoubleClick} placeholder="Enter Amount"