Merge pull request #221 from ecency/bugfix/proposals-votes

Proposal votes button behavior fix
ecency · Jan 9, 2025 · 99d3f7b · 99d3f7b
2 parents 6ae8854 + 097a77d
commit 99d3f7b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 29 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
@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
 import "./_index.scss";
 import { useGlobalStore } from "@/core/global-store";
-import { chevronUpSvg } from "@ui/svg";
 import { KeyOrHotDialog, LoginRequired } from "@/features/shared";
 import { useProposalVoteByKey, useProposalVoteByKeychain } from "@/api/mutations/proposal-vote";
 import { proposalVoteHot } from "@/api/operations";
 import { getProposalVotesQuery } from "@/api/queries";
-import { UilSpinner } from "@tooni/iconscout-unicons-react";
+import { UilArrowUp } from "@tooni/iconscout-unicons-react";
+import { Button } from "@ui/button";
 
 interface Props {
   proposal: number;
@@ -33,35 +33,28 @@ 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>
-        <div className="proposal-vote-btn">
-          <div className={cls}>
-            <span className="btn-inner">{chevronUpSvg}</span>
-          </div>
-        </div>
+        <Button icon={<UilArrowUp />} outline={true} noPadding={true} className="w-[34px]" />
       </LoginRequired>
     );
   }
 
   return (
     <KeyOrHotDialog
       onKey={(key) => voteByKey({ key, approve: !voted })}
-      onKc={() => voteByKeychain({approve: !voted})}
+      onKc={() => voteByKeychain({ approve: !voted })}
       onHot={() => proposalVoteHot(activeUser?.username, proposal, !voted)}
     >
-      <div className="proposal-vote-btn">
-        <div className={cls}>
-          <span className="btn-inner">
-            {isVotingByKey ? <UilSpinner className="w-4 h-4 animate-spin" /> : chevronUpSvg}
-          </span>
-        </div>
-      </div>
+      <Button
+        disabled={isVotingByKey || isVotingByKeychain || isLoading}
+        icon={<UilArrowUp />}
+        outline={!voted}
+        noPadding={true}
+        className="w-[34px]"
+        isLoading={isVotingByKey}
+      />
     </KeyOrHotDialog>
   );
 }