fix: proposal status reactive display on register (#5437)

* feat: adds proposal status polling logic

* chore: change proposals status to proposals state

* fix: reactively add/remove proposals

* chore: renames

* fix: add optional chaining

* fix: add void to properly handle promise return

Co-authored-by: Jean Ribeiro <iamjeanribeiro@gmail.com>
Co-authored-by: Matthew Maxwell <44885822+maxwellmattryan@users.noreply.github.com>

packages/desktop/views/dashboard/governance/views/ProposalsView.svelte

@@ -1,16 +1,21 @@
 <script lang="typescript">
     import { onMount } from 'svelte'
     import { Pane, Proposals, ProposalsDetails, VotingPower } from '@ui'
-    import { getVotingEvents } from '@core/profile-manager'
     import type { IProposal } from '@core/governance/interfaces'
-    import { createProposalsFromEvents } from '@core/governance/utils'
+    import { createProposals } from '@core/governance/utils'
+    import { registeredEventIds } from '@core/governance/stores'
 
     let proposals: IProposal[]
     let loaded = false
 
+    $: $registeredEventIds, void setProposals()
+
+    async function setProposals(): Promise<void> {
+        proposals = await createProposals()
+    }
+
     onMount(async () => {
-        const events = await getVotingEvents()
-        proposals = createProposalsFromEvents(events)
+        await setProposals()
         loaded = true
     })
 </script>

packages/shared/lib/core/governance/stores/index.ts

@@ -1,2 +1,3 @@
 export * from './proposals-state.store'
+export * from './registered-event-ids.store'
 export * from './selected-proposal.store'

packages/shared/lib/core/governance/stores/registered-event-ids.store.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store'
+
+export const registeredEventIds = writable<string[]>([])

packages/shared/lib/core/governance/utils/createProposalsFromEvents.ts

@@ -6,31 +6,35 @@ import { ProposalStatus } from '@core/governance/enums'
 import { IProposal } from '@core/governance/interfaces'
 import { nodeInfo } from '@core/network'
 import { activeProfile } from '@core/profile'
+import { getVotingEvents } from '@core/profile-manager'
 
-export function createProposalsFromEvents(events: Event[]): IProposal[] {
-    const proposals: IProposal[] = events.map(({ data, id }) => {
-        const proposal = {
-            id,
-            title: data.name,
-            status: ProposalStatus.Upcoming,
-            milestones: {
-                [ProposalStatus.Upcoming]: 0, // TODO: fix this
-                [ProposalStatus.Commencing]: data.milestoneIndexCommence,
-                [ProposalStatus.Holding]: data.milestoneIndexStart,
-                [ProposalStatus.Ended]: data.milestoneIndexEnd,
-            },
-            // TODO: figure out a better way to get the node URLs
-            nodeUrls: get(activeProfile)?.clientOptions?.nodes,
-        }
+export async function createProposals(): Promise<IProposal[]> {
+    const events = await getVotingEvents()
+    const proposals: IProposal[] = events?.map(createProposalFromEvent)
+    return proposals
+}
 
-        const status = getLatestStatus(proposal)
-        if (status) {
-            proposal.status = status
-        }
-        return proposal
-    })
+function createProposalFromEvent(event: Event): IProposal {
+    const { data, id } = event
+    const proposal = {
+        id,
+        title: event.data.name,
+        status: ProposalStatus.Upcoming,
+        milestones: {
+            [ProposalStatus.Upcoming]: 0, // TODO: fix this
+            [ProposalStatus.Commencing]: data.milestoneIndexCommence,
+            [ProposalStatus.Holding]: data.milestoneIndexStart,
+            [ProposalStatus.Ended]: data.milestoneIndexEnd,
+        },
+        // TODO: figure out a better way to get the node URLs
+        nodeUrls: get(activeProfile)?.clientOptions?.nodes,
+    }
 
-    return proposals
+    const status = getLatestStatus(proposal)
+    if (status) {
+        proposal.status = status
+    }
+    return proposal
 }
 
 function getLatestStatus(proposal: IProposal): ProposalStatus {

packages/shared/lib/core/profile-manager/api/deregisterParticipationEvent.ts

@@ -1,10 +1,12 @@
 import { get } from 'svelte/store'
 import type { EventId } from '@iota/wallet'
-import { removeProposalState } from '@core/governance'
+import { registeredEventIds, removeProposalState } from '@core/governance'
 import { profileManager } from '../stores'
 
-export function deregisterParticipationEvent(eventId: EventId): Promise<void> {
+export async function deregisterParticipationEvent(eventId: EventId): Promise<void> {
     const manager = get(profileManager)
+    await manager.deregisterParticipationEvent(eventId)
+
+    registeredEventIds.update((ids) => ids.filter((id) => id !== eventId))
     removeProposalState(eventId)
-    return manager.deregisterParticipationEvent(eventId)
 }

packages/shared/lib/core/profile-manager/api/getVotingProposals.ts

@@ -4,5 +4,5 @@ import { profileManager } from '@core/profile-manager'
 
 export function getVotingEvents(): Promise<Event[]> {
     const manager = get(profileManager)
-    return manager.getParticipationEvents()
+    return manager?.getParticipationEvents()
 }

packages/shared/lib/core/profile-manager/api/registerParticipationEvent.ts

@@ -1,11 +1,13 @@
-import { addProposalState } from '@core/governance'
+import { addProposalState, registeredEventIds } from '@core/governance'
 import { profileManager } from '@core/profile-manager/stores'
 import type { Event, EventId, Node } from '@iota/wallet'
 import { get } from 'svelte/store'
 
 export async function registerParticipationEvent(eventId: EventId, nodes: Node[]): Promise<Event> {
     const manager = get(profileManager)
     const event = await manager.registerParticipationEvent(eventId, nodes)
+
+    registeredEventIds.update((ids) => [...ids, eventId])
     await addProposalState(eventId)
     return event
 }