Možnost zadání obecné poznámky k volbě

client/src/App.tsx

@@ -12,15 +12,16 @@ import SelectSearch, { SelectedOptionValue } from 'react-select-search';
 import 'react-select-search/style.css';
 import './App.css';
 import { SelectSearchOption } from 'react-select-search';
-import { faCircleCheck, faTrashCan } from '@fortawesome/free-regular-svg-icons';
+import { faCircleCheck, faNoteSticky, faTrashCan } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
 import { ClientData, Restaurants, Food, Order, Locations, PizzaOrder, PizzaDayState, FoodChoices, DayMenu, DepartureTime } from './types';
 import Footer from './components/Footer';
 import { faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons';
 import Loader from './components/Loader';
 import { getData, errorHandler, getQrUrl } from './api/Api';
-import { addChoice, removeChoices, removeChoice, changeDepartureTime, jdemeObed } from './api/FoodApi';
+import { addChoice, removeChoices, removeChoice, changeDepartureTime, jdemeObed, updateNote } from './api/FoodApi';
 import { getHumanDateTime } from './Utils';
+import NoteModal from './components/modals/NoteModal';
 
 const EVENT_CONNECT = "connect"
 
@@ -37,10 +38,11 @@ function App() {
   const choiceRef = useRef<HTMLSelectElement>(null);
   const foodChoiceRef = useRef<HTMLSelectElement>(null);
   const departureChoiceRef = useRef<HTMLSelectElement>(null);
-  const poznamkaRef = useRef<HTMLInputElement>(null);
+  const pizzaPoznamkaRef = useRef<HTMLInputElement>(null);
   const [failure, setFailure] = useState<boolean>(false);
   const [dayIndex, setDayIndex] = useState<number>();
   const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
+  const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
   // Prazvláštní workaround, aby socket.io listener viděl aktuální hodnotu
   // https://medium.com/@kishorkrishna/cant-access-latest-state-inside-socket-io-listener-heres-how-to-fix-it-1522a5abebdb
   const dayIndexRef = useRef<number | undefined>(dayIndex);
@@ -210,6 +212,17 @@ function App() {
     }
   }
 
+  const saveNote = async (note?: string) => {
+    if (auth?.login) {
+      if (note != null && note.length > 70) {
+        alert("Poznámka může mít maximálně 70 znaků");
+        return;
+      }
+      await errorHandler(() => updateNote(note, dayIndex));
+      setNoteModalOpen(false);
+    }
+  }
+
   const pizzaSuggestions = useMemo(() => {
     if (!data?.pizzaList) {
       return [];
@@ -243,12 +256,12 @@ function App() {
     await removePizza(pizzaOrder);
   }
 
-  const handlePoznamkaChange = async () => {
-    if (poznamkaRef.current?.value && poznamkaRef.current.value.length > 100) {
-      alert("Poznámka může mít maximálně 100 znaků");
+  const handlePizzaPoznamkaChange = async () => {
+    if (pizzaPoznamkaRef.current?.value && pizzaPoznamkaRef.current.value.length > 70) {
+      alert("Poznámka může mít maximálně 70 znaků");
       return;
     }
-    updatePizzaDayNote(poznamkaRef.current?.value);
+    updatePizzaDayNote(pizzaPoznamkaRef.current?.value);
   }
 
   // const addToCart = async () => {
@@ -360,10 +373,7 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>Možnost skrytí polévek</li>
-              <li>Možnost "Rozhoduji se"</li>
-              <li>Neuskakování data vlevo při přechodu na pondělí</li>
-              <li>Mělo tu toho být už mnohem víc, ale zasekl jsem se snahou nahradit pizza search box</li>
+              <li>Anděloviny</li>
             </ul>
           </Alert>
           {dayIndex != null &&
@@ -436,6 +446,10 @@ function App() {
                                       </span>}
                                       {login}
                                       {userPayload.departureTime && <small> ({userPayload.departureTime})</small>}
+                                      {userPayload.note && <small> ({userPayload.note})</small>}
+                                      {login === auth.login && canChangeChoice && <FontAwesomeIcon onClick={() => {
+                                        setNoteModalOpen(true);
+                                      }} title='Upravit poznámku' className='action-icon' icon={faNoteSticky} />}
                                       {login === auth.login && canChangeChoice && <FontAwesomeIcon onClick={() => {
                                         doRemoveChoices(locationKey);
                                       }} title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`} className='action-icon' icon={faTrashCan} />}
@@ -564,15 +578,15 @@ function App() {
                           placeholder='Vyhledat pizzu...'
                           onChange={handlePizzaChange}
                         />
-                        Poznámka: <input ref={poznamkaRef} className='mt-3' type="text" onKeyDown={event => {
+                        Poznámka: <input ref={pizzaPoznamkaRef} className='mt-3' type="text" onKeyDown={event => {
                           if (event.key === 'Enter') {
-                            handlePoznamkaChange();
+                            handlePizzaPoznamkaChange();
                           }
                         }} />
                         <Button
                           style={{ marginLeft: '20px' }}
                           disabled={!myOrder?.pizzaList?.length}
-                          onClick={handlePoznamkaChange}>
+                          onClick={handlePizzaPoznamkaChange}>
                           Uložit
                         </Button>
                       </div>
@@ -593,6 +607,7 @@ function App() {
         </>}
       </div>
       <Footer />
+      <NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
     </>
   );
 }