The third section contains functions to manage the visibility and content of the TransactionModal component (located in /src/components/TransactionsTab/TransactionModal.js) as follows:
...
showTransactionModal(transactionId) {
this.state.activeTransactionId = transactionId || 0;
const transactModal = document.querySelector('#transactionModal');
UIkit.modal(transactModal).show();
},
hideTransactionModal() {
this.state.activeTransactionId = 0;
const transactModal = document.querySelector('#transactionModal');
UIkit.modal(transactModal).hide();
},
getActiveTransaction() {
const { transactions, activeTransactionId } = this.state;
const foundTransaction = transactions.find(transaction =>
transaction.id === activeTransactionId);
return foundTransaction || { id: 0 };
},
...
The showTransactionModal() and hideTransactionModal() functions should be self-explanatory. The hide() or show() method of UIkit.modal() is called on the DOM element representing the TransactionModal. The getActiveTransaction() function returns the transaction record associated with the activeTransactionId value in global state.