TestPage: add KeyboardNavigationNote.tsx

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useLocalStorage } from 'react-use';
+import { Box, IconButton, NoSsr } from '@material-ui/core';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import { Close as CloseIcon } from '@material-ui/icons';
+
+const LOCAL_STORAGE_KEY = 'showKeyboardNavigationNote';
+
+const KeyboardNavigationNote = () => {
+  const [show, setShow] = useLocalStorage(LOCAL_STORAGE_KEY, true);
+
+  if (!show || typeof window === 'undefined') {
+    return null;
+  }
+
+  return (
+    <NoSsr>
+      <Box mb={2}>
+        <Alert
+          severity="info"
+          action={
+            <IconButton onClick={() => setShow(false)}>
+              <CloseIcon />
+            </IconButton>
+          }
+        >
+          <AlertTitle>Nawigacja</AlertTitle>
+          Czy wiesz, że{' '}
+          <strong>
+            możesz poruszać się pomiędzy pytaniami i wybierać odpowiedzi{' '}
+          </strong>
+          za pomocą klawiatury? <br />- <strong>klawisze A / B / C / D</strong>{' '}
+          - wybór odpowiedzi <br />- <strong>lewa strzałka</strong> - powrót do
+          poprzedniego pytania <br />- <strong>prawa strzałka</strong> -
+          przejście do następnego pytania <br />
+        </Alert>
+      </Box>
+    </NoSsr>
+  );
+};
+
+export default KeyboardNavigationNote;

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, Fragment } from 'react';
 import { useUpdateEffect } from 'react-use';
 import clsx from 'clsx';
 import { usePrompt } from 'libs/hooks';
@@ -30,6 +30,7 @@ import Question from './Question';
 import Navigation from './Navigation';
 import Summary from './Summary';
 import FixedSpinner from './FixedSpinner';
+import KeyboardNavigationNote from './KeyboardNavigationNote';
 
 export interface TestProps {
   initialQuestions: QuestionT[];
@@ -173,6 +174,8 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
             Do tej kwalifikacji nie zostały dodane żadne pytania.
           </Typography>
         ) : (
+          <Fragment>
+            <KeyboardNavigationNote />
             <Paper>
               <AppBar color="default" position="static">
                 <Tabs
@@ -211,7 +214,9 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
                     <Question
                       question={question}
                       answer={selectedAnswers[index]}
-                    onSelectAnswer={answer => handleSelectAnswer(index, answer)}
+                      onSelectAnswer={answer =>
+                        handleSelectAnswer(index, answer)
+                      }
                       reviewMode={reviewMode}
                       current={currentTab === index}
                     />
@@ -238,6 +243,7 @@ const Test = ({ initialQuestions, qualification }: TestProps) => {
                 />
               </Box>
             </Paper>
+          </Fragment>
         )}
       </Container>
     </Section>