Refactor to integrate current bank context across services and components

Author: d0rich

gui/config.ts

@@ -5,15 +5,15 @@ const config = {
     bic: 'TESTGETBXXX',
     client: {
       name: 'Marcus Vellon',
-      id: '226793bc-f5f4-4ce6-92fa-402ea8e486cc'
+      id: '1'
     }
   },
   bankB: {
     name: 'Bank B' as const,
     bic: 'TESTUKLLXXX',
     client: {
       name: 'Lena Brightfield',
-      id: 'd4e5f6g7-h8i9-0j1k-2l3m-4n5o6p7q8r9s'
+      id: '2'
     }
   }
 }

gui/src/components/TransferFundsWidget.vue

@@ -8,8 +8,9 @@ import { fetchTransactionFormData, newTransaction } from '../services/transactio
 import type { Account, Currency } from '../services/mock-backend/types'
 import { calculateExchangeValue } from '../utils/calculateExchangeValue'
 import { useToasts } from '../composables/useToasts'
+import { useCurrentBank } from '../composables/useCurrentBank'
 
-const { state: utils } = useAsyncState(fetchTransactionFormData(), null)
+const { state: utils } = useAsyncState(fetchTransactionFormData(useCurrentBank()), null)
 
 const { addToast } = useToasts()
 
