make form just simple

components/contact.js

@@ -5,7 +5,7 @@ import Form from 'react-bootstrap/Form'
 import Col from 'react-bootstrap/Col'
 
 export default function Contact() {
-  const { state } = useContext(WizardContext)
+  const { state, onChangeEvent } = useContext(WizardContext)
 
   const { name, email, street, zip, city } = state.formData
 
@@ -13,38 +13,53 @@ export default function Contact() {
     <>
       <Form.Group>
         <Form.Label>Name</Form.Label>
-        <Form.Control type="text" id="name" placeholder="Name" value={name} />
+        <Form.Control
+          type="text"
+          name="name"
+          placeholder="Name"
+          value={name}
+          onChange={onChangeEvent}
+        />
       </Form.Group>
       <Form.Group>
         <Form.Label>E-Mail</Form.Label>
         <Form.Control
           type="email"
-          id="email"
+          name="email"
           placeholder="E-Mail"
           value={email}
+          onChange={onChangeEvent}
         />
       </Form.Group>
       <Form.Group>
         <Form.Label>Straße</Form.Label>
         <Form.Control
           type="text"
-          id="street"
+          name="street"
           placeholder="Straße"
           value={street}
+          onChange={onChangeEvent}
         />
       </Form.Group>
       <Form.Row>
         <Form.Group as={Col} xs={4}>
           <Form.Label>PLZ</Form.Label>
-          <Form.Control type="text" id="plz" placeholder="PLZ" value={zip} />
+          <Form.Control
+            type="text"
+            name="zip"
+            placeholder="PLZ"
+            value={zip}
+            onChange={onChangeEvent}
+          />
         </Form.Group>
         <Form.Group as={Col}>
           <Form.Label>Stadt</Form.Label>
           <Form.Control
             type="text"
-            id="city"
+            name="city"
             placeholder="Stadt"
             value={city}
+            onChange={onChangeEvent}
           />
         </Form.Group>
       </Form.Row>

components/dateSelect.js

@@ -9,11 +9,13 @@ import moment from 'moment'
 import 'react-dates/initialize'
 import { DateRangePicker, SingleDatePicker } from 'react-dates'
 
+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, dispatch } = useContext(WizardContext)
+  const { state, onChange, onChangeEvent } = useContext(WizardContext)
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
@@ -49,13 +51,10 @@ export default function DateSelect() {
           checked={multipleDays === false}
           onChange={() => {
             setFocusedInput(null)
-            dispatch({
+            onChange({
-              type: ACTIONS.SET_FORM_DATA,
+              multipleDays: false,
-              payload: {
+              startDate: null,
-                multipleDays: false,
+              endDate: null,
-                startDate: null,
-                endDate: null,
-              },
             })
           }}
         />
@@ -68,13 +67,10 @@ export default function DateSelect() {
           checked={multipleDays === true}
           onChange={() => {
             setFocusedInput(null)
-            dispatch({
+            onChange({
-              type: ACTIONS.SET_FORM_DATA,
+              multipleDays: true,
-              payload: {
+              startDate: null,
-                multipleDays: true,
+              endDate: null,
-                startDate: null,
-                endDate: null,
-              },
             })
           }}
         />
@@ -91,11 +87,8 @@ export default function DateSelect() {
               placeholder="Datum"
               numberOfMonths={1}
               onDateChange={(date) =>
-                dispatch({
+                onChange({
-                  type: ACTIONS.SET_FORM_DATA,
+                  startDate: date && dateFormat(date),
-                  payload: {
-                    startDate: date && date.toISOString(),
-                  },
                 })
               }
               focused={typeof focusedInput === 'boolean' && focusedInput}
@@ -115,12 +108,9 @@ export default function DateSelect() {
               endDate={endDate && moment(endDate)}
               endDateId="endDate"
               onDatesChange={({ startDate, endDate }) => {
-                dispatch({
+                onChange({
-                  type: ACTIONS.SET_FORM_DATA,
+                  startDate: startDate && dateFormat(startDate),
-                  payload: {
+                  endDate: endDate && dateFormat(endDate),
-                    startDate: startDate && startDate.toISOString(),
-                    endDate: endDate && endDate.toISOString(),
-                  },
                 })
               }}
               focusedInput={focusedInput}

components/reason.js

@@ -4,7 +4,7 @@ import { WizardContext, ACTIONS } from '../context/wizardStore'
 import Form from 'react-bootstrap/Form'
 
 export default function Contact() {
-  const { state } = useContext(WizardContext)
+  const { state, onChangeEvent } = useContext(WizardContext)
 
   const { purpose, destination, org } = state.formData
 
@@ -14,22 +14,30 @@ export default function Contact() {
         <Form.Label>Zweck der Fahrt</Form.Label>
         <Form.Control
           type="text"
-          id="purpose"
+          name="purpose"
           placeholder="Zweck der Fahrt"
           value={purpose}
+          onChange={onChangeEvent}
         />
       </Form.Group>
       <Form.Group>
         <Form.Label>Verein</Form.Label>
-        <Form.Control type="text" id="org" placeholder="Verein" value={org} />
+        <Form.Control
+          type="text"
+          name="org"
+          placeholder="Verein"
+          value={org}
+          onChange={onChangeEvent}
+        />
       </Form.Group>
       <Form.Group>
         <Form.Label>Ziel der Fahrt</Form.Label>
         <Form.Control
           type="text"
-          id="destination"
+          name="destination"
           placeholder="Fahrtziel"
           value={destination}
+          onChange={onChangeEvent}
         />
       </Form.Group>
     </>

components/wizard.js

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useRef } from 'react'
 
 import Button from 'react-bootstrap/Button'
 import Form from 'react-bootstrap/Form'
@@ -10,50 +10,23 @@ import Reason from './reason'
 import Contact from './contact'
 //import Driver from './driver'
 
-const STEPS = [
-  { id: 'DATE_SELECT', component: DateSelect },
-  { id: 'REASON', component: Reason },
-  { id: 'CONTACT', component: Contact },
-]
-
 function WizardInternal() {
-  const { state, dispatch, onSubmit } = useContext(WizardContext)
+  const { state, storeBooking } = useContext(WizardContext)
-  const { currentStep } = state
+  const onChange = (payload) =>
-
+    dispatch({ action: ACTIONS.SET_FORM_DATA, payload })
-  const isFirstStep = currentStep === 0
-  const isLastStep = currentStep === STEPS.length - 1
-
-  const CurrentStepComponent = STEPS[currentStep].component
 
   return (
     <Form
       onSubmit={(event) => {
         event.preventDefault()
 
-        const fd = new FormData(event.currentTarget)
+        storeBooking()
-        for (const [key, value] of fd.entries()) {
-          console.log(key, value)
-        }
-
-        if (!isLastStep) {
-          dispatch({ type: ACTIONS.NEXT_STEP })
-          return
-        }
-
-        onSubmit()
       }}
     >
-      <CurrentStepComponent />
+      <DateSelect />
-      {!isFirstStep && (
+      <Reason />
-        <Button
+      <Contact />
-          variant="secondary"
+      <Button type="submit">Absenden</Button>
-          onClick={() => dispatch({ type: ACTIONS.PREV_STEP })}
-        >
-          Zurück
-        </Button>
-      )}
-      {!isLastStep && <Button type="submit">Weiter</Button>}
-      {isLastStep && <Button type="submit">Absenden</Button>}
     </Form>
   )
 }

context/wizardStore.js

@@ -3,23 +3,11 @@ import React, { useReducer } from 'react'
 export const WizardContext = React.createContext()
 
 export const ACTIONS = {
-  NEXT_STEP: 'nextStep',
-  PREV_STEP: 'prevStep',
   SET_FORM_DATA: 'setFormData',
 }
 
 function reducer(state, action) {
   switch (action.type) {
-    case ACTIONS.NEXT_STEP:
-      return {
-        ...state,
-        currentStep: state.currentStep + 1, // wizards steps unkown here
-      }
-    case ACTIONS.PREV_STEP:
-      return {
-        ...state,
-        currentStep: Math.max(0, state.currentStep - 1),
-      }
     case ACTIONS.SET_FORM_DATA:
       return {
         ...state,
@@ -59,27 +47,35 @@ async function createBooking(state) {
 
 const initialState = {
   formData: {
-    name: 'Thomas Ruoff',
-    email: 'thomasruoff@gmail.com',
     multipleDays: null,
   },
-  currentStep: 0,
-  bookedOn: [
-    '2020-07-10',
-    '2020-07-11',
-    '2020-07-12',
-    '2020-07-23',
-    '2020-08-01',
-  ],
 }
 
 export default function WizardStore({ children }) {
   const [state, dispatch] = useReducer(debugReducer, initialState)
 
-  const onSubmit = () => createBooking(state)
+  const storeBooking = () => createBooking(state)
+
+  const onChangeEvent = (event) => {
+    const { name, value } = event.target
+
+    dispatch({
+      type: ACTIONS.SET_FORM_DATA,
+      payload: { [name]: value },
+    })
+  }
+
+  const onChange = (data) => {
+    dispatch({
+      type: ACTIONS.SET_FORM_DATA,
+      payload: data,
+    })
+  }
 
   return (
-    <WizardContext.Provider value={{ state, dispatch, onSubmit }}>
+    <WizardContext.Provider
+      value={{ state, dispatch, onChangeEvent, onChange, storeBooking }}
+    >
       {children}
     </WizardContext.Provider>
   )

db/index.js

@@ -34,16 +34,15 @@ export async function getBookedDays() {
 }
 
 export async function createBooking({ name, email, startDate, endDate }) {
-  const booker = new Booker({ name, email })
+  const ignoreCaseEmailMatcher = new RegExp(email, 'i')
-  await booker.save()
+  let booker = await Booker.findOne({ email: ignoreCaseEmailMatcher }).exec()
+  if (!booker) {
+    booker = new Booker({ name, email })
+    await booker.save()
+  }
+
   const booking = new Booking({ startDate, endDate, booker: booker._id })
   await booking.save()
-  return {
+  await booking.populate('booker').execPopulate()
-    booker: booking.booker._id,
+  return booking.toJSON({ getters: true, virtuals: true })
-    startDate: booking.startDate,
-    endDate: booking.endDate,
-    bookedDate: booking.bookedDate,
-    confirmed: booking.confirmed,
-    confirmedDate: booking.confimredDate,
-  }
 }

db/schema.js

@@ -1,18 +1,34 @@
 import { Schema } from 'mongoose'
 
-export const BookerSchema = new Schema({
+import { getDays, dateFormat } from '../lib/dateHelper'
-  name: { type: String, required: true },
-  email: { type: String, required: true },
-})
 
-export const BookingSchema = new Schema({
+export const BookerSchema = new Schema(
-  booker: { type: Schema.Types.ObjectId, ref: 'Booker', required: true },
+  {
-  startDate: { type: Date, required: true },
+    name: { type: String, required: true },
-  endDate: { type: Date, required: false },
+    email: { type: String, required: true, unique: true },
-  status: {
-    type: String,
-    enum: ['requested', 'confirmed', 'rejected'],
-    required: true,
-    default: 'requested',
   },
+  { timestamps: true }
+)
+
+export const BookingSchema = new Schema(
+  {
+    booker: { type: Schema.Types.ObjectId, ref: 'Booker', required: true },
+    startDate: {
+      type: Date,
+      required: true,
+      get: dateFormat,
+    },
+    endDate: { type: Date, required: false, get: dateFormat },
+    status: {
+      type: String,
+      enum: ['requested', 'confirmed', 'rejected'],
+      required: true,
+      default: 'requested',
+    },
+  },
+  { timestamps: true }
+)
+
+BookingSchema.virtual('days').get(function () {
+  return getDays({ startDate: this.startDate, endDate: this.endDate })
 })