Update transaction log UI when adding/removing transactions (#101)

* updating UI when using transaction buttons

* fixing transaction modal pushing down other components in dashboard

frontend/src/components/AddTransactionButton.jsx

@@ -60,10 +60,12 @@ export default function AddTransactionButton() {
         Add Transaction
       </button>
       {showForm && (
-        <TransactionForm
-          onSubmit={handleFormSubmit}
-          onCancel={() => setShowForm(false)}
-        />
+        <div className="absolute">
+          <TransactionForm
+            onSubmit={handleFormSubmit}
+            onCancel={() => setShowForm(false)}
+          />
+        </div>
       )}
     </>
   );

frontend/src/components/DeleteTransactionButton.jsx

@@ -2,7 +2,7 @@ import { useContext } from "react";
 import TransactionContext from "../context/TransactionContext";
 import axios from "axios";
 export default function DeleteTransactionButton() {
-  const { selectedTransactions, setSelectedTransactions } =
+  const { selectedTransactions, setSelectedTransactions, requestUiUpdate } =
     useContext(TransactionContext);
   const handleDeleteSelected = async () => {
     console.log("Transactions to delete:", selectedTransactions);
@@ -24,6 +24,7 @@ export default function DeleteTransactionButton() {
       await Promise.all(
         selectedTransactions.map((transactionId) =>
           axiosInstance.delete(`/transaction/${transactionId}`)
+            .then(requestUiUpdate())
         )
       );
       console.log("Transactions deleted successfully.");

frontend/src/context/TransactionContextProvider.jsx

@@ -14,6 +14,7 @@ export function TransactionContextProvider({ children }) {
   const [currentPage, setCurrentPage] = useState(1);
   const [filter, setFilter] = useState("");
   const [balance, setBalance] = useState(0);
+  const [uiUpdateRequest, setUiUpdateRequest] = useState(false);
 
   // fetch the balance from the server
   useEffect(() => {
@@ -26,7 +27,7 @@ export function TransactionContextProvider({ children }) {
         // If the user is not logged in (due to directly accessing dashboard path or token expiring), redirect to the login page
         window.location.href = "/login";
       });
-  }, [currency, balance]);
+  }, [currency, balance, transactions]);
 
   // fetch transactions from the server and filter them
   useEffect(() => {
@@ -43,12 +44,17 @@ export function TransactionContextProvider({ children }) {
           allTransactions = filterPastWeekTransactions(allTransactions);
         }
         setTransactions(allTransactions);
+        setUiUpdateRequest(false);
       })
       .catch((error) => {
         console.error("Not logged in ", error);
         window.location.href = "/login";
       });
-  }, [currentPage, filter]);
+  }, [currentPage, filter, balance, uiUpdateRequest]);
+
+  const requestUiUpdate = () => {
+    setUiUpdateRequest(true);
+  };
 
   //functions to filter transactions
   const filterYear = () => {
@@ -127,6 +133,7 @@ export function TransactionContextProvider({ children }) {
     setCurrency,
     convertCurrency, // returns a promise that resolves to the converted amount
     handleSelect, // function to handle the selection of transactions
+    requestUiUpdate, // call this function to request a UI update of the transactions if it is not done automatically
   };
 
   return (