From 0f1822ae87ab50cf0a18e0ac263c0ac33c54f766 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 26 Dec 2022 00:06:35 -0300
Subject: [PATCH] preparing listingComponent to receive empty data and updated
 this data according to vue lifecycle hook

---
 src/components/ListingComponent.vue | 30 ++++++++++++++++++++++++-----
 src/views/ManageBidsView.vue        | 11 ++++-------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index a2d2995..8be95e4 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 } from "vue";
+import { ref, onUpdated } from "vue";
 
 // props
 const props = defineProps<{
@@ -38,13 +38,27 @@ const loadMore = () => {
   else itemsToShow.value = props.walletTransactions;
 };
 
+// lifecycle methods
+
+onUpdated(() => {
+  if (itemsToShow.value.length == 0) {
+    itemsToShow.value =
+      props.walletTransactions?.length > 3
+        ? props.walletTransactions.slice(0, 3)
+        : props.walletTransactions;
+  }
+});
+
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
 </script>
 
 <template>
   <div class="blur-container">
-    <div class="grid grid-cols-4 grid-flow-row w-full px-6">
+    <div
+      class="grid grid-cols-4 grid-flow-row w-full px-6"
+      v-if="props.walletTransactions?.length != 0"
+    >
       <span class="text-xs text-gray-50 font-medium justify-self-center"
         >Valor</span
       >
@@ -102,14 +116,20 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
         <img alt="Redirect image" src="@/assets/redirect.svg" />
       </div>
     </div>
-    <div class="flex justify-center w-full mt-2">
+    <div
+      class="flex justify-center w-full mt-2"
+      v-if="props.walletTransactions?.length != 0"
+    >
       <button type="button" class="text-white" @click="loadMore()">
         Carregar mais
       </button>
     </div>
-    <p class="font-bold" v-if="props.walletTransactions?.length == 0">
+    <span
+      class="font-bold text-gray-900"
+      v-if="props.walletTransactions?.length == 0"
+    >
       Não há nenhuma transação anterior
-    </p>
+    </span>
   </div>
 </template>
 
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index f1b749e..7ed79f0 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -9,12 +9,9 @@ const { depositsAddedList } = storeToRefs(etherStore);
 
 <template>
   <div class="page">
-    <div class="header">
-      Gerenciar ofertas
-    </div>
+    <div class="header">Gerenciar ofertas</div>
     <ListingComponent
-      v-if="depositsAddedList?.length != 0"
-      :wallet-transactions="depositsAddedList!"
+      :wallet-transactions="depositsAddedList"
       :is-manage-mode="true"
     ></ListingComponent>
   </div>
@@ -25,7 +22,7 @@ const { depositsAddedList } = storeToRefs(etherStore);
   @apply flex flex-col gap-10 mt-20 w-full;
 }
 
-.header{
-  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex
+.header {
+  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
 }
 </style>