Fixed proposal vote button

ecency · Jan 9, 2025 · 4c5638c · 4c5638c
1 parent bb21521
commit 4c5638c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 17 deletions.
diff --git a/src/api/mutations/proposal-vote.ts b/src/api/mutations/proposal-vote.ts
@@ -1,5 +1,5 @@
 import { InfiniteData, useMutation, useQueryClient } from "@tanstack/react-query";
-import { formatError, proposalVote } from "@/api/operations";
+import { formatError } from "@/api/operations";
 import { Operation, PrivateKey } from "@hiveio/dhive";
 import { client as hiveClient } from "@/api/hive";
 import { useGlobalStore } from "@/core/global-store";
@@ -14,7 +14,7 @@ export function useProposalVoteByKey(proposalId: number) {
 
   return useMutation({
     mutationKey: ["proposalVote", proposalId],
-    mutationFn: ({ key, approve }: { key: PrivateKey; approve?: boolean }) => {
+    mutationFn: async ({ key, approve }: { key: PrivateKey; approve?: boolean }) => {
       const op: Operation = [
         "update_proposal_votes",
         {
@@ -25,9 +25,9 @@ export function useProposalVoteByKey(proposalId: number) {
         }
       ];
 
-      return hiveClient.broadcast.sendOperations([op], key);
+      return [approve ?? false, await hiveClient.broadcast.sendOperations([op], key)] as const;
     },
-    onSuccess: () => {
+    onSuccess: ([approve]) => {
       queryClient.setQueryData<InfiniteData<ProposalVote[]>>(
         [QueryIdentifiers.PROPOSAL_VOTES, proposalId, activeUser?.username, 1],
         (data) => {
@@ -38,10 +38,14 @@ export function useProposalVoteByKey(proposalId: number) {
           return {
             pages: [
               [
-                {
-                  id: 1,
-                  voter: activeUser?.username ?? ""
-                }
+                ...(approve
+                  ? [
+                      {
+                        id: 1,
+                        voter: activeUser?.username ?? ""
+                      }
+                    ]
+                  : [])
               ]
             ],
             pageParams: [""]
@@ -55,10 +59,11 @@ export function useProposalVoteByKey(proposalId: number) {
 
 export function useProposalVoteByKeychain(proposalId: number) {
   const activeUser = useGlobalStore((s) => s.activeUser);
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: ["proposalVoteByKeychain", proposalId],
-    mutationFn: ({ approve }: { approve?: boolean }) => {
+    mutationFn: async ({ approve }: { approve?: boolean }) => {
       if (!activeUser) {
         throw new Error("Active user not found");
       }
@@ -73,7 +78,36 @@ export function useProposalVoteByKeychain(proposalId: number) {
         }
       ];
 
-      return keychain.broadcast(activeUser.username, [op], "Active");
+      return [
+        approve ?? false,
+        await keychain.broadcast(activeUser.username, [op], "Active")
+      ] as const;
+    },
+    onSuccess: ([approve]) => {
+      queryClient.setQueryData<InfiniteData<ProposalVote[]>>(
+        [QueryIdentifiers.PROPOSAL_VOTES, proposalId, activeUser?.username, 1],
+        (data) => {
+          if (!data) {
+            return data;
+          }
+
+          return {
+            pages: [
+              [
+                ...(approve
+                  ? [
+                      {
+                        id: 1,
+                        voter: activeUser?.username ?? ""
+                      }
+                    ]
+                  : [])
+              ]
+            ],
+            pageParams: [""]
+          };
+        }
+      );
     },
     onError: (e) => error(...formatError(e))
   });

diff --git a/src/app/proposals/_components/proposal-vote-btn/index.tsx b/src/app/proposals/_components/proposal-vote-btn/index.tsx
@@ -33,10 +33,6 @@ export function ProposalVoteBtn({ proposal }: Props) {
   const { mutateAsync: voteByKeychain, isPending: isVotingByKeychain } =
     useProposalVoteByKeychain(proposal);
 
-  const cls = `btn-proposal-vote btn-up-vote vote-btn-lg ${
-    isVotingByKey || isVotingByKeychain || isLoading ? "in-progress" : ""
-  } ${voted ? "voted" : ""}`;
-
   if (!activeUser) {
     return (
       <LoginRequired>
@@ -47,9 +43,9 @@ export function ProposalVoteBtn({ proposal }: Props) {
 
   return (
     <KeyOrHotDialog
-      onKey={(key) => voteByKey({ key })}
-      onKc={() => voteByKeychain({})}
-      onHot={() => proposalVoteHot(activeUser?.username, proposal, false)}
+      onKey={(key) => voteByKey({ key, approve: !voted })}
+      onKc={() => voteByKeychain({ approve: !voted })}
+      onHot={() => proposalVoteHot(activeUser?.username, proposal, !voted)}
     >
       <Button
         disabled={isVotingByKey || isVotingByKeychain || isLoading}