From 4831a4a13c69c8f31f72fd8d9367a3e60f929ab2 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 23 Apr 2021 09:43:36 +0300
Subject: [PATCH] Disable edit vote button when mutation loading

---
 components/plus/ChangeVoteButtons.tsx |  3 +++
 hooks/plus.ts                         | 25 +++++++++++++------------
 pages/plus/voting.tsx                 |  2 ++
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/plus/ChangeVoteButtons.tsx b/components/plus/ChangeVoteButtons.tsx
index edbac830c..eb1ac9e48 100644
--- a/components/plus/ChangeVoteButtons.tsx
+++ b/components/plus/ChangeVoteButtons.tsx
@@ -8,10 +8,12 @@ export function ChangeVoteButtons({
   score,
   isSameRegion,
   editVote,
+  isLoadingMutation,
 }: {
   score: number;
   isSameRegion: boolean;
   editVote: (score: number) => void;
+  isLoadingMutation: boolean;
 }) {
   const [editing, setEditing] = useState(false);
   const [currentScore, setCurrentScore] = useState(score);
@@ -48,6 +50,7 @@ export function ChangeVoteButtons({
             editVote(currentScore);
             setEditing(false);
           }}
+          disabled={isLoadingMutation}
         >
           Save
         </Button>
diff --git a/hooks/plus.ts b/hooks/plus.ts
index 163a4910a..7d234eb16 100644
--- a/hooks/plus.ts
+++ b/hooks/plus.ts
@@ -88,18 +88,18 @@ export default function usePlusVoting() {
       },
     }
   );
-  const { mutate: editVoteMutate, status: editVoteStatus } = trpc.useMutation(
-    "plus.editVote",
-    {
-      onSuccess() {
-        toast(getToastOptions("Successfully edited vote", "success"));
-        utils.invalidateQuery(["plus.votedUserScores"]);
-      },
-      onError(error) {
-        toast(getToastOptions(error.message, "error"));
-      },
-    }
-  );
+  const {
+    mutate: editVoteMutate,
+    isLoading: isLoadingEditVote,
+  } = trpc.useMutation("plus.editVote", {
+    onSuccess() {
+      toast(getToastOptions("Successfully edited vote", "success"));
+      utils.invalidateQuery(["plus.votedUserScores"]);
+    },
+    onError(error) {
+      toast(getToastOptions(error.message, "error"));
+    },
+  });
 
   const ownPlusStatus = statuses?.find((status) => status.user.id === user?.id);
 
@@ -145,5 +145,6 @@ export default function usePlusVoting() {
     voteStatus,
     votedUsers: getVotedUsers(),
     editVote: editVoteMutate,
+    isLoadingEditVote,
   };
 }
diff --git a/pages/plus/voting.tsx b/pages/plus/voting.tsx
index 095c9db1e..0d7ac7339 100644
--- a/pages/plus/voting.tsx
+++ b/pages/plus/voting.tsx
@@ -30,6 +30,7 @@ export default function PlusVotingPage() {
     voteStatus,
     votedUsers,
     editVote,
+    isLoadingEditVote,
   } = usePlusVoting();
 
   useEffect(() => {
@@ -68,6 +69,7 @@ export default function PlusVotingPage() {
                   editVote={(score) =>
                     editVote({ userId: votedUser.userId, score })
                   }
+                  isLoadingMutation={isLoadingEditVote}
                 />
               </Fragment>
             );