From af9e0a9f7baa9e99d5d5498406f8b00ccfb8347b Mon Sep 17 00:00:00 2001
From: Kichiyaki <xyztojajestem@gmail.com>
Date: Tue, 25 May 2021 19:01:47 +0200
Subject: [PATCH] TestPage: add keyboard navigation between tabs

---
 .../TestPage/components/Test/Navigation.tsx   |  5 ++++
 .../TestPage/components/Test/Test.tsx         | 27 +++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx b/src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx
index bca7e86..33f43f1 100644
--- a/src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx
+++ b/src/features/QualificationPage/features/TestPage/components/Test/Navigation.tsx
@@ -1,3 +1,5 @@
+import { useKeyPressEvent } from 'react-use';
+
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { Button, ButtonGroup, useMediaQuery } from '@material-ui/core';
 import {
@@ -31,6 +33,9 @@ const Navigation = ({
   const classes = useStyles();
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down('sm'));
+  useKeyPressEvent('ArrowRight', onRequestNextTab);
+  useKeyPressEvent('ArrowLeft', onRequestPrevTab);
+
   return (
     <div className={classes.buttonContainer}>
       <div className={classes.navButtonGroup}>
diff --git a/src/features/QualificationPage/features/TestPage/components/Test/Test.tsx b/src/features/QualificationPage/features/TestPage/components/Test/Test.tsx
index b1bfc0e..2abc077 100644
--- a/src/features/QualificationPage/features/TestPage/components/Test/Test.tsx
+++ b/src/features/QualificationPage/features/TestPage/components/Test/Test.tsx
@@ -50,6 +50,7 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
   const [startedAt, setStartedAt] = useState(new Date());
   const [endedAt, setEndedAt] = useState(new Date());
   const classes = useStyles();
+  const maxTabIndex = questions.length + (reviewMode ? 1 : 0) - 1;
   usePrompt(!reviewMode);
   const analyticsParams = useMemo(
     () => ({
@@ -136,6 +137,20 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
     setReviewMode(true);
   };
 
+  const handleGoToNextTab = () => {
+    if (currentTab === maxTabIndex) {
+      return;
+    }
+    setCurrentTab(current => current + 1);
+  };
+
+  const handleGoToPrevTab = () => {
+    if (currentTab === 0) {
+      return;
+    }
+    setCurrentTab(current => current - 1);
+  };
+
   return (
     <Section>
       {isFetching && <FixedSpinner />}
@@ -204,14 +219,10 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
               </TabPanel>
               <Navigation
                 hasPreviousTab={currentTab !== 0}
-                hasNextTab={
-                  currentTab + 1 !== questions.length + (reviewMode ? 1 : 0)
-                }
-                onRequestPrevTab={() => setCurrentTab(currentTab - 1)}
-                onRequestNextTab={() => setCurrentTab(currentTab + 1)}
-                isLastQuestion={
-                  currentTab + 1 === questions.length + (reviewMode ? 1 : 0)
-                }
+                hasNextTab={currentTab !== maxTabIndex}
+                onRequestPrevTab={handleGoToPrevTab}
+                onRequestNextTab={handleGoToNextTab}
+                isLastQuestion={currentTab === maxTabIndex}
                 reviewMode={reviewMode}
                 onReset={handleReset}
                 onFinish={handleFinish}