[Maintenance] Update TransactionEdit conponent onEdit function to use…

… serialized transactions (#2555) * [Maintenance] Update onEdit to use serialized transactions * Release notes
actualbudget · Apr 6, 2024 · 2e600e5 · 2e600e5
1 parent b5f617d
commit 2e600e5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 47 deletions.
diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -495,10 +495,10 @@ const TransactionEditInner = memo(function TransactionEditInner({
   };
 
   const onSave = async () => {
-    const [transaction] = unserializedTransactions;
+    const [unserializedTransaction] = unserializedTransactions;
 
     const onConfirmSave = async () => {
-      const { account: accountId } = transaction;
+      const { account: accountId } = unserializedTransaction;
       const account = accountsById[accountId];
 
       if (unserializedTransactions.find(t => t.account == null)) {
@@ -516,7 +516,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
       navigate(`/accounts/${account.id}`, { replace: true });
     };
 
-    if (transaction.reconciled) {
+    if (unserializedTransaction.reconciled) {
       // On mobile any save gives the warning.
       // On the web only certain changes trigger a warning.
       // Should we bring that here as well? Or does the nature of the editing form
@@ -536,31 +536,22 @@ const TransactionEditInner = memo(function TransactionEditInner({
     onSave();
   };
 
-  const onEdit = async (transaction, name, value) => {
-    const newTransaction = { ...transaction, [name]: value };
+  const onEdit = async (serializedTransaction, name, value) => {
+    const newTransaction = { ...serializedTransaction, [name]: value };
     await props.onEdit(newTransaction);
     onClearActiveEdit();
   };
 
   const onClick = (transactionId, name) => {
     onRequestActiveEdit?.(getFieldName(transaction.id, name), () => {
-      const transaction = unserializedTransactions.find(
-        t => t.id === transactionId,
-      );
+      const transactionToEdit = transactions.find(t => t.id === transactionId);
       switch (name) {
         case 'category':
           dispatch(
             pushModal('category-autocomplete', {
               categoryGroups,
               onSelect: categoryId => {
-                // This is a deficiency of this API, need to fix. It
-                // assumes that it receives a serialized transaction,
-                // but we only have access to the raw transaction
-                onEdit(
-                  serializeTransaction(transaction, dateFormat),
-                  name,
-                  categoryId,
-                );
+                onEdit(transactionToEdit, name, categoryId);
               },
               onClose: () => {
                 onClearActiveEdit();
@@ -572,14 +563,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
           dispatch(
             pushModal('account-autocomplete', {
               onSelect: accountId => {
-                // This is a deficiency of this API, need to fix. It
-                // assumes that it receives a serialized transaction,
-                // but we only have access to the raw transaction
-                onEdit(
-                  serializeTransaction(transaction, dateFormat),
-                  name,
-                  accountId,
-                );
+                onEdit(transactionToEdit, name, accountId);
               },
               onClose: () => {
                 onClearActiveEdit();
@@ -591,14 +575,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
           dispatch(
             pushModal('payee-autocomplete', {
               onSelect: payeeId => {
-                // This is a deficiency of this API, need to fix. It
-                // assumes that it receives a serialized transaction,
-                // but we only have access to the raw transaction
-                onEdit(
-                  serializeTransaction(transaction, dateFormat),
-                  name,
-                  payeeId,
-                );
+                onEdit(transactionToEdit, name, payeeId);
               },
               onClose: () => {
                 onClearActiveEdit();
@@ -611,14 +588,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
             pushModal('edit-field', {
               name,
               onSubmit: (name, value) => {
-                // This is a deficiency of this API, need to fix. It
-                // assumes that it receives a serialized transaction,
-                // but we only have access to the raw transaction
-                onEdit(
-                  serializeTransaction(transaction, dateFormat),
-                  name,
-                  value,
-                );
+                onEdit(transactionToEdit, name, value);
               },
               onClose: () => {
                 onClearActiveEdit();
@@ -631,26 +601,26 @@ const TransactionEditInner = memo(function TransactionEditInner({
   };
 
   const onDelete = id => {
-    const [transaction, ..._childTransactions] = unserializedTransactions;
+    const [unserializedTransaction] = unserializedTransactions;
 
     const onConfirmDelete = () => {
       props.onDelete(id);
 
-      if (transaction.id !== id) {
+      if (unserializedTransaction.id !== id) {
         // Only a child transaction was deleted.
         onClearActiveEdit();
         return;
       }
 
-      const { account: accountId } = transaction;
+      const { account: accountId } = unserializedTransaction;
       if (accountId) {
         navigate(`/accounts/${accountId}`, { replace: true });
       } else {
         navigate(-1);
       }
     };
 
-    if (transaction.reconciled) {
+    if (unserializedTransaction.reconciled) {
       dispatch(
         pushModal('confirm-transaction-edit', {
           onConfirm: onConfirmDelete,
@@ -683,9 +653,11 @@ const TransactionEditInner = memo(function TransactionEditInner({
   };
 
   useEffect(() => {
-    const noAmountTransaction = childTransactions.find(t => t.amount === 0);
-    if (noAmountTransaction) {
-      scrollChildTransactionIntoView(noAmountTransaction.id);
+    const noAmountChildTransaction = childTransactions.find(
+      t => t.amount === 0,
+    );
+    if (noAmountChildTransaction) {
+      scrollChildTransactionIntoView(noAmountChildTransaction.id);
     }
   }, [childTransactions]);
 

diff --git a/upcoming-release-notes/2555.md b/upcoming-release-notes/2555.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Update TransactionEdit component onEdit function to use serialized transactions.