From b7ffa94f1e69d40563c55f2c80f40e849e31e975 Mon Sep 17 00:00:00 2001
From: MateuszMichalowski
 <79852198+MateuszMichalowski@users.noreply.github.com>
Date: Fri, 9 Aug 2024 13:24:19 +0200
Subject: [PATCH] fix(frontend): fix dropdown in transaction send and link
 (#3352)

* fix(frontend): fix dropdown in transaction send and link

* fix(frontend): use azy query to fetch messages
---
 .../Contributions/ContributionListItem.vue    | 12 +++++++-----
 .../Transactions/TransactionLinkSummary.vue   | 19 +++++++------------
 .../Transactions/TransactionSend.vue          |  6 +++---
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 9741dbfde..5a717501b 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -128,7 +128,7 @@ import ContributionMessagesList from '@/components/ContributionMessages/Contribu
 import { listContributionMessages } from '@/graphql/queries'
 import { useAppToast } from '@/composables/useToast'
 import { useI18n } from 'vue-i18n'
-import { useQuery } from '@vue/apollo-composable'
+import { useLazyQuery, useQuery } from '@vue/apollo-composable'
 
 const props = defineProps({
   id: {
@@ -240,7 +240,7 @@ function deleteContribution(item) {
   }
 }
 
-const { onResult, result, loading, error, refetch } = useQuery(listContributionMessages, {
+const { onResult, onError, load } = useLazyQuery(listContributionMessages, {
   contributionId: props.contributionId,
 })
 
@@ -248,10 +248,8 @@ function getListContributionMessages(closeCollapse = true) {
   if (closeCollapse) {
     emit('close-all-open-collapse')
   }
-  refetch({
+  load(listContributionMessages, {
     contributionId: props.contributionId,
-  }).catch((err) => {
-    toastError(err.message)
   })
 }
 
@@ -264,6 +262,10 @@ onResult((resultValue) => {
   }
 })
 
+onError((err) => {
+  toastError(err.message)
+})
+
 watch(
   () => visible.value,
   () => {
diff --git a/frontend/src/components/Transactions/TransactionLinkSummary.vue b/frontend/src/components/Transactions/TransactionLinkSummary.vue
index a1e5ab514..fb651314f 100644
--- a/frontend/src/components/Transactions/TransactionLinkSummary.vue
+++ b/frontend/src/components/Transactions/TransactionLinkSummary.vue
@@ -61,13 +61,9 @@ const currentPage = ref(1)
 const pageSize = ref(5)
 const pending = ref(false)
 
-const { refetch, loading, error } = useQuery(
-  listTransactionLinks,
-  () => ({
-    currentPage: currentPage.value,
-  }),
-  { enabled: false },
-)
+const { refetch, loading, error } = useQuery(listTransactionLinks, {
+  currentPage: currentPage.value,
+})
 
 watch(currentPage, () => {
   updateListTransactionLinks()
@@ -94,11 +90,10 @@ async function updateListTransactionLinks() {
   } else {
     pending.value = true
     try {
-      const result = await refetch()
-      transactionLinks.value = [
-        ...transactionLinks.value,
-        ...result.data.listTransactionLinks.links,
-      ]
+      const { data } = await refetch({
+        currentPage: currentPage.value,
+      })
+      transactionLinks.value = [...transactionLinks.value, ...data.listTransactionLinks.links]
       emit('update-transactions')
     } catch (err) {
       toastError(err.message)
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index b3b034340..eddcb9afc 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="transaction-slot-send">
-    <BRow class="align-items-center" @click="visible = !visible">
+  <div class="transaction-slot-send" @click="visible = !visible">
+    <BRow class="align-items-center">
       <BCol cols="3" lg="2" md="2">
         <avatar
           :username="username.username"
@@ -43,7 +43,7 @@
         <collapse-icon class="text-right" :visible="visible" />
       </BCol>
     </BRow>
-    <BCollapse v-model="visible" class="pb-4 pt-lg-3">
+    <BCollapse :model-value="visible" class="pb-4 pt-lg-3">
       <decay-information
         :type-id="typeId"
         :decay="decay"