From 6fb88c86a8fccb37d14a1c0c465ada1968443f7f Mon Sep 17 00:00:00 2001
From: Leander Tolksdorf <leander.tolksdorf@fu-berlin.de>
Date: Wed, 8 Dec 2021 18:22:51 +0100
Subject: [PATCH] Rename Book to BookingForm
---
.../src/pages/{Book.tsx => BookingForm.tsx} | 70 +++++++++++--------
1 file changed, 42 insertions(+), 28 deletions(-)
rename client/src/pages/{Book.tsx => BookingForm.tsx} (67%)
diff --git a/client/src/pages/Book.tsx b/client/src/pages/BookingForm.tsx
similarity index 67%
rename from client/src/pages/Book.tsx
rename to client/src/pages/BookingForm.tsx
index ed590ca..e5bb77c 100644
--- a/client/src/pages/Book.tsx
+++ b/client/src/pages/BookingForm.tsx
@@ -2,6 +2,7 @@ import React from "react";
import { Button, Col, Container, Form, Row } from "react-bootstrap";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
import validator from "validator";
import Divider from "../components/Divider";
import Modal from "../components/Modal";
@@ -17,20 +18,31 @@ type FormData = {
};
function Book() {
+ const navigate = useNavigate();
const {
control,
handleSubmit,
formState: { errors },
} = useForm<FormData>({ mode: "onBlur" });
const { t, i18n } = useTranslation();
- const onSubmit = (data: FormData) => console.log(data);
+ const onSubmit = (data: FormData) => {
+ try {
+ /**
+ * Logic to handle booking creation. Should be separated into a service in another file.
+ * await createBooking(data);
+ */
+ navigate("/book/success");
+ } catch (e) {
+ alert("error");
+ }
+ };
return (
<Container className="pt-5">
<Row>
<Col xs={{ span: 10, offset: 1 }}>
<Modal>
- <h1 className="text-center">{t("book.title")}</h1>
- <p className="text-center">{t("book.subtitle")}</p>
+ <h1 className="text-center">{t("bookingForm.title")}</h1>
+ <p className="text-center">{t("bookingForm.subtitle")}</p>
<Divider />
<Form onSubmit={handleSubmit(onSubmit)}>
<Controller
@@ -38,15 +50,15 @@ function Book() {
control={control}
render={({ field }) => (
<div className="mb-2">
- <Form.Label>{t("book.labelBoatName")}</Form.Label>
+ <Form.Label>{t("bookingForm.labelBoatName")}</Form.Label>
<Form.Control type="text" {...field} />
</div>
)}
rules={{
required: {
value: true,
- message: t("book.messages.required", {
- val: t("book.labelBoatName"),
+ message: t("bookingForm.messages.required", {
+ val: t("bookingForm.labelBoatName"),
}),
},
}}
@@ -56,21 +68,21 @@ function Book() {
control={control}
render={({ field }) => (
<div className="mb-2">
- <Form.Label>{t("book.labelStartTime")}</Form.Label>
+ <Form.Label>{t("bookingForm.labelStartTime")}</Form.Label>
<Form.Control type="text" {...field} />
</div>
)}
rules={{
required: {
value: true,
- message: t("book.messages.required", {
- val: t("book.labelStartTime"),
+ message: t("bookingForm.messages.required", {
+ val: t("bookingForm.labelStartTime"),
}),
},
pattern: {
value: /(((0|1)\d)|(2[0-3])):[0-5]\d/,
- message: t("book.messages.invalidTime", {
- val: t("book.labelStartTime"),
+ message: t("bookingForm.messages.invalidTime", {
+ val: t("bookingForm.labelStartTime"),
}),
},
}}
@@ -80,21 +92,23 @@ function Book() {
control={control}
render={({ field }) => (
<div className="mb-2">
- <Form.Label>{t("book.labelEstimatedEndTime")}</Form.Label>
+ <Form.Label>
+ {t("bookingForm.labelEstimatedEndTime")}
+ </Form.Label>
<Form.Control type="text" {...field} />
</div>
)}
rules={{
required: {
value: true,
- message: t("book.messages.required", {
- val: t("book.labelEstimatedEndTime"),
+ message: t("bookingForm.messages.required", {
+ val: t("bookingForm.labelEstimatedEndTime"),
}),
},
pattern: {
value: /(((0|1)\d)|(2[0-3])):[0-5]\d/,
- message: t("book.messages.invalidTime", {
- val: t("book.labelEstimatedEndTime"),
+ message: t("bookingForm.messages.invalidTime", {
+ val: t("bookingForm.labelEstimatedEndTime"),
}),
},
}}
@@ -104,15 +118,15 @@ function Book() {
control={control}
render={({ field }) => (
<div className="mb-2">
- <Form.Label>{t("book.labelDestination")}</Form.Label>
+ <Form.Label>{t("bookingForm.labelDestination")}</Form.Label>
<Form.Control type="text" {...field} />
</div>
)}
rules={{
required: {
value: true,
- message: t("book.messages.required", {
- val: t("book.labelDestination"),
+ message: t("bookingForm.messages.required", {
+ val: t("bookingForm.labelDestination"),
}),
},
}}
@@ -122,20 +136,20 @@ function Book() {
control={control}
render={({ field }) => (
<div className="mb-2">
- <Form.Label>{t("book.labelEmail")}</Form.Label>
+ <Form.Label>{t("bookingForm.labelEmail")}</Form.Label>
<Form.Control type="email" {...field} />
</div>
)}
rules={{
required: {
value: true,
- message: t("book.messages.required", {
- val: t("book.labelEmail"),
+ message: t("bookingForm.messages.required", {
+ val: t("bookingForm.labelEmail"),
}),
},
validate: (value: string) =>
validator.isEmail(value) ||
- t("book.messages.invalidEmail").toString(),
+ t("bookingForm.messages.invalidEmail").toString(),
}}
/>
<Controller
@@ -143,15 +157,15 @@ function Book() {
control={control}
render={({ field }) => (
<div className="mb-2">
- <Form.Label>{t("book.labelName")}</Form.Label>
+ <Form.Label>{t("bookingForm.labelName")}</Form.Label>
<Form.Control type="text" {...field} />
</div>
)}
rules={{
required: {
value: true,
- message: t("book.messages.required", {
- val: t("book.labelName"),
+ message: t("bookingForm.messages.required", {
+ val: t("bookingForm.labelName"),
}),
},
}}
@@ -161,13 +175,13 @@ function Book() {
control={control}
render={({ field }) => (
<div className="mb-2">
- <Form.Label>{t("book.labelAnnotations")}</Form.Label>
+ <Form.Label>{t("bookingForm.labelAnnotations")}</Form.Label>
<Form.Control as="textarea" type="text" {...field} />
</div>
)}
/>
<Button type="submit" variant="secondary" className="mt-2 w-100">
- {t("book.buttonBookBoat")}
+ {t("bookingForm.buttonBookBoat")}
</Button>
<div className="mt-2">
{Object.values(errors).map((error) => (
--
GitLab