Vote with arrow keys

app/modules/plus-server/usePlusVoting.ts

@@ -21,16 +21,16 @@ export function usePlusVoting(usersForVotingFromServer: UsersForVoting) {
   const [usersForVoting, setUsersForVoting] = React.useState<UsersForVoting>();
   const [votes, setVotes] = React.useState<PlusVote[]>([]);
 
-  useLoadInitialStateFromLocalStorageEffect({
-    usersForVotingFromServer,
-    setUsersForVoting,
-    setVotes,
-  });
-
   const vote = React.useCallback(
-    ({ score, userId }: PlusVote) => {
+    (type: "upvote" | "downvote") => {
       setVotes((votes) => {
-        const newVotes = [...votes, { userId, score }];
+        const userId = usersForVoting?.[votes.length]?.user.id;
+        if (!userId) return votes;
+
+        const newVotes = [
+          ...votes,
+          { userId, score: type === "upvote" ? 1 : -1 },
+        ];
 
         votesToLocalStorage({ usersForVoting, votes: newVotes });
 
@@ -50,6 +50,14 @@ export function usePlusVoting(usersForVotingFromServer: UsersForVoting) {
     });
   }, [usersForVoting]);
 
+  useLoadInitialStateFromLocalStorageEffect({
+    usersForVotingFromServer,
+    setUsersForVoting,
+    setVotes,
+  });
+
+  useVoteWithArrowKeysEffect(vote);
+
   const currentUser = usersForVoting?.[votes.length];
 
   const progress: [currentAmount: number, targetAmount: number] | undefined =
@@ -105,6 +113,26 @@ function useLoadInitialStateFromLocalStorageEffect({
   }, [month, year, usersForVotingFromServer, setUsersForVoting, setVotes]);
 }
 
+function useVoteWithArrowKeysEffect(
+  vote: (type: "upvote" | "downvote") => void
+) {
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.code === "ArrowRight") {
+        vote("upvote");
+      } else if (e.code === "ArrowLeft") {
+        vote("downvote");
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [vote]);
+}
+
 function previousUser({
   usersForVoting,
   votes,

app/routes/plus/voting/index.tsx

@@ -139,16 +139,10 @@ function Voting(data: Extract<PlusVotingLoaderData, { type: "voting" }>) {
           />
           <h2>{discordFullName(currentUser.user)}</h2>
           <div className="stack vertical md">
-            <Button
-              variant="outlined"
-              onClick={() => vote({ score: -1, userId: currentUser.user.id })}
-            >
+            <Button variant="outlined" onClick={() => vote("upvote")}>
               -1
             </Button>
-            <Button
-              variant="outlined"
-              onClick={() => vote({ score: 1, userId: currentUser.user.id })}
-            >
+            <Button variant="outlined" onClick={() => vote("downvote")}>
               +1
             </Button>
           </div>