transaction tile

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<HTMLDivElement>) {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+}
+
+export function CSVUpload({ show, closeModal }: { show: boolean, closeModal: (added: boolean) => void }) {
     const [error, setError] = useState<string | null>();
     const [successMsg, setSuccessMsg] = useState<string | null>();
 
+    const [added, setAdded] = useState<boolean>(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 <Modal show={show} onHide={closeModal}>
+    return <Modal show={show} onHide={() => closeModal(added)}>
         <Modal.Header closeButton>
             <Modal.Title>Upload CSV Transactions</Modal.Title>
         </Modal.Header>
@@ -61,7 +69,7 @@ export function CSVUpload({ show, closeModal }: { show: boolean, closeModal: ()
             {error && <Alert variant="danger">{error}</Alert>}
         </Modal.Body>
         <Modal.Footer>
-            <Button variant="secondary" onClick={closeModal}>Close</Button>
+            <Button variant="secondary" onClick={() => closeModal(added)}>Close</Button>
             <Button variant="primary" onClick={handleUpload}>Upload CSV</Button>
         </Modal.Footer>
     </Modal>

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<string>("");
     const [category, setCategory] = useState<string>("Income");
 
@@ -17,6 +17,8 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod
     const [error, setError] = useState<string | null>("");
     const [successMsg, setSuccessMsg] = useState<string | null>("");
 
+    const [added, setAdded] = useState<boolean>(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 <Modal show={show} onHide={closeModal}>
+    return <Modal show={show} onHide={() => closeModal(added)}>
         <Modal.Header closeButton>
             <Modal.Title>Add Transaction</Modal.Title>
         </Modal.Header>
@@ -76,7 +80,7 @@ export function InputTransaction({ show, closeModal }: { show: boolean, closeMod
             {error && <Alert variant="danger">{error}</Alert>}
         </Modal.Body>
         <Modal.Footer>
-            <Button variant="secondary" onClick={closeModal}>Close</Button>
+            <Button variant="secondary" onClick={() => closeModal(added)}>Close</Button>
             <Button variant="primary" onClick={addTransaction}>Add Transaction</Button>
         </Modal.Footer>
     </Modal>

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<React.SetStateAction<boolean>>) {
+        setShow(false);
+        if (added) updateTransactions();
     }
+    const onCSVModalClose = (added: boolean) => closeModal(added, setShowCSVModal)
+    const onTransactionModalClose = (added: boolean) => closeModal(added, setShowTransactionModal)
 
-    return <>
+    return <div className="card w-100 h-100" onPointerDown={showCSVModal || showTransactionModal ? stopDragging : undefined}>
         <CSVUpload show={showCSVModal} closeModal={onCSVModalClose}/>
         <InputTransaction show={showTransactionModal} closeModal={onTransactionModalClose}/>
-        <button onClick={() => setShowCSVModal(true)}>Upload CSV</button>
-        <button onClick={() => setShowTransactionModal(true)}>Add Transaction</button>
-    </>
+        <div className="card-header w-100 fw-bold align">Import</div>
+        <div className="card-body p-1 align-content-center">
+            <button className="btn btn-primary w-100 mb-2" onClick={() => setShowCSVModal(true)}>Upload CSV</button>
+            <button className="btn btn-primary w-100" onClick={() => setShowTransactionModal(true)}>Add Transaction</button>
+        </div>
+    </div>
 }

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<HTMLDivElement>) => {
-        e.stopPropagation();
-        e.nativeEvent.stopImmediatePropagation();
-    }
-
     return <>
         <div className={"card-header w-100 fw-bold"}>
             Goals
@@ -63,7 +59,7 @@ export default function goalSettingTile(userPrefs: UserPrefs, forceUpdate: () =>
             </li>
             <li className="list-group-item align-content-stretch" style={{height: "33%"}}>
                 <div className="w-100"
-                     onPointerDown={stop}> {/* THIS LINE TOOK 1.5H */}
+                     onPointerDown={stopDragging}> {/* THIS LINE TOOK 1.5H */}
                     <MultiRangeSlider
                         ruler={false}
                         label={false}