diff --git a/frontend/package.json b/frontend/package.json index 45623e467..895f1afa1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -29,7 +29,7 @@ "@emotion/react": "^11.11.1", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", - "@hookform/resolvers": "^3.1.0", + "@hookform/resolvers": "^3.3.4", "@mui/icons-material": "^5.14.13", "@mui/lab": "^5.0.0-alpha.148", "@mui/material": "^5.14.13", diff --git a/frontend/src/components/pages/cabins/Admin/BookingSemesterPicker/BookingSemesterForm.tsx b/frontend/src/components/pages/cabins/Admin/BookingSemesterPicker/BookingSemesterForm.tsx index 092e117cf..e1df2963f 100644 --- a/frontend/src/components/pages/cabins/Admin/BookingSemesterPicker/BookingSemesterForm.tsx +++ b/frontend/src/components/pages/cabins/Admin/BookingSemesterPicker/BookingSemesterForm.tsx @@ -7,13 +7,13 @@ import * as yup from "@/lib/validation"; export type BookingForm = { fall: { active: boolean; - start: string; - end: string; + start: Date; + end: Date; }; spring: { active: boolean; - start: string; - end: string; + start: Date; + end: Date; }; }; @@ -59,7 +59,7 @@ export const BookingSemesterForm: React.FC = ({ defaultValues, values, on formState: { errors }, control, handleSubmit, - } = useForm({ + } = useForm({ resolver: yupResolver(validationSchema), mode: "onTouched", defaultValues, diff --git a/frontend/src/components/pages/cabins/Admin/BookingSemesterPicker/index.tsx b/frontend/src/components/pages/cabins/Admin/BookingSemesterPicker/index.tsx index 91c9292c6..9301e8f17 100644 --- a/frontend/src/components/pages/cabins/Admin/BookingSemesterPicker/index.tsx +++ b/frontend/src/components/pages/cabins/Admin/BookingSemesterPicker/index.tsx @@ -2,27 +2,31 @@ import { useMutation, useQuery } from "@apollo/client"; import { Alert, AlertTitle, Snackbar } from "@mui/material"; import { useState } from "react"; +import { BookingForm, BookingSemesterForm } from "./BookingSemesterForm"; + import { Link } from "@/components"; import { BookingSemesterDocument, UpdateBookingSemesterDocument } from "@/generated/graphql"; import dayjs from "@/lib/date"; -import { BookingForm, BookingSemesterForm } from "./BookingSemesterForm"; - const DATE_FORMAT = "YYYY-MM-DD"; function formatDate(date: string | Date) { return dayjs(date).format(DATE_FORMAT); } +function parseDate(date: string) { + return dayjs(date, DATE_FORMAT).toDate(); +} + const defaultBookingSemester: BookingForm = { fall: { - start: formatDate(new Date()), - end: formatDate(new Date()), + start: new Date(), + end: new Date(), active: false, }, spring: { - start: formatDate(new Date()), - end: formatDate(new Date()), + start: new Date(), + end: new Date(), active: false, }, }; @@ -90,13 +94,13 @@ function useBookingSemester(): BookingForm | undefined { if (data?.bookingSemester) { values = { fall: { - start: data.bookingSemester.fallStartDate, - end: data.bookingSemester.fallEndDate, + start: parseDate(data.bookingSemester.fallStartDate), + end: parseDate(data.bookingSemester.fallEndDate), active: data.bookingSemester.fallSemesterActive, }, spring: { - start: data.bookingSemester.springStartDate, - end: data.bookingSemester.springEndDate, + start: parseDate(data.bookingSemester.springStartDate), + end: parseDate(data.bookingSemester.springEndDate), active: data.bookingSemester.springSemesterActive, }, }; diff --git a/frontend/src/components/pages/cabins/booking/Steps/Contract.tsx b/frontend/src/components/pages/cabins/booking/Steps/Contract.tsx index 2f2b31eb4..b63cc2f76 100644 --- a/frontend/src/components/pages/cabins/booking/Steps/Contract.tsx +++ b/frontend/src/components/pages/cabins/booking/Steps/Contract.tsx @@ -16,17 +16,17 @@ import { import Image from "next/image"; import { useForm } from "react-hook-form"; -import { ActiveBookingResponsibleDocument, CabinFragment } from "@/generated/graphql"; -import dayjs from "@/lib/date"; -import * as yup from "@/lib/validation"; -import hytteforeningen from "~/public/static/cabins/logo.svg"; - import { useStepContext } from "../StepContext"; import { calculatePrice } from "./calculatePrice"; import { ContactInfo } from "./ContactInfo"; import { Stepper } from "./Stepper"; +import { ActiveBookingResponsibleDocument, CabinFragment } from "@/generated/graphql"; +import dayjs from "@/lib/date"; +import * as yup from "@/lib/validation"; +import hytteforeningen from "~/public/static/cabins/logo.svg"; + type Props = { chosenCabins: CabinFragment[]; contactInfo: ContactInfo | undefined; @@ -43,11 +43,15 @@ export const Contract: React.FC = ({ chosenCabins, contactInfo, startDate register, handleSubmit, formState: { errors }, - } = useForm<{ approved: boolean }>({ + } = useForm({ resolver: yupResolver( - yup.object({ - approved: yup.boolean().required("Du må godkjenne leieavtalen").isTrue("Du må godkjenne leieavtalen"), - }) + yup + .object({ + approved: yup.boolean().required("Du må godkjenne leieavtalen").isTrue("Du må godkjenne leieavtalen"), + }) + .shape({ + approved: yup.boolean().required().isTrue(), + }) ), defaultValues: { approved: false, diff --git a/frontend/yarn.lock b/frontend/yarn.lock index a53c9a906..46d2009cb 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1565,10 +1565,10 @@ dependencies: "@hapi/hoek" "^9.0.0" -"@hookform/resolvers@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.1.0.tgz#ff83ef4aa6078173201da131ceea4c3583b67034" - integrity sha512-z0A8K+Nxq+f83Whm/ajlwE6VtQlp/yPHZnXw7XWVPIGm1Vx0QV8KThU3BpbBRfAZ7/dYqCKKBNnQh85BkmBKkA== +"@hookform/resolvers@^3.3.4": + version "3.3.4" + resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.3.4.tgz#de9b668c2835eb06892290192de6e2a5c906229b" + integrity sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ== "@humanwhocodes/config-array@^0.11.10": version "0.11.10"