@@ -81,7 +82,7 @@ async function startTransaction() {
   }
   isSending.value = true
   try {
-    await newTransaction({
+    await newTransaction(useCurrentBank(), {
       debtor: {
         bic: ownBic,
         accountId: chosenAccount.value.id,

gui/src/composables/useClientInfo.ts

@@ -1,16 +1,19 @@
 import { useAsyncState } from '@vueuse/core'
 import { useRoute } from 'vue-router'
 import { fetchClientData } from '../services/clients'
+import { useCurrentBank } from './useCurrentBank'
 
 export function useClientInfo() {
   const route = useRoute()
   const clientId = route.meta.clientId as string
 
-  const { state: client, isLoading } = useAsyncState(() => fetchClientData(clientId), null)
+  const currentBank = useCurrentBank()
+
+  const { state: client, isLoading } = useAsyncState(() => fetchClientData(currentBank, clientId), null)
 
   async function refresh() {
     isLoading.value = true
-    const newData = await fetchClientData(clientId)
+    const newData = await fetchClientData(currentBank, clientId)
     if (JSON.stringify(newData) === JSON.stringify(client.value)) {
       isLoading.value = false
       return

gui/src/composables/useCurrentBank.ts

@@ -0,0 +1,7 @@
+import { useRoute } from 'vue-router'
+import { type BankName } from '../../config.js'
+
+export function useCurrentBank(): BankName {
+  const route = useRoute()
+  return route.meta.bankName as BankName
+}

gui/src/pages/admin/TransactionStatusPage.vue

@@ -7,14 +7,18 @@ import { computed, ref } from 'vue'
 import { formatAccountBalance } from '../../utils/formatNumber'
 import { useFakeSocket } from '../../composables/useFakeSocket'
 import { useHead } from '@unhead/vue'
+import { useCurrentBank } from '../../composables/useCurrentBank'
 
 useHead({
   title: 'Transaction Status'
 })
 const route = useRoute()
 const uetr = route.params.uetr as string
 
-const { state: transactionDetails, isLoading } = useAsyncState(() => fetchTransactionDetails(uetr), null)
+const { state: transactionDetails, isLoading } = useAsyncState(
+  () => fetchTransactionDetails(useCurrentBank(), uetr),
+  null
+)
 
 // Track expanded items
 const expandedItems = ref<Set<string>>(new Set())
@@ -41,7 +45,7 @@ function isExpanded(messageId: string) {
 
 async function refresh() {
   isLoading.value = true
-  transactionDetails.value = await fetchTransactionDetails(uetr)
+  transactionDetails.value = await fetchTransactionDetails(useCurrentBank(), uetr)
   isLoading.value = false
 }
 

gui/src/pages/admin/TransactionsHistoryPage.vue

@@ -5,6 +5,7 @@ import { fetchTransactions, subscribeToTransactionsUpdates } from '../../service
 import TransactionsTable from '../../components/TransactionsTable.vue'
 import { useRoute } from 'vue-router'
 import { useHead } from '@unhead/vue'
+import { useCurrentBank } from '../../composables/useCurrentBank.js'
 
 useHead({
   title: 'Transactions History'
@@ -13,10 +14,10 @@ useHead({
 const route = useRoute()
 const bic = route.meta.bic as string
 
-const { state: transactions } = useAsyncState(() => fetchTransactions(bic), [])
+const { state: transactions } = useAsyncState(() => fetchTransactions(useCurrentBank(), bic), [])
 
 const { state: unsubscribe } = useAsyncState(
-  subscribeToTransactionsUpdates(bic, (transactionsUpdated) => {
+  subscribeToTransactionsUpdates(useCurrentBank(), bic, (transactionsUpdated) => {
     transactions.value = transactionsUpdated
   }),
   () => {}

gui/src/pages/clients/ExchangePage.vue

@@ -8,8 +8,9 @@ import { calculateExchangeValue } from '../../utils/calculateExchangeValue'
 import { exchangeCurrency } from '../../services/clients'
 import Breadcrumbs from '../../components/Breadcrumbs.vue'
 import { useBankRoute } from '../../composables/useBankRoute'
+import { useCurrentBank } from '../../composables/useCurrentBank'
 
-const { state: utils } = useAsyncState(fetchTransactionFormData(), null)
+const { state: utils } = useAsyncState(fetchTransactionFormData(useCurrentBank()), null)
 
 interface ExchangeForm {
   fromCurrency: string

gui/src/pages/clients/SingleClientPage.vue

@@ -9,12 +9,14 @@ import { useFakeSocket } from '../../composables/useFakeSocket'
 import BalanceWidget from '../../components/BalanceWidget.vue'
 import { computed } from 'vue'
 import { useHead } from '@unhead/vue'
+import { useCurrentBank } from '../../composables/useCurrentBank'
 
 const route = useRoute()
 const clientId = route.meta.clientId as string
+const currentBank = useCurrentBank()
 const { client, isLoading, refresh: refreshClientInfo } = useClientInfo()
 const { state: transactions, isLoading: isLoadingTransactions } = useAsyncState(
-  () => fetchClientTransactions(clientId),
+  () => fetchClientTransactions(currentBank, clientId),
   []
 )
 
@@ -26,7 +28,7 @@ useHead({ title })
 
 async function refreshTransactions() {
   isLoadingTransactions.value = true
-  transactions.value = await fetchClientTransactions(clientId)
+  transactions.value = await fetchClientTransactions(currentBank, clientId)
   isLoadingTransactions.value = false
 }
 

gui/src/services/clients.ts

@@ -1,32 +1,28 @@
-import { useRoute } from 'vue-router'
-import config from '../../config.js'
+import config, { type BankName } from '../../config.js'
 import type { Client, JSONify, Account, Currency, Transaction } from './mock-backend/types.js'
-import type { BankName } from '../../config.js'
 import * as api from './backend/api.js'
 
-function currentBankName(): BankName {
-  const route = useRoute()
-  return route.meta.bankName as BankName
-}
-
 export interface ClientDataResponse extends JSONify<Client> {
   accounts: JSONify<Account>[]
 }
 
-export async function fetchClientData(clientId: string): Promise<ClientDataResponse | null> {
+export async function fetchClientData(currentBank: BankName, clientId: string): Promise<ClientDataResponse | null> {
   if (config.useMock) {
     const { getClientData } = await import('./mock-backend/api.js')
     return getClientData(clientId)
   }
-  return api.getClientPageData(currentBankName(), clientId)
+  return api.getClientPageData(currentBank, clientId)
 }
 
-export async function fetchClientTransactions(clientId: string): Promise<JSONify<Transaction>[]> {
+export async function fetchClientTransactions(
+  currentBank: BankName,
+  clientId: string
+): Promise<JSONify<Transaction>[]> {
   if (config.useMock) {
     const { getClientTransactions } = await import('./mock-backend/api.js')
     return getClientTransactions(clientId)
   }
-  return api.getClientTransfers(currentBankName(), clientId)
+  return api.getClientTransfers(currentBank, clientId)
 }
 
 // Not used at the moment

gui/src/services/transactions.ts

@@ -1,22 +1,17 @@
-import { useRoute } from 'vue-router'
 import config, { type BankName } from '../../config.js'
 import type { Transaction, JSONify, TransactionMessageStatus } from './mock-backend/types.js'
 import * as api from './backend/api.js'
 
-function currentBankName(): BankName {
-  const route = useRoute()
-  return route.meta.bankName as BankName
-}
-
-export async function fetchTransactions(bic: string): Promise<JSONify<Transaction[]>> {
+export async function fetchTransactions(currentBank: BankName, bic: string): Promise<JSONify<Transaction[]>> {
   if (config.useMock) {
     const { getTransactions } = await import('./mock-backend/api.js')
     return getTransactions().filter((tx) => tx.debtor.bic === bic || tx.creditor.bic === bic)
   }
-  return api.getTransfers(currentBankName())
+  return api.getTransfers(currentBank)
 }
 
 export async function subscribeToTransactionsUpdates(
+  currentBank: BankName,
   bic: string,
   callback: (transactions: JSONify<Transaction>[]) => void
 ): Promise<() => void> {
@@ -29,21 +24,22 @@ export async function subscribeToTransactionsUpdates(
     return subscribeToTransactionsUpdates(filteredCallback)
   }
   const interval = setInterval(async () => {
-    const transactions = await fetchTransactions(bic)
+    const transactions = await fetchTransactions(currentBank, bic)
     callback(transactions)
   }, 5000)
   return () => clearInterval(interval)
 }
 
-export async function fetchTransactionFormData(): ReturnType<typeof api.getTransferHelpers> {
+export async function fetchTransactionFormData(currentBank: BankName): ReturnType<typeof api.getTransferHelpers> {
   if (config.useMock) {
     const { getTransactionFormData } = await import('./mock-backend/api.js')
-    return getTransactionFormData(currentBankName())
+    return getTransactionFormData(currentBank)
   }
-  return api.getTransferHelpers(currentBankName())
+  return api.getTransferHelpers(currentBank)
 }
 
 export async function newTransaction(
+  currentBank: BankName,
   transaction: Omit<Transaction, 'uetr' | 'createdAt' | 'updatedAt' | 'status'> & {
     comment: string | null
   }
@@ -52,15 +48,16 @@ export async function newTransaction(
     const { newTransaction } = await import('./mock-backend/api.js')
     return newTransaction(transaction)
   }
-  return api.makeTransfer(currentBankName(), transaction)
+  return api.makeTransfer(currentBank, transaction)
 }
 
 export async function fetchTransactionDetails(
+  currentBank: BankName,
   uetr: string
 ): Promise<JSONify<{ transaction: Transaction; messages: JSONify<TransactionMessageStatus>[] }> | null> {
   if (config.useMock) {
     const { getTransactionDetails } = await import('./mock-backend/api.js')
     return getTransactionDetails(uetr)
   }
-  return api.getTransferStatus(currentBankName(), uetr)
+  return api.getTransferStatus(currentBank, uetr)
 }