hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change from listening onUpdate on listing component to watch props changes

Browse Source
This commit is contained in:
RcleydsonR 2022-12-26 19:34:05 -03:00
parent 49f7b670a9
commit 34ffcc2860
2 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ListingComponent.vue
View File

@ -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>

16
src/views/ManageBidsView.vue
View File

@ -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) {