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

23
src/components/ListingComponent.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import blockchain from "@/utils/blockchain"; import blockchain from "@/utils/blockchain";
import { ref, onUpdated } from "vue"; import { ref, watch } from "vue";
// props // props
const props = defineProps<{ const props = defineProps<{
@ -38,16 +38,15 @@ const loadMore = () => {
else itemsToShow.value = props.walletTransactions; else itemsToShow.value = props.walletTransactions;
}; };
// lifecycle methods // watch props changes
onUpdated(() => { watch(props, (newProps) => {
if (itemsToShow.value.length == 0) { const itemsToShowQty = itemsToShow.value.length
itemsToShow.value = itemsToShow.value =
props.walletTransactions?.length > 3 newProps?.walletTransactions.length > itemsToShowQty + 3
? props.walletTransactions.slice(0, 3) ? newProps.walletTransactions.slice(itemsToShowQty, itemsToShowQty + 3)
: props.walletTransactions; : newProps.walletTransactions;
} })
});
//emits //emits
const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]); const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
@ -57,7 +56,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
<div class="blur-container"> <div class="blur-container">
<div <div
class="grid grid-cols-4 grid-flow-row w-full px-6" 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" <span class="text-xs text-gray-50 font-medium justify-self-center"
>Valor</span >Valor</span
@ -135,7 +134,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
</div> </div>
<div <div
class="flex justify-center w-full mt-2" 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()"> <button type="button" class="text-white" @click="loadMore()">
Carregar mais Carregar mais
@ -143,7 +142,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
</div> </div>
<span <span
class="font-bold text-gray-900" class="font-bold text-gray-900"
v-if="props.walletTransactions?.length == 0" v-if="itemsToShow.length == 0"
> >
Não há nenhuma transação anterior Não há nenhuma transação anterior
</span> </span>

16
src/views/ManageBidsView.vue
View File

@ -4,26 +4,24 @@ import { storeToRefs } from "pinia";
import blockchain from "../utils/blockchain"; import blockchain from "../utils/blockchain";
import ListingComponent from "@/components/ListingComponent.vue"; import ListingComponent from "@/components/ListingComponent.vue";
import type { BigNumber } from "ethers"; import type { BigNumber } from "ethers";
import { ref, onBeforeMount } from "vue"; import { ref } from "vue";
const etherStore = useEtherStore(); const etherStore = useEtherStore();
const { walletAddress } = storeToRefs(etherStore); const { walletAddress } = storeToRefs(etherStore);
const depositList = ref<any[]>([]); const depositList = ref<any[]>([]);
if (walletAddress.value) {
await blockchain
.listDepositTransactionByWalletAddress(walletAddress.value)
.then((value) => (depositList.value = value));
}
const handleCancelDeposit = async (depositID: BigNumber) => { const handleCancelDeposit = async (depositID: BigNumber) => {
console.log(depositID); console.log(depositID);
const response = await blockchain.cancelDeposit(depositID); const response = await blockchain.cancelDeposit(depositID);
if (response == true) console.log("Depósito cancelado com sucesso."); 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) => { etherStore.$subscribe(async (mutation, state) => {
if (mutation.events.key == "walletAddress") { if (mutation.events.key == "walletAddress") {
if (state.walletAddress) { if (state.walletAddress) {