improve client a bit

components/contact.js

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import { WizardContext, ACTIONS } from '../context/wizardStore'
+import Required from './required'
 
 import Form from 'react-bootstrap/Form'
 import Col from 'react-bootstrap/Col'
@@ -12,54 +13,69 @@ export default function Contact() {
   return (
     <>
       <Form.Group>
-        <Form.Label>Name</Form.Label>
+        <Form.Label>
+          Name <Required />
+        </Form.Label>
         <Form.Control
           type="text"
           name="name"
           placeholder="Name"
           value={name}
           onChange={onChangeEvent}
+          required
         />
       </Form.Group>
       <Form.Group>
-        <Form.Label>E-Mail</Form.Label>
+        <Form.Label>
+          E-Mail <Required />
+        </Form.Label>
         <Form.Control
           type="email"
           name="email"
           placeholder="E-Mail"
           value={email}
           onChange={onChangeEvent}
+          required
         />
       </Form.Group>
       <Form.Group>
-        <Form.Label>Straße</Form.Label>
+        <Form.Label>
+          Straße <Required />
+        </Form.Label>
         <Form.Control
           type="text"
           name="street"
           placeholder="Straße"
           value={street}
           onChange={onChangeEvent}
+          required
         />
       </Form.Group>
       <Form.Row>
         <Form.Group as={Col} xs={4}>
-          <Form.Label>PLZ</Form.Label>
+          <Form.Label>
+            PLZ <Required />
+          </Form.Label>
           <Form.Control
             type="text"
             name="zip"
             placeholder="PLZ"
             value={zip}
             onChange={onChangeEvent}
+            required
           />
         </Form.Group>
         <Form.Group as={Col}>
-          <Form.Label>Stadt</Form.Label>
+          <Form.Label>
+            Stadt <Required />
+          </Form.Label>
           <Form.Control
             type="text"
             name="city"
             placeholder="Stadt"
             value={city}
             onChange={onChangeEvent}
+            required
           />
         </Form.Group>
       </Form.Row>

components/dateSelect.js

@@ -9,13 +9,14 @@ import moment from 'moment'
 import 'react-dates/initialize'
 import { DateRangePicker, SingleDatePicker } from 'react-dates'
 
+import Required from './required'
 import { dateFormat } from '../lib/dateHelper'
 
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
   const [focusedInput, setFocusedInput] = useState(null)
-  const { state, onChange, onChangeEvent } = useContext(WizardContext)
+  const { state, onChange } = useContext(WizardContext)
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
@@ -41,7 +42,9 @@ export default function DateSelect() {
   return (
     <>
       <Form.Group controlId="dateSelect">
-        <Form.Label>Willst du einen odere mehrere Tage buchen?</Form.Label>
+        <Form.Label>
+          Willst du einen odere mehrere Tage buchen? <Required />
+        </Form.Label>
         <Form.Check
           type="radio"
           id={'multipleDays-single'}
@@ -78,7 +81,7 @@ export default function DateSelect() {
       {multipleDays !== null && (
         <Form.Group>
           <Form.Label component="legend" style={{ display: 'block' }}>
-            Datum
+            Datum <Required />
           </Form.Label>
           {multipleDays === false && (
             <SingleDatePicker
@@ -86,6 +89,7 @@ export default function DateSelect() {
               date={startDate && moment(startDate)}
               placeholder="Datum"
               numberOfMonths={1}
+              required
               onDateChange={(date) =>
                 onChange({
                   startDate: date && dateFormat(date),
@@ -104,6 +108,7 @@ export default function DateSelect() {
               startDateId="startDate"
               startDatePlaceholderText="Start"
               endDatePlaceholderText="Ende"
+              required
               numberOfMonths={1}
               endDate={endDate && moment(endDate)}
               endDateId="endDate"

components/reason.js

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import { WizardContext, ACTIONS } from '../context/wizardStore'
+import Required from './required'
 
 import Form from 'react-bootstrap/Form'
 
@@ -11,13 +12,16 @@ export default function Contact() {
   return (
     <>
       <Form.Group>
-        <Form.Label>Zweck der Fahrt</Form.Label>
+        <Form.Label>
+          Zweck der Fahrt <Required />
+        </Form.Label>
         <Form.Control
           type="text"
           name="purpose"
           placeholder="Zweck der Fahrt"
           value={purpose}
           onChange={onChangeEvent}
+          required
         />
       </Form.Group>
       <Form.Group>
@@ -31,13 +35,16 @@ export default function Contact() {
         />
       </Form.Group>
       <Form.Group>
-        <Form.Label>Ziel der Fahrt</Form.Label>
+        <Form.Label>
+          Ziel der Fahrt <Required />
+        </Form.Label>
         <Form.Control
           type="text"
           name="destination"
           placeholder="Fahrtziel"
           value={destination}
           onChange={onChangeEvent}
+          required
         />
       </Form.Group>
     </>

components/required.js

@@ -0,0 +1,3 @@
+import react from 'react'
+
+export default () => <span>*</span>

components/wizard.js

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react'
+import { useContext } from 'react'
 
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
@@ -11,7 +11,23 @@ import Contact from './contact'
 //import Driver from './driver'
 
 function WizardInternal() {
-  const { state, storeBooking } = useContext(WizardContext)
+  const { onSubmit, state } = useContext(WizardContext)
+  const { postData, postDataSuccess, postDataError } = state
+
+  if (postDataSuccess) {
+    return (
+      <>
+        <h3>Danke, die Buchung ist in Bearbeitung!</h3>
+        <p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
+        <p>
+          Sollen die eingegebenen Daten in Deinem Browser für die nächste
+          Buchung gespeichert werden?
+        </p>
+        <Button>Ja, bitte speichern</Button>
+      </>
+    )
+  }
+
   const onChange = (payload) =>
     dispatch({ action: ACTIONS.SET_FORM_DATA, payload })
 
@@ -19,14 +35,16 @@ function WizardInternal() {
     <Form
       onSubmit={(event) => {
         event.preventDefault()
-
-        storeBooking()
+        onSubmit()
       }}
     >
       <DateSelect />
       <Reason />
       <Contact />
-      <Button type="submit">Absenden</Button>
+      <div>{postDataError}</div>
+      <Button type="submit" disabled={postData}>
+        {postData ? 'Speichern...' : 'Absenden'}
+      </Button>
     </Form>
   )
 }

context/wizardStore.js

@@ -4,6 +4,9 @@ export const WizardContext = React.createContext()
 
 export const ACTIONS = {
   SET_FORM_DATA: 'setFormData',
+  POST_DATA: 'postData',
+  POST_DATA_ERROR: 'postDataError',
+  POST_DATA_SUCCESS: 'postDataSuccess',
 }
 
 function reducer(state, action) {
@@ -16,6 +19,31 @@ function reducer(state, action) {
           ...action.payload,
         },
       }
+    case ACTIONS.POST_DATA:
+      return {
+        ...state,
+        postData: true,
+        postDataError: null,
+        postDataSuccess: null,
+      }
+    case ACTIONS.POST_DATA_ERROR:
+      return {
+        ...state,
+        postData: false,
+        postDataError: action.payload,
+        postDataSuccess: null,
+      }
+    case ACTIONS.POST_DATA_SUCCESS:
+      return {
+        ...state,
+        formData: {
+          ...state.formData,
+          ...action.payload,
+        },
+        postData: false,
+        postDataError: null,
+        postDataSuccess: true,
+      }
     default:
       throw new Error(`Unkown Action type ${action.type}`)
   }
@@ -28,8 +56,26 @@ function debugReducer(state, action) {
   return newState
 }
 
-async function createBooking(state) {
-  const { name, email, startDate, endDate } = state.formData
+const initialState = {
+  postData: false,
+  postDataError: null,
+  postDataSuccess: null,
+  formData: {
+    multipleDays: true,
+    //startDate: '2020-08-10',
+    //endDate: '2020-08-17',
+    //purpose: 'Sommerlager 2021',
+    //org: 'VCP Rosenfeld',
+    //destination: 'Lüneburger Heide',
+    //name: 'Thomas Ruoff',
+    //email: 'thomasruoff@gmail.com',
+    //street: 'Mömpelgardgasse 25',
+    //zip: '72348',
+    //city: 'Rosenfeld',
+  },
+}
+
+async function createBooking(formData) {
   const response = await fetch('/api/booking', {
     method: 'POST',
     mode: 'cors',
@@ -39,23 +85,14 @@ async function createBooking(state) {
       'Content-Type': 'application/json',
     },
     referrerPolicy: 'no-referrer',
-    body: JSON.stringify({ name, email, startDate, endDate }),
+    body: JSON.stringify(formData),
   })
-
   return response.json()
 }
 
-const initialState = {
-  formData: {
-    multipleDays: null,
-  },
-}
-
 export default function WizardStore({ children }) {
   const [state, dispatch] = useReducer(debugReducer, initialState)
 
-  const storeBooking = () => createBooking(state)
-
   const onChangeEvent = (event) => {
     const { name, value } = event.target
 
@@ -72,9 +109,21 @@ export default function WizardStore({ children }) {
     })
   }
 
+  const onSubmit = async () => {
+    dispatch({ type: ACTIONS.POST_DATA })
+
+    try {
+      const bookingData = await createBooking(state.formData)
+      dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: bookingData })
+    } catch (error) {
+      console.error(error)
+      dispatch({ type: ACTIONS.POST_DATA_ERROR, payload: error.message })
+    }
+  }
+
   return (
     <WizardContext.Provider
-      value={{ state, dispatch, onChangeEvent, onChange, storeBooking }}
+      value={{ state, dispatch, onChangeEvent, onChange, onSubmit }}
     >
       {children}
     </WizardContext.Provider>