From 34ffcc28608f02e895c2b766c1a1822968aab210 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 26 Dec 2022 19:34:05 -0300
Subject: [PATCH] change from listening onUpdate on listing component to watch
 props changes

---
 src/components/ListingComponent.vue | 25 ++++++++++++-------------
 src/views/ManageBidsView.vue        | 16 +++++++---------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index c0d128c..c6d6ac6 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import blockchain from "@/utils/blockchain";
-import { ref, onUpdated } from "vue";
+import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
@@ -38,16 +38,15 @@ const loadMore = () => {
   else itemsToShow.value = props.walletTransactions;
 };
 
-// lifecycle methods
+// watch props changes
 
-onUpdated(() => {
-  if (itemsToShow.value.length == 0) {
-    itemsToShow.value =
-      props.walletTransactions?.length > 3
-        ? props.walletTransactions.slice(0, 3)
-        : props.walletTransactions;
-  }
-});
+watch(props, (newProps) => {
+  const itemsToShowQty = itemsToShow.value.length
+  itemsToShow.value =
+  newProps?.walletTransactions.length > itemsToShowQty + 3
+      ? newProps.walletTransactions.slice(itemsToShowQty, itemsToShowQty + 3)
+      : newProps.walletTransactions;
+})
 
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
@@ -57,7 +56,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
   <div class="blur-container">
     <div
       class="grid grid-cols-4 grid-flow-row w-full px-6"
-      v-if="props.walletTransactions?.length != 0"
+      v-if="itemsToShow.length != 0"
     >
       <span class="text-xs text-gray-50 font-medium justify-self-center"
         >Valor</span
@@ -135,7 +134,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
     </div>
     <div
       class="flex justify-center w-full mt-2"
-      v-if="props.walletTransactions?.length != 0"
+      v-if="itemsToShow.length != 0"
     >
       <button type="button" class="text-white" @click="loadMore()">
         Carregar mais
@@ -143,7 +142,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
     </div>
     <span
       class="font-bold text-gray-900"
-      v-if="props.walletTransactions?.length == 0"
+      v-if="itemsToShow.length == 0"
     >
       Não há nenhuma transação anterior
     </span>
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 3bafe87..8d16bf5 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -4,26 +4,24 @@ import { storeToRefs } from "pinia";
 import blockchain from "../utils/blockchain";
 import ListingComponent from "@/components/ListingComponent.vue";
 import type { BigNumber } from "ethers";
-import { ref, onBeforeMount } from "vue";
+import { ref } from "vue";
 
 const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);
 
+if (walletAddress.value) {
+  await blockchain
+    .listDepositTransactionByWalletAddress(walletAddress.value)
+    .then((value) => (depositList.value = value));
+}
+
 const handleCancelDeposit = async (depositID: BigNumber) => {
   console.log(depositID);
   const response = await blockchain.cancelDeposit(depositID);
   if (response == true) console.log("Depósito cancelado com sucesso.");
 };
 
-onBeforeMount(async () => {
-  if (walletAddress.value) {
-    await blockchain
-      .listDepositTransactionByWalletAddress(walletAddress.value)
-      .then((value) => (depositList.value = value));
-  }
-});
-
 etherStore.$subscribe(async (mutation, state) => {
   if (mutation.events.key == "walletAddress") {
     if (state.walletAddress) {