TestPage: add an answer selection via keyboard

src/features/QualificationPage/features/TestPage/components/Test/Question.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { useKeyPressEvent } from 'react-use';
 import clsx from 'clsx';
 import buildURL from 'utils/buildURL';
 import { Answer, Question as QuestionT } from 'libs/graphql';
@@ -15,18 +16,35 @@ export interface QuestionProps {
   answer: Answer;
   onSelectAnswer: (answer: Answer) => void;
   reviewMode: boolean;
+  current: boolean;
 }
 
 const ANSWERS = Object.values(Answer);
 
+const QuestionKeyPressEvent = ({
+  onSelectAnswer,
+}: Pick<QuestionProps, 'onSelectAnswer'>) => {
+  useKeyPressEvent(
+    e => {
+      return (ANSWERS as string[]).includes(e.key.toLowerCase());
+    },
+    e => {
+      onSelectAnswer(e.key.toLowerCase() as Answer);
+    }
+  );
+  return null;
+};
+
 const Question = ({
   question,
   answer,
   onSelectAnswer,
   reviewMode,
+  current,
 }: QuestionProps) => {
   const classes = useStyles();
   const updatedAt = new Date(question.updatedAt).getTime();
+
   return (
     <div className={classes.question}>
       {question.from && (
@@ -111,6 +129,7 @@ const Question = ({
           </Button>
         );
       })}
+      {current && <QuestionKeyPressEvent onSelectAnswer={onSelectAnswer} />}
     </div>
   );
 };

src/features/QualificationPage/features/TestPage/components/Test/Test.tsx

@@ -94,6 +94,10 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
   };
 
   const handleSelectAnswer = (index: number, newAnswer: Answer) => {
+    if (selectedAnswers[index] === newAnswer) {
+      return;
+    }
+
     setSelectedAnswers(answers =>
       answers.map((oldAnswer, index2) =>
         index2 === index ? newAnswer : oldAnswer
@@ -108,6 +112,10 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
   };
 
   const handleReset = async () => {
+    if (isFetching) {
+      return;
+    }
+
     try {
       setIsFetching(true);
       const { generateTest: newQuestions } = await createClient().request<
@@ -205,6 +213,7 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
                     answer={selectedAnswers[index]}
                     onSelectAnswer={answer => handleSelectAnswer(index, answer)}
                     reviewMode={reviewMode}
+                    current={currentTab === index}
                   />
                 </TabPanel>
               ))}