added validation for stand reservation

frontend/src/modules/stand-reservation/stand-reservation.tsx

 import { useEffect, useState, useCallback } from "react";
-import {
-  getItemCategories,
-  getStandTypes,
-  putReservation,
-} from "./stand-reservation-api";
-import { ItemCategory } from "../../models/item-category";
+import { useNavigate, useParams } from "react-router-dom";
 import { Form, Formik } from "formik";
 import { useMutation } from "react-query";
 import {
@@ -17,11 +12,19 @@ import {
   Title,
   Group,
 } from "@mantine/core";
+
 import { StandType } from "models/stand-type";
 import { useAuth } from "context/auth/auth-context";
 import { useNotification } from "context/notification/notification-context";
+
+import {
+  getItemCategories,
+  getStandTypes,
+  putReservation,
+} from "./stand-reservation-api";
+import { ItemCategory } from "../../models/item-category";
 import { Reservation } from "./stand-resevation-type";
-import { useNavigate, useParams } from "react-router-dom";
+import { standSchema } from "./stand-validation";
 
 export const StandReservation = () => {
   const [itemCategories, setItemCategories] = useState<ItemCategory[]>([]);
@@ -88,7 +91,7 @@ export const StandReservation = () => {
     <Container sx={{ height: "100%" }}>
       <Center sx={{ height: "100%" }}>
         <Paper shadow="md" sx={{ padding: 25, width: "100%" }}>
-          <Formik
+          <Formik<Reservation>
             initialValues={{
               standTypeId: "",
               // user has to be logged in at this point
@@ -97,8 +100,9 @@ export const StandReservation = () => {
               itemCategories: [],
             }}
             onSubmit={handleSubmit}
+            validationSchema={standSchema}
           >
-            {({ setFieldValue, errors }) => (
+            {({ setFieldValue, errors, touched }) => (
               <Form>
                 <Title order={1} sx={{ marginBottom: "1rem" }}>
                   Stand Reservation
@@ -114,19 +118,25 @@ export const StandReservation = () => {
                     value: standType.id,
                     label: standType.name,
                   }))}
-                  error={errors.standTypeId}
+                  error={touched.standTypeId && errors.standTypeId}
                   required
                 />
                 <MultiSelect
                   name="itemCategories"
-                  onChange={(value) => setFieldValue("itemCategories", value)}
+                  onChange={(value) => {
+                    setFieldValue("itemCategories", value);
+                  }}
                   data={itemCategories.map((itemCategory) => ({
                     value: itemCategory.id,
                     label: itemCategory.label,
                   }))}
                   label="Select sold item categories"
                   placeholder="Pick all that you like"
-                  error={errors.itemCategories}
+                  error={
+                    touched.itemCategories &&
+                    typeof errors.itemCategories === "string" &&
+                    errors.itemCategories
+                  }
                   required
                 />
                 <Group position="right" sx={{ marginTop: "1rem" }}>

frontend/src/modules/stand-reservation/stand-resevation-type.ts

-import { ItemCategory } from "models/item-category";
-
 export type Reservation = {
   standTypeId: string;
   userId: string;
-  itemCategories: ItemCategory[];
+  itemCategories: string[];
 };

frontend/src/modules/stand-reservation/stand-validation.ts

+import * as yup from "yup";
+
+import { Reservation } from "./stand-resevation-type";
+
+export const standSchema: yup.SchemaOf<Reservation> = yup.object().shape({
+  userId: yup.string().required(""),
+  standTypeId: yup.string().required("stand type is required"),
+  itemCategories: yup
+    .array()
+    .of(yup.string().required())
+    .min(1, "at least one item category is required")
+    .required("item category is required"),
+});