From 2b62eed10dae40dcee3ee6c78daa02573f5aa1cf Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Wed, 15 Dec 2021 10:18:58 -0300
Subject: [PATCH] decouple the tally fetch to its own action and refactor the
 claim button

---
 vue-app/src/components/ClaimButton.vue | 85 +++++++++++++++++---------
 vue-app/src/store/action-types.ts      |  1 +
 vue-app/src/store/actions.ts           |  8 ++-
 3 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/vue-app/src/components/ClaimButton.vue b/vue-app/src/components/ClaimButton.vue
index 378e887ab..34918de70 100644
--- a/vue-app/src/components/ClaimButton.vue
+++ b/vue-app/src/components/ClaimButton.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <loader v-if="isLoading" />
     <p v-if="claimed">
       ✔️ {{ formatAmount(allocatedAmount) }} {{ tokenSymbol }} claimed
     </p>
@@ -15,18 +16,24 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import { FixedNumber } from 'ethers'
 
 import { getAllocatedAmount, isFundsClaimed } from '@/api/claims'
 import { Project } from '@/api/projects'
-import { RoundStatus } from '@/api/round'
+import { RoundStatus, RoundInfo } from '@/api/round'
 import { Tally } from '@/api/tally'
-import ClaimModal from '@/components/ClaimModal.vue'
-import { markdown } from '@/utils/markdown'
+
+import { LOAD_TALLY } from '@/store/action-types'
 import { formatAmount } from '@/utils/amounts'
+import { markdown } from '@/utils/markdown'
 
-@Component
+import ClaimModal from '@/components/ClaimModal.vue'
+import Loader from '@/components/Loader.vue'
+
+@Component({
+  components: { Loader },
+})
 export default class ClaimButton extends Vue {
   @Prop() project!: Project
 
@@ -34,45 +41,67 @@ export default class ClaimButton extends Vue {
   claimed: boolean | null = null
   isLoading = true
 
+  get currentRound(): RoundInfo | null {
+    return this.$store.state.currentRound
+  }
+
+  get tally(): Tally | null {
+    return this.$store.state.tally
+  }
+
+  get descriptionHtml(): string {
+    return markdown.render(this.project?.description || '')
+  }
+
+  get tokenSymbol(): string {
+    const { nativeTokenSymbol } = this.$store.state.currentRound
+    return nativeTokenSymbol ?? ''
+  }
+
   created() {
-    // Wait for tally to load and get claim status
-    this.$store.watch((state) => state.tally, this.checkAllocation)
-    this.checkAllocation(this.$store.state.tally)
-    this.isLoading = false
+    this.checkAllocation()
   }
 
-  private async checkAllocation(tally: Tally | null) {
-    const currentRound = this.$store.state.currentRound
+  @Watch('currentRound')
+  async checkAllocation() {
+    // If the current round is not finalized or the allocated amount was already
+    // fetched then don't do anything
     if (
       !this.project ||
-      !currentRound ||
-      currentRound.status !== RoundStatus.Finalized ||
-      !tally
+      !this.currentRound ||
+      !this.$store.getters.isRoundFinalized ||
+      this.allocatedAmount
     ) {
+      this.isLoading = false
       return
     }
+
+    this.isLoading = true
+    if (!this.tally) {
+      await this.loadTally()
+    }
+
     this.allocatedAmount = await getAllocatedAmount(
-      currentRound.fundingRoundAddress,
-      currentRound.nativeTokenDecimals,
-      tally.results.tally[this.project.index],
-      tally.totalVoiceCreditsPerVoteOption.tally[this.project.index]
+      this.currentRound.fundingRoundAddress,
+      this.currentRound.nativeTokenDecimals,
+      this.tally!.results.tally[this.project.index],
+      this.tally!.totalVoiceCreditsPerVoteOption.tally[this.project.index]
     )
     this.claimed = await isFundsClaimed(
-      currentRound.fundingRoundAddress,
+      this.currentRound.fundingRoundAddress,
       this.project.address
     )
+    this.isLoading = false
   }
 
-  get tokenSymbol(): string {
-    const { nativeTokenSymbol } = this.$store.state.currentRound
-    return nativeTokenSymbol ?? ''
+  async loadTally() {
+    await this.$store.dispatch(LOAD_TALLY)
   }
 
   hasClaimBtn(): boolean {
-    const { currentRound } = this.$store.state
     return (
-      currentRound &&
-      currentRound.status === RoundStatus.Finalized &&
+      !!this.currentRound &&
+      this.currentRound.status === RoundStatus.Finalized &&
       this.project !== null &&
       this.project.index !== 0 &&
       !this.project.isHidden &&
@@ -87,7 +116,7 @@ export default class ClaimButton extends Vue {
 
   formatAmount(value: FixedNumber): string {
     const maxDecimals = 6
-    const { nativeTokenDecimals } = this.$store.state.currentRound
+    const { nativeTokenDecimals } = this.currentRound!
     return formatAmount(value, nativeTokenDecimals, null, maxDecimals)
   }
 
@@ -104,10 +133,6 @@ export default class ClaimButton extends Vue {
       {}
     )
   }
-
-  get descriptionHtml(): string {
-    return markdown.render(this.project?.description || '')
-  }
 }
 </script>
 
diff --git a/vue-app/src/store/action-types.ts b/vue-app/src/store/action-types.ts
index d4dd5b213..59bf82cb7 100644
--- a/vue-app/src/store/action-types.ts
+++ b/vue-app/src/store/action-types.ts
@@ -1,4 +1,5 @@
 export const SELECT_ROUND = 'SELECT_ROUND'
+export const LOAD_TALLY = 'LOAD_TALLY'
 export const LOAD_FACTORY_INFO = 'LOAD_FACTORY_INFO'
 export const LOAD_ROUND_INFO = 'LOAD_ROUND_INFO'
 export const LOAD_RECIPIENT_REGISTRY_INFO = 'LOAD_RECIPIENT_REGISTRY_INFO'
diff --git a/vue-app/src/store/actions.ts b/vue-app/src/store/actions.ts
index 5f5663756..f37878748 100644
--- a/vue-app/src/store/actions.ts
+++ b/vue-app/src/store/actions.ts
@@ -30,6 +30,7 @@ import {
   LOAD_FACTORY_INFO,
   LOAD_RECIPIENT_REGISTRY_INFO,
   LOAD_ROUND_INFO,
+  LOAD_TALLY,
   LOAD_USER_INFO,
   LOGIN_USER,
   LOGOUT_USER,
@@ -92,8 +93,11 @@ const actions = {
     //TODO: update to take factory address as a parameter, default to env. variable
     const round = await getRoundInfo(roundAddress)
     commit(SET_CURRENT_ROUND, round)
-    if (round && round.status === RoundStatus.Finalized) {
-      const tally = await getTally(roundAddress)
+  },
+  async [LOAD_TALLY]({ commit, state }) {
+    const currentRound = state.currentRound
+    if (currentRound && currentRound.status === RoundStatus.Finalized) {
+      const tally = await getTally(state.currentRoundAddress)
       commit(SET_TALLY, tally)
     }
   },