Commit 722a7c2b authored by cizek's avatar cizek
Browse files

added validation for stand reservation

parent 0a18b56e
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" }}>
......
import { ItemCategory } from "models/item-category";
export type Reservation = {
standTypeId: string;
userId: string;
itemCategories: ItemCategory[];
itemCategories: string[];
};
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"),
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment