Navigace mezi dny klávesovými šipkami

client/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { EVENT_DISCONNECT, EVENT_MESSAGE, SocketContext } from './context/socket';
 import { addChoice, addPizza, changeDepartureTime, createPizzaDay, deletePizzaDay, errorHandler, finishDelivery, finishOrder, getData, getQrUrl, lockPizzaDay, removeChoice, removeChoices, removePizza, unlockPizzaDay, updateNote } from './Api';
@@ -156,6 +156,22 @@ function App() {
     }
   }, [choiceRef.current?.value, food])
 
+  // Navigace mezi dny pomocí klávesových šípek
+  const handleKeyDown = useCallback((e: any) => {
+    if (e.keyCode == 37 && dayIndex != null && dayIndex > 0) {
+      handleDayChange(dayIndex - 1);
+    } else if (e.keyCode == 39 && dayIndex != null && dayIndex < 4) {
+      handleDayChange(dayIndex + 1);
+    }
+  }, [dayIndex]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [handleKeyDown]);
+
   // Index v týdnu dnešního dne (0-6)
   // TODO tohle má posílat server, klient je nespolehlivý
   const currentDayIndex = useMemo(() => {
@@ -359,6 +375,7 @@ function App() {
             Poslední změny:
             <ul>
               <li>Ochrana proti některým Stánkovinám</li>
+              <li>Navigace mezi dny klávesovými šipkami</li>
             </ul>
           </Alert>
           {dayIndex != null &&