Zpracování chyb z API

client/src/Api.ts

@@ -1,18 +1,39 @@
+import { toast } from "react-toastify";
 import { PizzaOrder } from "./types";
 import { getBaseUrl, getToken } from "./Utils";
 
+/**
+ * Wrapper pro volání API, u kterých chceme automaticky zobrazit toaster s chybou ze serveru.
+ * 
+ * @param apiFunction volaná API funkce
+ */
+export function errorHandler<T>(apiFunction: () => Promise<T>): Promise<T> {
+    return new Promise<T>((resolve, reject) => {
+        apiFunction().then((result) => {
+            resolve(result);
+        }).catch(e => {
+            toast.error(e.message, { theme: "colored" });
+        });
+    });
+}
+
 async function request<TResponse>(
     url: string,
     config: RequestInit = {}
 ): Promise<TResponse> {
     config.headers = config?.headers ? new Headers(config.headers) : new Headers();
     config.headers.set("Authorization", `Bearer ${getToken()}`);
-    return fetch(getBaseUrl() + url, config).then(response => {
+    try {
+        const response = await fetch(getBaseUrl() + url, config);
         if (!response.ok) {
-            throw new Error(response.statusText);
+            const json = await response.json();
+            // Vyhodíme samotnou hlášku z odpovědi, odchytí si jí errorHandler
+            throw new Error(json.error);
         }
         return response.json() as TResponse;
-    });
+    } catch (e) {
+        return Promise.reject(e);
+    }
 }
 
 const api = {

client/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { EVENT_DISCONNECT, EVENT_MESSAGE, SocketContext } from './context/socket';
-import { addChoice, addPizza, changeDepartureTime, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getQrUrl, lockPizzaDay, removeChoice, removeChoices, removePizza, unlockPizzaDay, updateNote } from './Api';
+import { addChoice, addPizza, changeDepartureTime, createPizzaDay, deletePizzaDay, errorHandler, finishDelivery, finishOrder, getData, getQrUrl, lockPizzaDay, removeChoice, removeChoices, removePizza, unlockPizzaDay, updateNote } from './Api';
 import { useAuth } from './context/auth';
 import Login from './Login';
 import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
@@ -165,7 +165,7 @@ function App() {
   const doAddChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
     const index = Object.keys(Locations).indexOf(event.target.value as unknown as Locations);
     if (auth?.login) {
-      await addChoice(index, undefined, dayIndex);
+      await errorHandler(() => addChoice(index, undefined, dayIndex));
       if (foodChoiceRef.current?.value) {
         foodChoiceRef.current.value = "";
       }
@@ -177,14 +177,14 @@ function App() {
       const restaurantKey = choiceRef.current.value;
       if (auth?.login) {
         const locationIndex = Object.keys(Locations).indexOf(restaurantKey as unknown as Locations);
-        await addChoice(locationIndex, Number(event.target.value), dayIndex);
+        await errorHandler(() => addChoice(locationIndex, Number(event.target.value), dayIndex));
       }
     }
   }
 
   const doRemoveChoices = async (locationKey: string) => {
     if (auth?.login) {
-      await removeChoices(Number(locationKey), dayIndex);
+      await errorHandler(() => removeChoices(Number(locationKey), dayIndex));
       // Vyresetujeme výběr, aby bylo jasné pro který případně vybíráme jídlo
       if (choiceRef?.current?.value) {
         choiceRef.current.value = "";
@@ -197,7 +197,7 @@ function App() {
 
   const doRemoveFoodChoice = async (locationKey: string, foodIndex: number) => {
     if (auth?.login) {
-      await removeChoice(Number(locationKey), foodIndex, dayIndex);
+      await errorHandler(() => removeChoice(Number(locationKey), foodIndex, dayIndex));
       if (choiceRef?.current?.value) {
         choiceRef.current.value = "";
       }
@@ -358,11 +358,7 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>Možnost náhledu na celý týden a výběru na následující dny v týdnu</li>
-              <ul>
-                <li>Pizza day je možno založit pouze pro aktuální den</li>
-                <li>Ne, šipky na klávesnici zatím nefungují</li>
-              </ul>
+              <li>Ochrana proti některým Stánkovinám</li>
             </ul>
           </Alert>
           {dayIndex != null &&