From 3a9daec61eb89ad2bd2a8c7ca0878a0c8ede32b7 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Tue, 23 Mar 2021 13:37:07 +0100
Subject: [PATCH] form bugfixes

- validation message
- cancel
---
 src/common/input/ChakraInput.jsx       |  9 ++-------
 src/common/input/ChakraNumberInput.jsx |  9 ++-------
 src/features/form/EventForm.jsx        | 15 +++++++++------
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/common/input/ChakraInput.jsx b/src/common/input/ChakraInput.jsx
index 1e85cd8c6..c282b2f65 100644
--- a/src/common/input/ChakraInput.jsx
+++ b/src/common/input/ChakraInput.jsx
@@ -10,13 +10,8 @@ export default function ChakraInput(props) {
     <Field name={name}>
       {({ field, form }) => {
         return (
-          <FormControl>
-            <FormLabel
-              htmlFor={name}
-              isInvalid={form.errors[name] && form.touched[name]}
-            >
-              {label}
-            </FormLabel>
+          <FormControl isInvalid={form.errors[name] && form.touched[name]}>
+            <FormLabel htmlFor={name}>{label}</FormLabel>
             <Input id={name} {...rest} {...field} />
             <FormErrorMessage>{form.errors[name]}</FormErrorMessage>
           </FormControl>
diff --git a/src/common/input/ChakraNumberInput.jsx b/src/common/input/ChakraNumberInput.jsx
index 54e9bc069..887797233 100644
--- a/src/common/input/ChakraNumberInput.jsx
+++ b/src/common/input/ChakraNumberInput.jsx
@@ -15,13 +15,8 @@ export default function ChakraNumberInput(props) {
     <Field name={name}>
       {({ field, form }) => {
         return (
-          <FormControl>
-            <FormLabel
-              htmlFor={name}
-              isInvalid={form.errors[name] && form.touched[name]}
-            >
-              {label}
-            </FormLabel>
+          <FormControl isInvalid={form.errors[name] && form.touched[name]}>
+            <FormLabel htmlFor={name}>{label}</FormLabel>
             <NumberInput
               defaultValue={field.value}
               {...rest}
diff --git a/src/features/form/EventForm.jsx b/src/features/form/EventForm.jsx
index ecb23220e..2fcfefdb4 100644
--- a/src/features/form/EventForm.jsx
+++ b/src/features/form/EventForm.jsx
@@ -1,5 +1,5 @@
 import { Button } from '@chakra-ui/button';
-import { Formik } from 'formik';
+import { Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import ChakraInput from '../../common/input/ChakraInput';
 import ChakraNumberInput from '../../common/input/ChakraNumberInput';
@@ -23,10 +23,13 @@ export default function EventForm(props) {
   };
 
   const validationSchema = Yup.object({
-    title: Yup.string().required(),
+    title: Yup.string().required('An event requires a title'),
     subtitle: Yup.string(),
     presenter: Yup.string(),
-    timerDuration: Yup.number().required().min(1).max(60),
+    timerDuration: Yup.number()
+      .min(1)
+      .max(60)
+      .required('An event requires a duration'),
   });
 
   const submitForm = (values) => {
@@ -50,7 +53,7 @@ export default function EventForm(props) {
         }}
       >
         {(props) => (
-          <form onSubmit={props.handleSubmit}>
+          <Form onSubmit={props.handleSubmit}>
             <ChakraInput name='title' label='Event Title' />
             <ChakraInput name='subtitle' label='Event Subtitle' />
             <ChakraInput name='presenter' label='Presenter Name' />
@@ -67,7 +70,7 @@ export default function EventForm(props) {
               <Button
                 variant='outline'
                 disabled={props.isSubmitting}
-                onClick={() => console.log('ccancel form?')}
+                type='reset'
               >
                 Cancel
               </Button>
@@ -80,7 +83,7 @@ export default function EventForm(props) {
                 Save
               </Button>
             </div>
-          </form>
+          </Form>
         )}
       </Formik>
     </div>