diff --git a/src/constants/cashflowOptions.tsx b/src/constants/cashflowOptions.tsx index 54848865d..aa9e477f8 100644 --- a/src/constants/cashflowOptions.tsx +++ b/src/constants/cashflowOptions.tsx @@ -1,7 +1,7 @@ // @ts-nocheck import intl from 'react-intl-universal'; -export const addMoneyIn = [ +export const getAddMoneyInOptions = () => [ { name: intl.get('cash_flow.owner_contribution'), value: 'owner_contribution', @@ -16,7 +16,7 @@ export const addMoneyIn = [ }, ]; -export const addMoneyOut = [ +export const getAddMoneyOutOptions = () => [ { name: intl.get('cash_flow.owner_drawings'), value: 'OwnerDrawing', diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx index 43ec2bb9f..2a1763b84 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx +++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React from 'react'; +import React, { useMemo } from 'react'; import { Button, NavbarGroup, @@ -15,7 +15,10 @@ import { } from '@/components'; import { CashFlowMenuItems } from './utils'; -import { addMoneyIn, addMoneyOut } from '@/constants/cashflowOptions'; +import { + getAddMoneyOutOptions, + getAddMoneyInOptions, +} from '@/constants/cashflowOptions'; import { useRefreshCashflowTransactionsInfinity } from '@/hooks/query'; import { useAccountTransactionsContext } from './AccountTransactionsProvider'; @@ -41,6 +44,10 @@ function AccountTransactionsActionsBar({ }; const { accountId } = useAccountTransactionsContext(); + // Retrieves the money in/out buttons options. + const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []); + const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []); + // Handle money in form const handleMoneyInFormTransaction = (account) => { openDialog('money-in', { @@ -69,7 +76,7 @@ function AccountTransactionsActionsBar({ } buttonProps={{ @@ -77,7 +84,7 @@ function AccountTransactionsActionsBar({ }} /> } buttonProps={{ diff --git a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx index b28e871e1..65f121df8 100644 --- a/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx +++ b/src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React from 'react'; +import React, { useMemo } from 'react'; import intl from 'react-intl-universal'; import styled from 'styled-components'; import { isNull, isEmpty } from 'lodash'; @@ -22,7 +22,10 @@ import withAlertsActions from '@/containers/Alert/withAlertActions'; import withDialogActions from '@/containers/Dialog/withDialogActions'; import { safeCallback } from '@/utils'; -import { addMoneyIn, addMoneyOut } from '@/constants/cashflowOptions'; +import { + getAddMoneyInOptions, + getAddMoneyOutOptions, +} from '@/constants/cashflowOptions'; const CASHFLOW_SKELETON_N = 4; @@ -183,8 +186,10 @@ function CashflowAccountMoneyInContextMenu({ onClick }) { const handleItemClick = curry((transactionType, event) => { onClick && onClick(transactionType, event); }); + // Retreives the add money in button options. + const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []); - return addMoneyIn.map((option) => ( + return addMoneyInOptions.map((option) => ( )); } @@ -196,8 +201,10 @@ function CashflowAccountMoneyOutContextMenu({ onClick }) { const handleItemClick = curry((transactionType, event) => { onClick && onClick(transactionType, event); }); + // Retreives the add money out button options. + const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []); - return addMoneyOut.map((option) => ( + return addMoneyOutOptions.map((option) => ( )); } diff --git a/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.tsx b/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.tsx index 127e7bbb3..8a4c37ac4 100644 --- a/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.tsx +++ b/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React from 'react'; +import React, { useMemo } from 'react'; import { FastField, Field, ErrorMessage } from 'formik'; import { FormGroup } from '@blueprintjs/core'; import classNames from 'classnames'; @@ -12,7 +12,7 @@ import { Row, } from '@/components'; import { inputIntent } from '@/utils'; -import { CLASSES, addMoneyIn } from '@/constants'; +import { CLASSES, getAddMoneyInOptions } from '@/constants'; import { useMoneyInDailogContext } from './MoneyInDialogProvider'; @@ -23,6 +23,9 @@ export default function TransactionTypeFields() { // Money in dialog context. const { cashflowAccounts } = useMoneyInDailogContext(); + // Retrieves the add money in button options. + const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []); + return (
@@ -73,7 +76,7 @@ export default function TransactionTypeFields() { )} > { setFieldValue('transaction_type', type.value); }} diff --git a/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.tsx b/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.tsx index bd2c3179c..da51489b8 100644 --- a/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.tsx +++ b/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React from 'react'; +import React, { useMemo } from 'react'; import { FastField, Field, ErrorMessage } from 'formik'; import { FormGroup } from '@blueprintjs/core'; import classNames from 'classnames'; @@ -14,7 +14,7 @@ import { import { inputIntent } from '@/utils'; import { CLASSES } from '@/constants/classes'; -import { addMoneyOut } from '@/constants/cashflowOptions'; +import { getAddMoneyOutOptions } from '@/constants/cashflowOptions'; import { useMoneyOutDialogContext } from './MoneyOutDialogProvider'; @@ -25,6 +25,8 @@ function TransactionTypeFields() { // Money in dialog context. const { cashflowAccounts } = useMoneyOutDialogContext(); + const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []); + return (
@@ -75,7 +77,7 @@ function TransactionTypeFields() { )} > { setFieldValue('transaction_type', type.value); }}