diff --git a/src/components/transactions/CSVUpload.tsx b/src/components/transactions/CSVUpload.tsx index e905bd9..d8f3063 100644 --- a/src/components/transactions/CSVUpload.tsx +++ b/src/components/transactions/CSVUpload.tsx @@ -4,10 +4,17 @@ import { Alert, Button, Form, Modal } from "react-bootstrap"; import { writeNewTransactionsBatched } from "../../utils/transaction.ts"; import { auth } from "../../utils/firebase"; -export function CSVUpload({ show, closeModal }: { show: boolean, closeModal: () => void }) { +export function stopDragging(e: React.PointerEvent) { + e.stopPropagation(); + e.nativeEvent.stopImmediatePropagation(); +} + +export function CSVUpload({ show, closeModal }: { show: boolean, closeModal: (added: boolean) => void }) { const [error, setError] = useState(); const [successMsg, setSuccessMsg] = useState(); + const [added, setAdded] = useState(false); + const reader = new FileReader(); async function handleUpload() { @@ -43,12 +50,13 @@ export function CSVUpload({ show, closeModal }: { show: boolean, closeModal: () setTimeout(() => setSuccessMsg(null), 10000); fileElement.value = ""; + setAdded(true); }; reader.readAsText(file); }; - return + return closeModal(added)}> Upload CSV Transactions @@ -61,7 +69,7 @@ export function CSVUpload({ show, closeModal }: { show: boolean, closeModal: () {error && {error}} - + diff --git a/src/components/transactions/InputTransaction.tsx b/src/components/transactions/InputTransaction.tsx index 7a57cfb..2bba97f 100644 --- a/src/components/transactions/InputTransaction.tsx +++ b/src/components/transactions/InputTransaction.tsx @@ -4,7 +4,7 @@ import { Button, Modal, Form, Alert } from "react-bootstrap"; import { auth } from "../../utils/firebase"; import { writeNewTransaction } from "../../utils/transaction.ts"; -export function InputTransaction({ show, closeModal }: { show: boolean, closeModal: () => void }) { +export function InputTransaction({ show, closeModal }: { show: boolean, closeModal: (added: boolean) => void }) { const [name, setName] = useState(""); const [category, setCategory] = useState("Income"); @@ -17,6 +17,8 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod const [error, setError] = useState(""); const [successMsg, setSuccessMsg] = useState(""); + const [added, setAdded] = useState(false); + async function addTransaction() { setError(null); setSuccessMsg(null); @@ -53,9 +55,11 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod setDescription(""); setNotes(""); setAddress(""); + + setAdded(true); } - return + return closeModal(added)}> Add Transaction @@ -76,7 +80,7 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod {error && {error}} - + diff --git a/src/pages/dashboard/add transaction tile/AddTransactionTile.tsx b/src/pages/dashboard/add transaction tile/AddTransactionTile.tsx index 63850dc..9faf768 100644 --- a/src/pages/dashboard/add transaction tile/AddTransactionTile.tsx +++ b/src/pages/dashboard/add transaction tile/AddTransactionTile.tsx @@ -1,25 +1,25 @@ import {ReactNode, useState} from "react"; -import {CSVUpload} from "../../../components/transactions/CSVUpload.tsx"; +import {CSVUpload, stopDragging} from "../../../components/transactions/CSVUpload.tsx"; import {InputTransaction} from "../../../components/transactions/InputTransaction.tsx"; export default function AddTransactionTile(updateTransactions: () => void): ReactNode { const [showCSVModal, setShowCSVModal] = useState(false); const [showTransactionModal, setShowTransactionModal] = useState(false); - const onCSVModalClose = () => { - setShowCSVModal(false); - updateTransactions(); - }; - - const onTransactionModalClose = () => { - setShowTransactionModal(false); - updateTransactions(); + function closeModal(added: boolean, setShow: React.Dispatch>) { + setShow(false); + if (added) updateTransactions(); } + const onCSVModalClose = (added: boolean) => closeModal(added, setShowCSVModal) + const onTransactionModalClose = (added: boolean) => closeModal(added, setShowTransactionModal) - return <> + return
- - - +
Import
+
+ + +
+
} \ No newline at end of file diff --git a/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx b/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx index 2da8a0a..31f445d 100644 --- a/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx +++ b/src/pages/dashboard/goal setting tile/GoalSettingTile.tsx @@ -1,8 +1,9 @@ -import React, {ReactNode, useState} from "react"; +import {ReactNode, useState} from "react"; import {setUserPrefs, UserPrefs} from "../../../utils/user_prefs.ts"; import MultiRangeSlider, {ChangeResult} from "multi-range-slider-react"; import "./GoalsSettingTile.scss"; import {auth} from "../../../utils/firebase.ts"; +import { stopDragging } from "../../../components/transactions/CSVUpload.tsx"; export default function goalSettingTile(userPrefs: UserPrefs, forceUpdate: () => void): ReactNode { const [minValue, setMinValue] = useState( @@ -27,11 +28,6 @@ export default function goalSettingTile(userPrefs: UserPrefs, forceUpdate: () => setMaxValue(max); }; - const stop = (e: React.PointerEvent) => { - e.stopPropagation(); - e.nativeEvent.stopImmediatePropagation(); - } - return <>
Goals @@ -63,7 +59,7 @@ export default function goalSettingTile(userPrefs: UserPrefs, forceUpdate: () =>
  • {/* THIS LINE TOOK 1.5H */} + onPointerDown={stopDragging}> {/* THIS LINE TOOK 1.5H */}